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

Brief cards: drop "why" for more summary; flat placeholder, darker word

Browse Source 
Per review: the summary and the "Why it's here" line were competing in a tight
card and both came up short. Remove "why" from cards (it still appears on the
article page when clicked in) and give the summary the room (image cards 2→4
lines). Also flatten the placeholder banner — solid topic-color tint instead of
a gradient-to-blank, with the topic word in a deep near-black shade of that
color so it reads clearly instead of washed out.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
jay
2026-06-07 13:59:53 -04:00
parent d472b63cbf
commit e41fcf6cea
1 changed files with 7 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/lib/components/ArticleCard.svelte
+7 -11
View File
@@ -136,10 +136,6 @@
<p class="paywall">May need a subscription to read</p> <p class="paywall">May need a subscription to read</p>
{/if} {/if}
{#if article.reason_text}
<p class="why">{article.reason_text}</p>
{/if}
<div class="actions"> <div class="actions">
{#if auth.user} {#if auth.user}
<button class="save" class:on={isSaved} onclick={() => toggleSave(article.id)} <button class="save" class:on={isSaved} onclick={() => toggleSave(article.id)}
@@ -302,20 +298,20 @@
(--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; display: flex; align-items: center; justify-content: center; text-decoration: none;
background: /* Flat fill in the card's topic color — no gradient. */
radial-gradient(130% 150% at 0% 0%, color-mix(in srgb, var(--c) 26%, transparent), transparent 62%), background: color-mix(in srgb, var(--c) 14%, var(--surface));
linear-gradient(135deg, color-mix(in srgb, var(--c) 13%, var(--surface)), var(--surface));
} }
.tile .media.placeholder .ph-word { .tile .media.placeholder .ph-word {
font-family: var(--serif); font-size: 2rem; line-height: 1; font-family: var(--serif); font-size: 2rem; line-height: 1;
color: var(--c); opacity: 0.34; text-transform: lowercase; letter-spacing: -0.01em; /* A deep, near-black shade of the topic color so the word reads clearly. */
color: color-mix(in srgb, var(--c) 55%, var(--ink)); opacity: 0.9;
text-transform: lowercase; letter-spacing: -0.01em;
} }
/* 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; }
/* Every thumb card carries a banner, so trim the summary to keep total height /* The "why" now lives only on the article page, so the summary gets the room. */
compact and uniform across the grid. */ .tile.hasthumb .summary { -webkit-line-clamp: 4; }
.tile.hasthumb .summary { -webkit-line-clamp: 2; }
/* ---- Typographic editorial tile (every non-hero card) ---- */ /* ---- Typographic editorial tile (every non-hero card) ---- */
.tile { position: relative; } .tile { position: relative; }