/* preload.sh — RFC-reminiscent, monospace, light/dark. One typeface (Fira Code) with ligatures; a constrained, document-like column. */ @font-face { font-family: "Fira Code VF"; src: url("/fonts/FiraCode-VF.woff2") format("woff2-variations"), url("/fonts/FiraCode-VF.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; } :root { --font-mono: "Fira Code VF", "Fira Code", ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace; --measure: 76ch; --pad: 1.5rem; /* Light theme (default) */ --bg: #fdfdfb; --fg: #1b1b18; --muted: #6c6c66; --faint: #8d8d86; --rule: #d9d9d0; --link: #0b5dab; --link-visited: #6a3ca0; --accent: #9a3b16; --code-bg: #f3f3ec; --code-border: #e1e1d6; --mark: #fcf3c0; --selection: #d8e6f5; /* Syntax highlighting (light) */ --syn-comment: #6a737d; --syn-keyword: #d73a49; --syn-storage: #d73a49; --syn-string: #032f62; --syn-constant: #005cc5; --syn-entity: #6f42c1; --syn-variable: #e36209; --syn-support: #005cc5; --syn-hl: #fff8c5; } :root[data-theme="dark"] { --bg: #15171c; --fg: #d4d6db; --muted: #8c8f98; --faint: #6b6e77; --rule: #2b2e36; --link: #6fb0f0; --link-visited: #b69ce6; --accent: #e3935f; --code-bg: #1c1f26; --code-border: #2b2e36; --mark: #4a431c; --selection: #243349; /* Syntax highlighting (dark) */ --syn-comment: #8b949e; --syn-keyword: #ff7b72; --syn-storage: #ff7b72; --syn-string: #a5d6ff; --syn-constant: #79c0ff; --syn-entity: #d2a8ff; --syn-variable: #ffa657; --syn-support: #79c0ff; --syn-hl: #2d2a1e; } /* Respect OS preference when the user hasn't chosen, without a flash. The inline script sets data-theme; this is a CSS fallback only. */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --bg: #15171c; --fg: #d4d6db; --muted: #8c8f98; --faint: #6b6e77; --rule: #2b2e36; --link: #6fb0f0; --link-visited: #b69ce6; --accent: #e3935f; --code-bg: #1c1f26; --code-border: #2b2e36; --mark: #4a431c; --selection: #243349; --syn-comment: #8b949e; --syn-keyword: #ff7b72; --syn-storage: #ff7b72; --syn-string: #a5d6ff; --syn-constant: #79c0ff; --syn-entity: #d2a8ff; --syn-variable: #ffa657; --syn-support: #79c0ff; --syn-hl: #2d2a1e; } } * { box-sizing: border-box; } html { font-size: 16px; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font-mono); font-size: 0.95rem; line-height: 1.6; font-variant-ligatures: contextual; font-feature-settings: "calt" 1, "liga" 1; text-rendering: optimizeLegibility; } ::selection { background: var(--selection); } .wrap { max-width: var(--measure); margin: 0 auto; padding: 2rem var(--pad) 3rem; } a { color: var(--link); text-decoration: underline; text-underline-offset: 0.15em; } a:visited { color: var(--link-visited); } a:hover { text-decoration-thickness: 2px; } /* ---- Skip link ---- */ .skip { position: absolute; left: -9999px; top: 0; background: var(--bg); color: var(--fg); padding: 0.5rem 1rem; z-index: 10; } .skip:focus { left: 0; } /* ---- Masthead / RFC header block ---- */ .masthead { margin-bottom: 1rem; } .rfc-header { display: flex; justify-content: space-between; gap: 1rem; color: var(--muted); font-size: 0.85rem; line-height: 1.5; white-space: pre; } .rfc-header .right { text-align: right; } .rfc-header b { color: var(--fg); font-weight: 600; } .masthead-title { margin: 1.25rem 0 0.25rem; font-size: 1.05rem; font-weight: 700; letter-spacing: 0.02em; } .masthead-title a { color: var(--fg); text-decoration: none; } /* ---- Navigation ---- */ nav.site { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 1.25rem; margin-top: 0.75rem; font-size: 0.85rem; } nav.site a { color: var(--muted); text-decoration: none; } nav.site a:hover, nav.site a[aria-current="page"] { color: var(--fg); text-decoration: underline; } nav.site .spacer { margin-left: auto; } button.theme { font: inherit; font-size: 0.85rem; color: var(--muted); background: transparent; border: 1px solid var(--rule); border-radius: 3px; padding: 0.1rem 0.5rem; cursor: pointer; } button.theme:hover { color: var(--fg); border-color: var(--faint); } /* ---- Horizontal rules used as page bands ---- */ hr.band { border: 0; border-top: 1px solid var(--rule); margin: 1rem 0; } hr { border: 0; border-top: 1px dashed var(--rule); margin: 2rem 0; } /* ---- Document title block ---- */ .doc-title { text-align: center; font-size: 1.35rem; line-height: 1.35; font-weight: 700; margin: 2rem 0 0.5rem; } .doc-subtitle { text-align: center; color: var(--muted); font-size: 0.9rem; margin: 0 0 2rem; } /* ---- Article content, RFC-numbered sections ---- */ .doc-content { counter-reset: h2; } .doc-content h2, .doc-content h3, .doc-content h4 { font-weight: 700; line-height: 1.3; margin: 2.25rem 0 0.75rem; scroll-margin-top: 1rem; } .doc-content h2 { font-size: 1.1rem; counter-reset: h3; } .doc-content h3 { font-size: 1rem; counter-reset: h4; } .doc-content h4 { font-size: 0.95rem; color: var(--fg); } .doc-content h2::before { counter-increment: h2; content: counter(h2) ".\00a0\00a0"; color: var(--faint); } .doc-content h3::before { counter-increment: h3; content: counter(h2) "." counter(h3) ".\00a0\00a0"; color: var(--faint); } .doc-content h4::before { counter-increment: h4; content: counter(h2) "." counter(h3) "." counter(h4) ".\00a0\00a0"; color: var(--faint); } /* insert_anchor_links = "heading" wraps the heading text in a.zola-anchor; make it read as a plain heading, with a subtle affordance on hover. */ .doc-content h2 a.zola-anchor, .doc-content h3 a.zola-anchor, .doc-content h4 a.zola-anchor { color: inherit; text-decoration: none; } .doc-content h2:hover a.zola-anchor, .doc-content h3:hover a.zola-anchor, .doc-content h4:hover a.zola-anchor { text-decoration: underline; text-decoration-color: var(--faint); } .doc-content p { margin: 0 0 1rem; } .doc-content ul, .doc-content ol { padding-left: 2ch; } .doc-content li { margin: 0.25rem 0; } .doc-content blockquote { margin: 1.25rem 0; padding: 0.25rem 0 0.25rem 1.5ch; border-left: 2px solid var(--rule); color: var(--muted); } .doc-content img { max-width: 100%; height: auto; } /* ---- Code, the plain RFC way ---- */ code, kbd, samp { font-family: var(--font-mono); font-size: 0.9em; } :not(pre) > code { background: var(--code-bg); border: 1px solid var(--code-border); border-radius: 3px; padding: 0.05em 0.35em; } pre { background: var(--code-bg); border: 1px solid var(--code-border); border-radius: 4px; padding: 1rem 1.25rem; overflow-x: auto; line-height: 1.5; } pre code { background: none; border: 0; padding: 0; font-size: 0.85rem; } /* ---- Syntax highlighting (Zola "class" mode, themed via variables) ---- Zola emits z-* token classes; colours come from the --syn-* variables above so highlighting follows the light/dark toggle. */ pre.z-code, pre.z-code code { color: var(--fg); } .z-comment { color: var(--syn-comment); font-style: italic; } .z-keyword, .z-keyword-operator { color: var(--syn-keyword); } .z-storage { color: var(--syn-storage); } .z-string { color: var(--syn-string); } .z-constant, .z-constant-numeric { color: var(--syn-constant); } .z-entity { color: var(--syn-entity); } .z-variable { color: var(--syn-variable); } .z-support { color: var(--syn-support); } .z-invalid { color: #fff; background: var(--syn-keyword); } .z-hl { display: block; background: var(--syn-hl); } mark { background: var(--mark); color: inherit; padding: 0 0.15em; } /* ---- Tables ---- */ table { border-collapse: collapse; width: 100%; margin: 1.25rem 0; font-size: 0.9rem; } th, td { border: 1px solid var(--rule); padding: 0.4rem 0.6rem; text-align: left; } th { font-weight: 700; } /* ---- Admonitions (warning shortcode) ---- */ .note { margin: 1.5rem 0; border: 1px solid var(--rule); border-left: 3px solid var(--accent); padding: 0.75rem 1rem; background: var(--code-bg); } .note .label { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.75rem; font-weight: 700; color: var(--accent); display: block; margin-bottom: 0.35rem; } .note p:last-child { margin-bottom: 0; } /* ---- Table of contents ---- */ .toc { border: 1px solid var(--rule); padding: 1rem 1.25rem; margin: 2rem 0; font-size: 0.9rem; } .toc .toc-title { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.75rem; color: var(--muted); margin-bottom: 0.5rem; } .toc ol { list-style: none; padding-left: 0; margin: 0; counter-reset: toc1; } .toc ol ol { padding-left: 2ch; counter-reset: toc2; } .toc li { margin: 0.15rem 0; } .toc a { color: var(--link); text-decoration: none; } .toc a:hover { text-decoration: underline; } /* ---- Post listing ---- */ .post-list { list-style: none; padding: 0; margin: 1.5rem 0; } .post-list li { display: flex; gap: 1.25rem; padding: 0.6rem 0; border-bottom: 1px dashed var(--rule); } .post-list time { color: var(--muted); flex: 0 0 auto; font-size: 0.85rem; white-space: nowrap; } .post-list a { text-decoration: none; } .post-list a:hover { text-decoration: underline; } /* ---- Tag chips ---- */ .tags { margin: 1.5rem 0 0; font-size: 0.85rem; } .tags a { display: inline-block; color: var(--muted); text-decoration: none; border: 1px solid var(--rule); border-radius: 3px; padding: 0.05rem 0.5rem; margin: 0 0.35rem 0.35rem 0; } .tags a:hover { color: var(--fg); border-color: var(--faint); } /* ---- Error pages ---- */ .error { text-align: center; padding: 3rem 0 2rem; } .error-code { font-size: clamp(4rem, 18vw, 7rem); font-weight: 700; line-height: 1; letter-spacing: 0.04em; color: var(--accent); } .error-name { font-size: 1.3rem; font-weight: 700; margin: 0.75rem 0 1.5rem; } .error-blurb { color: var(--muted); max-width: 48ch; margin: 0 auto; } .error-rfc { color: var(--faint); font-size: 0.85rem; margin-top: 1.75rem; } .error-actions { margin-top: 2rem; font-size: 0.9rem; } /* ---- Footer ---- */ footer.site { display: flex; justify-content: space-between; gap: 1rem; color: var(--muted); font-size: 0.8rem; } footer.site a { color: var(--muted); } .post-nav { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2.5rem; font-size: 0.85rem; } @media (max-width: 34rem) { body { font-size: 0.9rem; } .post-list li { flex-direction: column; gap: 0.15rem; } .rfc-header { font-size: 0.78rem; } }