From 3a09d0e354a7b798e7e877380b7bbfe04fb550fc Mon Sep 17 00:00:00 2001 From: khannurien Date: Thu, 24 Sep 2026 19:53:39 +0000 Subject: [PATCH] =?UTF-8?q?v3:=20a=20journal=20headline=20stays=20readable?= =?UTF-8?q?=20when=20you=20point=20at=20it=20=E2=80=94=20over=20an=20image?= =?UTF-8?q?=20card=20the=20title=20rests=20white=20on=20the=20scrim=20and?= =?UTF-8?q?=20hovers=20in=20the=20theme's=20accent,=20which=20over=20a=20b?= =?UTF-8?q?usy=20or=20bright=20thumbnail=20could=20sink=20into=20the=20pic?= =?UTF-8?q?ture,=20and=20in=20nyt's=20light=20scheme=20went=20black=20on?= =?UTF-8?q?=20black.=20A=20hovered=20title=20now=20picks=20up=20a=20backin?= =?UTF-8?q?g=20plate=20of=20its=20own,=20grown=20around=20the=20text=20by?= =?UTF-8?q?=20padding=20that=20an=20equal=20negative=20margin=20cancels,?= =?UTF-8?q?=20so=20nothing=20shifts,=20and=20hugging=20the=20headline=20ra?= =?UTF-8?q?ther=20than=20spanning=20the=20card.=20The=20plate=20is=20a=20d?= =?UTF-8?q?ark=20glass=20by=20default=20and=20each=20theme=20reskins=20it?= =?UTF-8?q?=20through=20--journal-title-hover-*=20properties:=20smooth=20f?= =?UTF-8?q?rosts=20it=20in=20page=20colour=20so=20terracotta=20on=20cream?= =?UTF-8?q?=20and=20jasmine=20on=20Prussian=20Blue=20stay=20the=20pairs,?= =?UTF-8?q?=20kanagawa=20sets=20it=20on=20sumiInk=20with=20a=20selection?= =?UTF-8?q?=20edge,=20nyt=20in=20square=20flat=20ink,=20brutalist=20as=20a?= =?UTF-8?q?=20solid=20accent=20stamp=20with=20a=20hard=20offset=20shadow,?= =?UTF-8?q?=20geocities=20as=20a=20neon=20marquee,=20melange=20as=20a=20co?= =?UTF-8?q?ffee=20pillow=20in=20warm=20shadow.=20nyt's=20unread=20dot,=20i?= =?UTF-8?q?nked=20in=20the=20theme's=20black=20accent,=20goes=20white=20ov?= =?UTF-8?q?er=20a=20photo=20too.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Claude Opus 5.5 --- src/App.css | 31 ++++++++++++++++++++++++++++++- src/themes/brutalist.css | 10 ++++++++++ src/themes/geocities.css | 10 ++++++++++ src/themes/kanagawa.css | 10 ++++++++-- src/themes/melange.css | 10 ++++++++++ src/themes/nyt.css | 12 +++++++++++- src/themes/smooth.css | 14 ++++++++++++++ 7 files changed, 93 insertions(+), 4 deletions(-) diff --git a/src/App.css b/src/App.css index 7dade3c1..0c1cc20f 100644 --- a/src/App.css +++ b/src/App.css @@ -5920,11 +5920,40 @@ body.has-player .chat-fab { ); } +/* The scrim is tuned for white ink at rest; the hover colour is whatever the + theme's accent is, which over a busy or bright thumbnail can sink into it. + So a pointed-at title picks up a backing of its own — a dark glass plate by + default, reskinned per theme through the --journal-title-hover-* props. The + padding is always there and cancelled by an equal negative margin, so the + plate grows around the text instead of shifting it; `align-self` keeps it + hugging the headline rather than spanning the whole card. */ .journal-card--image .journal-card-title { + --journal-title-hover-pad-y: 0.12em; + --journal-title-hover-pad-x: 0.35em; + --journal-title-hover-bg: rgb(0 0 0 / 0.66); + --journal-title-hover-color: var(--color-accent); + --journal-title-hover-radius: var(--radius-sm); + --journal-title-hover-shadow: none; + --journal-title-hover-filter: none; + --journal-title-hover-text-shadow: none; + align-self: flex-start; + max-width: calc(100% + 2 * var(--journal-title-hover-pad-x)); + padding: var(--journal-title-hover-pad-y) var(--journal-title-hover-pad-x); + margin: calc(-1 * var(--journal-title-hover-pad-y)) + calc(-1 * var(--journal-title-hover-pad-x)); + border-radius: var(--journal-title-hover-radius); color: #fff; + transition: + color var(--dur-base), + background-color var(--dur-base), + box-shadow var(--dur-base); } .journal-card--image .journal-card-title:hover { - color: var(--color-accent); + color: var(--journal-title-hover-color); + background-color: var(--journal-title-hover-bg); + box-shadow: var(--journal-title-hover-shadow); + backdrop-filter: var(--journal-title-hover-filter); + text-shadow: var(--journal-title-hover-text-shadow); } .journal-card--image .journal-card-meta { color: rgba(255, 255, 255, 0.78); diff --git a/src/themes/brutalist.css b/src/themes/brutalist.css index 89bb8b14..fb798b2d 100644 --- a/src/themes/brutalist.css +++ b/src/themes/brutalist.css @@ -190,6 +190,16 @@ --journal-break-rule: 2px solid var(--color-border); } +/* A pointed-at headline over a photo becomes a label slapped on it: a solid + accent block, hard offset shadow, no glass — the same stamp every button + here is made of. */ +[data-style="brutalist"] .journal-card--image .journal-card-title { + --journal-title-hover-bg: var(--color-accent); + --journal-title-hover-color: var(--color-on-accent); + --journal-title-hover-radius: 0; + --journal-title-hover-shadow: 3px 3px 0 var(--color-text); +} + /* ── Dump post detail header ─────────────────────────────────────── */ [data-style="brutalist"] .dump-post-header { border: 2px solid var(--color-border); diff --git a/src/themes/geocities.css b/src/themes/geocities.css index 9184487a..602a00c4 100644 --- a/src/themes/geocities.css +++ b/src/themes/geocities.css @@ -268,6 +268,16 @@ box-shadow: 0 0 16px color-mix(in srgb, var(--color-accent) 75%, transparent); } +/* A pointed-at headline over a photo lights up like a marquee: neon yellow + on a black plate, ringed and glowing in the accent. */ +[data-style="geocities"] .journal-card--image .journal-card-title { + --journal-title-hover-bg: rgb(0 0 0 / 0.82); + --journal-title-hover-color: #ffff00; + --journal-title-hover-shadow: 0 0 0 2px var(--color-accent), + 0 0 10px var(--color-accent); + --journal-title-hover-text-shadow: 0 0 6px rgb(255 255 0 / 0.6); +} + /* The divider GIF, minus the GIF: the rainbow the header ends on, run again between sub-blocks with a sparkle sitting in the middle of it. */ [data-style="geocities"] .journal-break { diff --git a/src/themes/kanagawa.css b/src/themes/kanagawa.css index 4d2bf980..c6411d55 100644 --- a/src/themes/kanagawa.css +++ b/src/themes/kanagawa.css @@ -161,8 +161,14 @@ } /* ── On the scrim, links hover in the dark scheme's blue ─────────── */ -[data-style="kanagawa"] .journal-card--image .journal-card-title:hover { - color: var(--kngw-accent-on-photo); +/* …on a plate of sumiInk, the Wave page itself, in either scheme: the blue + is the dark scheme's, so its ground has to be too. Square-ish, like the + selection block an editor draws behind a match. */ +[data-style="kanagawa"] .journal-card--image .journal-card-title { + --journal-title-hover-color: var(--kngw-accent-on-photo); + --journal-title-hover-bg: rgb(31 31 40 / 0.86); + --journal-title-hover-radius: var(--radius-xs); + --journal-title-hover-shadow: inset 2px 0 0 var(--kngw-accent-on-photo); } [data-style="kanagawa"] diff --git a/src/themes/melange.css b/src/themes/melange.css index 3438df02..62e3df15 100644 --- a/src/themes/melange.css +++ b/src/themes/melange.css @@ -314,6 +314,16 @@ color: var(--mel-dust); } +/* A pointed-at headline over a photo sits on a pillow of roasted coffee — + the dark scheme's ground in either scheme, since the scrim under it is + dark in both — lit in the dark scheme's amber, in warm shadow. */ +[data-style="melange"] .journal-card--image .journal-card-title { + --journal-title-hover-bg: rgb(41 37 34 / 0.84); + --journal-title-hover-color: #ebc06d; + --journal-title-hover-radius: var(--radius-sm); + --journal-title-hover-shadow: 0 4px 14px -4px rgb(0 0 0 / 0.5); +} + /* ── A quote is a printed pull-quote: big soft mark, terracotta ──── */ [data-style="melange"] .journal-card--quote { background: var(--color-surface); diff --git a/src/themes/nyt.css b/src/themes/nyt.css index 8b7e2743..eadff0e3 100644 --- a/src/themes/nyt.css +++ b/src/themes/nyt.css @@ -131,8 +131,18 @@ } /* …except over a photo, where the headline is white on a dark scrim: ink there goes black-on-black in the light scheme. */ +[data-style="nyt"] .journal-card--image .journal-card-title { + --journal-title-hover-color: #fff; + /* A caption box set in solid ink — square, flat, no glass. */ + --journal-title-hover-bg: rgb(0 0 0 / 0.8); + --journal-title-hover-radius: 0; +} [data-style="nyt"] .journal-card--image .journal-card-title:hover { - color: #fff; + color: var(--journal-title-hover-color); +} +/* The accent is ink, so over the photo the unread dot goes white with it. */ +[data-style="nyt"] .journal-card--image .unread-dot { + background: #fff; } /* Over a playable thumb the card's "open" cue stands down (see App.css). */ [data-style="nyt"] diff --git a/src/themes/smooth.css b/src/themes/smooth.css index 0e480744..af653ba2 100644 --- a/src/themes/smooth.css +++ b/src/themes/smooth.css @@ -99,3 +99,17 @@ --btn-primary-shadow: var(--shadow-1); --btn-primary-shadow-hover: var(--shadow-1); } + +/* A pointed-at journal headline sits on frosted page colour rather than on + black glass: terracotta on cream and jasmine on Prussian Blue are the + pairs this palette was picked for, where the accent on a black plate + would lose the light scheme's terracotta. */ +:root:not([data-style]) .journal-card--image .journal-card-title, +[data-style="smooth"] .journal-card--image .journal-card-title { + --journal-title-hover-bg: light-dark( + rgb(255 253 248 / 0.9), + rgb(1 21 42 / 0.78) + ); + --journal-title-hover-radius: var(--radius-md); + --journal-title-hover-filter: blur(6px); +}