From d298fc9f0f0ed2335a2e5517dbb52293ede96730 Mon Sep 17 00:00:00 2001 From: Claude Code Date: Fri, 1 May 2026 17:42:46 +0800 Subject: [PATCH] fix layout: same nested-link + grid track collapse fix as hype/viralmvp MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit PostList no longer wraps cards in an outer , so .post-hero-link and .post-row-link selectors don't match anything. Layout now grids .post-hero and .post-row directly + adds the stretched-link pattern on .card-link inside titles + min-width: 0 on grid items + tag link z-index: 2 above the title overlay. No design changes — same vermilion + cream Chinese magazine palette. Co-Authored-By: Claude Opus 4.7 (1M context) --- src/layouts/Layout.astro | 77 ++++++++++++++++++++++++++-------------- 1 file changed, 51 insertions(+), 26 deletions(-) diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro index f3f3ff0..9de50c0 100644 --- a/src/layouts/Layout.astro +++ b/src/layouts/Layout.astro @@ -485,6 +485,10 @@ const ads = site.ads; /* ========== 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; @@ -496,29 +500,39 @@ const ads = site.ads; transform: translateY(-2px); box-shadow: 0 18px 48px -22px rgba(40, 30, 50, 0.22); } - .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; } + .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); } .post-hero-flag { color: var(--accent); font-size: 11px; @@ -538,7 +552,6 @@ const ads = site.ads; 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; @@ -559,10 +572,14 @@ const ads = site.ads; color: var(--ink-soft); font-size: 12px; } - .post-hero-tag a { color: inherit; text-decoration: none; } + .post-hero-tag a { color: inherit; text-decoration: none; position: relative; z-index: 2; } /* ========== 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; @@ -574,30 +591,29 @@ const ads = site.ads; transform: translateY(-2px); box-shadow: 0 14px 36px -18px rgba(40, 30, 50, 0.18); } - .post-row-link { - display: grid; - grid-template-columns: 220px 1fr; - 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; + inset: 0; 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; + min-width: 0; display: flex; flex-direction: column; justify-content: center; - } - .post-row-link:has(.post-row-body:only-child) { - grid-template-columns: 1fr; + gap: 6px; } .post-row-title { font-family: 'Fraunces', 'Noto Serif SC', serif; @@ -606,11 +622,21 @@ const ads = site.ads; 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; @@ -637,7 +663,7 @@ const ads = site.ads; font-size: 11px; font-weight: 500; } - .post-row-tag a { color: inherit; text-decoration: none; } + .post-row-tag a { color: inherit; text-decoration: none; position: relative; z-index: 2; } .post-empty { color: var(--ink-muted); @@ -647,13 +673,12 @@ const ads = site.ads; } @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; }