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> <figure class="diagram" data-reveal>
<img <img
class="diagram__svg" class="diagram__svg"
src={`/diagrams/${name}.svg`} src={`/diagrams/${name}.svg?v=2`}
alt={cap ?? `${name} architecture diagram`} alt={cap ?? `${name} architecture diagram`}
loading="lazy" loading="lazy"
decoding="async" 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. 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 ## 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*. 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 ## 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 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. 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 ## Identity first, RBAC second
+19 -9
View File
@@ -409,23 +409,33 @@ svg {
); );
} }
[data-theme="light"] .site-bg__scrim { [data-theme="light"] .site-bg__scrim {
/* Light mode needs a much heavier wash than dark — the sandstone board has /* Moderate wash — the board stays clearly visible; text legibility comes from
bright AND mid-tone areas that wreck text contrast. Keep it a faint ghost a light halo behind the type (see below), not from hiding the backdrop. */
behind content (dark mode stays the showcase). */
background: background:
linear-gradient( linear-gradient(
90deg, 90deg,
rgba(246, 248, 251, 0.96) 0%, rgba(246, 248, 251, 0.8) 0%,
rgba(246, 248, 251, 0.9) 50%, rgba(246, 248, 251, 0.54) 48%,
rgba(246, 248, 251, 0.86) 100% rgba(246, 248, 251, 0.44) 100%
), ),
linear-gradient( linear-gradient(
180deg, 180deg,
rgba(246, 248, 251, 0.5) 0%, rgba(246, 248, 251, 0.28) 0%,
rgba(246, 248, 251, 0.66) 55%, rgba(246, 248, 251, 0.48) 55%,
rgba(246, 248, 251, 0.9) 100% 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) { @media (prefers-reduced-motion: reduce) {
.scroll-progress { .scroll-progress {