From efaf48711ce4afbafebde2dfd869558ab0e0d24f Mon Sep 17 00:00:00 2001 From: rob thijssen Date: Mon, 14 Sep 2026 17:21:44 +0300 Subject: [PATCH] feat(ui): a caution mark where the tagline's bullet was MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The masthead's separator between "quantus mining" and "this is sparta" is now the caution mark rather than a middle dot, scaled to the line it sits on. `.mark-tagline` gains an explicit `line-height` for that reason: the image is sized from it, and a line height inherited from `body` would quietly resize the mark the day the body's changed. The height is declared twice — `1.4em` then `1lh` — which is the same number here precisely because the line height above is stated, so a browser that does not know the unit lands in the same place rather than near it. `alt` is empty and `aria-hidden` is set, on purpose. The mark stands in for punctuation and the words either side already say what it says; announcing it would be reading the separator aloud. Imported as a hashed asset like the portrait, and it keeps its own transparency rather than being given a ground — the masthead sits on a radial glow, not a flat surface, so a background would show as a rectangle. Co-Authored-By: Claude Opus 5 --- web/src/App.tsx | 11 ++++++++++- web/src/assets/caution-sparta.png | Bin 0 -> 7772 bytes web/src/index.css | 17 +++++++++++++++++ 3 files changed, 27 insertions(+), 1 deletion(-) create mode 100644 web/src/assets/caution-sparta.png diff --git a/web/src/App.tsx b/web/src/App.tsx index dd19f80..451be8b 100644 --- a/web/src/App.tsx +++ b/web/src/App.tsx @@ -33,6 +33,7 @@ import { SectionNav } from './components/SectionNav' import { ThemeToggle } from './components/ThemeToggle' import { StateIndex } from './components/StateIndex' import { StatBar } from './components/StatBar' +import cautionSparta from './assets/caution-sparta.png' import { AboutPanel } from './components/AboutPanel' import { VestingPanel } from './components/VestingPanel' import { WormholeStage } from './components/WormholeStage' @@ -119,7 +120,15 @@ export default function App() {
blackbeard.observer
-
quantus mining · this is sparta
+
+ quantus mining{' '} + {/* In place of the separator the bullet used to be. Decorative, + so `alt` is empty on purpose: the words either side already + say it, and a screen reader announcing an image between them + would be reading the punctuation aloud. */} + this is + sparta +
diff --git a/web/src/assets/caution-sparta.png b/web/src/assets/caution-sparta.png new file mode 100644 index 0000000000000000000000000000000000000000..199d13012004f1b06e6227cd643cf95e39a75964 GIT binary patch literal 7772 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 iW}sijJ8+gUVEhlN*+rEUm(0Wf0000