Add selectable site theme, custom CSS, and new font set

- Data.theme/Data.custom_css site settings with /_api/settings support;
  theme stylesheet linked per page, custom CSS inline as #pagerite-user,
  swapped during fetch-navigation
- Site editor: theme selector, custom CSS CodeMirror field; in-place
  stylesheet swap (diff-based, preserves editor stylesheets); dev swaps
  Vite-injected style tags since no <link>s exist there
- Dev theme delivery via <meta name="pagerite:theme"> + dynamic import
  in pagerite.js instead of a hardcoded purple import
- Fix dead edit pens in prod: Vite app builds strip entry exports, so
  the dynamic-imported main.js had no openEditor/closeEditor; build with
  preserveEntrySignatures 'exports-only' and log editor load failures
  instead of swallowing them
- Editor slide-in is one-shot: cleared on animationend so stylesheet
  swaps cannot restart a finished animation
- Replace Fraunces/Literata with Source Sans 3/Serif 4, Inter and
  Montserrat variable fonts; font stacks as CSS variables
This commit is contained in:
2026-08-16 23:39:11 +00:00
parent 8aa5d3d4a6
commit 4a84aceb4f
28 changed files with 724 additions and 79 deletions
+10 -4
View File
@@ -12,6 +12,9 @@
--accent: #0056b3;
--accent2: #003d80;
--line: #0000001a;
--font-body: "Source Sans 3", system-ui, sans-serif;
--font-heading: "Source Serif 4", Georgia, serif;
--font-code: "Fira Code", ui-monospace, monospace;
/* Width of the docked editor panel (used both here for shifting the page
and in the Vue editor's own styles). */
--editor-w: min(46rem, 50vw);
@@ -26,9 +29,12 @@ html {
}
body {
font-family: "Literata", Georgia, serif;
font-family: var(--font-body);
font-size: 1.05rem;
line-height: 1.65;
/* Tabular numerals wherever the active font supports them; avoids
numbers jumping in width as counters/values change. */
font-variant-numeric: tabular-nums;
margin: 0;
background: var(--bg);
color: var(--text);
@@ -79,7 +85,7 @@ body {
}
#brand {
font-family: "Fraunces", serif;
font-family: var(--font-heading);
font-weight: 700;
font-size: 2.4rem;
text-decoration: none;
@@ -257,7 +263,7 @@ main {
article h1,
article h2,
article h3 {
font-family: "Fraunces", serif;
font-family: var(--font-heading);
font-weight: 600;
line-height: 1.25;
}
@@ -463,7 +469,7 @@ pre:hover .copy,
}
code {
font-family: "Fira Code", ui-monospace, monospace;
font-family: var(--font-code);
font-size: 0.88em;
}