From 37baf1ab5e409876e38b39891c81d57ac8f00f5a Mon Sep 17 00:00:00 2001 From: Claude Code Date: Fri, 1 May 2026 17:40:50 +0800 Subject: [PATCH] fix invalid nesting + grid layout collapse Same root-cause fix as hype404: dropped the card-wide outer that was being auto-closed by the browser due to nested tag links. Card now uses a stretched-link pattern on the title (z-index: 1 ::after overlay), tag links get z-index: 2 for independent clicks. Grid container moved from .post-hero-link / .post-row-link onto .post-hero / .post-row directly. Added min-width: 0 to grid items so the image natural width can't blow out its 1.1fr track. Hero image uses min-height: 360px instead of an undersized 280px. Mobile media query selectors updated (the -link wrappers no longer exist). Co-Authored-By: Claude Opus 4.7 (1M context) --- src/components/PostList.astro | 66 +++++++++++++++---------------- src/layouts/Layout.astro | 74 +++++++++++++++++++++++------------ 2 files changed, 81 insertions(+), 59 deletions(-) diff --git a/src/components/PostList.astro b/src/components/PostList.astro index 70d82a3..6a32657 100644 --- a/src/components/PostList.astro +++ b/src/components/PostList.astro @@ -26,46 +26,46 @@ const fmt = (d) => new Date(d).toLocaleDateString('en-US', {enriched.length > 0 && !tag && hero && (
- - {hero.cover && ( -
- -
- )} -
-
Top story
-

{hero.title}

-

{hero.rawExcerpt}

-
- {fmt(hero.date)} - {hero.tags.slice(0, 4).map((t) => ( - {t} - ))} -
+ {hero.cover && ( +
+
- + )} +
+
Top story
+

+ {hero.title} +

+

{hero.rawExcerpt}

+
+ {fmt(hero.date)} + {hero.tags.slice(0, 4).map((t) => ( + {t} + ))} +
+
)} {(tag ? enriched : rest).map((post, i) => (
- - {post.cover && ( -
- -
- )} -
-

{post.title}

-

{post.rawExcerpt}

-
- - {post.tags.slice(0, 3).map((t) => ( - {t} - ))} -
+ {post.cover && ( +
+
- + )} +
+

+ {post.title} +

+

{post.rawExcerpt}

+
+ + {post.tags.slice(0, 3).map((t) => ( + {t} + ))} +
+
))} diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro index 2d42049..a6c97da 100644 --- a/src/layouts/Layout.astro +++ b/src/layouts/Layout.astro @@ -502,6 +502,10 @@ const year = new Date().getFullYear(); /* ========== Hero card ========== */ .post-hero { + position: relative; + display: grid; + grid-template-columns: 1.1fr 1fr; + align-items: stretch; margin-bottom: 44px; border-radius: 14px; overflow: hidden; @@ -514,29 +518,40 @@ const year = new Date().getFullYear(); box-shadow: 0 22px 56px -22px rgba(236, 58, 142, 0.32); border-color: var(--accent-soft); } - .post-hero-link { - display: grid; - grid-template-columns: 1.1fr 1fr; - text-decoration: none; - color: inherit; - } .post-hero-img { + position: relative; overflow: hidden; background: var(--bg-soft); - min-height: 280px; + min-height: 360px; + min-width: 0; } .post-hero-img img { + position: absolute; + inset: 0; 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; + padding: 36px 40px; + min-width: 0; display: flex; flex-direction: column; justify-content: center; } + /* Stretched-link pattern */ + .post-hero-title .card-link { + color: inherit; + text-decoration: none; + } + .post-hero-title .card-link::after { + content: ""; + position: absolute; + inset: 0; + z-index: 1; + } + .post-hero:hover .post-hero-title .card-link { color: var(--accent); } /* Y2K sticker flag — Bungee + colored bg pill, slight tilt for sticker feel */ .post-hero-flag { display: inline-block; @@ -565,7 +580,6 @@ const year = new Date().getFullYear(); font-variation-settings: 'opsz' 144; transition: color 0.15s; } - .post-hero:hover .post-hero-title { color: var(--accent); } .post-hero-excerpt { color: var(--ink-soft); font-size: 16px; @@ -587,7 +601,7 @@ const year = new Date().getFullYear(); font-size: 12px; font-weight: 600; } - .post-hero-tag a { color: inherit; text-decoration: none; } + .post-hero-tag a { color: inherit; text-decoration: none; position: relative; z-index: 2; } /* Rotating Y2K pastel sticker colors per nth-child */ .post-hero-tag:nth-child(2) { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-soft); } .post-hero-tag:nth-child(3) { background: var(--cyan-soft); color: #1a7eaa; border-color: var(--cyan-soft); } @@ -596,6 +610,10 @@ const year = new Date().getFullYear(); /* ========== Row cards ========== */ .post-row { + position: relative; + display: grid; + grid-template-columns: 240px 1fr; + align-items: stretch; background: var(--bg-card); border: 1px solid var(--line); border-radius: 12px; @@ -608,17 +626,14 @@ const year = new Date().getFullYear(); box-shadow: 0 16px 40px -18px rgba(236, 58, 142, 0.25); border-color: var(--accent-soft); } - .post-row-link { - display: grid; - grid-template-columns: 240px 1fr; - align-items: stretch; - text-decoration: none; - color: inherit; + .post-row:has(.post-row-body:only-child) { + grid-template-columns: 1fr; } .post-row-img { position: relative; overflow: hidden; background: var(--bg-soft); + min-width: 0; } .post-row-img img { position: absolute; @@ -632,13 +647,11 @@ const year = new Date().getFullYear(); .post-row:hover .post-row-img img { transform: scale(1.04); } .post-row-body { padding: 22px 26px; + min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 6px; } - .post-row-link:has(.post-row-body:only-child) { - grid-template-columns: 1fr; - } .post-row-title { font-family: 'Fraunces', 'Noto Serif SC', serif; font-weight: 600; @@ -646,11 +659,21 @@ const year = new Date().getFullYear(); line-height: 1.22; letter-spacing: -0.015em; color: var(--ink); - margin-bottom: 8px; + margin-bottom: 4px; font-variation-settings: 'opsz' 80; + } + .post-row-title .card-link { + color: inherit; + text-decoration: none; transition: color 0.15s; } - .post-row:hover .post-row-title { color: var(--accent); } + .post-row-title .card-link::after { + content: ""; + position: absolute; + inset: 0; + z-index: 1; + } + .post-row:hover .post-row-title .card-link { color: var(--accent); } .post-row-excerpt { color: var(--ink-soft); font-size: 15px; @@ -677,7 +700,7 @@ const year = new Date().getFullYear(); font-size: 11px; font-weight: 600; } - .post-row-tag a { color: inherit; text-decoration: none; } + .post-row-tag a { color: inherit; text-decoration: none; position: relative; z-index: 2; } .post-row-tag:nth-child(2) { background: var(--accent-soft); color: var(--accent); } .post-row-tag:nth-child(3) { background: var(--cyan-soft); color: #1a7eaa; } .post-row-tag:nth-child(4) { background: var(--lemon-soft); color: #8a6c00; } @@ -690,13 +713,12 @@ const year = new Date().getFullYear(); } @media (max-width: 820px) { - .post-hero-link { grid-template-columns: 1fr; } - .post-hero-img { min-height: 220px; max-height: 260px; } + .post-hero { grid-template-columns: 1fr; } + .post-hero-img { min-height: 220px; max-height: 280px; } .post-hero-body { padding: 24px 22px; } } @media (max-width: 700px) { - .post-row-link { grid-template-columns: 110px 1fr; } - .post-row-img img { min-height: 110px; } + .post-row { grid-template-columns: 110px 1fr; } .post-row-body { padding: 16px 18px; } .post-row-title { font-size: 17px; } .post-row-excerpt { font-size: 13px; }