5c88d19231
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>
770 lines
22 KiB
Plaintext
770 lines
22 KiB
Plaintext
---
|
|
import { site } from '../lib/site.js';
|
|
|
|
const {
|
|
title,
|
|
description = site.description,
|
|
canonical,
|
|
image,
|
|
structuredData,
|
|
} = Astro.props;
|
|
|
|
const pageTitle = title || site.name;
|
|
const ogUrl = canonical || Astro.url.toString();
|
|
const year = new Date().getFullYear();
|
|
---
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>{pageTitle}</title>
|
|
<meta name="description" content={description} />
|
|
{canonical && <link rel="canonical" href={canonical} />}
|
|
|
|
<link rel="icon" href="/favicon.ico" sizes="any" />
|
|
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
|
|
<link rel="apple-touch-icon" href="/favicon-32x32.png" />
|
|
|
|
<meta property="og:type" content="website" />
|
|
<meta property="og:site_name" content={site.name} />
|
|
<meta property="og:title" content={pageTitle} />
|
|
<meta property="og:description" content={description} />
|
|
{image && <meta property="og:image" content={image} />}
|
|
<meta property="og:url" content={ogUrl} />
|
|
|
|
<meta name="twitter:card" content="summary_large_image" />
|
|
<meta name="twitter:title" content={pageTitle} />
|
|
<meta name="twitter:description" content={description} />
|
|
{image && <meta name="twitter:image" content={image} />}
|
|
|
|
{structuredData && (
|
|
<script type="application/ld+json" set:html={structuredData} />
|
|
)}
|
|
|
|
<link rel="alternate" type="application/rss+xml" title={`${site.name} RSS`} href="/rss.xml" />
|
|
|
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
<link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700;9..144,800;9..144,900&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&family=VT323&family=Major+Mono+Display&display=swap" rel="stylesheet" />
|
|
|
|
<style is:global>
|
|
:root {
|
|
--bg: #0a0c0a;
|
|
--bg-elev: #131611;
|
|
--bg-card: #161914;
|
|
--bg-soft: #1d211b;
|
|
--ink: #ebe6d1;
|
|
--ink-soft: #b6b39a;
|
|
--ink-muted: #7a7766;
|
|
--line: #2a2c25;
|
|
--line-strong: #3a3c33;
|
|
/* CRT phosphor multi-color palette — phosphor lime primary,
|
|
hot magenta secondary, amber tertiary, cyan link */
|
|
--accent: #76e74d; /* phosphor lime */
|
|
--accent-soft: rgba(118, 231, 77, 0.14);
|
|
--accent-glow: rgba(118, 231, 77, 0.55);
|
|
--magenta: #ff4fa6; /* hot magenta */
|
|
--magenta-soft: rgba(255, 79, 166, 0.18);
|
|
--magenta-glow: rgba(255, 79, 166, 0.55);
|
|
--amber: #f7c244; /* warm amber */
|
|
--link: #5ed5ff; /* CRT cyan */
|
|
--link-hover: #a9e8ff;
|
|
--term: 'VT323', 'Courier New', monospace;
|
|
--display-pixel: 'Major Mono Display', 'VT323', monospace;
|
|
}
|
|
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
|
|
html {
|
|
background: var(--bg);
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
text-rendering: optimizeLegibility;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
|
|
font-size: 17px;
|
|
line-height: 1.65;
|
|
color: var(--ink);
|
|
background:
|
|
radial-gradient(circle at 12% -8%, rgba(118, 231, 77, 0.07) 0%, transparent 40%),
|
|
radial-gradient(circle at 92% 6%, rgba(255, 79, 166, 0.07) 0%, transparent 42%),
|
|
radial-gradient(circle at 50% 100%, rgba(247, 194, 68, 0.04) 0%, transparent 50%),
|
|
var(--bg);
|
|
min-height: 100vh;
|
|
position: relative;
|
|
}
|
|
/* (scanline overlay removed — it interacted poorly with text glow effects) */
|
|
|
|
.container {
|
|
max-width: 1180px;
|
|
margin: 0 auto;
|
|
padding: 0 28px;
|
|
}
|
|
|
|
/* ========== Site header ========== */
|
|
header.hero {
|
|
padding: 36px 0 28px;
|
|
border-bottom: 1px solid var(--line);
|
|
margin-bottom: 48px;
|
|
}
|
|
.hero-row {
|
|
display: flex;
|
|
align-items: flex-end; /* nav baseline aligns with tagline */
|
|
justify-content: space-between;
|
|
gap: 24px;
|
|
flex-wrap: wrap;
|
|
}
|
|
.brand-link { text-decoration: none; color: inherit; display: inline-block; }
|
|
.ascii-brand {
|
|
font-family: 'Fraunces', 'Times New Roman', serif;
|
|
font-weight: 800;
|
|
font-size: 42px;
|
|
letter-spacing: -0.025em;
|
|
color: var(--ink);
|
|
line-height: 1;
|
|
font-variation-settings: 'opsz' 144;
|
|
display: inline-flex;
|
|
align-items: baseline;
|
|
gap: 4px;
|
|
}
|
|
/* 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 14px rgba(118, 231, 77, 0.4);
|
|
}
|
|
.tagline {
|
|
color: var(--ink-soft);
|
|
font-family: 'Fraunces', serif;
|
|
font-style: italic;
|
|
font-size: 16px;
|
|
margin-top: 6px;
|
|
max-width: 560px;
|
|
font-variation-settings: 'opsz' 14;
|
|
}
|
|
nav.nav {
|
|
display: flex;
|
|
gap: 28px;
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
letter-spacing: 0.14em;
|
|
text-transform: uppercase;
|
|
}
|
|
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; }
|
|
|
|
/* ========== Reveal animation for cards ========== */
|
|
[data-reveal] {
|
|
opacity: 0;
|
|
transform: translateY(12px);
|
|
transition: opacity 0.6s ease, transform 0.6s ease;
|
|
}
|
|
[data-reveal].is-visible {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
/* ========== Tag banner (tag listing pages) ========== */
|
|
.tag-banner {
|
|
font-family: 'Fraunces', serif;
|
|
font-weight: 600;
|
|
font-size: 24px;
|
|
color: var(--ink);
|
|
margin-bottom: 28px;
|
|
padding-bottom: 16px;
|
|
border-bottom: 1px solid var(--line);
|
|
font-variation-settings: 'opsz' 36;
|
|
}
|
|
.tag-banner em {
|
|
font-style: italic;
|
|
color: var(--accent);
|
|
}
|
|
|
|
/* ========== 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;
|
|
background: var(--bg-card);
|
|
border: 1px solid var(--line);
|
|
transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
|
|
}
|
|
.post-hero:hover {
|
|
transform: translateY(-2px);
|
|
border-color: var(--line-strong);
|
|
box-shadow: 0 18px 48px -22px rgba(244, 63, 140, 0.22);
|
|
}
|
|
.post-hero-img {
|
|
position: relative;
|
|
overflow: hidden;
|
|
background: var(--bg-soft);
|
|
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;
|
|
display: block;
|
|
transition: transform 0.6s ease;
|
|
}
|
|
.post-hero:hover .post-hero-img img { transform: scale(1.04); }
|
|
.post-hero-body {
|
|
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: 17px;
|
|
font-weight: 400;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.16em;
|
|
margin-bottom: 14px;
|
|
}
|
|
.post-hero-flag::before { content: "// "; color: var(--accent); }
|
|
.post-hero-title {
|
|
font-family: 'Fraunces', serif;
|
|
font-weight: 700;
|
|
font-size: clamp(26px, 3.5vw, 36px);
|
|
line-height: 1.12;
|
|
letter-spacing: -0.02em;
|
|
color: var(--ink);
|
|
margin-bottom: 14px;
|
|
font-variation-settings: 'opsz' 144;
|
|
}
|
|
.post-hero-excerpt {
|
|
color: var(--ink-soft);
|
|
font-size: 16px;
|
|
line-height: 1.6;
|
|
margin-bottom: 18px;
|
|
}
|
|
.post-hero-meta {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 10px;
|
|
align-items: center;
|
|
color: var(--ink-muted);
|
|
font-size: 13px;
|
|
letter-spacing: 0.02em;
|
|
}
|
|
.post-hero-meta > span:first-child {
|
|
font-family: var(--term);
|
|
color: var(--amber);
|
|
font-size: 17px;
|
|
letter-spacing: 0.04em;
|
|
}
|
|
.post-hero-tag {
|
|
display: inline-block;
|
|
padding: 1px 8px;
|
|
border: 1px solid var(--line-strong);
|
|
border-radius: 4px;
|
|
color: var(--link);
|
|
font-family: var(--term);
|
|
font-size: 16px;
|
|
letter-spacing: 0.02em;
|
|
}
|
|
.post-hero-tag::before { content: "#"; color: var(--magenta); }
|
|
.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;
|
|
margin-bottom: 16px;
|
|
overflow: hidden;
|
|
transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
|
|
}
|
|
.post-row:hover {
|
|
transform: translateY(-2px);
|
|
border-color: var(--line-strong);
|
|
box-shadow: 0 14px 36px -18px rgba(184, 226, 90, 0.18);
|
|
}
|
|
/* 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;
|
|
width: 100%;
|
|
height: 100%;
|
|
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;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
gap: 6px;
|
|
}
|
|
.post-row-title {
|
|
font-family: 'Fraunces', serif;
|
|
font-weight: 600;
|
|
font-size: 22px;
|
|
line-height: 1.22;
|
|
letter-spacing: -0.015em;
|
|
color: var(--ink);
|
|
margin-bottom: 4px;
|
|
font-variation-settings: 'opsz' 80;
|
|
}
|
|
.post-row-title .card-link {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
transition: color 0.15s;
|
|
}
|
|
.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;
|
|
line-height: 1.55;
|
|
margin-bottom: 12px;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
}
|
|
.post-row-meta {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
align-items: center;
|
|
color: var(--ink-muted);
|
|
font-size: 12px;
|
|
letter-spacing: 0.02em;
|
|
}
|
|
.post-row-meta time {
|
|
font-family: var(--term);
|
|
color: var(--amber);
|
|
font-size: 16px;
|
|
letter-spacing: 0.04em;
|
|
}
|
|
.post-row-tag {
|
|
display: inline-block;
|
|
padding: 0 7px;
|
|
background: var(--bg-soft);
|
|
border: 1px solid var(--line);
|
|
border-radius: 3px;
|
|
color: var(--link);
|
|
font-family: var(--term);
|
|
font-size: 15px;
|
|
}
|
|
.post-row-tag::before { content: "#"; color: var(--magenta); }
|
|
.post-row-tag a { color: inherit; text-decoration: none; position: relative; z-index: 2; }
|
|
|
|
.post-empty {
|
|
color: var(--ink-muted);
|
|
text-align: center;
|
|
padding: 80px 0;
|
|
font-size: 15px;
|
|
}
|
|
|
|
/* ========== Legacy .post / .tag (used by some pages) ========== */
|
|
.post {
|
|
background: var(--bg-card);
|
|
border: 1px solid var(--line);
|
|
border-radius: 12px;
|
|
padding: 26px 30px;
|
|
margin-bottom: 16px;
|
|
}
|
|
.post-title {
|
|
font-family: 'Fraunces', serif;
|
|
font-weight: 600;
|
|
font-size: 24px;
|
|
line-height: 1.22;
|
|
letter-spacing: -0.015em;
|
|
margin-bottom: 8px;
|
|
font-variation-settings: 'opsz' 80;
|
|
}
|
|
.post-title a { color: var(--ink); text-decoration: none; }
|
|
.post-title a:hover { color: var(--accent); }
|
|
.post-meta {
|
|
color: var(--ink-muted);
|
|
font-size: 13px;
|
|
margin-bottom: 12px;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
align-items: center;
|
|
}
|
|
.post-excerpt {
|
|
color: var(--ink-soft);
|
|
font-size: 15px;
|
|
line-height: 1.6;
|
|
}
|
|
.tag {
|
|
display: inline-block;
|
|
background: var(--bg-soft);
|
|
color: var(--ink-soft);
|
|
padding: 2px 10px;
|
|
border-radius: 999px;
|
|
border: 1px solid var(--line);
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
}
|
|
.tag a { color: inherit; text-decoration: none; }
|
|
.tag:hover { background: var(--accent-soft); color: var(--accent); }
|
|
|
|
/* ========== Article (post detail) ========== */
|
|
.post-content {
|
|
max-width: 720px;
|
|
margin: 0 auto;
|
|
padding: 0;
|
|
background: transparent;
|
|
border: none;
|
|
font-size: 18px;
|
|
line-height: 1.78;
|
|
color: var(--ink);
|
|
}
|
|
.post-content h1 {
|
|
font-family: 'Fraunces', serif;
|
|
font-weight: 700;
|
|
font-size: clamp(32px, 5vw, 48px);
|
|
line-height: 1.1;
|
|
letter-spacing: -0.02em;
|
|
color: var(--ink);
|
|
margin-bottom: 18px;
|
|
font-variation-settings: 'opsz' 144;
|
|
}
|
|
.post-content h2 {
|
|
font-family: 'Fraunces', serif;
|
|
font-weight: 600;
|
|
font-size: 28px;
|
|
line-height: 1.25;
|
|
letter-spacing: -0.015em;
|
|
color: var(--ink);
|
|
margin: 44px 0 14px;
|
|
font-variation-settings: 'opsz' 80;
|
|
}
|
|
.post-content h3 {
|
|
font-family: 'Fraunces', serif;
|
|
font-weight: 600;
|
|
font-size: 22px;
|
|
line-height: 1.3;
|
|
color: var(--ink);
|
|
margin: 32px 0 10px;
|
|
font-variation-settings: 'opsz' 36;
|
|
}
|
|
.post-content p {
|
|
margin-bottom: 22px;
|
|
color: var(--ink);
|
|
}
|
|
.post-content > p:first-of-type::first-letter {
|
|
font-family: 'Fraunces', serif;
|
|
font-weight: 800;
|
|
font-size: 72px;
|
|
float: left;
|
|
line-height: 0.9;
|
|
padding: 6px 14px 0 0;
|
|
color: var(--accent);
|
|
font-variation-settings: 'opsz' 144;
|
|
text-shadow:
|
|
0 0 22px var(--accent-glow),
|
|
3px 0 0 rgba(255, 79, 166, 0.55),
|
|
-3px 0 0 rgba(94, 213, 255, 0.55);
|
|
}
|
|
.post-content a {
|
|
color: var(--link);
|
|
text-decoration: underline;
|
|
text-decoration-thickness: 1px;
|
|
text-underline-offset: 3px;
|
|
transition: color 0.15s;
|
|
}
|
|
.post-content a:hover { color: var(--link-hover); }
|
|
.post-content img {
|
|
max-width: 100%;
|
|
height: auto;
|
|
border-radius: 10px;
|
|
margin: 28px 0;
|
|
box-shadow: 0 18px 48px -20px rgba(0, 0, 0, 0.6);
|
|
}
|
|
.post-content blockquote {
|
|
border-left: 3px solid var(--magenta);
|
|
margin: 28px 0;
|
|
padding: 4px 0 4px 24px;
|
|
font-family: 'Fraunces', serif;
|
|
font-style: italic;
|
|
font-size: 21px;
|
|
line-height: 1.55;
|
|
color: var(--ink-soft);
|
|
font-variation-settings: 'opsz' 36;
|
|
}
|
|
.post-content code {
|
|
background: var(--bg-soft);
|
|
color: var(--accent);
|
|
padding: 1px 7px;
|
|
border-radius: 4px;
|
|
font-family: 'JetBrains Mono', 'SF Mono', monospace;
|
|
font-size: 0.88em;
|
|
}
|
|
.post-content pre {
|
|
background: #050505;
|
|
color: #d4ce99;
|
|
padding: 18px 20px;
|
|
border: 1px solid var(--line);
|
|
border-radius: 10px;
|
|
overflow-x: auto;
|
|
margin: 24px 0;
|
|
font-family: 'JetBrains Mono', 'SF Mono', monospace;
|
|
font-size: 14px;
|
|
line-height: 1.65;
|
|
}
|
|
.post-content pre code {
|
|
background: transparent;
|
|
color: inherit;
|
|
padding: 0;
|
|
}
|
|
.post-content ul, .post-content ol {
|
|
margin: 18px 0 22px 28px;
|
|
}
|
|
.post-content li { margin-bottom: 8px; }
|
|
.post-content hr {
|
|
border: none;
|
|
border-top: 1px solid var(--line);
|
|
margin: 40px 0;
|
|
}
|
|
|
|
.back-link {
|
|
display: inline-block;
|
|
color: var(--ink-muted);
|
|
text-decoration: none;
|
|
margin-bottom: 24px;
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
letter-spacing: 0.06em;
|
|
text-transform: uppercase;
|
|
transition: color 0.15s;
|
|
}
|
|
.back-link:hover { color: var(--accent); }
|
|
|
|
/* ========== Pagination ========== */
|
|
.pagination {
|
|
max-width: 1180px;
|
|
margin: 48px auto 0;
|
|
padding-top: 24px;
|
|
border-top: 1px solid var(--line);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: 16px;
|
|
}
|
|
.pagination-link {
|
|
display: inline-block;
|
|
padding: 8px 18px;
|
|
background: var(--bg-card);
|
|
border: 1px solid var(--line);
|
|
border-radius: 999px;
|
|
color: var(--ink);
|
|
text-decoration: none;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
transition: background 0.15s, border-color 0.15s, color 0.15s;
|
|
}
|
|
.pagination-link:hover {
|
|
background: var(--accent);
|
|
border-color: var(--accent);
|
|
color: #0d0c0a;
|
|
}
|
|
.pagination-info {
|
|
color: var(--ink-muted);
|
|
font-size: 13px;
|
|
}
|
|
|
|
/* ========== Related posts ========== */
|
|
.related-posts {
|
|
max-width: 1180px;
|
|
margin: 64px auto 0;
|
|
padding-top: 36px;
|
|
border-top: 1px solid var(--line);
|
|
}
|
|
.related-posts h3 {
|
|
font-family: 'Fraunces', serif;
|
|
font-weight: 600;
|
|
font-size: 22px;
|
|
letter-spacing: -0.01em;
|
|
color: var(--ink);
|
|
margin-bottom: 22px;
|
|
font-variation-settings: 'opsz' 36;
|
|
}
|
|
.related-posts-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
|
|
gap: 16px;
|
|
}
|
|
.related-post-card {
|
|
background: var(--bg-card);
|
|
border: 1px solid var(--line);
|
|
border-radius: 10px;
|
|
padding: 20px;
|
|
transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
|
|
}
|
|
.related-post-card:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 12px 32px -18px rgba(184, 226, 90, 0.16);
|
|
border-color: var(--line-strong);
|
|
}
|
|
.related-post-link { text-decoration: none; color: inherit; display: block; }
|
|
.related-post-link h4 {
|
|
font-family: 'Fraunces', serif;
|
|
font-weight: 600;
|
|
font-size: 18px;
|
|
line-height: 1.25;
|
|
color: var(--ink);
|
|
margin-bottom: 8px;
|
|
font-variation-settings: 'opsz' 36;
|
|
}
|
|
.related-post-excerpt {
|
|
color: var(--ink-soft);
|
|
font-size: 14px;
|
|
line-height: 1.55;
|
|
margin-bottom: 10px;
|
|
}
|
|
.related-post-date {
|
|
color: var(--ink-muted);
|
|
font-size: 12px;
|
|
letter-spacing: 0.02em;
|
|
}
|
|
|
|
/* ========== Footer ========== */
|
|
footer {
|
|
max-width: 1180px;
|
|
margin: 80px auto 0;
|
|
padding: 28px 28px 36px;
|
|
border-top: 1px solid var(--line);
|
|
color: var(--ink-muted);
|
|
font-size: 13px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: 16px;
|
|
flex-wrap: wrap;
|
|
}
|
|
footer .footer-brand {
|
|
font-family: 'Fraunces', serif;
|
|
font-weight: 700;
|
|
color: var(--ink-soft);
|
|
letter-spacing: -0.01em;
|
|
}
|
|
footer .footer-brand .accent { color: var(--accent); }
|
|
|
|
/* ========== Mobile ========== */
|
|
@media (max-width: 820px) {
|
|
.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) {
|
|
.container { padding: 0 18px; }
|
|
header.hero { padding: 24px 0 20px; margin-bottom: 32px; }
|
|
.ascii-brand { font-size: 30px; }
|
|
.tagline { font-size: 14px; }
|
|
.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; }
|
|
.post-content { font-size: 17px; }
|
|
.post-content > p:first-of-type::first-letter { font-size: 52px; }
|
|
.related-posts-grid { grid-template-columns: 1fr; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<header class="hero">
|
|
<div class="hero-row">
|
|
<div>
|
|
<a href="/" class="brand-link">
|
|
<span class="ascii-brand">hype<span class="cursor">404</span></span>
|
|
</a>
|
|
<div class="tagline">{site.description}</div>
|
|
</div>
|
|
<nav class="nav">
|
|
<a href="/">Home</a>
|
|
<a href="/about/">About</a>
|
|
<a href="/rss.xml">RSS</a>
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
|
|
<main>
|
|
<slot />
|
|
</main>
|
|
|
|
<footer>
|
|
<div class="footer-brand">hype<span class="accent">404</span></div>
|
|
<div>(c) {year} {site.name}</div>
|
|
</footer>
|
|
</div>
|
|
</body>
|
|
</html>
|