Move banner image to purple theme.

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 + `<title>` 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).

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
 

frontend/src/assets/banner.svg

@@ -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>

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);
 }
 

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;
 }