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.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user