/* * Catppuccin Latte (light) and Mocha (dark). * * Palette values appear exactly once, as custom properties. Component rules * below must reference the semantic tokens (--bg, --fg, …), never a raw hex. * * Theme selection is `prefers-color-scheme` by default, overridable by a * `data-theme` attribute on so a server can honour a cookie without any * JavaScript. There is deliberately no in-page toggle: a CSS-only one cannot * persist across navigations, which is worse than respecting the system. */ :root { /* Latte */ --ctp-base: #eff1f5; --ctp-mantle: #e6e9ef; --ctp-crust: #dce0e8; --ctp-surface0: #ccd0da; --ctp-text: #4c4f69; --ctp-subtext0: #6c6f85; --ctp-blue: #1e66f5; --ctp-mauve: #8839ef; --bg: var(--ctp-base); --bg-alt: var(--ctp-mantle); --border: var(--ctp-surface0); --fg: var(--ctp-text); --fg-muted: var(--ctp-subtext0); --link: var(--ctp-blue); --accent: var(--ctp-mauve); --measure: 40rem; --font: system-ui, -apple-system, "Segoe UI", sans-serif; --mono: ui-monospace, "Cascadia Code", "Fira Code", monospace; } /* Mocha */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ctp-base: #1e1e2e; --ctp-mantle: #181825; --ctp-crust: #11111b; --ctp-surface0: #313244; --ctp-text: #cdd6f4; --ctp-subtext0: #a6adc8; --ctp-blue: #89b4fa; --ctp-mauve: #cba6f7; } } :root[data-theme="dark"] { --ctp-base: #1e1e2e; --ctp-mantle: #181825; --ctp-crust: #11111b; --ctp-surface0: #313244; --ctp-text: #cdd6f4; --ctp-subtext0: #a6adc8; --ctp-blue: #89b4fa; --ctp-mauve: #cba6f7; } *, *::before, *::after { box-sizing: border-box; } body { margin: 0; padding: 0 1rem; background: var(--bg); color: var(--fg); font-family: var(--font); /* RGAA 10.4: text must survive a 200% zoom, hence relative units throughout. */ font-size: 1.0625rem; line-height: 1.6; } main, .site-header, .site-footer { max-width: var(--measure); margin-inline: auto; } /* RGAA 12.7 — visible only once focused, but always reachable first. */ .skip-link { position: absolute; left: -9999px; } .skip-link:focus { left: 1rem; top: 1rem; z-index: 1; padding: 0.5rem 0.75rem; background: var(--bg-alt); border: 2px solid var(--accent); } /* RGAA 10.7: focus is never removed, and is visible against both palettes. */ :focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; } main:focus { outline: none; } a { color: var(--link); /* RGAA 3.1: the underline carries the link, not the colour alone. */ text-decoration: underline; text-underline-offset: 0.15em; } .site-header { display: flex; flex-wrap: wrap; gap: 1rem; align-items: baseline; justify-content: space-between; padding-block: 1.5rem; border-bottom: 1px solid var(--border); } .site-title { font-weight: 700; text-decoration: none; } nav ul, .post-list { display: flex; gap: 1rem; list-style: none; margin: 0; padding: 0; } .post-list { flex-direction: column; gap: 1.5rem; margin-block: 2rem; } .post-list p { margin: 0.25rem 0 0; color: var(--fg-muted); } h1, h2, h3 { line-height: 1.25; text-wrap: balance; } .meta { color: var(--fg-muted); font-size: 0.9375rem; } img { max-width: 100%; height: auto; } figcaption { color: var(--fg-muted); font-size: 0.9375rem; } pre, code { font-family: var(--mono); font-size: 0.9375em; } pre { padding: 1rem; overflow-x: auto; background: var(--bg-alt); border: 1px solid var(--border); border-radius: 0.375rem; } /* Section anchors. The whole heading is a link to itself, so the link's accessible name is the section title (RGAA 6.1) — but it must not *look* like a body link, or every heading would read as a call to action. The affordance is the `#` marker, which appears on hover and on keyboard focus; RGAA 10.7's focus outline comes from the global :focus-visible rule. */ .heading-anchor { color: inherit; text-decoration: none; } .heading-anchor:hover, .heading-anchor:focus-visible { text-decoration: underline; } .heading-anchor-mark { margin-left: 0.35ch; color: var(--fg-muted); /* Not display:none — it would reflow the title when it appears. */ visibility: hidden; } .heading-anchor:hover .heading-anchor-mark, .heading-anchor:focus-visible .heading-anchor-mark { visibility: visible; } /* Landing on an anchor must not put the heading flush against the top edge. */ :where(h2, h3, h4, h5, h6)[id] { scroll-margin-top: 2rem; } /* Prose whose shape carries meaning (ASCII art): monospace is required for the figure to hold, but none of the code-block chrome is — it reads as body text. The size is capped so the full width fits the column instead of scrolling: losing the shape off-screen would defeat the point. */ pre.ascii-art { padding: 0; background: none; border: 0; border-radius: 0; color: inherit; font-size: min(0.875rem, 2.1vw); line-height: 1.2; } blockquote { margin-inline: 0; padding-left: 1rem; border-left: 3px solid var(--accent); color: var(--fg-muted); } table { width: 100%; border-collapse: collapse; } th, td { padding: 0.5rem; border-bottom: 1px solid var(--border); text-align: left; } .site-footer { margin-top: 4rem; padding-block: 1.5rem; border-top: 1px solid var(--border); color: var(--fg-muted); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }