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

fix invalid <a> nesting + grid min-width: 0 layout collapse

Browse Source 
The card markup wrapped the entire .post-hero / .post-row in an outer
<a> while ALSO containing inner <a> tags for tag links. HTML5 forbids
nested <a>, so the browser auto-closed the outer link when it hit each
tag link, restructuring the DOM and breaking the grid layout — body
content rendered outside its column, overlapping the image.

Fix:
- Drop the card-wide <a>; image cell is plain div, body cell is plain
  div, only title <a class="card-link"> and tag <a> remain
- Apply "stretched link" pattern: title link's ::after uses position:
  absolute inset: 0 to overlay the entire card (clickable everywhere)
- Tag links get position: relative + z-index: 2 so they remain
  independently clickable above the title overlay
- Grid container moved from removed .post-hero-link to .post-hero
  itself (and .post-row-link → .post-row)
- Add min-width: 0 to grid items so the image's intrinsic width can't
  blow out the 1.1fr track and crowd the body cell
- Replace post-hero-img aspect-ratio with min-height: 360px (more
  predictable in grid contexts)
- Switch numerals in the brand wordmark from Fraunces to Inter — the
  extra-bold display digits at 42px were rendering with mangled
  glyphs that read as broken text instead of "404"
- Drop scanline overlay (mix-blend-mode: screen interacted poorly
  with text glows)
- Soften phosphor glow on .cursor (12px @ 35% opacity instead of
  22px @ 55%)
- Replace nav.nav [bracket] mono links with clean uppercase Inter
  sans + phosphor underline-on-hover
- Rebalance hero ratio at desktop, fix mobile media query selectors
  (.post-hero-link / .post-row-link 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:45 +08:00
parent 20ef79e6f4
commit 5c88d19231
2 changed files with 115 additions and 97 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>
))}

146
src/layouts/Layout.astro
View File

@@ -96,24 +96,7 @@ const year = new Date().getFullYear();
min-height: 100vh;
position: relative;
}
/* Very faint scanline overlay — ambient CRT texture, doesn't affect readability */
body::before {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
z-index: 1;
background:
repeating-linear-gradient(
180deg,
rgba(118, 231, 77, 0) 0,
rgba(118, 231, 77, 0) 2px,
rgba(118, 231, 77, 0.018) 2px,
rgba(118, 231, 77, 0.018) 3px
);
mix-blend-mode: screen;
}
body > * { position: relative; z-index: 2; }
/* (scanline overlay removed — it interacted poorly with text glow effects) */
.container {
max-width: 1180px;
@@ -143,16 +126,19 @@ const year = new Date().getFullYear();
color: var(--ink);
line-height: 1;
font-variation-settings: 'opsz' 144;
display: inline-block;
display: inline-flex;
align-items: baseline;
gap: 4px;
}
/* Keep .cursor in the SAME font/weight/size as "hype" so the baseline
aligns perfectly. Identity comes from color + chromatic CRT shadow. */
/* Numerals get Inter — Fraunces' extra-bold display digits look mangled
at 42px, Inter's geometric digits read cleanly as "404" */
.ascii-brand .cursor {
font-family: 'Inter', sans-serif;
font-weight: 700;
font-size: 0.92em;
letter-spacing: -0.02em;
color: var(--accent);
text-shadow:
0 0 18px var(--accent-glow),
2px 0 0 rgba(255, 79, 166, 0.55),
-2px 0 0 rgba(94, 213, 255, 0.55);
text-shadow: 0 0 14px rgba(118, 231, 77, 0.4);
}
.tagline {
color: var(--ink-soft);
@@ -165,20 +151,32 @@ const year = new Date().getFullYear();
}
nav.nav {
display: flex;
gap: 22px;
font-size: 14px;
font-family: var(--term);
letter-spacing: 0.06em;
gap: 28px;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
}
nav.nav a::before { content: "["; color: var(--magenta); margin-right: 2px; }
nav.nav a::after { content: "]"; color: var(--magenta); margin-left: 2px; }
nav.nav a {
color: var(--ink-soft);
text-decoration: none;
transition: color 0.15s;
position: relative;
}
nav.nav a:hover { color: var(--accent); }
/* Subtle phosphor underline on hover instead of brackets */
nav.nav a::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: -6px;
height: 1px;
background: var(--accent);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.2s ease;
box-shadow: 0 0 8px var(--accent-glow);
}
nav.nav a:hover::after { transform: scaleX(1); }
main { padding: 0 0 64px; }
@@ -211,6 +209,10 @@ const year = new Date().getFullYear();
/* ========== Hero card (top story on home) ========== */
.post-hero {
position: relative;
display: grid;
grid-template-columns: 1.1fr 1fr;
align-items: stretch;
margin-bottom: 44px;
border-radius: 14px;
overflow: hidden;
@@ -223,18 +225,17 @@ const year = new Date().getFullYear();
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 {
position: relative;
overflow: hidden;
background: var(--bg-soft);
min-height: 280px;
min-height: 360px;
min-width: 0;
}
.post-hero-body { min-width: 0; }
.post-hero-img img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
@@ -243,20 +244,32 @@ const year = new Date().getFullYear();
}
.post-hero:hover .post-hero-img img { transform: scale(1.04); }
.post-hero-body {
padding: 36px 36px;
padding: 36px 40px;
display: flex;
flex-direction: column;
justify-content: center;
}
/* Stretched-link pattern: title <a> overlay covers the whole card.
Tag links sit above via z-index so they remain independently clickable. */
.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 {
font-family: var(--term);
color: var(--magenta);
font-size: 16px;
font-size: 17px;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 0.18em;
margin-bottom: 12px;
text-shadow: 0 0 10px var(--magenta-glow);
letter-spacing: 0.16em;
margin-bottom: 14px;
}
.post-hero-flag::before { content: "// "; color: var(--accent); }
.post-hero-title {
@@ -269,7 +282,6 @@ const year = new Date().getFullYear();
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;
@@ -302,10 +314,14 @@ const year = new Date().getFullYear();
letter-spacing: 0.02em;
}
.post-hero-tag::before { content: "#"; color: var(--magenta); }
.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 (rest of feed) ========== */
.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;
@@ -318,18 +334,17 @@ const year = new Date().getFullYear();
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: 240px 1fr;
align-items: stretch;
text-decoration: none;
color: inherit;
/* Body-only row (no cover image) → full width */
.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-body { min-width: 0; }
.post-row-img img {
position: absolute;
inset: 0;
@@ -347,10 +362,6 @@ const year = new Date().getFullYear();
justify-content: center;
gap: 6px;
}
/* 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;
@@ -358,11 +369,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;
@@ -399,7 +420,7 @@ const year = new Date().getFullYear();
font-size: 15px;
}
.post-row-tag::before { content: "#"; color: var(--magenta); }
.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);
@@ -698,10 +719,8 @@ const year = new Date().getFullYear();
/* ========== Mobile ========== */
@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) {
@@ -709,8 +728,7 @@ const year = new Date().getFullYear();
header.hero { padding: 24px 0 20px; margin-bottom: 32px; }
.ascii-brand { font-size: 30px; }
.tagline { font-size: 14px; }
.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; -webkit-line-clamp: 2; }