From 58bdceb326115ea50a160ecb49b28d2b7ea83a6d Mon Sep 17 00:00:00 2001 From: Warren Date: Sat, 31 Oct 2026 16:29:20 -0500 Subject: [PATCH] Give the circle slide box a scrim its centred text can be read on shape="circle" dropped the image variant's foot scrim (the text is in the middle of the disc, not at its foot) and put a flat 0.35 tint over the whole front instead. On the demo's coast card the white title and line sat on the sand at 2.4:1, measured from the rendered pixels; the text needs 4.5:1 and the 19.2px bold title 3:1. The circle's ::after now carries the scrim: a radial tint, 0.62 to 55% of the radius and 0.38 at the rim, so the middle is dark enough for the text and the rim still shows the photo. --slb-scrim overrides it there as it does the foot gradient on a rectangle; the header comment and the catalog note say a circle wants a radial or flat value. Measured on the demo after: title and text 5.23:1 at the worst pixel. The ridge card is untouched (8.06:1 / 8.75:1). Co-Authored-By: Claude Fable 5.1 --- src/data/catalog.ts | 2 +- src/library/slide-box/SlideBox.astro | 9 +++++++-- 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/src/data/catalog.ts b/src/data/catalog.ts index 3e85481..7fec5e0 100644 --- a/src/data/catalog.ts +++ b/src/data/catalog.ts @@ -1827,7 +1827,7 @@ import { analytics } from '../data/site'; { name: '--slb-fade', fallback: '200ms', note: 'The crossfade under reduced motion.' }, { name: '--slb-focus', fallback: 'var(--slb-accent)', note: 'Focus ring round the card.' }, { name: '--slb-image-fg', fallback: '#fff', note: 'variant="image": text over the photo and on its tinted back.' }, - { name: '--slb-scrim', fallback: 'linear-gradient(to top, rgb(20 24 40 / 0.45), rgb(20 24 40 / 0.3) 60%, transparent)', note: 'variant="image": behind the front’s title, for 4.5:1 over the photo. Measure it per image and set it on each tile; the fallback is a starting point, not an answer (latlonguas.com’s four photos needed 0.19–0.33).' }, + { name: '--slb-scrim', fallback: 'linear-gradient(to top, rgb(20 24 40 / 0.45), rgb(20 24 40 / 0.3) 60%, transparent)', note: 'variant="image": behind the front’s title, for 4.5:1 over the photo. Measure it per image and set it on each tile; the fallback is a starting point, not an answer (latlonguas.com’s four photos needed 0.19–0.33). On shape="circle" it fills the disc instead, with its own fallback (a radial tint, 0.62 under the centred text, 0.38 at the rim); set a radial gradient or a flat colour there, not a foot gradient.' }, { name: '--slb-image-back-bg', fallback: 'rgb(20 24 40 / 0.86)', note: 'variant="image": the tint that slides in over the photo.' }, { name: '--slb-image-height', fallback: '16rem', note: 'variant="image": the card’s floor.' }, ], diff --git a/src/library/slide-box/SlideBox.astro b/src/library/slide-box/SlideBox.astro index 59fe737..a4cc5e5 100644 --- a/src/library/slide-box/SlideBox.astro +++ b/src/library/slide-box/SlideBox.astro @@ -30,7 +30,10 @@ * * The image variant's scrim. Measure `--slb-scrim` for each photo and set it on that tile; never * reuse one dark value. The fallback (0.45 at the foot) is only a starting point: on - * latlonguas.com four real photos needed 0.19–0.33, and 0.85 buried them. + * latlonguas.com four real photos needed 0.19–0.33, and 0.85 buried them. A circle's text sits + * in the middle of the disc, so its scrim fills the disc instead (the fallback is a radial + * tint, darkest under the text); `--slb-scrim` overrides it there too, as a radial gradient or a + * flat colour, not a foot gradient. * * Sizing. Both panels share one grid cell, so the card is as tall as the taller panel and * neither is cut off; there is no fixed height. The host's grid sets the width. @@ -530,11 +533,13 @@ locals.__slideBoxScript = true; .slb--circle[data-ready].slb--image .slb__front { align-content: center; } + /* The circle's scrim fills the disc, darkest under the centred text. --slb-scrim overrides it + here as well; a circle wants a radial or a flat value, not the foot gradient. */ .slb--circle[data-ready].slb--image .slb__front::after { content: ''; position: absolute; inset: 0; - background: rgb(20 24 40 / 0.35); + background: var(--slb-scrim, radial-gradient(closest-side, rgb(20 24 40 / 0.62) 55%, rgb(20 24 40 / 0.38))); } .slb--circle[data-ready] .slb__front .slb__body { position: relative;