From 4211223e1ce30c0ca5023c4b21dabea33ba7c477 Mon Sep 17 00:00:00 2001
From: jay <thejayman77@gmail.com>
Date: Mon, 1 Jun 2026 21:25:31 +0000
Subject: [PATCH] Color-code the card accent by topic + more breathing room
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- The accent line is now tinted by the article's primary topic (muted sand/sea/sun
  tones), adding quiet variety across the grid. Falls back to the brand azure for
  unknown/untagged topics.
- Raise the card-header height (84→94px) so the centered pills sit comfortably
  clear of the accent line and divider.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 frontend/src/lib/components/ArticleCard.svelte | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/frontend/src/lib/components/ArticleCard.svelte b/frontend/src/lib/components/ArticleCard.svelte
index 4809952..c729bb6 100644
--- a/frontend/src/lib/components/ArticleCard.svelte
+++ b/frontend/src/lib/components/ArticleCard.svelte
@@ -8,6 +8,20 @@
     (article.tags?.length ? article.tags : article.topic ? [article.topic] : []).slice(0, 3)
   );
 
+  // The accent line is color-coded by primary topic — a quiet bit of variety
+  // across the grid. Muted tones in the sand/sea/sun family; calm, not loud.
+  const TOPIC_COLOR = {
+    science: '#0083ad',     // azure (sea)
+    technology: '#5f72a8',  // muted indigo
+    environment: '#3f9070', // soft green
+    health: '#3aa6a0',      // calm teal
+    community: '#c79a3a',   // warm gold
+    culture: '#c4795a',     // terracotta
+    animals: '#9a8246',     // earthy tan
+    learning: '#8a6da3',    // soft violet
+  };
+  let accentColor = $derived(TOPIC_COLOR[article.topic] ?? 'var(--accent)');
+
   // Reset image-failure when the article changes (cards swap in place).
   let failed = $state(false);
   $effect(() => {
@@ -41,7 +55,7 @@
 
   <div class="body">
     <div class="cardhead">
-      <span class="accent"></span>
+      <span class="accent" style="background:{accentColor}"></span>
       <div class="pillrow">
         {#each pills as t, i (t)}
           {#if ontag}
@@ -112,7 +126,7 @@
      divider). The accent is the top grid row; the pill row centers in the rest,
      giving even margins for 1-, 2-, and 3-pill cards with everything aligned. */
   .tile .cardhead {
-    display: grid; grid-template-rows: 3px 1fr; height: 84px;
+    display: grid; grid-template-rows: 3px 1fr; height: 94px;
     padding-top: 18px; border-bottom: 1px solid var(--line);
   }
   .tile .accent {