ui: keep the board visible in light mode + bust diagram cache
build-and-deploy / build (push) Failing after 14m43s
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:
@@ -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"
|
||||||
|
|||||||
@@ -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.
|
||||||
|
|
||||||

|

|
||||||
|
|
||||||
## Enforce the second factor at the flow, not per app
|
## Enforce the second factor at the flow, not per app
|
||||||
|
|
||||||
|
|||||||
@@ -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*.
|
||||||
|
|
||||||

|

|
||||||
|
|
||||||
## The tunnel dials out
|
## The tunnel dials out
|
||||||
|
|
||||||
|
|||||||
@@ -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.
|
||||||
|
|
||||||

|

|
||||||
|
|
||||||
## Identity first, RBAC second
|
## Identity first, RBAC second
|
||||||
|
|
||||||
|
|||||||
+19
-9
@@ -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 {
|
||||||
|
|||||||
Reference in New Issue
Block a user