:root { color-scheme: light dark; --color-background-primary: #ffffff; --color-background-secondary: #f7f7f7; --color-text-primary: #000000; --color-text-secondary: #171717; --color-text-tertiary: #666666; --color-border-primary: #bababa; --color-border-secondary: #d9d9d9; --color-accent: #0066cc; --color-accent-translucent: rgba(0, 102, 204, 0.14); --color-surface-card: #ffffff; --color-border-card: #e0e0e0; --color-shadow-card: 0px 2px 12px rgba(0, 0, 0, 0.12); --code-keyword: #0066cc; --code-string: #0f7a3d; --code-function: #7c3aed; --code-tag: #b91c1c; --code-attr-name: #a6580c; --code-class-name: #7c3aed; --code-number: #0e7490; --code-variable: #a6580c; --font-heading: "Montserrat", "Segoe UI", Arial, sans-serif; --font-body: "Open Sans", "Segoe UI", Tahoma, sans-serif; } /* Dark palette applies for a system preference (no explicit choice made yet) and is then overridden either way once the header switch — or a stored preference from a previous visit — sets data-color-scheme explicitly on (see the inline script in _layouts/base.njk). */ @media (prefers-color-scheme: dark) { :root:not([data-color-scheme="light"]) { --color-background-primary: #171717; --color-background-secondary: #303030; --color-text-primary: #f7f7f7; --color-text-secondary: #f7f7f7; --color-text-tertiary: #909090; --color-border-primary: #666666; --color-border-secondary: #666666; --color-accent: #00ccff; --color-accent-translucent: rgba(0, 204, 255, 0.16); --color-surface-card: #1f1f1f; --color-border-card: #2e2e2e; --color-shadow-card: 0px 2px 8px rgba(0, 0, 0, 0.55); --code-keyword: #00ccff; --code-string: #4ade80; --code-function: #c084fc; --code-tag: #f87171; --code-attr-name: #fbbf24; --code-class-name: #c084fc; --code-number: #22d3ee; --code-variable: #fbbf24; } } :root[data-color-scheme="dark"] { --color-background-primary: #171717; --color-background-secondary: #303030; --color-text-primary: #f7f7f7; --color-text-secondary: #f7f7f7; --color-text-tertiary: #909090; --color-border-primary: #666666; --color-border-secondary: #666666; --color-accent: #00ccff; --color-accent-translucent: rgba(0, 204, 255, 0.16); --color-surface-card: #1f1f1f; --color-border-card: #2e2e2e; --color-shadow-card: 0px 2px 8px rgba(0, 0, 0, 0.55); --code-keyword: #00ccff; --code-string: #4ade80; --code-function: #c084fc; --code-tag: #f87171; --code-attr-name: #fbbf24; --code-class-name: #c084fc; --code-number: #22d3ee; --code-variable: #fbbf24; } * { box-sizing: border-box; } body { margin: 0; background: var(--color-background-primary); color: var(--color-text-secondary); font: 400 100%/1.6 var(--font-body); } h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: 700; color: var(--color-text-primary); line-height: 1.25; } header { position: sticky; top: 0; z-index: 999; display: flex; align-items: center; gap: 2em; padding: 1em 1.5em; background: var(--color-background-secondary); border-bottom: 1px solid var(--color-border-primary); } header a { color: var(--color-text-secondary); text-decoration: none; font-weight: 600; } header .brand { display: flex; align-items: center; gap: 0.6em; } header .brand-text { font-family: var(--font-heading); font-weight: 700; color: var(--color-text-primary); } header .logo-link { display: flex; align-items: center; } header a:hover { color: var(--color-accent); } header .logo { height: 22px; width: auto; } .logo-dark { display: none; } :root[data-color-scheme="dark"] .logo-light { display: none; } :root[data-color-scheme="dark"] .logo-dark { display: block; } @media (prefers-color-scheme: dark) { :root:not([data-color-scheme="light"]) .logo-light { display: none; } :root:not([data-color-scheme="light"]) .logo-dark { display: block; } } header .theme-switch { margin-left: auto; display: inline-flex; width: 56px; height: 25px; flex-shrink: 0; border-radius: 999px; cursor: pointer; background-image: url("../images/toggle-light.svg"); background-size: cover; background-repeat: no-repeat; } :root[data-color-scheme="dark"] header .theme-switch { background-image: url("../images/toggle-dark.svg"); } @media (prefers-color-scheme: dark) { :root:not([data-color-scheme="light"]) header .theme-switch { background-image: url("../images/toggle-dark.svg"); } } header .theme-switch input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } main { max-width: 46em; margin: 0 auto; padding: 2em 1.5em 4em; } a { color: var(--color-accent); } a:focus-visible, button:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } ul, ol { padding-left: 1.4em; } li + li { margin-top: 0.3em; } pre { overflow-x: auto; padding: 1em; background: var(--color-surface-card); border: 1px solid var(--color-border-card); border-radius: 6px; box-shadow: var(--color-shadow-card); line-height: 1.5; } code { font-size: 0.9em; font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; } :not(pre) > code { padding: 0.15em 0.4em; background: var(--color-accent-translucent); border-radius: 4px; } /* JS wraps every `pre` in a .code-block div (see assets/js/copy-code.js) so the copy button can sit fixed in the corner without scrolling away when a long line makes the `pre` itself scroll horizontally. */ .code-block { position: relative; margin: 1.2em 0; } .code-block pre { margin: 0; } .copy-btn { position: absolute; top: 0.55em; right: 0.55em; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; background: var(--color-background-secondary); color: var(--color-text-tertiary); border: 1px solid var(--color-border-card); border-radius: 5px; cursor: pointer; opacity: 0.55; transition: opacity 120ms ease, color 120ms ease, border-color 120ms ease; } .code-block:hover .copy-btn, .copy-btn:hover, .copy-btn:focus-visible { opacity: 1; } .copy-btn:hover, .copy-btn:focus-visible { color: var(--color-accent); border-color: var(--color-accent); } .copy-btn.copied { opacity: 1; color: #22c55e; border-color: #22c55e; } /* Prism token colors (via @11ty/eleventy-plugin-syntaxhighlight, build-time — no highlighting JS shipped to the page). Values are set as CSS custom properties above so light/dark just swaps the palette like everything else. */ .token.keyword { color: var(--code-keyword); } .token.string, .token.attr-value { color: var(--code-string); } .token.function { color: var(--code-function); font-weight: 600; } .token.comment { color: var(--color-text-tertiary); font-style: italic; } .token.tag, .token.doctype-tag { color: var(--code-tag); } .token.attr-name { color: var(--code-attr-name); } .token.class-name { color: var(--code-class-name); } .token.number, .token.boolean { color: var(--code-number); } .token.parameter, .token.variable, .token.property { color: var(--code-variable); } .token.operator, .token.punctuation { color: var(--color-text-tertiary); } img, svg { max-width: 100%; } hr { border: none; border-top: 1px solid var(--color-border-secondary); margin: 2em 0; }