/* ============================================================================= Abbey — Ledger Theme A neutral, academic / editorial aesthetic. Loaded only when ABBEY_THEME=ledger. All declarations are scoped under `.theme-ledger` (set on by the chrome partial) so loading this file in any other context is a no-op. Color TOKENS live in this theme's `assets/tailwind.css` under `@theme`, which makes Tailwind auto-generate `bg-ledger-*`, `text-ledger-*`, `border-ledger-*`, etc. This file ships: 1. font-family rebinding inside `.theme-ledger` 2. the dark-mode palette (re-binds the same CSS variables so every `*-ledger-*` utility flips automatically) 3. page background + selection color 4. a handful of component classes (`.kicker`, `.tag-ledger`, `.read-link`, `.icon-btn`) 5. typography for the `.prose-ledger` reading wrapper Palette (light): bg #ffffff · fg #16181d · muted #5b616e · accent #2f4a7a · rule #e7e9ee Palette (dark): bg #0e1014 · fg #e6e8ee · muted #9aa0ad · accent #8aa9e0 · rule #23262e ============================================================================= */ /* ---------------------------------------------------------------------- Font-family rebinding via CSS variable cascade. Tailwind emits `.font-sans`, `.font-mono`, `.font-serif` as `{ font-family: var(--font-sans|mono|serif) }`. Redefining those variables on `.theme-ledger` makes every `font-*` utility inside the theme resolve to the IBM Plex stack — without touching other themes. ---------------------------------------------------------------------- */ .theme-ledger { --font-sans: "IBM Plex Sans", system-ui, -apple-system, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace; --font-serif: "IBM Plex Serif", Georgia, Cambria, "Times New Roman", serif; } /* ---------------------------------------------------------------------- Dark-mode palette: re-bind the tokens so utilities flip automatically. Higher specificity than the `:root` block emitted by @theme, and gated on the cookie-driven `.dark` class on . ---------------------------------------------------------------------- */ .theme-ledger.dark { --color-ledger-bg: #0e1014; --color-ledger-fg: #e6e8ee; --color-ledger-muted: #9aa0ad; --color-ledger-faint: #6b7280; --color-ledger-rule: #23262e; --color-ledger-rule-strong: #313640; --color-ledger-accent: #8aa9e0; --color-ledger-accent-soft: #1a1f2b; --color-ledger-card: #14171d; --color-ledger-chip: #1b1f27; } /* ---------------------------------------------------------------------- Page base ---------------------------------------------------------------------- */ html.theme-ledger { background-color: var(--color-ledger-bg); color: var(--color-ledger-fg); } html.theme-ledger body { font-family: var(--font-sans); line-height: 1.7; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } html.theme-ledger ::selection { background: var(--color-ledger-accent); color: #ffffff; } /* Give links a consistent, restrained treatment site-wide. */ .theme-ledger a { color: inherit; } /* ---------------------------------------------------------------------- Kicker / section label — uppercase mono eyebrow ---------------------------------------------------------------------- */ .theme-ledger .kicker { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.6875rem; color: var(--color-ledger-faint); } /* ---------------------------------------------------------------------- Tag chips — monospace, understated, bordered on hover ---------------------------------------------------------------------- */ .theme-ledger .tag-ledger { display: inline-flex; align-items: center; font-family: var(--font-mono); font-size: 0.75rem; line-height: 1; color: var(--color-ledger-muted); background: var(--color-ledger-chip); padding: 0.3rem 0.55rem; border-radius: 4px; border: 1px solid transparent; transition: color 120ms ease, border-color 120ms ease; } .theme-ledger .tag-ledger:hover { color: var(--color-ledger-accent); border-color: var(--color-ledger-rule-strong); } /* ---------------------------------------------------------------------- "read →" style inline links (monospace, accent) ---------------------------------------------------------------------- */ .theme-ledger .read-link { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--color-ledger-accent); text-decoration: none; transition: opacity 120ms ease; } .theme-ledger .read-link:hover { text-decoration: underline; text-underline-offset: 3px; } /* ---------------------------------------------------------------------- Icon buttons (RSS, dark-mode toggle) in the nav ---------------------------------------------------------------------- */ .theme-ledger .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border: 1px solid var(--color-ledger-rule-strong); border-radius: 6px; color: var(--color-ledger-muted); background: var(--color-ledger-card); transition: color 120ms ease, border-color 120ms ease; cursor: pointer; } .theme-ledger .icon-btn:hover { color: var(--color-ledger-accent); border-color: var(--color-ledger-accent); } /* ---------------------------------------------------------------------- Rendered markdown content (`.prose-ledger` wrapper). Used with MinimalMarkdownRender (semantic HTML only). Body sets in a serif for a scholarly reading column; structural cues stay in mono. ---------------------------------------------------------------------- */ .theme-ledger .prose-ledger { font-family: var(--font-serif); font-size: 1.125rem; line-height: 1.78; color: var(--color-ledger-fg); } .theme-ledger .prose-ledger p { margin: 0 0 1.25rem; } .theme-ledger .prose-ledger h1, .theme-ledger .prose-ledger h2, .theme-ledger .prose-ledger h3, .theme-ledger .prose-ledger h4 { font-family: var(--font-sans); color: var(--color-ledger-fg); letter-spacing: -0.01em; line-height: 1.3; margin: 2.25rem 0 0.75rem; } .theme-ledger .prose-ledger h1 { font-size: 1.75rem; font-weight: 700; } .theme-ledger .prose-ledger h2 { font-size: 1.35rem; font-weight: 600; } .theme-ledger .prose-ledger h3 { font-size: 1.1rem; font-weight: 600; } .theme-ledger .prose-ledger a { color: var(--color-ledger-accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; } .theme-ledger .prose-ledger a:hover { text-decoration-thickness: 2px; } .theme-ledger .prose-ledger strong { font-weight: 600; color: var(--color-ledger-fg); } .theme-ledger .prose-ledger em { font-style: italic; } .theme-ledger .prose-ledger ul, .theme-ledger .prose-ledger ol { margin: 0 0 1.25rem 1.4rem; padding-left: 0.4rem; } .theme-ledger .prose-ledger li { margin-bottom: 0.4rem; padding-left: 0.2rem; } .theme-ledger .prose-ledger ul { list-style: none; } .theme-ledger .prose-ledger ul > li::before { content: "—"; color: var(--color-ledger-faint); margin-right: 0.6rem; margin-left: -1.2rem; } .theme-ledger .prose-ledger ol { list-style: decimal; } .theme-ledger .prose-ledger blockquote { margin: 1.75rem 0; padding: 0.25rem 0 0.25rem 1.25rem; border-left: 3px solid var(--color-ledger-accent); color: var(--color-ledger-muted); font-style: italic; } .theme-ledger .prose-ledger blockquote p:last-child { margin-bottom: 0; } .theme-ledger .prose-ledger hr { border: none; border-top: 1px solid var(--color-ledger-rule); margin: 2.5rem 0; } .theme-ledger .prose-ledger img { max-width: 100%; height: auto; border-radius: 6px; border: 1px solid var(--color-ledger-rule); margin: 1.75rem 0; } /* Inline code + code blocks (block styling colored by ledger-highlight.css) */ .theme-ledger .prose-ledger code, .theme-ledger code:not(pre code) { font-family: var(--font-mono); font-size: 0.875em; background: var(--color-ledger-chip); color: var(--color-ledger-fg); padding: 0.1rem 0.35rem; border-radius: 4px; } .theme-ledger .prose-ledger pre { margin: 1.75rem 0; padding: 1rem 1.1rem; border-radius: 8px; border: 1px solid var(--color-ledger-rule-strong); overflow-x: auto; font-family: var(--font-mono); font-size: 0.9rem; line-height: 1.6; } .theme-ledger .prose-ledger pre code { background: transparent; color: inherit; padding: 0; font-size: inherit; } /* Tables — quiet ruled ledger */ .theme-ledger .prose-ledger table { width: 100%; margin: 1.75rem 0; border-collapse: collapse; font-family: var(--font-sans); font-size: 0.95rem; } .theme-ledger .prose-ledger th { text-align: left; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.7rem; color: var(--color-ledger-muted); padding: 0.5rem 0.75rem; border-bottom: 2px solid var(--color-ledger-rule-strong); } .theme-ledger .prose-ledger td { padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--color-ledger-rule); vertical-align: top; }