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
frontend/src/pagerite.js
+13 -3
View File
@@ -6,11 +6,18 @@
// support from the article itself and are re-applied after each swap.
(() => {
if (import.meta.env.DEV) {
import("./assets/pagerite.css");
// The theme is selectable; the backend names the active one in a meta
// tag (dev links no stylesheets — Vite injects them from JS).
const theme = document.querySelector('meta[name="pagerite:theme"]')?.content;
if (theme) import(/* @vite-ignore */ `./assets/themes/${theme}/theme.css`);
const sheets = [import("./assets/pagerite.css")];
if (theme) sheets.push(import(/* @vite-ignore */ `./assets/themes/${theme}/theme.css`));
// The injected styles land after the server-rendered custom CSS in
// <head>; move the custom CSS back to the end so its equal-specificity
// :root rules (font variables) win.
Promise.all(sheets).then(() => {
const el = document.getElementById("pagerite-user");
if (el) document.head.append(el);
});
}
const REGIONS = ["page-banner", "nav", "sidebar", "main"];
@@ -192,11 +199,14 @@
el.replaceWith(document.importNode(doc.getElementById(id), true));
}
// Site-wide custom CSS lives in <head id="pagerite-user"> and must be
// kept in sync across fetch-navigations.
// kept in sync across fetch-navigations. It is kept last in <head>:
// in dev Vite injects the base stylesheet after the server-rendered
// tag, and equal-specificity :root rules are decided by order.
const oldUserStyle = document.getElementById("pagerite-user");
const newUserStyle = doc.getElementById("pagerite-user");
if (oldUserStyle && newUserStyle) {
oldUserStyle.textContent = newUserStyle.textContent;
document.head.appendChild(oldUserStyle);
} else if (newUserStyle) {
document.head.appendChild(document.importNode(newUserStyle, true));
} else if (oldUserStyle) {