1:root {
2 /* Catppuccin Latte (light) & Mocha (dark) */
3 --mantle: light-dark(#e6e9ef, #181825);
4 --crust: light-dark(#dce0e8, #11111b);
5 --base: light-dark(#eff1f5, #1e1e2e);
6 --surface-0: light-dark(#ccd0da, #313244);
7 --surface-1: light-dark(#bcc0cc, #45475a);
8 --surface-2: light-dark(#acb0be, #585b70);
9 --overlay-0: light-dark(#9ca0b0, #6c7086);
10 --overlay-1: light-dark(#8c8fa1, #7f849c);
11 --overlay-2: light-dark(#7c7f93, #9399b2);
12 --subtext-0: light-dark(#6c6f85, #a6adc8);
13 --subtext-1: light-dark(#5c5f77, #bac2de);
14 --text: light-dark(#4c4f69, #cdd6f4);
15 --accent: light-dark(#179299, #94e2d5);
16 --link: light-dark(#179299, #94e2d5);
17
18 --font-text:
19 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
20 Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
21 --font-code:
22 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
23 "Courier New", monospace;
24}
25
26* {
27 margin: 0;
28 padding: 0;
29 box-sizing: border-box;
30}
31
32html, body {
33 width: 100%;
34 overscroll-behavior-x: none;
35}
36
37body {
38 background-color: var(--base);
39 color: var(--text);
40 font-family: var(--font-text);
41 color-scheme: light dark;
42 display: flex;
43 max-width: 100vw;
44}
45
46main {
47 max-width: 80ch;
48 padding: 1rem;
49 padding-top: 2rem;
50 margin: auto;
51 line-height: 1.5;
52}
53
54h1, h2, h3, h4, h5, h6, p, ul, pre, blockquote, table {
55 margin-bottom: 1rem;
56}
57
58h2, h3, h4, h5, h6 {
59 padding-top: 0.8rem;
60 margin-top: -0.8rem;
61}
62
63ul {
64 padding-left: 2rem;
65}
66
67li {
68 margin-bottom: 0.25rem;
69}
70
71blockquote {
72 background-color: var(--surface-0);
73 border-left: 4px solid var(--overlay-2);
74 padding-left: 16px;
75 padding-top: 8px;
76 padding-bottom: 8px;
77}
78
79a {
80 color: inherit;
81}
82
83table, th, td {
84 border: 1px solid #9ca0b0;
85 border-collapse: collapse;
86}
87
88th, td {
89 padding: 0.5rem;
90}
91
92.ansi-1 {
93 font-weight: bold;
94}
95
96.ansi-31 {
97 color: light-dark(#d20f39, #f38ba8);
98}
99
100.ansi-32 {
101 color: light-dark(#40a02b, #a6e3a1);
102}
103
104.ansi-33 {
105 color: light-dark(#de8d1c, #f9e2af);
106}
107
108.ansi-34 {
109 color: light-dark(#1e66f5, #89b4fa);
110}
111
112.ansi-35 {
113 color: light-dark(#ea76cb, #f5c2e7);
114}
115
116.ansi-36 {
117 color: light-dark(#179299, #94e2d5);
118}
119
120.ansi-2 {
121 color: light-dark(#bcc0cc, #8087a2);
122}
123
124.kw {
125 color: light-dark(#8839ef, #cba6f7);
126 font-weight: bold;
127}
128
129.tok-string {
130 color: light-dark(#40a02b, #a6e3a1);
131}
132
133.tok-builtin_id {
134 color: light-dark(#d20f39, #f38ba8);
135 font-weight: bold;
136}
137
138.tok-number_int, .tok-number_float {
139 color: light-dark(#fe640b, #fab387);
140}
141
142.tok-semi,
143.tok-end_paren,
144.tok-start_paren,
145.tok-equal,
146.tok-colon,
147.tok-start_brace,
148.tok-end_brace,
149.tok-dot {
150 color: light-dark(#7c7f93, #9399b2);
151}
152
153aside {
154 position: fixed;
155 top: 0;
156 left: 0;
157 height: 100dvh;
158 height: 100vh;
159}
160
161#sidebar-content {
162 display: flex;
163 flex-direction: column;
164 background-color: var(--mantle);
165 height: 100%;
166 padding: 1rem;
167 border-radius: 0 1rem 1rem 0;
168 overflow-y: auto;
169 width: 40ch;
170}
171
172#toc, #toc ul, #links {
173 list-style: none;
174}
175
176nav header {
177 font-weight: bold;
178 font-size: 1.5rem;
179}
180
181#toc {
182 padding: 0;
183}
184
185#toc ul {
186 margin: 0rem;
187 padding-left: 1rem;
188 margin-bottom: 0;
189}
190
191#toc li {
192 margin: 0;
193}
194
195#toc ul li {
196 border-left: 1px solid var(--surface-2);
197 padding-left: 0.5rem;
198}
199
200#toc ul li:hover {
201 border-left: 1px solid var(--overlay-2);
202}
203
204#toc .number {
205 color: var(--accent);
206 font-weight: bold;
207}
208
209aside a {
210 position: relative;
211 /* anchor point for 'aside a::before' */
212 display: block;
213 text-decoration: none;
214 color: var(--text);
215 padding: 0.45rem 0.75rem;
216 border-radius: 0.25rem;
217}
218
219/* this invisible hitbox lets you click in the left gutter */
220aside a::before {
221 content: " ";
222 position: absolute;
223 display: block;
224 right: 100%;
225 top: 0;
226 bottom: 0;
227 width: 100vw;
228}
229
230aside a:hover {
231 background-color: var(--surface-0);
232}
233
234#links {
235 list-style: none;
236 padding: 0;
237 margin-top: auto;
238}
239
240#links li {
241 margin: 0;
242}
243
244input {
245 display: none;
246}
247
248#menu-btn, #clickable-background {
249 display: none;
250}
251
252main a {
253 color: var(--link);
254}
255
256main a:active {
257 background-color: var(--accent);
258 color: var(--base);
259 border-radius: 0.25rem;
260 text-decoration: none;
261}
262
263.external::after {
264 background-color: var(--link);
265 content: "";
266 display: inline-flex;
267 height: 10px;
268 margin-left: 4px;
269 mask-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTYgMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTcuNSAxLjVWMEgxNnY4LjVoLTEuNVYyLjZMNyAxMC4xIDYgOWw3LjUtNy42aC02Wk0xMyAxNmMuNiAwIDEtLjQgMS0xdi01aC0xLjV2NC41aC0xMXYtMTFINlYySDFhMSAxIDAgMCAwLTEgMXYxMmMwIC42LjQgMSAxIDFoMTJaIiBmaWxsPSJyZWQiLz48L3N2Zz4=");
270 mask-size: cover;
271 width: 10px;
272}
273.external:active::after {
274 background-color: var(--base);
275}
276
277.heading {
278 color: inherit;
279 text-decoration: none;
280}
281
282.heading:hover, .heading:focus-visible {
283 text-decoration: underline;
284 position: relative;
285}
286
287.heading:hover::before, .heading:focus-visible::before {
288 content: " #";
289 color: var(--subtext-0);
290 position: absolute;
291 right: calc(100% + 0.5rem);
292 top: -0.125em;
293}
294
295/* Desktop layout */
296@media (min-width: 1001px) {
297 .aside-spacer {
298 content: " ";
299 display: block;
300 flex: 0 0 40ch;
301 }
302}
303
304/* Tablet/small screen layout */
305@media (max-width: 1000px) {
306 html {
307 scroll-padding-top: 5rem;
308 }
309
310 main {
311 padding-top: 5rem;
312 }
313
314 #hidden-menu-checkbox:focus-visible + aside #menu-btn {
315 outline: 2px solid var(--text);
316 }
317
318 aside {
319 position: fixed;
320 left: -100%;
321 transition: left 500ms, bottom 300ms;
322 z-index: 9;
323 padding-top: 3rem;
324 }
325
326 aside a {
327 padding: 0.5rem 0.75rem;
328 }
329
330 #top-part {
331 position: fixed;
332 inset: 0;
333 height: fit-content;
334 background-color: var(--mantle);
335 padding: 0.5rem;
336 box-shadow: 0 4px 4px rgba(0, 0, 0, 0.3);
337 z-index: 9;
338 }
339
340 #menu-btn {
341 display: grid;
342 padding: 0.5rem;
343 width: fit-content;
344 cursor: pointer;
345 border-radius: 0.25rem;
346 user-select: none;
347 }
348
349 #close {
350 display: none;
351 }
352
353 #chevron {
354 display: none;
355 }
356
357 #menu-btn:hover {
358 background-color: var(--surface-0);
359 }
360
361 #hidden-menu-checkbox:checked ~ aside {
362 left: 0;
363 transition: left 300ms, bottom 300ms;
364 }
365
366 #hidden-menu-checkbox:checked ~ aside #clickable-background {
367 display: block;
368 position: fixed;
369 width: 100%;
370 height: 100%;
371 inset: 0;
372 background-color: rgba(0, 0, 0, 0.5);
373 z-index: -1;
374 }
375
376 #hidden-menu-checkbox:checked ~ aside #menu-btn .open {
377 display: none;
378 }
379
380 #hidden-menu-checkbox:checked ~ aside #menu-btn .close {
381 display: block;
382 }
383}
384
385/* Mobile layout */
386@media (max-width: 600px) {
387 main {
388 padding: 3rem 1rem;
389 }
390
391 aside {
392 position: fixed;
393 top: initial;
394 left: 0;
395 bottom: calc(-100% + 6rem);
396 width: 100%;
397 display: flex;
398 flex-direction: column;
399 }
400
401 aside a {
402 padding: 0.8rem 0.75rem;
403 }
404
405 aside a:hover {
406 background-color: var(--surface-1);
407 }
408
409 #sidebar-content {
410 border-radius: 0px;
411 padding: 1rem;
412 width: 100%;
413 background-color: var(--surface-0);
414 }
415
416 #top-part {
417 position: initial;
418 padding: 0;
419 border-radius: 1.5rem 1.5rem 0 0;
420 box-shadow: 0 -4px 5px rgba(0, 0, 0, 0.15);
421 border-bottom: var(--overlay-2) 1px solid;
422 background-color: var(--surface-0);
423 }
424
425 #open, #close {
426 display: none !important;
427 }
428
429 #chevron {
430 display: block;
431 transition: transform 300ms;
432 }
433
434 #menu-btn {
435 display: flex;
436 justify-content: center;
437 width: 100%;
438 padding: 1.5rem 0;
439 border-radius: 1.5rem 1.5rem 0 0;
440 }
441
442 #hidden-menu-checkbox:checked ~ aside {
443 bottom: 0;
444 }
445
446 #hidden-menu-checkbox:checked ~ aside #chevron {
447 transform: rotateX(180deg);
448 }
449
450 #hidden-menu-checkbox:checked ~ aside #top-part {
451 box-shadow: none;
452 }
453}
454
455pre > code {
456 border: none;
457 padding: 0;
458}
459
460pre, code {
461 border: 0;
462 background-color: transparent;
463 font-family: var(--font-code);
464 font-size: 0.9rem;
465}
466
467.file {
468 border: 1px solid var(--surface-1);
469 background-color: var(--crust);
470 border-radius: 0.5rem;
471 overflow: hidden;
472 margin-bottom: 0.5rem;
473}
474
475.file figcaption {
476 padding: 0.25rem 0.5rem;
477 font-size: 0.75rem;
478 border-bottom: 1px solid var(--surface-1);
479 /* background-color: var(--crust); */
480 background-color: var(--accent);
481 color: var(--base);
482}
483
484.file pre {
485 margin: 0;
486 padding: 0.75rem 0.5rem;
487 overflow-y: scroll;
488 color: var(--text);
489 position: relative;
490 white-space: pre-wrap;
491}
492
493.file pre.terminal {
494 background-color: #24273a;
495 color: #cdd6f4;
496 border-radius: 0 0 0.5rem 0.5rem;
497}
498
499.file [role="tablist"] {
500 display: flex;
501 border-top: 1px solid var(--surface-1);
502 border-bottom: 1px solid var(--surface-1);
503 background-color: var(--surface-0);
504}
505
506.file [role="tab"] {
507 padding: 0.25rem 0.75rem;
508 cursor: pointer;
509 /* flex: 1; */
510 border-top: 2px solid transparent;
511 text-align: center;
512 font-size: 0.9rem;
513}
514
515.file .bottom {
516 display: none;
517}
518
519.tab-output:checked ~ .output,
520.tab-js:checked ~ .js {
521 display: block;
522}
523
524.tab-js:checked ~ div .button-js,
525.tab-output:checked ~ div .button-output {
526 font-weight: bold;
527 border-top: 2px solid var(--accent);
528 background-color: var(--base);
529}
530
531.file .copy-button {
532 position: absolute;
533 top: 0.25rem;
534 right: 0.25rem;
535 padding: 0.25rem;
536 border: 1px solid var(--surface-1);
537 border-radius: 0.25rem;
538 background-color: var(--base);
539 cursor: pointer;
540 display: grid;
541}
542
543.file .copy-button:hover {
544 background-color: var(--crust);
545}
546
547.file .copy-button .hidden {
548 display: none;
549}