/* ========================================================================== design tokens everything visual (color, spacing, type, radius) is defined once here. change a value in :root and it propagates everywhere — that's the "consistent pattern" that makes future pages/components trivial to add. ========================================================================== */ :root { /* color — "cutesy baby blue" light theme (default) */ --color-bg: #eaf6ff; --color-surface: #d9edfb; --color-text: #22314a; --color-text-muted: #5c7089; --color-border: #bfe0f5; --color-accent: #f2508a; --color-accent-hover: #d63f75; --color-accent-contrast: #ffffff; /* type — system font stacks only. no @font-face, no font files to download: each OS resolves these to whatever it already ships (San Francisco on macOS/iOS, Segoe UI on Windows, Roboto on Android, etc.), so text paints on the first frame instead of waiting on a network request. headings get a slightly different stack (Trebuchet/Verdana-leaning) so they still read as visually distinct from body copy, echoing the old two-font structure. */ --font-heading: "Trebuchet MS", "Segoe UI", Verdana, system-ui, sans-serif; --font-body: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-size-base: clamp(1rem, 0.94rem + 0.3vw, 1.2rem); --font-size-lg: clamp(1.25rem, 1.1rem + 0.6vw, 1.75rem); --font-size-xl: clamp(1.75rem, 1.5rem + 1vw, 2.5rem); --line-height-base: 1.6; /* spacing scale (multiples of 0.5rem) */ --space-1: 0.5rem; --space-2: 1rem; --space-3: 1.5rem; --space-4: 2.5rem; --space-5: 4rem; /* layout */ --sidebar-width: 260px; --content-max-width: 68ch; --avatar-size: 110px; --radius: 0.5rem; /* motion */ --transition-fast: 150ms ease; } /* dark tokens, reused by both the "follow system" case and the explicit toggle override below, so there's exactly one place that defines them. */ :root { --dark-color-bg: #121014; --dark-color-surface: #1c1a20; --dark-color-text: #f1f0f5; --dark-color-text-muted: #a7a5b0; --dark-color-border: #2e2c34; --dark-color-accent: #9083f7; --dark-color-accent-hover: #a89bff; --dark-color-accent-contrast: #121014; } /* case 1: no explicit choice made (no [data-theme] attribute) — follow the OS/browser preference, same as before the toggle existed. */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --color-bg: var(--dark-color-bg); --color-surface: var(--dark-color-surface); --color-text: var(--dark-color-text); --color-text-muted: var(--dark-color-text-muted); --color-border: var(--dark-color-border); --color-accent: var(--dark-color-accent); --color-accent-hover: var(--dark-color-accent-hover); --color-accent-contrast: var(--dark-color-accent-contrast); } } /* case 2: the toggle button set an explicit preference — this wins regardless of OS setting, and is what the theme.js script below writes to from localStorage. */ :root[data-theme="dark"] { --color-bg: var(--dark-color-bg); --color-surface: var(--dark-color-surface); --color-text: var(--dark-color-text); --color-text-muted: var(--dark-color-text-muted); --color-border: var(--dark-color-border); --color-accent: var(--dark-color-accent); --color-accent-hover: var(--dark-color-accent-hover); --color-accent-contrast: var(--dark-color-accent-contrast); } /* :root[data-theme="light"] needs no rules — the base :root block above already holds the light values, so it's the fallback the moment "dark" isn't explicitly set. */ /* ========================================================================== reset scoped and intentional, instead of a blanket `* { font-size: 1.5rem }` which fought with form controls and made overrides hard to reason about. ========================================================================== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; } img { max-width: 100%; display: block; } ul { list-style: none; } a { color: inherit; text-decoration: none; } button, input, textarea { font: inherit; color: inherit; } /* ========================================================================== base ========================================================================== */ body { font-family: var(--font-body); font-size: var(--font-size-base); line-height: var(--line-height-base); background: var(--color-bg); color: var(--color-text); text-transform: lowercase; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); line-height: 1.25; } h1 { font-size: var(--font-size-xl); } h2, h3 { font-size: var(--font-size-lg); } /* skip link: lets keyboard users jump past the sidebar nav on every page instead of tabbing through 4 links first. hidden until focused. */ .skip-link { position: absolute; top: -3rem; left: var(--space-2); background: var(--color-accent); color: var(--color-accent-contrast); padding: var(--space-1) var(--space-2); border-radius: var(--radius); z-index: 100; transition: top var(--transition-fast); } .skip-link:focus { top: var(--space-2); } a:hover, a:focus-visible { color: var(--color-accent); } a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } /* ========================================================================== page shell — the left/right split, rebuilt on grid previously: sidebar was `position:fixed; width:20%` and main was `position:absolute; width:70%; right:0`. that left an unaccounted-for 10% gap between them, didn't respond to viewport size, and broke on narrow screens. grid-template-areas makes the relationship explicit and the single media query below is all it takes to reflow to one column. ========================================================================== */ .content { display: grid; grid-template-columns: var(--sidebar-width) 1fr; grid-template-areas: "sidebar main" "sidebar footer"; min-height: 100vh; } @media (max-width: 768px) { .content { grid-template-columns: 1fr; grid-template-areas: "sidebar" "main" "footer"; } } /* ========================================================================== sidebar / header ========================================================================== */ .header__container { grid-area: sidebar; position: sticky; top: 0; height: 100vh; padding: var(--space-3); background: var(--color-surface); border-right: 1px solid var(--color-border); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } /* "owl" spacing: every direct child gets space above it except the first. avoids the old pattern's trailing margin under the last element. */ .header__container > * + * { margin-top: var(--space-2); } .header__identity { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); } .header__controls { display: flex; align-items: center; gap: var(--space-1); } .header__logo { width: var(--avatar-size); height: var(--avatar-size); border-radius: 50%; object-fit: cover; margin-inline: auto; } /* site identity is a heading visually, but semantically it repeats on every page — leaving it an

meant every page shipped two

s (this one, plus the page's own "# heading" from the markdown body). styled the same, but no longer competes with the real page heading. */ .header__brand { font-family: var(--font-heading); font-size: var(--font-size-lg); } .header__links { display: flex; flex-direction: column; gap: var(--space-1); } .header__link { display: inline-block; padding: 0.25rem 0.5rem; border-radius: var(--radius); transition: color var(--transition-fast), background var(--transition-fast); } .header__link:hover, .header__link:focus-visible { background: var(--color-border); } .header__link[aria-current="page"] { color: var(--color-accent); font-weight: bold; } /* hamburger button — CSS-only icon (three bars), no image asset. hidden on desktop by default; the mobile media query at the bottom of this section switches it on. open/close state (aria-expanded, the `.is-open` class on