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

redesign: premium editorial light theme

Browse Source 
Replaces the 90s CRT/terminal aesthetic (green-on-black, scanlines,
marquee, VT323/Press Start 2P, glitch animation, [LOG] tags) with a
clean editorial magazine layout:

- Warm off-white background (#fbfaf6) with rich near-black ink
- Fraunces serif for display/headlines + Inter for body + JetBrains Mono
  for code (variable-axis Fraunces with optical-size adjustments)
- Terracotta accent (#e85d3c) — single brand color, used for the "404"
  in the wordmark, drop caps, hover states, blockquote rule
- Generous whitespace, 720px reading column, 1100px container
- Card-style post listing with subtle hover lift
- Drop cap on the first paragraph of each article
- Pill-shaped tags + pagination buttons
- Class names preserved (.post, .post-title, .post-content, .tag, etc.)
  so PostList and post pages cascade through unchanged

The "hype404" wordmark still leads the brand identity but is now bold
serif rather than pixel-art ASCII. Existing posts' AI-generated CRT
cover images remain — the magazine layout treats them as deliberate
cover-art rather than chrome, which still reads coherently.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Claude Code
2026-05-01 16:35:59 +08:00
parent 675ed354fc
commit 3f7ee2481d
1 changed files with 334 additions and 213 deletions
Download Patch File Download Diff File Expand all files Collapse all files

539
src/layouts/Layout.astro
View File

@@ -46,306 +46,426 @@ const year = new Date().getFullYear();
<link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=VT323&family=Press+Start+2P&display=swap" rel="stylesheet" /> <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&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
<style is:global> <style is:global>
:root {
--bg: #fbfaf6;
--bg-card: #ffffff;
--bg-soft: #f4f1ea;
--ink: #16161a;
--ink-soft: #4b4b52;
--ink-muted: #84848d;
--line: #e7e3d6;
--accent: #e85d3c;
--accent-soft: #fbe4dc;
--link: #1f4ddb;
--link-hover: #102a8c;
}
* { margin: 0; padding: 0; box-sizing: border-box; } * { margin: 0; padding: 0; box-sizing: border-box; }
html { background: #000; }
html {
background: var(--bg);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
body { body {
font-family: 'VT323', 'Courier New', monospace; font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
font-size: 22px; font-size: 17px;
line-height: 1.4; line-height: 1.65;
color: #00ff66; color: var(--ink);
background: background: var(--bg);
repeating-linear-gradient(
180deg,
transparent 0,
transparent 2px,
rgba(0,255,102,0.05) 2px,
rgba(0,255,102,0.05) 3px
),
radial-gradient(ellipse at center, #061a0d 0%, #000 100%);
min-height: 100vh; min-height: 100vh;
padding: 16px;
} }
body::before {
content: "";
position: fixed; inset: 0;
background: linear-gradient(rgba(0,0,0,0), rgba(0,255,102,0.03) 50%, rgba(0,0,0,0));
pointer-events: none;
animation: scan 6s linear infinite;
}
@keyframes scan {
0% { transform: translateY(-100%); }
100% { transform: translateY(100%); }
}
@keyframes blink { 50% { opacity: 0; } }
@keyframes glitch { 2%, 64% { transform: translate(1px, 0) skew(0deg); } 4%, 60% { transform: translate(-1px, 0) skew(0deg); } 62% { transform: translate(0, 0) skew(3deg); } }
.container { .container {
max-width: 880px; max-width: 1100px;
margin: 0 auto; margin: 0 auto;
background: rgba(0, 20, 10, 0.75); padding: 0 28px;
border: 2px solid #00ff66;
padding: 0;
box-shadow:
0 0 0 1px #003311 inset,
0 0 24px rgba(0,255,102,0.18);
} }
.terminal-bar { /* ========== Site header ========== */
background: #001a0c;
border-bottom: 2px solid #00ff66;
padding: 6px 12px;
font-size: 14px;
color: #aaffaa;
display: flex;
justify-content: space-between;
}
.terminal-bar .dots::before { content: "● ● ●"; color: #ff00aa; letter-spacing: 2px; }
.marquee {
background: #ff00aa;
color: #000;
padding: 4px 0;
overflow: hidden;
white-space: nowrap;
font-family: 'Press Start 2P', monospace;
font-size: 10px;
border-bottom: 2px solid #00ff66;
}
.marquee span {
display: inline-block;
padding-left: 100%;
animation: marquee 28s linear infinite;
}
@keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } }
header.hero { header.hero {
padding: 24px 20px 16px; padding: 36px 0 28px;
border-bottom: 1px dashed #00ff66; border-bottom: 1px solid var(--line);
margin-bottom: 48px;
} }
.hero-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
flex-wrap: wrap;
}
.brand-link { text-decoration: none; color: inherit; display: inline-block; }
.ascii-brand { .ascii-brand {
color: #00ff66; font-family: 'Fraunces', 'Times New Roman', serif;
font-family: 'Press Start 2P', monospace; font-weight: 800;
font-size: 28px; font-size: 38px;
letter-spacing: 2px; letter-spacing: -0.02em;
text-shadow: color: var(--ink);
2px 0 #ff00aa, line-height: 1;
-2px 0 #00ffff, font-variation-settings: 'opsz' 144;
0 0 8px rgba(0,255,102,0.8);
animation: glitch 4s infinite;
} }
.ascii-brand .cursor { .ascii-brand .cursor {
color: #00ff66; color: var(--accent);
animation: blink 1s step-end infinite; font-weight: 800;
} }
.tagline { .tagline {
color: #aaffaa; color: var(--ink-soft);
font-size: 18px; font-family: 'Fraunces', serif;
margin-top: 10px; font-style: italic;
font-size: 16px;
margin-top: 6px;
max-width: 520px;
font-variation-settings: 'opsz' 14;
} }
.tagline::before { content: "> "; color: #ff00aa; }
nav.nav { nav.nav {
margin-top: 14px; display: flex;
font-size: 18px; gap: 24px;
font-size: 14px;
font-weight: 500;
} }
nav.nav a { nav.nav a {
color: #00ffff; color: var(--ink-soft);
text-decoration: none; text-decoration: none;
margin-right: 18px; letter-spacing: 0.02em;
transition: color 0.15s;
} }
nav.nav a::before { content: "["; color: #ff00aa; } nav.nav a:hover { color: var(--accent); }
nav.nav a::after { content: "]"; color: #ff00aa; }
nav.nav a:hover { color: #ffff00; background: #003311; }
main { padding: 20px; } main { padding: 0 0 64px; }
/* ========== Index post cards ========== */
.post { .post {
background: #001a0c; background: var(--bg-card);
border: 1px solid #00aa44; border: 1px solid var(--line);
padding: 14px 16px; border-radius: 12px;
margin-bottom: 14px; padding: 28px 32px;
position: relative; margin-bottom: 18px;
transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
} }
.post::before { .post:hover {
content: "[LOG]"; transform: translateY(-2px);
position: absolute; top: -12px; left: 8px; box-shadow: 0 12px 32px -16px rgba(20, 20, 30, 0.18);
background: #000; border-color: #d8d2c0;
color: #ff00aa;
padding: 0 6px;
font-size: 14px;
letter-spacing: 2px;
} }
.post-title { font-size: 24px; margin-bottom: 4px; } .post-title {
.post-title a { font-family: 'Fraunces', serif;
color: #ffff00; font-weight: 600;
text-decoration: none; font-size: 26px;
text-shadow: 0 0 6px rgba(255,255,0,0.5); line-height: 1.2;
} letter-spacing: -0.015em;
.post-title a:hover { color: #fff; text-decoration: underline; }
.post-meta {
color: #77cc88;
font-size: 16px;
margin-bottom: 8px; 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;
letter-spacing: 0.02em;
margin-bottom: 12px;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
}
.post-excerpt {
color: var(--ink-soft);
font-size: 16px;
line-height: 1.6;
} }
.post-meta::before { content: "timestamp: "; color: #ff00aa; }
.post-excerpt { color: #bfffcf; font-size: 18px; }
/* ========== Tags ========== */
.tag { .tag {
display: inline-block; display: inline-block;
background: #003311; background: var(--bg-soft);
color: #00ffff; color: var(--ink-soft);
padding: 0 6px; padding: 2px 10px;
margin-right: 4px; border-radius: 999px;
border: 1px dashed #00aa44; border: 1px solid var(--line);
font-size: 14px; font-size: 12px;
font-weight: 500;
letter-spacing: 0.02em;
transition: background 0.15s, color 0.15s;
} }
.tag a { color: inherit; text-decoration: none; } .tag a { color: inherit; text-decoration: none; }
.tag::before { content: "#"; } .tag:hover { background: var(--accent-soft); color: var(--accent); }
/* ========== Article (post detail) ========== */
.post-content { .post-content {
background: #000; max-width: 720px;
border: 1px solid #00aa44; margin: 0 auto;
padding: 24px; padding: 0;
line-height: 1.6; background: transparent;
font-size: 19px; border: none;
color: #bfffcf; font-size: 18px;
line-height: 1.75;
color: var(--ink);
} }
.post-content h1 { .post-content h1 {
color: #00ff66; font-family: 'Fraunces', serif;
font-family: 'Press Start 2P', monospace; font-weight: 700;
font-size: 20px; font-size: clamp(32px, 5vw, 48px);
text-shadow: 2px 0 #ff00aa, -2px 0 #00ffff; line-height: 1.1;
margin-bottom: 12px; letter-spacing: -0.02em;
color: var(--ink);
margin-bottom: 18px;
font-variation-settings: 'opsz' 144;
} }
.post-content h2 { font-size: 26px; color: #ffff00; margin-top: 20px; } .post-content h2 {
.post-content h3 { font-size: 22px; color: #00ffff; margin-top: 16px; } font-family: 'Fraunces', serif;
.post-content p { margin-bottom: 14px; } font-weight: 600;
.post-content a { color: #00ffff; text-decoration: underline; } font-size: 28px;
.post-content a:visited { color: #ff00aa; } 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: 700;
font-size: 64px;
float: left;
line-height: 0.92;
padding: 6px 10px 0 0;
color: var(--accent);
font-variation-settings: 'opsz' 144;
}
.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 { .post-content img {
max-width: 100%; max-width: 100%;
height: auto; height: auto;
border: 2px solid #00aa44; border-radius: 10px;
filter: saturate(0.85) contrast(1.05); margin: 28px 0;
box-shadow: 0 12px 36px -18px rgba(20, 20, 30, 0.25);
} }
.post-content blockquote { .post-content blockquote {
border-left: 3px solid #ff00aa; border-left: 3px solid var(--accent);
margin: 14px 0; margin: 28px 0;
padding: 4px 14px; padding: 4px 0 4px 24px;
color: #aaffaa; font-family: 'Fraunces', serif;
background: #001a0c; font-style: italic;
font-size: 21px;
line-height: 1.5;
color: var(--ink-soft);
font-variation-settings: 'opsz' 36;
} }
.post-content code { .post-content code {
background: #002a14; background: var(--bg-soft);
color: #ffff00; color: var(--accent);
padding: 1px 5px; padding: 1px 7px;
font-family: 'VT323', monospace; border-radius: 4px;
font-family: 'JetBrains Mono', 'SF Mono', monospace;
font-size: 0.88em;
} }
.post-content pre { .post-content pre {
background: #001a0c; background: #1a1a1f;
color: #00ff66; color: #e8e6df;
padding: 12px; padding: 18px 20px;
border: 1px solid #00aa44; border-radius: 10px;
overflow-x: auto; 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 { .back-link {
display: inline-block; display: inline-block;
color: #00ffff; color: var(--ink-muted);
text-decoration: none; text-decoration: none;
margin-bottom: 16px; margin-bottom: 24px;
font-size: 18px; font-size: 14px;
font-weight: 500;
letter-spacing: 0.02em;
transition: color 0.15s;
} }
.back-link::before { content: "<-- "; color: #ff00aa; } .back-link:hover { color: var(--accent); }
.back-link:hover { background: #003311; color: #ffff00; }
/* ========== Pagination ========== */
.pagination { .pagination {
margin-top: 24px; max-width: 720px;
padding-top: 12px; margin: 48px auto 0;
border-top: 1px dashed #00aa44; padding-top: 24px;
border-top: 1px solid var(--line);
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
gap: 16px;
} }
.pagination-link { .pagination-link {
display: inline-block; display: inline-block;
padding: 4px 12px; padding: 8px 18px;
background: #001a0c; background: var(--bg-card);
border: 1px solid #00ff66; border: 1px solid var(--line);
color: #ffff00; border-radius: 999px;
color: var(--ink);
text-decoration: none; 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: #fff;
}
.pagination-info {
color: var(--ink-muted);
font-size: 13px;
} }
.pagination-link:hover { background: #00ff66; color: #000; }
.pagination-info { color: #aaffaa; font-size: 16px; }
/* ========== Related posts ========== */
.related-posts { .related-posts {
margin-top: 32px; max-width: 1100px;
padding-top: 16px; margin: 64px auto 0;
border-top: 1px dashed #ff00aa; padding-top: 36px;
border-top: 1px solid var(--line);
} }
.related-posts h3 { .related-posts h3 {
font-family: 'Press Start 2P', monospace; font-family: 'Fraunces', serif;
font-size: 14px; font-weight: 600;
color: #ff00aa; font-size: 22px;
margin-bottom: 14px; letter-spacing: -0.01em;
color: var(--ink);
margin-bottom: 22px;
font-variation-settings: 'opsz' 36;
} }
.related-posts h3::before { content: "// "; color: #00ffff; }
.related-posts-grid { .related-posts-grid {
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 10px; gap: 16px;
} }
.related-post-card { .related-post-card {
background: #001a0c; background: var(--bg-card);
border: 1px solid #00aa44; border: 1px solid var(--line);
padding: 10px 12px; 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 10px 28px -16px rgba(20, 20, 30, 0.18);
border-color: #d8d2c0;
}
.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;
} }
.related-post-link { text-decoration: none; color: inherit; }
.related-post-link h4 { font-size: 20px; color: #ffff00; margin-bottom: 6px; }
.related-post-excerpt { color: #bfffcf; font-size: 16px; }
.related-post-date { color: #77cc88; font-size: 14px; }
/* ========== Footer ========== */
footer { footer {
margin-top: 0; max-width: 1100px;
padding: 12px 16px; margin: 80px auto 0;
background: #001a0c; padding: 28px 28px 36px;
border-top: 2px solid #00ff66; border-top: 1px solid var(--line);
color: #77cc88; color: var(--ink-muted);
font-size: 16px; font-size: 13px;
text-align: center; display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
flex-wrap: wrap;
} }
footer::before { content: "[EOF] "; color: #ff00aa; } footer .footer-brand {
font-family: 'Fraunces', serif;
font-weight: 600;
color: var(--ink-soft);
letter-spacing: -0.01em;
}
footer .footer-brand .accent { color: var(--accent); }
@media (max-width: 600px) { /* ========== Mobile ========== */
body { font-size: 18px; padding: 8px; } @media (max-width: 700px) {
.ascii-brand { font-size: 18px; } .container { padding: 0 18px; }
header.hero { padding: 24px 0 20px; margin-bottom: 32px; }
.ascii-brand { font-size: 30px; }
.tagline { font-size: 14px; }
.post { padding: 22px 22px; }
.post-title { font-size: 22px; }
.post-excerpt { font-size: 15px; }
.post-content { font-size: 17px; }
.post-content > p:first-of-type::first-letter { font-size: 52px; }
.related-posts-grid { grid-template-columns: 1fr; } .related-posts-grid { grid-template-columns: 1fr; }
} }
</style> </style>
</head> </head>
<body> <body>
<div class="container"> <div class="container">
<div class="terminal-bar">
<span class="dots"></span>
<span>hype404://terminal — ai.sys</span>
</div>
<div class="marquee">
<span>&gt;&gt;&gt; HYPE404 :: AI NEWS DROP :: NEURAL NETWORKS :: PROMPT WARS :: LLM GOSSIP :: ROBOT UPRISING :: DEEPFAKE DRAMA :: AGI IS TOMORROW :: CTRL+C TO STOP :: &nbsp;</span>
</div>
<header class="hero"> <header class="hero">
<a href="/" style="text-decoration: none;"> <div class="hero-row">
<span class="ascii-brand">HYPE404<span class="cursor">_</span></span> <div>
<a href="/" class="brand-link">
<span class="ascii-brand">hype<span class="cursor">404</span></span>
</a> </a>
<div class="tagline">{site.description}</div> <div class="tagline">{site.description}</div>
</div>
<nav class="nav"> <nav class="nav">
<a href="/">home</a> <a href="/">Home</a>
<a href="/about/">about</a> <a href="/about/">About</a>
<a href="/rss.xml">rss</a> <a href="/rss.xml">RSS</a>
</nav> </nav>
</div>
</header> </header>
<main> <main>
@@ -353,7 +473,8 @@ const year = new Date().getFullYear();
</main> </main>
<footer> <footer>
(c) {year} {site.name} &nbsp;::&nbsp; powered by caffeine and a bad gpu <div class="footer-brand">hype<span class="accent">404</span></div>
<div>© {year} {site.name}</div>
</footer> </footer>
</div> </div>
</body> </body>