Tables drop the hard 1px grid: a soft accent-tinted vertical gradient
header (overridable via --table-head-a/b), a very faint diagonal
--table-tint wash lifting the cells apart, and only a whisper of a row
separator. Definition lists become a lightweight two-column grid
(minmax term column, explicit grid-column placement so runs of
dt/dd stack right) with accent terms and no borders or fills. Tables
also join the bottom-margin-only spacing convention.
overflow: overlay is dead in current Chromium, so an appearing native
scrollbar shifted the layout again. OverlayScrollbars replaces it with
floating auto-hiding scrollbars that never reserve space (native window
scroll APIs unaffected on a body target). Themed via --os-* variables in
pagerite.css; the html scrollbar-color styling stays as no-JS fallback.
(package-lock.json is gitignored.)
Standalone markdown images (captioned or not) now become block <figure>
elements; only inline-with-text images and raw author <img> HTML stay
plain. This collapses the img/figure selector duplication in pagerite.css
into a default + override structure: figure fills the column, floats go
30% (1em text gap), an explicit width attribute shrink-wraps the figure
(images with width are left untouched by CSS so the attribute hint
survives), and .wide re-anchors are grouped with the main rule.
Banner designs can now ship arbitrary markup as banner.html (canvas +
style + script), taking precedence over banner.svg; the artwork is
inlined in a div[data-design] wrapper either way, which the editor's
live preview preserves (and never re-runs its scripts).
The bundled 'eyes' design (themes/eyes/banner.html + banner.css sizing
the stage) replaces the eyes canvas script that was embedded in the
notes-on-urls page's own banner — the page now just picks the design.
Seeds set banners only on select sub pages (the-long-read gradient,
canvas-nights stars): the front page no longer gets a banner image and
shows the theme's default design. Seed entries carry a banner_design
field.
An http middleware sets 'Server: pagerite' (dropping uvicorn's versioned
default) and content pages return Last-Modified from Node.modified. In
markdown, a {dates} line expands to the article's published/updated
dateline (updated shown only when it falls on a later day); the editor
preview resolves it for pages that exist, unsaved pages show it literal.
Demonstrated in the long-read seed page.
Long articles now span from the left gutter (which holds the overlaying
sidebar) to the right viewport edge instead of reserving a symmetric
right gutter. The .wide breakout is re-anchored accordingly: left margin
is the gutter share (20vw of the 1fr+4fr grid, 1/5 of the post-editor
width while editing) plus main's padding; the <=102rem sidebar case keeps
its constant -13.25rem margin.
The 78rem minimum on the center track prevented the article from ever
shrinking, locking long articles into two fixed-width columns that
overflowed the window. Drop the floor: the 4fr center share now scales
with the window in both directions, so column widths flex continuously
and the count falls to 1 when space runs out.
Themes move from Vite-built frontend assets to pagerite/themes/{name}/
folders holding theme.css and/or banner.css (+ banner.svg), served by the
backend at /_themes/{name}/... and re-read from disk per request (etag by
mtime), so on-disk edits show on the next page load even in prod and new
themes need no build or config. The theme and banner-design selectors
enumerate these folders via GET /_api/settings.
Banner designs: Node.banner_design picks a design per page (None inherits
from ancestors, then the front page, then the active theme's own design;
"" = none). The design's banner.css is linked in <head> (id
pagerite-banner, between theme and custom CSS) and its banner.svg inlined
into #page-banner first (marked svg[data-design]); the page's own
Node.banner HTML renders after it, so author code always wins. #page-banner
is now a stacking grid so artwork and author code overlay.
Dev/prod hot loading unified: the backend renders the theme/design links
in both modes; in dev pagerite.js only re-appends them (and the custom
CSS) after the Vite-injected base styles. Theme switches just swap the
link href. The pagerite:theme meta and Vite theme build entries are gone.
Replace the fixed 100rem two-column breakpoint with 'columns: 30rem' so
CSS fits as many >=30rem columns as the article's width allows, and let
long (.multicol) articles grow past the 78rem cap (4:1 share against the
gutters, keeping them symmetric for the .wide breakout math). Also treat
mid-article h1s as full-width column separators like h2s.
Picker font-variable regexes only allowed [a-z-], so --font-exo2 was
never parsed or stripped: picking another font left the old row behind
and the selection showed wrong. Now digits are allowed, stripping is
declaration-level (handles inline rows) and removes all font rows
before inserting, and the picker re-parses on every CSS edit so manual
changes update the selection live.
- Two new themes (corporate light/dark, nitro racing) and a purple
retune; theme banner SVGs moved to pagerite/themes/, inlined by the
backend, recolored per scheme via CSS classes, with scroll parallax.
- pygments.css maps tokens onto --code-* variables; light and dark
palette sets in the base stylesheet resolve via light-dark() from the
theme's color-scheme; themes just pick a set or retint --code-bg.
- Sidebar omitted unless the section has at least two published items;
fetch-navigation and the site editor handle it appearing/disappearing.
- Floated figures keep captions below at 30% of the text column; h1/h2
clear floats so images never overflow into the next section.
- Links use --link (color-mix of text and accent), weight 500, no
underlines; hover goes full accent.
- New-page flow: slug placeholder shows the slug derived live from the
title (placeholders keep browser-default styling; slug values no longer
muted). Committing PUTs empty markdown, which now creates an empty page
rendering with its title instead of 404, then hands over to the page
editor (CodeMirror focuses on mount)
- Saving never deletes: REST PUT and WS save store empty content as an
empty page; deletion is the page editor's explicit choice — saving
trimmed-empty text issues a REST DELETE
- Fonts: add Cormorant (variable 300-700, normal+italic) to the serif
picks, replacing single-weight Gloock; Playfair Display files kept on
disk but not offered
- 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)
- 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
- Move shared structural styles to frontend/src/assets/pagerite.css
with conservative variables, and purple theme overrides to
frontend/src/assets/themes/purple/theme.css.
- Backend now links the base and theme stylesheets as separate files
so they can be swapped or augmented.
- Add blocking="render" to stylesheet links to avoid FOUC.
- Drop redundant defer from module script tags.
- Update related docs and comments.
LeoVasanko