thejayman77/upbeatBytes
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Placeholder: revert drop-cap; add soft orb+ring graphic motif

Browse Source 
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
jay
2026-06-07 15:21:17 -04:00
parent 6435840966
commit b9168b56ea
1 changed files with 15 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/lib/components/ArticleCard.svelte
+15 -6
View File
@@ -293,21 +293,30 @@
/* Image-less cards get a calm placeholder banner in the card's topic color /* Image-less cards get a calm placeholder banner in the card's topic color
(--c), so every card in the grid is the same size — uniform, not lacking. */ (--c), so every card in the grid is the same size — uniform, not lacking. */
.tile .media.placeholder { .tile .media.placeholder {
display: flex; align-items: center; justify-content: center; text-decoration: none; position: relative; display: flex; align-items: center; justify-content: center;
text-decoration: none;
/* Flat fill in the card's topic color — no gradient. */ /* Flat fill in the card's topic color — no gradient. */
background: color-mix(in srgb, var(--c) 14%, var(--surface)); background: color-mix(in srgb, var(--c) 12%, var(--surface));
}
/* A soft topic-colored orb + ring rising in the corner — a calm graphic motif
behind the word, so the card reads designed rather than plain. */
.tile .media.placeholder::before {
content: ''; position: absolute; right: -20px; bottom: -24px; width: 92px; height: 92px;
border-radius: 50%;
background: radial-gradient(circle, color-mix(in srgb, var(--c) 24%, transparent) 0 62%, transparent 63%);
}
.tile .media.placeholder::after {
content: ''; position: absolute; right: -44px; bottom: -48px; width: 132px; height: 132px;
border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--c) 22%, transparent);
} }
.tile .media.placeholder .ph-word { .tile .media.placeholder .ph-word {
position: relative; z-index: 1;
font-family: var(--serif); font-size: 2rem; line-height: 1; font-family: var(--serif); font-size: 2rem; line-height: 1;
/* A deep shade of the topic color so the word reads clearly (more hue than /* A deep shade of the topic color so the word reads clearly (more hue than
before, so health vs environment are easy to tell apart). */ before, so health vs environment are easy to tell apart). */
color: color-mix(in srgb, var(--c) 64%, var(--ink)); opacity: 0.92; color: color-mix(in srgb, var(--c) 64%, var(--ink)); opacity: 0.92;
text-transform: lowercase; letter-spacing: -0.01em; text-transform: lowercase; letter-spacing: -0.01em;
} }
/* A fancy drop-cap initial: bold, capitalized, and notably larger. */
.tile .media.placeholder .ph-word::first-letter {
text-transform: uppercase; font-weight: 800; font-size: 1.9em;
}
/* A thumb card's banner carries the topic identity, so drop the faint corner /* A thumb card's banner carries the topic identity, so drop the faint corner
watermark there to avoid a doubled word. */ watermark there to avoid a doubled word. */
.tile.hasthumb::after { display: none; } .tile.hasthumb::after { display: none; }