t128n.dev
1@import "tailwindcss";
2@plugin "@tailwindcss/typography";
3
4/* CSS Variables for theming */
5
6@theme {
7 --color-paper: #f6eee3;
8 --color-ink: #100f0f;
9 --font-display: 'Baskervville Variable', 'Times New Roman', Times, serif;
10 --font-sans: 'Inter Variable', Arial, Helvetica, sans-serif;
11}
12
13/* Container utility class */
14
15@layer utilities {
16 .container {
17 max-width: 80ch;
18 margin-left: auto;
19 margin-right: auto;
20 padding-left: clamp(1rem, 4vw, 2rem);
21 padding-right: clamp(1rem, 4vw, 2rem);
22 width: 100%;
23 }
24}
25
26/* Custom scrollbar styles */
27
28::-webkit-scrollbar {
29 width: 12px;
30 height: 12px;
31}
32
33::-webkit-scrollbar-track {
34 background: color-mix(in srgb, var(--color-ink) 3%, var(--color-paper));
35}
36
37::-webkit-scrollbar-thumb {
38 background: color-mix(in srgb, var(--color-ink) 18%, var(--color-paper));
39 border-radius: 6px;
40 border: 2px solid var(--color-paper);
41 transition: background 0.2s ease;
42}
43
44::-webkit-scrollbar-thumb:hover {
45 background: color-mix(in srgb, var(--color-ink) 30%, var(--color-paper));
46}