ui: keep the board visible in light mode + bust diagram cache
build-and-deploy / build (push) Failing after 14m43s

Light mode: revert the heavy white-out scrim back to a moderate wash so the
board stays visible, and earn legibility with a soft light text-halo behind
running text instead (invisible on the solid cards, only works over the image).
Pairs with the darker light-mode text tokens.

Also append ?v=2 to every /diagrams/*.svg reference so the recoloured diagrams
bypass Cloudflare's 4h edge cache and show immediately (the SVG URLs aren't
content-hashed like the CSS bundle).
This commit is contained in:
2026-06-27 21:19:13 +10:00
parent e264f673d7
commit ef1719c84e
5 changed files with 23 additions and 13 deletions
+19 -9
View File
@@ -409,23 +409,33 @@ svg {
);
}
[data-theme="light"] .site-bg__scrim {
/* Light mode needs a much heavier wash than dark — the sandstone board has
bright AND mid-tone areas that wreck text contrast. Keep it a faint ghost
behind content (dark mode stays the showcase). */
/* Moderate wash — the board stays clearly visible; text legibility comes from
a light halo behind the type (see below), not from hiding the backdrop. */
background:
linear-gradient(
90deg,
rgba(246, 248, 251, 0.96) 0%,
rgba(246, 248, 251, 0.9) 50%,
rgba(246, 248, 251, 0.86) 100%
rgba(246, 248, 251, 0.8) 0%,
rgba(246, 248, 251, 0.54) 48%,
rgba(246, 248, 251, 0.44) 100%
),
linear-gradient(
180deg,
rgba(246, 248, 251, 0.5) 0%,
rgba(246, 248, 251, 0.66) 55%,
rgba(246, 248, 251, 0.9) 100%
rgba(246, 248, 251, 0.28) 0%,
rgba(246, 248, 251, 0.48) 55%,
rgba(246, 248, 251, 0.78) 100%
);
}
/* Light-mode legibility: a soft light halo behind running text lifts it off the
busy board WITHOUT washing the board out. Subtle enough to be invisible on the
solid card surfaces; only earns its keep over the image. Dark mode needs none
(light text on a dark board already has the contrast). */
[data-theme="light"]
main
:where(h1, h2, h3, h4, p, li, dt, dd, figcaption, .eyebrow) {
text-shadow:
0 0 4px rgba(246, 248, 251, 0.92),
0 1px 2px rgba(246, 248, 251, 0.75);
}
@media (prefers-reduced-motion: reduce) {
.scroll-progress {