1@use "../theme" as *;
2
3@font-face {
4 font-family: "Silkscreen";
5 src: url("/fonts/Silkscreen-Regular.woff2") format("woff2");
6 font-weight: 400;
7 font-display: swap;
8}
9
10// Pixel accent font for UI labels, tags, dates/meta, and the ToC heading.
11// Silkscreen is latin-only: keep Cyrillic (and → arrows) out of these spots.
12.label, .tag-list__link, .rss-link, .article-meta, .list__more, .post-toc__summary, .post-toc__title, .section-header__label, .section-header__title, .tag-back__link, .footer__credits a, .menu-list__num, .home-banner__tag, .home-banner__cta { font-family: "Silkscreen", monospace; }
13
14html, body { overflow-x: clip; }
15// Below body's min-width the clip would silently cut content off on the
16// right; switch to a horizontal scrollbar so the layout stops shrinking.
17@media (max-width: 20rem) {
18 html { overflow-x: auto; }
19}
20body { background-color: theme(bg); color: theme(text); width: 100%; min-width: 20rem; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; line-height: 1.6; margin: 0; }
21h1, h2, h3 { font-weight: 600; }
22h1 { margin-block: 1rem 0.5rem; color: theme(accent); }
23h2 { margin-block: 0.85rem 0.4rem; color: theme(heading); }
24h3 { color: theme(heading); }
25a { color: theme(link); text-decoration: none; }
26a:hover { color: theme(accent); }
27:focus-visible { outline: 2px solid theme(accent); outline-offset: 2px; }
28li:has(> input[type="checkbox"]) { list-style: none; margin-inline-start: -1.25em; }
29li > input[type="checkbox"] { margin-inline-end: 0.4em; }