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/assets/fonts/fonts.css
+2
View File
@@ -1,4 +1,6 @@
/* Variable fonts: only downloaded when referenced by the page CSS. */
@font-face { font-family: 'Fraunces'; font-weight: 100 1000; font-style: normal; font-display: swap; src: url('fraunces.woff2') format('woff2'); }
@font-face { font-family: 'Literata'; font-weight: 100 900; font-style: normal; font-display: swap; src: url('literata.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 100 900; font-style: normal; font-display: swap; src: url('inter.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 100 900; font-style: italic; font-display: swap; src: url('inter-italic.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-weight: 100 900; font-style: normal; font-display: swap; src: url('montserrat.woff2') format('woff2'); }
frontend/src/assets/fonts/fraunces.woff2
BIN
View File
Binary file not shown.
frontend/src/assets/fonts/literata.woff2
BIN
View File
Binary file not shown.
frontend/src/assets/pagerite.css
+25 -8
View File
@@ -12,9 +12,20 @@
--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;
/* One variable per available font family (faces in fonts/fonts.css);
everything else references these, so font stacks live here only. */
--font-source-sans: "Source Sans 3", system-ui, sans-serif;
--font-source-serif: "Source Serif 4", Georgia, serif;
--font-fraunces: "Fraunces", Georgia, serif;
--font-literata: "Literata", Georgia, serif;
--font-inter: "Inter", system-ui, sans-serif;
--font-montserrat: "Montserrat", system-ui, sans-serif;
--font-fira-code: "Fira Code", ui-monospace, monospace;
--font-body: var(--font-source-sans);
--font-heading: var(--font-source-serif);
/* The brand follows the heading font unless overridden separately. */
--font-brand: var(--font-heading);
--font-code: var(--font-fira-code);
/* 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);
@@ -79,13 +90,23 @@ body {
object-fit: cover;
}
/* Legibility scrim: fade banner artwork into the page background behind
the overlaid brand/nav. Text shadows are not used for this — on light
backgrounds they just look like blurry text. */
#page-banner::after {
content: "";
position: absolute;
inset: 30% 0 0;
background: linear-gradient(transparent, var(--bg));
}
#brand,
#nav {
position: relative;
}
#brand {
font-family: var(--font-heading);
font-family: var(--font-brand);
font-weight: 700;
font-size: 2.4rem;
text-decoration: none;
@@ -97,7 +118,6 @@ body {
/* Nav overlaid at the bottom of the banner */
#nav {
font-size: 1.3em;
text-shadow: 0 0 0.1em black;
padding: 0.35rem 1.25rem;
}
@@ -271,7 +291,6 @@ article h3 {
article h1 {
font-size: 2.2rem;
margin: 2rem 0 1.2rem;
color: var(--accent);
}
/* Margin strategy: bottom-only inside articles. Top margins misalign
@@ -289,7 +308,6 @@ article figure {
article h3 {
margin: 1.4rem 0 0.4rem;
color: color-mix(in oklab, var(--accent2) 60%, var(--muted));
}
/* Lists: small diamond emoji markers — blue 🔹 on odd nesting levels,
@@ -398,7 +416,6 @@ article dd {
article h2 {
font-size: 1.5rem;
margin: 2.2rem 0 0.6rem;
color: var(--accent2);
}
article a {
frontend/src/assets/themes/purple/theme.css
+20
View File
@@ -29,6 +29,26 @@
background: url("./banner.svg") center 40% / cover;
}
/* Colored headings are part of the theme's more elaborate styling; the
base keeps headings in plain text color. */
article h1 {
color: var(--accent);
}
article h2 {
color: var(--accent2);
}
article h3 {
color: color-mix(in oklab, var(--accent2) 60%, var(--muted));
}
/* Dark artwork: keep the nav readable with a shadow (the base style uses
a scrim instead — shadows only work on dark backgrounds). */
#nav {
text-shadow: 0 0 0.15em black;
}
pre {
background: #ffffff09;
}