redesign: dark premium retro + cover-image card listings
Replaces the earlier light editorial pass with a darker premium retro aesthetic for hype404 specifically: - Warm near-black bg (#0d0c0a) with subtle radial-gradient phosphor tint, cream ink (#ebe2cd) - Phosphor lime accent (#b8e25a) for brand mark, drop cap, code, tag hover (CRT/terminal nod, restrained — not the harsh #00ff66) - Hot magenta secondary (#f43f8c) for "Top story" flag, blockquote rule, drop cap (Y2K Wired-magazine vibe) - Cyan-leaning links (#7cd1ff) - Same Fraunces serif headlines + Inter body + JetBrains Mono code - No scanlines, no glitch, no marquee, no [LOG] tags Listing pages now use a magazine-style hero card (top story, 1.1:1 image+text grid, 36px headline) + image-row cards for the rest. Each row has a 220px cover thumb on the left, body on the right. Posts without images render text-only (CSS :has() fallback). Cover extracted via raw-markdown regex (no full render needed). Subtle scroll-reveal animation: cards fade+lift into view via IntersectionObserver, gracefully skips when unsupported. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Claude Code
@@ -46,21 +46,25 @@ const year = new Date().getFullYear();
|
||||
|
||||
<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&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&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;9..144,900&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
|
||||
|
||||
<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;
|
||||
--bg: #0d0c0a;
|
||||
--bg-elev: #16140f;
|
||||
--bg-card: #1a1714;
|
||||
--bg-soft: #221e1a;
|
||||
--ink: #ebe2cd;
|
||||
--ink-soft: #b6ad97;
|
||||
--ink-muted: #7a7363;
|
||||
--line: #2c2722;
|
||||
--line-strong: #3a342d;
|
||||
--accent: #b8e25a;
|
||||
--accent-soft: rgba(184, 226, 90, 0.14);
|
||||
--magenta: #f43f8c;
|
||||
--magenta-soft: rgba(244, 63, 140, 0.18);
|
||||
--link: #7cd1ff;
|
||||
--link-hover: #a9e0ff;
|
||||
}
|
||||
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
@@ -77,12 +81,15 @@ const year = new Date().getFullYear();
|
||||
font-size: 17px;
|
||||
line-height: 1.65;
|
||||
color: var(--ink);
|
||||
background: var(--bg);
|
||||
background:
|
||||
radial-gradient(circle at 12% -8%, rgba(184, 226, 90, 0.06) 0%, transparent 40%),
|
||||
radial-gradient(circle at 92% 6%, rgba(244, 63, 140, 0.06) 0%, transparent 42%),
|
||||
var(--bg);
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1100px;
|
||||
max-width: 1180px;
|
||||
margin: 0 auto;
|
||||
padding: 0 28px;
|
||||
}
|
||||
@@ -104,7 +111,7 @@ const year = new Date().getFullYear();
|
||||
.ascii-brand {
|
||||
font-family: 'Fraunces', 'Times New Roman', serif;
|
||||
font-weight: 800;
|
||||
font-size: 38px;
|
||||
font-size: 40px;
|
||||
letter-spacing: -0.02em;
|
||||
color: var(--ink);
|
||||
line-height: 1;
|
||||
@@ -120,70 +127,263 @@ const year = new Date().getFullYear();
|
||||
font-style: italic;
|
||||
font-size: 16px;
|
||||
margin-top: 6px;
|
||||
max-width: 520px;
|
||||
max-width: 560px;
|
||||
font-variation-settings: 'opsz' 14;
|
||||
}
|
||||
nav.nav {
|
||||
display: flex;
|
||||
gap: 24px;
|
||||
font-size: 14px;
|
||||
gap: 26px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
}
|
||||
nav.nav a {
|
||||
color: var(--ink-soft);
|
||||
text-decoration: none;
|
||||
letter-spacing: 0.02em;
|
||||
transition: color 0.15s;
|
||||
}
|
||||
nav.nav a:hover { color: var(--accent); }
|
||||
|
||||
main { padding: 0 0 64px; }
|
||||
|
||||
/* ========== Index post cards ========== */
|
||||
/* ========== 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 {
|
||||
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-link {
|
||||
display: grid;
|
||||
grid-template-columns: 1.1fr 1fr;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
.post-hero-img {
|
||||
overflow: hidden;
|
||||
background: var(--bg-soft);
|
||||
min-height: 280px;
|
||||
}
|
||||
.post-hero-img img {
|
||||
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;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
.post-hero-flag {
|
||||
color: var(--magenta);
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.16em;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.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:hover .post-hero-title { color: var(--accent); }
|
||||
.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-tag {
|
||||
display: inline-block;
|
||||
padding: 2px 10px;
|
||||
border: 1px solid var(--line-strong);
|
||||
border-radius: 999px;
|
||||
color: var(--ink-soft);
|
||||
font-size: 12px;
|
||||
}
|
||||
.post-hero-tag a { color: inherit; text-decoration: none; }
|
||||
|
||||
/* ========== Row cards (rest of feed) ========== */
|
||||
.post-row {
|
||||
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);
|
||||
}
|
||||
.post-row-link {
|
||||
display: grid;
|
||||
grid-template-columns: 220px 1fr;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
.post-row-img {
|
||||
overflow: hidden;
|
||||
background: var(--bg-soft);
|
||||
min-height: 100%;
|
||||
}
|
||||
.post-row-img img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 160px;
|
||||
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;
|
||||
}
|
||||
/* 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;
|
||||
font-size: 22px;
|
||||
line-height: 1.22;
|
||||
letter-spacing: -0.015em;
|
||||
color: var(--ink);
|
||||
margin-bottom: 8px;
|
||||
font-variation-settings: 'opsz' 80;
|
||||
transition: color 0.15s;
|
||||
}
|
||||
.post-row:hover .post-row-title { 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-tag {
|
||||
display: inline-block;
|
||||
padding: 1px 9px;
|
||||
background: var(--bg-soft);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 999px;
|
||||
color: var(--ink-soft);
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
}
|
||||
.post-row-tag a { color: inherit; text-decoration: none; }
|
||||
|
||||
.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: 28px 32px;
|
||||
margin-bottom: 18px;
|
||||
transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
|
||||
}
|
||||
.post:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 12px 32px -16px rgba(20, 20, 30, 0.18);
|
||||
border-color: #d8d2c0;
|
||||
padding: 26px 30px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.post-title {
|
||||
font-family: 'Fraunces', serif;
|
||||
font-weight: 600;
|
||||
font-size: 26px;
|
||||
line-height: 1.2;
|
||||
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 { 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;
|
||||
align-items: center;
|
||||
}
|
||||
.post-excerpt {
|
||||
color: var(--ink-soft);
|
||||
font-size: 16px;
|
||||
font-size: 15px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* ========== Tags ========== */
|
||||
.tag {
|
||||
display: inline-block;
|
||||
background: var(--bg-soft);
|
||||
@@ -193,8 +393,6 @@ const year = new Date().getFullYear();
|
||||
border: 1px solid var(--line);
|
||||
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:hover { background: var(--accent-soft); color: var(--accent); }
|
||||
@@ -207,7 +405,7 @@ const year = new Date().getFullYear();
|
||||
background: transparent;
|
||||
border: none;
|
||||
font-size: 18px;
|
||||
line-height: 1.75;
|
||||
line-height: 1.78;
|
||||
color: var(--ink);
|
||||
}
|
||||
.post-content h1 {
|
||||
@@ -245,12 +443,12 @@ const year = new Date().getFullYear();
|
||||
}
|
||||
.post-content > p:first-of-type::first-letter {
|
||||
font-family: 'Fraunces', serif;
|
||||
font-weight: 700;
|
||||
font-weight: 800;
|
||||
font-size: 64px;
|
||||
float: left;
|
||||
line-height: 0.92;
|
||||
padding: 6px 10px 0 0;
|
||||
color: var(--accent);
|
||||
padding: 6px 12px 0 0;
|
||||
color: var(--magenta);
|
||||
font-variation-settings: 'opsz' 144;
|
||||
}
|
||||
.post-content a {
|
||||
@@ -266,16 +464,16 @@ const year = new Date().getFullYear();
|
||||
height: auto;
|
||||
border-radius: 10px;
|
||||
margin: 28px 0;
|
||||
box-shadow: 0 12px 36px -18px rgba(20, 20, 30, 0.25);
|
||||
box-shadow: 0 18px 48px -20px rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
.post-content blockquote {
|
||||
border-left: 3px solid var(--accent);
|
||||
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.5;
|
||||
line-height: 1.55;
|
||||
color: var(--ink-soft);
|
||||
font-variation-settings: 'opsz' 36;
|
||||
}
|
||||
@@ -288,9 +486,10 @@ const year = new Date().getFullYear();
|
||||
font-size: 0.88em;
|
||||
}
|
||||
.post-content pre {
|
||||
background: #1a1a1f;
|
||||
color: #e8e6df;
|
||||
background: #050505;
|
||||
color: #d4ce99;
|
||||
padding: 18px 20px;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 10px;
|
||||
overflow-x: auto;
|
||||
margin: 24px 0;
|
||||
@@ -318,16 +517,17 @@ const year = new Date().getFullYear();
|
||||
color: var(--ink-muted);
|
||||
text-decoration: none;
|
||||
margin-bottom: 24px;
|
||||
font-size: 14px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.02em;
|
||||
letter-spacing: 0.06em;
|
||||
text-transform: uppercase;
|
||||
transition: color 0.15s;
|
||||
}
|
||||
.back-link:hover { color: var(--accent); }
|
||||
|
||||
/* ========== Pagination ========== */
|
||||
.pagination {
|
||||
max-width: 720px;
|
||||
max-width: 1180px;
|
||||
margin: 48px auto 0;
|
||||
padding-top: 24px;
|
||||
border-top: 1px solid var(--line);
|
||||
@@ -351,7 +551,7 @@ const year = new Date().getFullYear();
|
||||
.pagination-link:hover {
|
||||
background: var(--accent);
|
||||
border-color: var(--accent);
|
||||
color: #fff;
|
||||
color: #0d0c0a;
|
||||
}
|
||||
.pagination-info {
|
||||
color: var(--ink-muted);
|
||||
@@ -360,7 +560,7 @@ const year = new Date().getFullYear();
|
||||
|
||||
/* ========== Related posts ========== */
|
||||
.related-posts {
|
||||
max-width: 1100px;
|
||||
max-width: 1180px;
|
||||
margin: 64px auto 0;
|
||||
padding-top: 36px;
|
||||
border-top: 1px solid var(--line);
|
||||
@@ -388,8 +588,8 @@ const year = new Date().getFullYear();
|
||||
}
|
||||
.related-post-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 10px 28px -16px rgba(20, 20, 30, 0.18);
|
||||
border-color: #d8d2c0;
|
||||
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 {
|
||||
@@ -415,7 +615,7 @@ const year = new Date().getFullYear();
|
||||
|
||||
/* ========== Footer ========== */
|
||||
footer {
|
||||
max-width: 1100px;
|
||||
max-width: 1180px;
|
||||
margin: 80px auto 0;
|
||||
padding: 28px 28px 36px;
|
||||
border-top: 1px solid var(--line);
|
||||
@@ -429,21 +629,30 @@ const year = new Date().getFullYear();
|
||||
}
|
||||
footer .footer-brand {
|
||||
font-family: 'Fraunces', serif;
|
||||
font-weight: 600;
|
||||
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-link {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.post-hero-img { min-height: 220px; max-height: 260px; }
|
||||
.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 { padding: 22px 22px; }
|
||||
.post-title { font-size: 22px; }
|
||||
.post-excerpt { font-size: 15px; }
|
||||
.post-row-link { grid-template-columns: 110px 1fr; }
|
||||
.post-row-img img { min-height: 110px; }
|
||||
.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; }
|
||||
@@ -474,7 +683,7 @@ const year = new Date().getFullYear();
|
||||
|
||||
<footer>
|
||||
<div class="footer-brand">hype<span class="accent">404</span></div>
|
||||
<div>© {year} {site.name}</div>
|
||||
<div>(c) {year} {site.name}</div>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
Reference in New Issue
Block a user