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

12
src/components/PostList.astro
View File

@@ -26,7 +26,6 @@ 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" />
@@ -34,7 +33,9 @@ const fmt = (d) => new Date(d).toLocaleDateString('en-US',
)}
<div class="post-hero-body">
<div class="post-hero-flag">Top story</div>
<h2 class="post-hero-title">{hero.title}</h2>
<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>
@@ -43,20 +44,20 @@ const fmt = (d) => new Date(d).toLocaleDateString('en-US',
))}
</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>
<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>
@@ -65,7 +66,6 @@ const fmt = (d) => new Date(d).toLocaleDateString('en-US',
))}
</div>
</div>
</a>
</article>
))}

74
src/layouts/Layout.astro
View File

@@ -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; }