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

Placeholder: settle on the clean flat word

Browse Source 
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
jay
2026-06-07 15:23:20 -04:00
parent b9168b56ea
commit 224a95d64a
1 changed files with 5 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/lib/components/ArticleCard.svelte
+5 -18
View File
@@ -293,27 +293,14 @@
/* 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. */
.tile .media.placeholder {
position: relative; display: flex; align-items: center; justify-content: center;
text-decoration: none;
/* Flat fill in the card's topic color — no gradient. */
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);
display: flex; align-items: center; justify-content: center; text-decoration: none;
/* Flat fill in the card's topic color. */
background: color-mix(in srgb, var(--c) 14%, var(--surface));
}
.tile .media.placeholder .ph-word {
position: relative; z-index: 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
before, so health vs environment are easy to tell apart). */
/* A deep shade of the topic color so the word reads clearly (health vs
environment easy to tell apart). */
color: color-mix(in srgb, var(--c) 64%, var(--ink)); opacity: 0.92;
text-transform: lowercase; letter-spacing: -0.01em;
}