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 <head> at every mutation point
  so its :root rules win equal specificity (dev injects base/theme
  styles after the server-rendered tag)
This commit is contained in:
2026-08-17 02:22:09 +00:00
parent 4a84aceb4f
commit ce69f69b0e
9 changed files with 311 additions and 16 deletions
+9 -2
View File
@@ -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
`<head>` (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 `<script
type="module">` for them (module scripts defer by default).