/* ========================================================================== base.css — CSS custom properties, reset, and typography ========================================================================== To change the color scheme: edit the variables in :root (light) and [data-theme="dark"] below. To change font sizes or spacing scale: edit the --size-* and --space-* vars. ========================================================================== */ /* -------------------------------------------------------------------------- 1. CSS Custom Properties (Design Tokens) -------------------------------------------------------------------------- */ :root { /* --- Colors (light theme) --- Carefully chosen for readability and polish. Tweak these to retheme the entire site at once. */ --color-bg: #fafafa; /* Slightly warmer than pure white for easier reading */ --color-bg-alt: #f0f0f0; /* Slightly more prominent for code blocks */ --color-surface: #ffffff; /* Cards and elevated surfaces */ --color-border: #e5e5e5; /* Subtle but visible */ --color-text: #1a1a1a; /* Near-black for excellent contrast */ --color-text-muted: #696969; /* Secondary text */ --color-text-subtle: #9a9a9a; /* Tertiary text, timestamps */ --color-primary: #2563eb; /* Main accent — vivid blue */ --color-primary-hover: #1d4ed8; /* Darker on hover/active */ --color-primary-fg: #ffffff; /* Text on primary background */ --color-tag-bg: #eff6ff; /* Very light blue */ --color-tag-text: #1e40af; /* Dark blue for tags */ --color-shadow: rgba(0, 0, 0, 0.06); /* More subtle shadow */ /* --- Typography --- System font stack — no external fonts loaded yet. Swap in a Google Font import + var update here when ready. */ --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; --font-serif: Georgia, "Times New Roman", Times, serif; --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; /* --- Font sizes (fluid-ish scale) --- Adjust the base size here to scale the whole site up/down. */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.25rem; /* 20px */ --text-2xl: 1.5rem; /* 24px */ --text-3xl: 1.875rem; /* 30px */ --text-4xl: 2.25rem; /* 36px */ /* --- Line heights optimised for reading — Increased throughout for better readability and professional feel. */ --lh-tight: 1.30; --lh-normal: 1.60; --lh-prose: 1.80; /* Extra generous for long-form reading */ /* --- Spacing scale --- */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-6: 1.5rem; --space-8: 2rem; --space-12: 3rem; --space-16: 4rem; --space-24: 6rem; /* --- Border radius --- */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-full: 9999px; /* --- Transitions --- */ --transition-fast: 150ms ease; --transition-base: 250ms ease; } /* Dark theme overrides — applied when */ [data-theme="dark"] { --color-bg: #0d0d0d; /* Very dark but not pure black (easier on eyes) */ --color-bg-alt: #1a1a1a; /* Slightly lighter for contrast */ --color-surface: #151515; /* Card surfaces */ --color-border: #303030; /* Subtle dividers */ --color-text: #f5f5f5; /* Off-white (not pure white) */ --color-text-muted: #a8a8a8; /* Secondary text with good contrast */ --color-text-subtle: #767676; /* Tertiary text */ --color-primary: #60a5fa; /* Brighter blue in dark mode */ --color-primary-hover: #93c5fd; /* Even brighter on hover */ --color-primary-fg: #0d0d0d; /* Dark text on blue button */ --color-tag-bg: #1e3a8a; /* Deep blue background */ --color-tag-text: #dbeafe; /* Light blue text */ --color-shadow: rgba(0, 0, 0, 0.5); /* Stronger shadow in dark mode */ } /* -------------------------------------------------------------------------- 2. Reset -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { background-color: var(--color-bg); color: var(--color-text); font-family: var(--font-sans); font-size: var(--text-base); line-height: var(--lh-normal); min-height: 100vh; /* Smooth transitions when theme changes */ transition: background-color var(--transition-base), color var(--transition-base); } img, picture, video, canvas, svg { display: block; max-width: 100%; } input, button, textarea, select { font: inherit; } a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 3px; transition: color var(--transition-fast); } a:hover { color: var(--color-primary-hover); } a:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; border-radius: 2px; } ul, ol { list-style: none; } /* -------------------------------------------------------------------------- 3. Typography defaults — optimised for long-form reading -------------------------------------------------------------------------- */ h1, h2, h3, h4, h5, h6 { line-height: var(--lh-tight); font-weight: 700; color: var(--color-text); } h1 { font-size: var(--text-4xl); } h2 { font-size: var(--text-3xl); } h3 { font-size: var(--text-2xl); } h4 { font-size: var(--text-xl); } h5 { font-size: var(--text-lg); } h6 { font-size: var(--text-base); } /* Prose context — applied inside .post-content for long-form reading */ .post-content { font-size: var(--text-lg); /* Slightly larger for readability */ line-height: var(--lh-prose); /* Generous leading for sustained reading */ max-width: 760px; /* Optimal line length (about 65–75 characters) */ } .post-content p { margin-bottom: var(--space-6); /* Increased paragraph spacing */ } .post-content p + p { margin-top: 0; /* Don't double-space; use margin-bottom only */ } .post-content h2, .post-content h3 { margin-top: var(--space-12); /* Extra breathing room before subheadings */ margin-bottom: var(--space-4); /* Tighter space below heading to its content */ font-weight: 700; } .post-content ul, .post-content ol { list-style: disc; padding-left: var(--space-6); margin: var(--space-4) 0; } .post-content code { font-family: var(--font-mono); font-size: 0.9em; background: var(--color-bg-alt); padding: 0.1em 0.3em; border-radius: var(--radius-sm); } .post-content pre { background: var(--color-bg-alt); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-4); overflow-x: auto; margin: var(--space-6) 0; } /* -------------------------------------------------------------------------- 4. Utility helpers -------------------------------------------------------------------------- */ /* Screen-reader only — hides visually but keeps accessible */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } .placeholder-text { color: var(--color-text-muted); font-style: italic; }