reset.css
1@font-face {
2 font-family: "Geist";
3 src: url("../assets/fonts/Geist[wght].woff2") format("woff2");
4 font-weight: normal;
5 font-style: normal;
6 font-display: swap;
7}
8
9@font-face {
10 font-family: "Geist Mono";
11 src: url("../assets/fonts/GeistMono[wght].woff2") format("woff2");
12 font-weight: normal;
13 font-style: normal;
14 font-display: swap;
15}
16
17@layer reset {
18 /* stuff goes here */
19
20 :root {
21 color-scheme: light dark; /* Required! */
22 --color-1: oklch(0.213 0 0);
23 --color-2: oklch(0.239 0 0);
24 --color-3: oklch(0.281 0 0);
25 --color-4: oklch(0.301 0 0);
26 --color-5: oklch(0.39 0 0);
27 --color-6: oklch(0.623 0 0);
28 --color-7: oklch(0.65 0 0);
29 --color-8: oklch(0.59 0 0);
30 --color-9: oklch(0.706 0 0);
31 --color-10: oklch(0.946 0 0);
32 background-color: light-dark(var(--color-10), var(--color-1));
33 }
34
35 /* 1. Use a more-intuitive box-sizing model */
36 *,
37 *::before,
38 *::after {
39 box-sizing: border-box;
40 }
41
42 /* 2. Remove default margin */
43 * {
44 margin: 0;
45 }
46
47 /* 3. Enable keyword animations */
48 @media (prefers-reduced-motion: no-preference) {
49 html {
50 interpolate-size: allow-keywords;
51 }
52 }
53
54 body {
55 /* 4. Add accessible line-height */
56 line-height: 1.5;
57 /* 5. Improve text rendering */
58 -webkit-font-smoothing: antialiased;
59 font-family: system-ui, sans-serif;
60 background-color: light-dark(var(--color-10), var(--color-1));
61 hanging-punctuation: first allow-end last;
62 font-size: clamp(1rem, 1rem + 0.5vw, 2rem);
63 }
64
65 html.translated-rtl {
66 direction: rtl;
67 }
68
69 /* 6. Improve media defaults */
70 img,
71 picture,
72 video,
73 canvas,
74 svg {
75 display: block;
76 max-width: 100%;
77 }
78
79 /* 7. Inherit fonts for form controls */
80 input,
81 button,
82 textarea,
83 select {
84 font: inherit;
85 }
86
87 /* One day */
88 /* :heading { */
89 /* text-wrap: balance; */
90 /* } */
91
92 /* 8. Avoid text overflows */
93 p,
94 h1,
95 h2,
96 h3,
97 h4,
98 h5,
99 h6 {
100 overflow-wrap: break-word;
101 font-family: "Geist", ui-sans-serif, sans-serif;
102 font-optical-sizing: auto;
103 }
104
105 /* 9. Improve line wrapping */
106 p {
107 text-wrap: pretty;
108 }
109 h1,
110 h2,
111 h3,
112 h4,
113 h5,
114 h6 {
115 text-wrap: balance;
116 font-family: "Geist", ui-rounded, sans-serif;
117 }
118
119 ul,
120 ol,
121 dl {
122 list-style-position: inside;
123
124 ul,
125 ol,
126 dl {
127 padding-inline-start: 1lh;
128 }
129 }
130
131 /*
132 10. Create a root stacking context
133 */
134 #root,
135 #__next {
136 isolation: isolate;
137 }
138
139 pre,
140 code {
141 font-family: "Geist Mono", ui-monospace, monospace;
142 }
143
144 :where(div, article, header, footer) {
145 /* ...and other block elements */
146 display: flex;
147 flex-direction: column;
148 }
149}