From 8aa5d3d4a6580b21225f2705093e399d6cace923 Mon Sep 17 00:00:00 2001 From: Leo Vasanko Date: Sun, 16 Aug 2026 22:28:51 +0000 Subject: [PATCH] Move banner image to purple theme. --- AGENTS.md | 11 ++++--- docs/design-principles.md | 13 ++++---- frontend/src/assets/banner.svg | 34 --------------------- frontend/src/assets/pagerite.css | 5 +-- frontend/src/assets/themes/purple/theme.css | 4 +++ 5 files changed, 20 insertions(+), 47 deletions(-) delete mode 100644 frontend/src/assets/banner.svg diff --git a/AGENTS.md b/AGENTS.md index 71871cf..55ed548 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -53,8 +53,9 @@ not for the public pages. See `docs/design-principles.md` for the design. caching; pages reference files by absolute `/_f/` URLs so hierarchy moves never break them. `Node.banner` is a raw trusted HTML snippet for the header banner (img, styled div, canvas+script...); empty - inherits from the node's ancestors (front page last), then the default - banner.svg artwork. `Data.version` is bumped on every write + inherits from the node's ancestors (front page last), then the active + theme's banner artwork (or a plain gradient in the base stylesheet). + `Data.version` is bumped on every write and embedded in page ETags so nav-affecting changes invalidate caches. `Data.brand` is the site name (header link + `` suffix), editable in the site editor via `/_api/settings`; empty = no header link and @@ -81,9 +82,9 @@ not for the public pages. See `docs/design-principles.md` for the design. stylesheets (base and theme) so they can be swapped or augmented. - `assets/` — shared styles and data files built by Vite and served hashed under `/_assets/`: `pagerite.css` (base layout + conservative variables), - `themes/purple/theme.css` (the purple/dark theme override), `pygments.css`, - `banner.svg` and `fonts/` (self-hosted Fraunces/Literata/Fira Code variable - woff2). The `::view-transition*` block at the end of `pagerite.css` (from + `themes/purple/theme.css` (the purple/dark theme override, including its + own `banner.svg`), `pygments.css`, and `fonts/` (self-hosted + Fraunces/Literata/Fira Code variable woff2). The `::view-transition*` block at the end of `pagerite.css` (from termotohtori.fi) is fragile — do not tweak. - Vite builds ES-module `.js` outputs; the backend renders `<script type="module">` for them (module scripts defer by default). diff --git a/docs/design-principles.md b/docs/design-principles.md index 09d6613..99d0499 100644 --- a/docs/design-principles.md +++ b/docs/design-principles.md @@ -78,8 +78,8 @@ evolves. **per-page configurable**: `Node.banner` holds an arbitrary trusted HTML snippet (an image, a styled div, canvas + script — anything), resolved by walking up the node's ancestors to the front page; when nothing in the - chain sets one, the default `banner.svg` artwork (inlined into the - stylesheet by the build) shows. + chain sets one, the active theme's banner artwork shows (the purple theme + ships a `banner.svg`; the base stylesheet falls back to a plain gradient). - **Fetch-navigation.** Links are plain `<a href>`; a small script (`frontend/src/pagerite.js`) intercepts same-origin clicks, fetches the page, and swaps the `#page-banner`, `#nav`, `#sidebar` and `#main` regions @@ -135,10 +135,11 @@ evolves. (`frontend/src/assets/themes/purple/theme.css` by default) overrides those variables and adds the visual styling. Vue may add per-component styles on top where needed. -- Fonts, the shared stylesheet, pygments styles and the default banner SVG - live under `frontend/src/assets/` and are emitted as hashed assets under - `/_assets/` (Fraunces for headings, Literata for body, Fira Code for code — - variable woff2 files with local `@font-face`). No third-party requests. +- Fonts, the shared stylesheet, pygments styles and the theme's banner SVG + live under `frontend/src/assets/` (the banner SVG under + `themes/purple/`) and are emitted as hashed assets under `/_assets/` + (Fraunces for headings, Literata for body, Fira Code for code — variable + woff2 files with local `@font-face`). No third-party requests. ## Editing diff --git a/frontend/src/assets/banner.svg b/frontend/src/assets/banner.svg deleted file mode 100644 index f18f155..0000000 --- a/frontend/src/assets/banner.svg +++ /dev/null @@ -1,34 +0,0 @@ -<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1600 360"> - <defs> - <linearGradient id="sky" x1="0" y1="0" x2="0" y2="1"> - <stop offset="0" stop-color="#0b0918"/> - <stop offset="0.6" stop-color="#241842"/> - <stop offset="1" stop-color="#3d2b6b"/> - </linearGradient> - <linearGradient id="aur1" x1="0" y1="0" x2="1" y2="0"> - <stop offset="0" stop-color="#00d4c8" stop-opacity="0"/> - <stop offset="0.5" stop-color="#00d4c8" stop-opacity="0.7"/> - <stop offset="1" stop-color="#7c5cff" stop-opacity="0"/> - </linearGradient> - <linearGradient id="aur2" x1="0" y1="0" x2="1" y2="0"> - <stop offset="0" stop-color="#7c5cff" stop-opacity="0"/> - <stop offset="0.5" stop-color="#ff5c8a" stop-opacity="0.55"/> - <stop offset="1" stop-color="#ffd75c" stop-opacity="0"/> - </linearGradient> - </defs> - <rect width="1600" height="360" fill="url(#sky)"/> - <g fill="#ffffff"> - <circle cx="120" cy="60" r="1.6" opacity="0.9"/> - <circle cx="300" cy="30" r="1.1" opacity="0.7"/> - <circle cx="470" cy="90" r="1.4" opacity="0.8"/> - <circle cx="640" cy="45" r="1" opacity="0.6"/> - <circle cx="820" cy="70" r="1.5" opacity="0.85"/> - <circle cx="990" cy="35" r="1.1" opacity="0.7"/> - <circle cx="1150" cy="85" r="1.6" opacity="0.9"/> - <circle cx="1320" cy="50" r="1" opacity="0.6"/> - <circle cx="1480" cy="95" r="1.3" opacity="0.8"/> - </g> - <path d="M0 190 Q 400 90 800 170 T 1600 150 V240 Q 1200 210 800 240 T 0 250 Z" fill="url(#aur1)"/> - <path d="M0 230 Q 400 140 800 210 T 1600 190 V280 Q 1200 250 800 280 T 0 290 Z" fill="url(#aur2)"/> - <path d="M0 300 Q 400 260 800 300 T 1600 290 V360 H0 Z" fill="#12101c"/> -</svg> diff --git a/frontend/src/assets/pagerite.css b/frontend/src/assets/pagerite.css index 4309e07..3c77383 100644 --- a/frontend/src/assets/pagerite.css +++ b/frontend/src/assets/pagerite.css @@ -46,14 +46,15 @@ body { flex: 1; } -/* Full-width banner: image header with the brand and nav overlaid. */ +/* Full-width banner: image header with the brand and nav overlaid. + Base provides a plain fallback; themes override with artwork. */ #banner { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 11rem; - background: url("./banner.svg") center 40% / cover; + background: linear-gradient(135deg, var(--surface), var(--bg)); border-bottom: 1px solid var(--line); } diff --git a/frontend/src/assets/themes/purple/theme.css b/frontend/src/assets/themes/purple/theme.css index 647ffb6..d71df60 100644 --- a/frontend/src/assets/themes/purple/theme.css +++ b/frontend/src/assets/themes/purple/theme.css @@ -25,6 +25,10 @@ filter: drop-shadow(0 0 0.1rem #000); } +#banner { + background: url("./banner.svg") center 40% / cover; +} + pre { background: #ffffff09; }