my website
1@font-face {
2 font-family: 'Inter';
3 font-style: normal;
4 font-weight: 100 900;
5 font-display: block;
6 src: url(fonts/InterVariable.fast.woff2) format('woff2');
7 font-feature-settings: "cv10";
8 unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD, U+0394, U+0398, U+0104, U+0106, U+0118, U+0141, U+0143, U+00D3, U+015A, U+0179, U+017B, U+0105, U+0107, U+0119, U+0142, U+0144, U+00F3, U+015B, U+017A, U+017C;
9}
10@font-face {
11 font-family: 'Inter';
12 font-style: italic;
13 font-weight: 100 900;
14 font-display: block;
15 src: url(fonts/InterVariable-Italic.fast.woff2) format('woff2');
16 font-feature-settings: "cv10";
17 unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD, U+0394, U+0398, U+0104, U+0106, U+0118, U+0141, U+0143, U+00D3, U+015A, U+0179, U+017B, U+0105, U+0107, U+0119, U+0142, U+0144, U+00F3, U+015B, U+017A, U+017C;
18}
19/* todo: non-fast variants and generating this from the nix stuff too maybe lol */
20
21:root {
22 color-scheme: light dark;
23 --color-fg: #000;
24 --color-bg: #fff;
25 --color-link: #7149ff;
26 --color-link-visited: #8d00ed;
27}
28
29@media (prefers-color-scheme: dark) {
30 :root {
31 --color-bg: #1a1a1a;
32 --color-fg: #fff;
33 --color-link: #aaf;
34 --color-link-visited: #dfa5ff;
35 }
36}
37
38body {
39 background-color: var(--color-bg);
40 color: var(--color-fg);
41
42 font-family: 'Inter', sans-serif;
43 font-optical-sizing: auto;
44 line-height: 1.5;
45 font-weight: 500;
46
47 margin: 3rem;
48 margin-top: 2rem;
49}
50
51a { color: var(--color-link); }
52a:visited { color: var(--color-link-visited); }
53
54img {
55 display: block;
56 max-width: 100%;
57}
58
59#fops { filter: drop-shadow(0 0 5px #ccc); }
60@media (prefers-color-scheme: dark) {
61 #fops { filter: drop-shadow(0 0 3px #f2f2f277); }
62}
63
64time { font-feature-settings: "tnum"; }
65
66nav #fops { display: inline; }
67nav {
68 display: flex;
69 gap: 1rem;
70 margin-bottom: 1rem;
71}
72nav > ul {
73 margin-block: auto;
74 font-size: 1.1em;
75}
76/* specificity hack lol */
77nav a[href] {
78 color: var(--color-link);
79 text-decoration: none;
80}
81
82header > * { margin-block: 0; }
83header {
84 margin-top: 1rem;
85 margin-bottom: 1rem;
86}
87h1 {
88 font-size: 2.5em; /* shur up firefox */
89 line-height: 1;
90 margin-bottom: 0.4rem;
91}
92
93.inline-list {
94 list-style-type: none;
95 padding-left: 0;
96}
97.inline-list > * { display: inline; }
98.inline-list.slashed > :not(:first-child)::before {
99 content: ' / ';
100 padding-inline: 0.25em;
101}
102
103.tag {
104 /* intentional swap */
105 --fg: var(--color-bg);
106 --bg: var(--color-fg);
107 background-color: var(--bg);
108 color: var(--fg);
109 font-size: 0.9em;
110 border-radius: 0.3rem;
111 padding: 0.2rem 0.4rem;
112}
113
114.tag[data-tag='test'] { --bg: #f66151; --fg: #000; }
115.tag[data-tag='software'] { --bg: #8ff0a4; --fg: #000; }
116.tag[data-tag='hardware'] { --bg: #dc8add; --fg: #000; }
117.tag[data-tag='weather'] { --bg: #99c1f1; --fg: #000; }
118
119pre {
120 padding: 1rem;
121}
122pre, code {
123 font-family: 'Adwaita Mono', 'Fira Code', 'JetBrains Mono', 'Lucida Console', monospace;
124 font-size: 0.97em;
125 line-height: 1.25;
126}
127:not(.sourceCode) > pre:has(code), div.sourceCode {
128 border-radius: 1rem;
129}