LeoVasanko/pagerite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add font picker to site editor, neutral base banner styling

Browse Source 
- 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:
LeoVasanko
2026-08-17 02:22:09 +00:00
parent 4a84aceb4f
commit ce69f69b0e
9 changed files with 311 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/design-principles.md
+5 -2
View File
@@ -141,7 +141,8 @@ evolves.
live under `frontend/src/assets/` (the banner SVG under
`themes/purple/`) and are emitted as hashed assets under `/_assets/`
(Source Serif 4 for headings, Source Sans 3 for body, Fira Code for code
by default; Inter and Montserrat kept as variable woff2 options with
by default; Fraunces, Literata, Inter and Montserrat kept as variable
woff2 options with
local `@font-face`). No third-party requests.
## Editing
@@ -155,7 +156,9 @@ evolves.
(no debouncing) straight into the visible article's heading and body.
- **Site mode** — the 🖊️ on the banner opens a panel with the site
**brand** (applied to the header live), a **theme** selector (swapping
the theme stylesheet in place), a **site-wide custom CSS** field (injected
the theme stylesheet in place), **font** picks (heading/body/brand —
stored as plain `:root` rows inside the custom CSS, referencing the base
stylesheet's per-family font variables), a **site-wide custom CSS** field (injected
into `<style id="pagerite-user">` in the live page head and swapped during
fetch-navigation), the page's **banner HTML** field (previewed into the
real banner region, so you see exactly which banner you're editing) and