vincent/gerbeur
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v3: a journal headline stays readable when you point at it — over an image card the title rests white on the scrim and hovers in the theme's accent, which over a busy or bright thumbnail could sink into the picture, and in nyt's light scheme went black on black. A hovered title now picks up a backing plate of its own, grown around the text by padding that an equal negative margin cancels, so nothing shifts, and hugging the headline rather than spanning the card. The plate is a dark glass by default and each theme reskins it through --journal-title-hover-* properties: smooth frosts it in page colour so terracotta on cream and jasmine on Prussian Blue stay the pairs, kanagawa sets it on sumiInk with a selection edge, nyt in square flat ink, brutalist as a solid accent stamp with a hard offset shadow, geocities as a neon marquee, melange as a coffee pillow in warm shadow. nyt's unread dot, inked in the theme's black accent, goes white over a photo too.

Browse Source 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
khannurien
2026-09-24 19:53:39 +00:00
parent c7ce31c1bd
commit 3a09d0e354
7 changed files with 93 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
src/App.css
View File

@@ -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);