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
+1 -1
View File
@@ -22,7 +22,7 @@ const cap = caption ?? captions[name];
<figure class="diagram" data-reveal>
<img
class="diagram__svg"
src={`/diagrams/${name}.svg`}
src={`/diagrams/${name}.svg?v=2`}
alt={cap ?? `${name} architecture diagram`}
loading="lazy"
decoding="async"
+1 -1
View File
@@ -13,7 +13,7 @@ and you've hardened the whole estate at once. Get it wrong and you've built a si
Here's how I think about it after wiring an OIDC provider in front of a self-hosted fleet.
![Authentik SSO flow — the browser authenticates against the identity provider over the front channel; each app validates tokens over an internal back channel](/diagrams/authentik-sso.svg)
![Authentik SSO flow — the browser authenticates against the identity provider over the front channel; each app validates tokens over an internal back channel](/diagrams/authentik-sso.svg?v=2)
## Enforce the second factor at the flow, not per app
+1 -1
View File
@@ -12,7 +12,7 @@ that's online whether or not anyone's knocking.
There's a better shape: don't open anything. Let the origin dial *out*.
![Outbound-only exposure — public traffic hits a Cloudflare edge with WAF and geo rules; the origin holds a single outbound tunnel; nothing is port-forwarded](/diagrams/outbound-exposure.svg)
![Outbound-only exposure — public traffic hits a Cloudflare edge with WAF and geo rules; the origin holds a single outbound tunnel; nothing is port-forwarded](/diagrams/outbound-exposure.svg?v=2)
## The tunnel dials out
+1 -1
View File
@@ -14,7 +14,7 @@ a DNS sinkhole, a search proxy — the answer is no. Never. Not once.
So every one of those pods is holding a key to a door it never opens. That's not least privilege. That's a
standing credential waiting to be stolen.
![Workload least privilege — each pod gets its own ServiceAccount with no API token, runs non-root with capabilities dropped, inside a namespace whose Pod Security level is pinned; the cluster API it never calls stays out of reach](/diagrams/workload-least-privilege.svg)
![Workload least privilege — each pod gets its own ServiceAccount with no API token, runs non-root with capabilities dropped, inside a namespace whose Pod Security level is pinned; the cluster API it never calls stays out of reach](/diagrams/workload-least-privilege.svg?v=2)
## Identity first, RBAC second
+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 {