From 224a95d64a0e70d9dec04597fd725af5998c81d7 Mon Sep 17 00:00:00 2001 From: jay Date: Sun, 7 Jun 2026 15:23:20 -0400 Subject: [PATCH] Placeholder: settle on the clean flat word Co-Authored-By: Claude Opus 4.8 (1M context) --- .../src/lib/components/ArticleCard.svelte | 23 ++++--------------- 1 file changed, 5 insertions(+), 18 deletions(-) diff --git a/frontend/src/lib/components/ArticleCard.svelte b/frontend/src/lib/components/ArticleCard.svelte index 54db20e..887bfd0 100644 --- a/frontend/src/lib/components/ArticleCard.svelte +++ b/frontend/src/lib/components/ArticleCard.svelte @@ -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; }