From ce69f69b0ed9ada4eb2c50df7f64031922fcb409 Mon Sep 17 00:00:00 2001 From: Leo Vasanko Date: Mon, 17 Aug 2026 02:22:09 +0000 Subject: [PATCH] Add font picker to site editor, neutral base banner styling - Base stylesheet: per-family font variables (--font-source-sans etc.) with functional slots referencing them; --font-brand defaults to var(--font-heading). Restore Fraunces/Literata faces dropped in the font-set swap - Site editor: stylized A button (always Fira Code) opens a font panel with body/heading/brand tabs; options render their own name in the candidate font at the target's size/weight; clicking the current pick clears it. Picks are stored as plain :root rows in the custom CSS, parsed and rewritten on change - Base banner: drop black text-shadow on light background; legibility via a bottom scrim fading artwork into --bg. Purple keeps its own nav shadow - Headings no longer accent-colored in base (moved to purple theme) - Keep #pagerite-user custom CSS last in at every mutation point so its :root rules win equal specificity (dev injects base/theme styles after the server-rendered tag) --- AGENTS.md | 11 +- docs/design-principles.md | 7 +- frontend/src/SiteEditor.vue | 238 +++++++++++++++++++- frontend/src/assets/fonts/fonts.css | 2 + frontend/src/assets/fonts/fraunces.woff2 | Bin 0 -> 67304 bytes frontend/src/assets/fonts/literata.woff2 | Bin 0 -> 85672 bytes frontend/src/assets/pagerite.css | 33 ++- frontend/src/assets/themes/purple/theme.css | 20 ++ frontend/src/pagerite.js | 16 +- 9 files changed, 311 insertions(+), 16 deletions(-) create mode 100644 frontend/src/assets/fonts/fraunces.woff2 create mode 100644 frontend/src/assets/fonts/literata.woff2 diff --git a/AGENTS.md b/AGENTS.md index 68e69c1..055414d 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -63,7 +63,13 @@ not for the public pages. See `docs/design-principles.md` for the design. none/base only); themes live in `frontend/src/assets/themes/{theme}`. `Data.custom_css` is raw trusted CSS injected inline in every page `` (id `pagerite-user`) and swapped during fetch-navigation; - editable in the site editor. + editable in the site editor. Font picks (heading/body/brand) in the + site editor are stored as plain `:root` rows in `custom_css` + (`--font-body: var(--font-source-sans);` format — parsed out and + rewritten on change, the `:root` block added/removed as needed), + referencing the per-family variables (`--font-source-sans` etc.) from + pagerite.css; + the base stylesheet's `--font-brand` defaults to `var(--font-heading)`. - `markdown.py` — markdown-it-py renderer (html passthrough + attrs, footnote, deflist, tasklists plugins). Custom image rule: relative srcs resolve against the page path, titled images become figures. @@ -88,7 +94,8 @@ not for the public pages. See `docs/design-principles.md` for the design. under `/_assets/`: `pagerite.css` (base layout + conservative variables), `themes/purple/theme.css` (the purple/dark theme override, including its own `banner.svg`), `pygments.css`, and `fonts/` (self-hosted Source - Sans 3/Source Serif 4/Inter/Montserrat/Fira Code variable woff2). The `::view-transition*` block at the end of `pagerite.css` (from + Sans 3/Source Serif 4/Fraunces/Literata/Inter/Montserrat/Fira Code + variable woff2). The `::view-transition*` block at the end of `pagerite.css` (from termotohtori.fi) is fragile — do not tweak. - Vite builds ES-module `.js` outputs; the backend renders `