/* Fluent 2 Design System — Blog Reading Layout * Font: Segoe UI Variable / Segoe UI | Base: 18px | Line-height: 1.6 */ /* ============================================================ CSS Custom Properties — Light Mode (default) ============================================================ */ :root { /* Backgrounds — Fluent 2 light */ --bg-primary: #ffffff; --bg-secondary: #fafafa; --bg-tertiary: #f5f5f5; /* Text — Fluent 2 light */ --text-primary: #242424; --text-secondary: #616161; --text-tertiary: #707070; /* Accents — Amber */ --accent: #c27a1a; --accent-hover: #a56615; /* Strokes */ --stroke-default: #d1d1d1; --stroke-subtle: #e0e0e0; /* Shadows — Fluent 2 dual key+ambient */ --shadow-sm: 0 0 2px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.14); --shadow-md: 0 0 2px rgba(0,0,0,0.12), 0 4px 8px rgba(0,0,0,0.14); --shadow-lg: 0 0 2px rgba(0,0,0,0.12), 0 8px 16px rgba(0,0,0,0.14); /* Border radius — Fluent 2 */ --radius-sm: 2px; --radius-md: 4px; --radius-lg: 6px; --radius-xl: 8px; /* Motion — Fluent 2 */ --ease-soft: cubic-bezier(0.33, 0, 0.67, 1); --duration-fast: 150ms; --duration-normal: 200ms; /* Spacing — Fluent 2 global ramp (4px base unit) */ --spacing-xxs: 2px; --spacing-xs: 4px; --spacing-s-nudge: 6px; --spacing-s: 8px; --spacing-m-nudge: 10px; --spacing-m: 12px; --spacing-l: 16px; --spacing-xl: 20px; --spacing-xxl: 24px; --spacing-xxxl: 32px; --spacing-xxxxl: 48px; /* Typography — Fluent 2 font size ramp */ --font-size-100: 10px; --font-size-200: 12px; --font-size-300: 14px; --font-size-400: 16px; --font-size-500: 20px; --font-size-600: 24px; --font-size-hero-700: 28px; --font-size-hero-800: 32px; --font-size-hero-900: 40px; --font-size-hero-1000: 68px; /* Typography — Fluent 2 line height ramp */ --line-height-100: 14px; --line-height-200: 16px; --line-height-300: 20px; --line-height-400: 22px; --line-height-500: 28px; --line-height-600: 32px; --line-height-hero-700: 36px; --line-height-hero-800: 40px; --line-height-hero-900: 52px; --line-height-hero-1000: 92px; } /* ============================================================ Dark Mode — data-theme attribute (JS toggle) Applied via JS writing data-theme="dark" to ============================================================ */ [data-theme="dark"] { --bg-primary: #292929; --bg-secondary: #1f1f1f; --bg-tertiary: #141414; --text-primary: #ffffff; --text-secondary: #d6d6d6; --text-tertiary: #adadad; --accent: #e8a840; --accent-hover: #f0c060; --stroke-default: #666666; --stroke-subtle: #525252; --shadow-sm: 0 0 2px rgba(0,0,0,0.24), 0 1px 2px rgba(0,0,0,0.28); --shadow-md: 0 0 2px rgba(0,0,0,0.24), 0 4px 8px rgba(0,0,0,0.28); --shadow-lg: 0 0 2px rgba(0,0,0,0.24), 0 8px 16px rgba(0,0,0,0.28); } /* ============================================================ Dark Mode — System Preference Activates before JS runs (no FOUC for system-dark users who haven't explicitly chosen a theme) ============================================================ */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg-primary: #292929; --bg-secondary: #1f1f1f; --bg-tertiary: #141414; --text-primary: #ffffff; --text-secondary: #d6d6d6; --text-tertiary: #adadad; --accent: #e8a840; --accent-hover: #f0c060; --stroke-default: #666666; --stroke-subtle: #525252; --shadow-sm: 0 0 2px rgba(0,0,0,0.24), 0 1px 2px rgba(0,0,0,0.28); --shadow-md: 0 0 2px rgba(0,0,0,0.24), 0 4px 8px rgba(0,0,0,0.28); --shadow-lg: 0 0 2px rgba(0,0,0,0.24), 0 8px 16px rgba(0,0,0,0.28); } } /* ============================================================ Global Reset ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ============================================================ Skip Link — Accessibility ============================================================ */ .skip-link { position: fixed; top: 16px; left: 50%; transform: translateX(-50%) translateY(-200%); background: var(--bg-primary); color: var(--accent); padding: var(--spacing-m-nudge) var(--spacing-xl); border-radius: var(--radius-xl); border: 1px solid var(--stroke-default); font-weight: 600; font-size: var(--font-size-300); box-shadow: var(--shadow-md); z-index: 1000; white-space: nowrap; text-decoration: none; transition: transform var(--duration-fast) var(--ease-soft); } .skip-link:focus { transform: translateX(-50%) translateY(0); } /* ============================================================ Base — html & body ============================================================ */ html { font-size: 18px; } body { font-family: 'Nunito', 'Segoe UI Variable', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif; background: var(--bg-primary); color: var(--text-primary); line-height: 1.8; min-height: 100vh; transition: background var(--duration-normal) var(--ease-soft), color var(--duration-normal) var(--ease-soft); } /* ============================================================ Layout — Reading Column ============================================================ */ body > main { max-width: 80ch; margin: 0 auto; padding: var(--spacing-xxl) var(--spacing-xl); } article { width: 100%; } /* ============================================================ Navigation Bar ============================================================ */ body > nav { position: sticky; top: 0; z-index: 100; background: var(--bg-primary); border-bottom: 1px solid var(--stroke-subtle); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background var(--duration-normal) var(--ease-soft), border-color var(--duration-normal) var(--ease-soft); } .nav-inner { max-width: 80ch; margin: 0 auto; padding: var(--spacing-m) var(--spacing-xl); display: flex; align-items: center; justify-content: space-between; } .nav-brand { font-size: var(--font-size-300); font-weight: 600; letter-spacing: 2px; text-transform: lowercase; color: var(--text-primary); text-decoration: none; transition: color var(--duration-fast) var(--ease-soft); } .nav-brand:hover { color: var(--accent); } .nav-links { display: flex; align-items: center; gap: var(--spacing-xl); } .nav-links a, .nav-links a:visited { color: var(--text-tertiary); text-decoration: none; font-size: var(--font-size-300); letter-spacing: 0.5px; padding-bottom: 2px; border-bottom: 2px solid transparent; transition: color var(--duration-fast) var(--ease-soft), border-color var(--duration-fast) var(--ease-soft); } .nav-links a:hover { color: var(--text-primary); } /* Active page indicator */ body[data-path="/blog"] .nav-links a[href="/blog"], body[data-path="/blog/"] .nav-links a[href="/blog"], body[data-path^="/articles"] .nav-links a[href="/blog"] { color: var(--text-primary); border-bottom-color: var(--accent); } /* ============================================================ Article Header ============================================================ */ article header { margin-bottom: var(--spacing-xxl); } article header h1 { font-size: var(--font-size-hero-800); font-weight: 300; letter-spacing: 0.5px; color: var(--text-secondary); line-height: 1.3; margin-bottom: var(--spacing-m-nudge); } article header time { font-size: var(--font-size-200); color: var(--text-tertiary); letter-spacing: 2px; } article header fluent-badge { margin-top: var(--spacing-xs); display: inline-block; } /* ============================================================ Article Body Typography ============================================================ */ article p { margin-bottom: 1rem; color: var(--text-primary); } article h2, article h3, article h4 { margin: 1.5rem 0 0.5rem; } article h2 { font-size: var(--font-size-600); font-weight: 600; letter-spacing: 0.5px; color: var(--text-secondary); } article h3 { font-size: var(--font-size-500); font-weight: 600; letter-spacing: 0; color: var(--text-tertiary); } article h4 { font-size: var(--font-size-400); font-weight: 600; letter-spacing: 0; color: var(--text-tertiary); } article a { color: var(--text-secondary); text-underline-offset: 3px; transition: color 0.3s; } article a:hover { color: var(--text-primary); } article blockquote { border-left: 3px solid var(--accent); padding-left: var(--spacing-xl); margin: 1.5rem 0; color: var(--text-secondary); font-style: italic; } article code { background: var(--bg-tertiary); border: 1px solid var(--stroke-subtle); padding: 1px 5px; border-radius: var(--radius-md); font-size: 0.82em; color: var(--text-primary); } article pre { background: var(--bg-secondary); padding: 10px 14px; border-radius: var(--radius-xl); overflow-x: auto; margin: 0.75rem 0; box-shadow: var(--shadow-sm); } article pre code { display: block; background: none; border: none; padding: 0; font-size: var(--font-size-300); line-height: 1.45; color: inherit; } article ul, article ol { padding-left: 1.5rem; margin-bottom: 1.5rem; } article li { margin-bottom: var(--spacing-s-nudge); } article table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: var(--font-size-300); } article th { text-align: left; font-weight: 600; color: var(--text-secondary); padding: var(--spacing-s) var(--spacing-l); border-bottom: 2px solid var(--stroke-default); } article td { padding: var(--spacing-s) var(--spacing-l); border-bottom: 1px solid var(--stroke-subtle); color: var(--text-primary); vertical-align: top; } article tr:last-child td { border-bottom: none; } article tr:hover td { background: var(--bg-secondary); } article hr { border: none; border-top: 1px solid var(--stroke-subtle); margin: 2rem 0; } /* ============================================================ Theme Toggle Button — Nav Bar ============================================================ */ #theme-toggle { width: 28px; height: 28px; border-radius: 50%; background: none; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; color: var(--text-tertiary); transition: color var(--duration-fast) var(--ease-soft); padding: 0; } #theme-toggle:hover { color: var(--text-primary); } /* Light mode: show moon (click to switch to dark) */ #theme-toggle i[data-lucide="moon"] { display: flex; } #theme-toggle i[data-lucide="sun"] { display: none; } /* Dark mode: show sun (click to switch to light) */ [data-theme="dark"] #theme-toggle i[data-lucide="moon"] { display: none; } [data-theme="dark"] #theme-toggle i[data-lucide="sun"] { display: flex; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) #theme-toggle i[data-lucide="moon"] { display: none; } :root:not([data-theme="light"]) #theme-toggle i[data-lucide="sun"] { display: flex; } } /* Icon sizing */ #theme-toggle i[data-lucide] { width: 1em; height: 1em; vertical-align: middle; stroke-width: 2; display: inline-flex; } /* ============================================================ Mobile Responsive — 640px and below ============================================================ */ @media (max-width: 640px) { body > main { padding: var(--spacing-xl) var(--spacing-m-nudge); } article header h1 { font-size: var(--font-size-hero-700); } } /* ============================================================ Article Index Cards — /blog path only Targets Caddy-generated