admin/viralmvp-static
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix invalid <a> nesting + grid layout collapse

Browse Source 
Same root-cause fix as hype404: dropped the card-wide outer <a> that
was being auto-closed by the browser due to nested tag <a> 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) <noreply@anthropic.com>
This commit is contained in:
Claude Code
2026-05-01 17:40:50 +08:00
parent 7858d922ea
commit 37baf1ab5e
2 changed files with 81 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
src/components/PostList.astro
View File

@@ -26,46 +26,46 @@ const fmt = (d) => new Date(d).toLocaleDateString('en-US',
{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>
{hero.cover && (
<div class="post-hero-img">
<img src={hero.cover} alt="" loading="eager" />
</div>
</a>
)}
<div class="post-hero-body">
<div class="post-hero-flag">Top story</div>
<h2 class="post-hero-title">
<a class="card-link" href={`/${hero.slug}/`}>{hero.title}</a>
</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>
</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>
{post.cover && (
<div class="post-row-img">
<img src={post.cover} alt="" loading="lazy" />
</div>
</a>
)}
<div class="post-row-body">
<h3 class="post-row-title">
<a class="card-link" href={`/${post.slug}/`}>{post.title}</a>
</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>
</article>
))}