serve a static website from your pds
jakelazaroff.com
1@font-face {
2 font-family: "Bricolage Grotesque";
3 src: url("./bricolage-grotesque-variable.woff2") format("woff2");
4 font-weight: 100 1000;
5}
6
7:root {
8 /* fonts */
9 --font-body: "Bricolage Grotesque", sans-serif;
10
11 /* colors */
12 --color-background: light-dark(white, #1e1e1e);
13 --color-text: light-dark(black, white);
14
15 /* sizes */
16 --size-border: 1px;
17 --size-outline: 3px;
18 --size-1: 2px;
19 --size-2: 4px;
20 --size-3: 8px;
21 --size-4: 12px;
22 --size-5: 16px;
23 --size-6: 20px;
24 --size-7: 24px;
25 --size-8: 28px;
26 --size-9: 32px;
27 --size-10: 48px;
28
29 /* corner radii */
30 --radius-sm: 2px;
31 --radius-md: 6px;
32 --radius-lg: 8px;
33 --radius-xl: 12px;
34}
35
36@supports (corner-shape: squircle) {
37 * {
38 corner-shape: squircle;
39 }
40
41 :root {
42 --radius-sm: 4px;
43 --radius-md: 12px;
44 --radius-lg: 16px;
45 --radius-xl: 24px;
46 }
47}
48
49:root {
50 color-scheme: light dark;
51
52 &[data-theme="light"] {
53 color-scheme: light;
54 }
55
56 &[data-theme="dark"] {
57 color-scheme: dark;
58 }
59}