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 4b1cc3a..e210236 100644 --- a/src/layouts/Layout.astro +++ b/src/layouts/Layout.astro @@ -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 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; }