From 1ec00ea6dc2ab8e8fc5431d047d4a7bc700f4cd4 Mon Sep 17 00:00:00 2001
From: Claude Code <claude@anthropic.com>
Date: Fri, 1 May 2026 16:57:38 +0800
Subject: [PATCH] redesign: dark premium retro + cover-image card listings
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replaces the earlier light editorial pass with a darker premium retro
aesthetic for hype404 specifically:

- Warm near-black bg (#0d0c0a) with subtle radial-gradient phosphor
  tint, cream ink (#ebe2cd)
- Phosphor lime accent (#b8e25a) for brand mark, drop cap, code, tag
  hover (CRT/terminal nod, restrained — not the harsh #00ff66)
- Hot magenta secondary (#f43f8c) for "Top story" flag, blockquote
  rule, drop cap (Y2K Wired-magazine vibe)
- Cyan-leaning links (#7cd1ff)
- Same Fraunces serif headlines + Inter body + JetBrains Mono code
- No scanlines, no glitch, no marquee, no [LOG] tags

Listing pages now use a magazine-style hero card (top story, 1.1:1
image+text grid, 36px headline) + image-row cards for the rest.
Each row has a 220px cover thumb on the left, body on the right.
Posts without images render text-only (CSS :has() fallback). Cover
extracted via raw-markdown regex (no full render needed).

Subtle scroll-reveal animation: cards fade+lift into view via
IntersectionObserver, gracefully skips when unsupported.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/components/PostList.astro | 102 +++++++++--
 src/layouts/Layout.astro      | 335 +++++++++++++++++++++++++++-------
 2 files changed, 358 insertions(+), 79 deletions(-)

diff --git a/src/components/PostList.astro b/src/components/PostList.astro
index 63431ff..70d82a3 100644
--- a/src/components/PostList.astro
+++ b/src/components/PostList.astro
@@ -1,23 +1,93 @@
 ---
 const { posts, tag } = Astro.props;
----
-{tag && <h2 style="margin-bottom: 20px;">Tagged: {tag}</h2>}
 
-{posts.map((post) => (
-  <article class="post">
-    <h2 class="post-title">
-      <a href={`/${post.slug}/`}>{post.title}</a>
-    </h2>
-    <div class="post-meta">
-      {new Date(post.date).toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' })}
-      {post.tags.map((t) => (
-        <span class="tag"><a href={`/tag/${t}/`}>{t}</a></span>
-      ))}
-    </div>
-    <p class="post-excerpt">{post.rawExcerpt}</p>
+// Extract first cover image directly from the raw markdown body.
+// Cheap regex — avoids rendering the full HTML for each card.
+function firstImage(body) {
+  const m = body && body.match(/!\[[^\]]*\]\((\/images\/[^)]+)\)/);
+  return m ? m[1] : null;
+}
+
+const enriched = posts.map((p) => ({
+  ...p,
+  cover: firstImage(p.body),
+}));
+const hero = enriched[0];
+const rest = enriched.slice(1);
+
+const fmt = (d) => new Date(d).toLocaleDateString('en-US',
+  { year: 'numeric', month: 'long', day: 'numeric' });
+---
+{tag && (
+  <h2 class="tag-banner">
+    Tagged: <em>{tag}</em>
+  </h2>
+)}
+
+{enriched.length > 0 && !tag && hero && (
+  <article class="post-hero" data-reveal>
+    <a class="post-hero-link" href={`/${hero.slug}/`}>
+      {hero.cover && (
+        <div class="post-hero-img">
+          <img src={hero.cover} alt="" loading="eager" />
+        </div>
+      )}
+      <div class="post-hero-body">
+        <div class="post-hero-flag">Top story</div>
+        <h2 class="post-hero-title">{hero.title}</h2>
+        <p class="post-hero-excerpt">{hero.rawExcerpt}</p>
+        <div class="post-hero-meta">
+          <span>{fmt(hero.date)}</span>
+          {hero.tags.slice(0, 4).map((t) => (
+            <span class="post-hero-tag"><a href={`/tag/${t}/`}>{t}</a></span>
+          ))}
+        </div>
+      </div>
+    </a>
+  </article>
+)}
+
+{(tag ? enriched : rest).map((post, i) => (
+  <article class="post-row" data-reveal style={`animation-delay:${Math.min(i * 50, 500)}ms`}>
+    <a class="post-row-link" href={`/${post.slug}/`}>
+      {post.cover && (
+        <div class="post-row-img">
+          <img src={post.cover} alt="" loading="lazy" />
+        </div>
+      )}
+      <div class="post-row-body">
+        <h3 class="post-row-title">{post.title}</h3>
+        <p class="post-row-excerpt">{post.rawExcerpt}</p>
+        <div class="post-row-meta">
+          <time>{fmt(post.date)}</time>
+          {post.tags.slice(0, 3).map((t) => (
+            <span class="post-row-tag"><a href={`/tag/${t}/`}>{t}</a></span>
+          ))}
+        </div>
+      </div>
+    </a>
   </article>
 ))}
 
-{posts.length === 0 && (
-  <p style="color: #999; text-align: center; padding: 50px 0;">No posts yet.</p>
+{enriched.length === 0 && (
+  <p class="post-empty">No posts yet.</p>
 )}
+
+<script is:inline>
+(() => {
+  const els = document.querySelectorAll('[data-reveal]');
+  if (!('IntersectionObserver' in window)) {
+    els.forEach((e) => e.classList.add('is-visible'));
+    return;
+  }
+  const obs = new IntersectionObserver((entries) => {
+    for (const e of entries) {
+      if (e.isIntersecting) {
+        e.target.classList.add('is-visible');
+        obs.unobserve(e.target);
+      }
+    }
+  }, { rootMargin: '0px 0px -10% 0px', threshold: 0.05 });
+  els.forEach((e) => obs.observe(e));
+})();
+</script>
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index e073901..d84b74f 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -46,21 +46,25 @@ const year = new Date().getFullYear();
 
   <link rel="preconnect" href="https://fonts.googleapis.com" />
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-  <link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700;9..144,800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700;9..144,800;9..144,900&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
 
   <style is:global>
     :root {
-      --bg: #fbfaf6;
-      --bg-card: #ffffff;
-      --bg-soft: #f4f1ea;
-      --ink: #16161a;
-      --ink-soft: #4b4b52;
-      --ink-muted: #84848d;
-      --line: #e7e3d6;
-      --accent: #e85d3c;
-      --accent-soft: #fbe4dc;
-      --link: #1f4ddb;
-      --link-hover: #102a8c;
+      --bg: #0d0c0a;
+      --bg-elev: #16140f;
+      --bg-card: #1a1714;
+      --bg-soft: #221e1a;
+      --ink: #ebe2cd;
+      --ink-soft: #b6ad97;
+      --ink-muted: #7a7363;
+      --line: #2c2722;
+      --line-strong: #3a342d;
+      --accent: #b8e25a;
+      --accent-soft: rgba(184, 226, 90, 0.14);
+      --magenta: #f43f8c;
+      --magenta-soft: rgba(244, 63, 140, 0.18);
+      --link: #7cd1ff;
+      --link-hover: #a9e0ff;
     }
 
     * { margin: 0; padding: 0; box-sizing: border-box; }
@@ -77,12 +81,15 @@ const year = new Date().getFullYear();
       font-size: 17px;
       line-height: 1.65;
       color: var(--ink);
-      background: var(--bg);
+      background:
+        radial-gradient(circle at 12% -8%, rgba(184, 226, 90, 0.06) 0%, transparent 40%),
+        radial-gradient(circle at 92% 6%, rgba(244, 63, 140, 0.06) 0%, transparent 42%),
+        var(--bg);
       min-height: 100vh;
     }
 
     .container {
-      max-width: 1100px;
+      max-width: 1180px;
       margin: 0 auto;
       padding: 0 28px;
     }
@@ -104,7 +111,7 @@ const year = new Date().getFullYear();
     .ascii-brand {
       font-family: 'Fraunces', 'Times New Roman', serif;
       font-weight: 800;
-      font-size: 38px;
+      font-size: 40px;
       letter-spacing: -0.02em;
       color: var(--ink);
       line-height: 1;
@@ -120,70 +127,263 @@ const year = new Date().getFullYear();
       font-style: italic;
       font-size: 16px;
       margin-top: 6px;
-      max-width: 520px;
+      max-width: 560px;
       font-variation-settings: 'opsz' 14;
     }
     nav.nav {
       display: flex;
-      gap: 24px;
-      font-size: 14px;
+      gap: 26px;
+      font-size: 13px;
       font-weight: 500;
+      text-transform: uppercase;
+      letter-spacing: 0.08em;
     }
     nav.nav a {
       color: var(--ink-soft);
       text-decoration: none;
-      letter-spacing: 0.02em;
       transition: color 0.15s;
     }
     nav.nav a:hover { color: var(--accent); }
 
     main { padding: 0 0 64px; }
 
-    /* ========== Index post cards ========== */
+    /* ========== Reveal animation for cards ========== */
+    [data-reveal] {
+      opacity: 0;
+      transform: translateY(12px);
+      transition: opacity 0.6s ease, transform 0.6s ease;
+    }
+    [data-reveal].is-visible {
+      opacity: 1;
+      transform: translateY(0);
+    }
+
+    /* ========== Tag banner (tag listing pages) ========== */
+    .tag-banner {
+      font-family: 'Fraunces', serif;
+      font-weight: 600;
+      font-size: 24px;
+      color: var(--ink);
+      margin-bottom: 28px;
+      padding-bottom: 16px;
+      border-bottom: 1px solid var(--line);
+      font-variation-settings: 'opsz' 36;
+    }
+    .tag-banner em {
+      font-style: italic;
+      color: var(--accent);
+    }
+
+    /* ========== Hero card (top story on home) ========== */
+    .post-hero {
+      margin-bottom: 44px;
+      border-radius: 14px;
+      overflow: hidden;
+      background: var(--bg-card);
+      border: 1px solid var(--line);
+      transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
+    }
+    .post-hero:hover {
+      transform: translateY(-2px);
+      border-color: var(--line-strong);
+      box-shadow: 0 18px 48px -22px rgba(244, 63, 140, 0.22);
+    }
+    .post-hero-link {
+      display: grid;
+      grid-template-columns: 1.1fr 1fr;
+      text-decoration: none;
+      color: inherit;
+    }
+    .post-hero-img {
+      overflow: hidden;
+      background: var(--bg-soft);
+      min-height: 280px;
+    }
+    .post-hero-img img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      display: block;
+      transition: transform 0.6s ease;
+    }
+    .post-hero:hover .post-hero-img img { transform: scale(1.04); }
+    .post-hero-body {
+      padding: 36px 36px;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+    }
+    .post-hero-flag {
+      color: var(--magenta);
+      font-size: 11px;
+      font-weight: 700;
+      text-transform: uppercase;
+      letter-spacing: 0.16em;
+      margin-bottom: 12px;
+    }
+    .post-hero-title {
+      font-family: 'Fraunces', serif;
+      font-weight: 700;
+      font-size: clamp(26px, 3.5vw, 36px);
+      line-height: 1.12;
+      letter-spacing: -0.02em;
+      color: var(--ink);
+      margin-bottom: 14px;
+      font-variation-settings: 'opsz' 144;
+    }
+    .post-hero:hover .post-hero-title { color: var(--accent); }
+    .post-hero-excerpt {
+      color: var(--ink-soft);
+      font-size: 16px;
+      line-height: 1.6;
+      margin-bottom: 18px;
+    }
+    .post-hero-meta {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+      align-items: center;
+      color: var(--ink-muted);
+      font-size: 13px;
+      letter-spacing: 0.02em;
+    }
+    .post-hero-tag {
+      display: inline-block;
+      padding: 2px 10px;
+      border: 1px solid var(--line-strong);
+      border-radius: 999px;
+      color: var(--ink-soft);
+      font-size: 12px;
+    }
+    .post-hero-tag a { color: inherit; text-decoration: none; }
+
+    /* ========== Row cards (rest of feed) ========== */
+    .post-row {
+      background: var(--bg-card);
+      border: 1px solid var(--line);
+      border-radius: 12px;
+      margin-bottom: 16px;
+      overflow: hidden;
+      transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
+    }
+    .post-row:hover {
+      transform: translateY(-2px);
+      border-color: var(--line-strong);
+      box-shadow: 0 14px 36px -18px rgba(184, 226, 90, 0.18);
+    }
+    .post-row-link {
+      display: grid;
+      grid-template-columns: 220px 1fr;
+      text-decoration: none;
+      color: inherit;
+    }
+    .post-row-img {
+      overflow: hidden;
+      background: var(--bg-soft);
+      min-height: 100%;
+    }
+    .post-row-img img {
+      width: 100%;
+      height: 100%;
+      min-height: 160px;
+      object-fit: cover;
+      display: block;
+      transition: transform 0.5s ease;
+    }
+    .post-row:hover .post-row-img img { transform: scale(1.04); }
+    .post-row-body {
+      padding: 22px 26px;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+    }
+    /* When no cover, body spans the full row */
+    .post-row-link:has(.post-row-body:only-child) {
+      grid-template-columns: 1fr;
+    }
+    .post-row-title {
+      font-family: 'Fraunces', serif;
+      font-weight: 600;
+      font-size: 22px;
+      line-height: 1.22;
+      letter-spacing: -0.015em;
+      color: var(--ink);
+      margin-bottom: 8px;
+      font-variation-settings: 'opsz' 80;
+      transition: color 0.15s;
+    }
+    .post-row:hover .post-row-title { color: var(--accent); }
+    .post-row-excerpt {
+      color: var(--ink-soft);
+      font-size: 15px;
+      line-height: 1.55;
+      margin-bottom: 12px;
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+    }
+    .post-row-meta {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 8px;
+      align-items: center;
+      color: var(--ink-muted);
+      font-size: 12px;
+      letter-spacing: 0.02em;
+    }
+    .post-row-tag {
+      display: inline-block;
+      padding: 1px 9px;
+      background: var(--bg-soft);
+      border: 1px solid var(--line);
+      border-radius: 999px;
+      color: var(--ink-soft);
+      font-size: 11px;
+      font-weight: 500;
+    }
+    .post-row-tag a { color: inherit; text-decoration: none; }
+
+    .post-empty {
+      color: var(--ink-muted);
+      text-align: center;
+      padding: 80px 0;
+      font-size: 15px;
+    }
+
+    /* ========== Legacy .post / .tag (used by some pages) ========== */
     .post {
       background: var(--bg-card);
       border: 1px solid var(--line);
       border-radius: 12px;
-      padding: 28px 32px;
-      margin-bottom: 18px;
-      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
-    }
-    .post:hover {
-      transform: translateY(-2px);
-      box-shadow: 0 12px 32px -16px rgba(20, 20, 30, 0.18);
-      border-color: #d8d2c0;
+      padding: 26px 30px;
+      margin-bottom: 16px;
     }
     .post-title {
       font-family: 'Fraunces', serif;
       font-weight: 600;
-      font-size: 26px;
-      line-height: 1.2;
+      font-size: 24px;
+      line-height: 1.22;
       letter-spacing: -0.015em;
       margin-bottom: 8px;
       font-variation-settings: 'opsz' 80;
     }
-    .post-title a {
-      color: var(--ink);
-      text-decoration: none;
-    }
+    .post-title a { color: var(--ink); text-decoration: none; }
     .post-title a:hover { color: var(--accent); }
     .post-meta {
       color: var(--ink-muted);
       font-size: 13px;
-      letter-spacing: 0.02em;
       margin-bottom: 12px;
       display: flex;
       flex-wrap: wrap;
-      align-items: center;
       gap: 8px;
+      align-items: center;
     }
     .post-excerpt {
       color: var(--ink-soft);
-      font-size: 16px;
+      font-size: 15px;
       line-height: 1.6;
     }
-
-    /* ========== Tags ========== */
     .tag {
       display: inline-block;
       background: var(--bg-soft);
@@ -193,8 +393,6 @@ const year = new Date().getFullYear();
       border: 1px solid var(--line);
       font-size: 12px;
       font-weight: 500;
-      letter-spacing: 0.02em;
-      transition: background 0.15s, color 0.15s;
     }
     .tag a { color: inherit; text-decoration: none; }
     .tag:hover { background: var(--accent-soft); color: var(--accent); }
@@ -207,7 +405,7 @@ const year = new Date().getFullYear();
       background: transparent;
       border: none;
       font-size: 18px;
-      line-height: 1.75;
+      line-height: 1.78;
       color: var(--ink);
     }
     .post-content h1 {
@@ -245,12 +443,12 @@ const year = new Date().getFullYear();
     }
     .post-content > p:first-of-type::first-letter {
       font-family: 'Fraunces', serif;
-      font-weight: 700;
+      font-weight: 800;
       font-size: 64px;
       float: left;
       line-height: 0.92;
-      padding: 6px 10px 0 0;
-      color: var(--accent);
+      padding: 6px 12px 0 0;
+      color: var(--magenta);
       font-variation-settings: 'opsz' 144;
     }
     .post-content a {
@@ -266,16 +464,16 @@ const year = new Date().getFullYear();
       height: auto;
       border-radius: 10px;
       margin: 28px 0;
-      box-shadow: 0 12px 36px -18px rgba(20, 20, 30, 0.25);
+      box-shadow: 0 18px 48px -20px rgba(0, 0, 0, 0.6);
     }
     .post-content blockquote {
-      border-left: 3px solid var(--accent);
+      border-left: 3px solid var(--magenta);
       margin: 28px 0;
       padding: 4px 0 4px 24px;
       font-family: 'Fraunces', serif;
       font-style: italic;
       font-size: 21px;
-      line-height: 1.5;
+      line-height: 1.55;
       color: var(--ink-soft);
       font-variation-settings: 'opsz' 36;
     }
@@ -288,9 +486,10 @@ const year = new Date().getFullYear();
       font-size: 0.88em;
     }
     .post-content pre {
-      background: #1a1a1f;
-      color: #e8e6df;
+      background: #050505;
+      color: #d4ce99;
       padding: 18px 20px;
+      border: 1px solid var(--line);
       border-radius: 10px;
       overflow-x: auto;
       margin: 24px 0;
@@ -318,16 +517,17 @@ const year = new Date().getFullYear();
       color: var(--ink-muted);
       text-decoration: none;
       margin-bottom: 24px;
-      font-size: 14px;
+      font-size: 13px;
       font-weight: 500;
-      letter-spacing: 0.02em;
+      letter-spacing: 0.06em;
+      text-transform: uppercase;
       transition: color 0.15s;
     }
     .back-link:hover { color: var(--accent); }
 
     /* ========== Pagination ========== */
     .pagination {
-      max-width: 720px;
+      max-width: 1180px;
       margin: 48px auto 0;
       padding-top: 24px;
       border-top: 1px solid var(--line);
@@ -351,7 +551,7 @@ const year = new Date().getFullYear();
     .pagination-link:hover {
       background: var(--accent);
       border-color: var(--accent);
-      color: #fff;
+      color: #0d0c0a;
     }
     .pagination-info {
       color: var(--ink-muted);
@@ -360,7 +560,7 @@ const year = new Date().getFullYear();
 
     /* ========== Related posts ========== */
     .related-posts {
-      max-width: 1100px;
+      max-width: 1180px;
       margin: 64px auto 0;
       padding-top: 36px;
       border-top: 1px solid var(--line);
@@ -388,8 +588,8 @@ const year = new Date().getFullYear();
     }
     .related-post-card:hover {
       transform: translateY(-2px);
-      box-shadow: 0 10px 28px -16px rgba(20, 20, 30, 0.18);
-      border-color: #d8d2c0;
+      box-shadow: 0 12px 32px -18px rgba(184, 226, 90, 0.16);
+      border-color: var(--line-strong);
     }
     .related-post-link { text-decoration: none; color: inherit; display: block; }
     .related-post-link h4 {
@@ -415,7 +615,7 @@ const year = new Date().getFullYear();
 
     /* ========== Footer ========== */
     footer {
-      max-width: 1100px;
+      max-width: 1180px;
       margin: 80px auto 0;
       padding: 28px 28px 36px;
       border-top: 1px solid var(--line);
@@ -429,21 +629,30 @@ const year = new Date().getFullYear();
     }
     footer .footer-brand {
       font-family: 'Fraunces', serif;
-      font-weight: 600;
+      font-weight: 700;
       color: var(--ink-soft);
       letter-spacing: -0.01em;
     }
     footer .footer-brand .accent { color: var(--accent); }
 
     /* ========== Mobile ========== */
+    @media (max-width: 820px) {
+      .post-hero-link {
+        grid-template-columns: 1fr;
+      }
+      .post-hero-img { min-height: 220px; max-height: 260px; }
+      .post-hero-body { padding: 24px 22px; }
+    }
     @media (max-width: 700px) {
       .container { padding: 0 18px; }
       header.hero { padding: 24px 0 20px; margin-bottom: 32px; }
       .ascii-brand { font-size: 30px; }
       .tagline { font-size: 14px; }
-      .post { padding: 22px 22px; }
-      .post-title { font-size: 22px; }
-      .post-excerpt { font-size: 15px; }
+      .post-row-link { grid-template-columns: 110px 1fr; }
+      .post-row-img img { min-height: 110px; }
+      .post-row-body { padding: 16px 18px; }
+      .post-row-title { font-size: 17px; }
+      .post-row-excerpt { font-size: 13px; -webkit-line-clamp: 2; }
       .post-content { font-size: 17px; }
       .post-content > p:first-of-type::first-letter { font-size: 52px; }
       .related-posts-grid { grid-template-columns: 1fr; }
@@ -474,7 +683,7 @@ const year = new Date().getFullYear();
 
     <footer>
       <div class="footer-brand">hype<span class="accent">404</span></div>
-      <div>© {year} {site.name}</div>
+      <div>(c) {year} {site.name}</div>
     </footer>
   </div>
 </body>