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
@@ -1,23 +1,93 @@
|
||||
---
|
||||
const { posts, tag } = Astro.props;
|
||||
---
|
||||
{tag && <h2 style="margin-bottom: 20px;">Tagged: {tag}</h2>}
|
||||
|
||||
{posts.map((post) => (
|
||||
<article class="post">
|
||||
<h2 class="post-title">
|
||||
<a href={`/${post.slug}/`}>{post.title}</a>
|
||||
</h2>
|
||||
<div class="post-meta">
|
||||
{new Date(post.date).toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' })}
|
||||
{post.tags.map((t) => (
|
||||
<span class="tag"><a href={`/tag/${t}/`}>{t}</a></span>
|
||||
))}
|
||||
</div>
|
||||
<p class="post-excerpt">{post.rawExcerpt}</p>
|
||||
// Extract first cover image directly from the raw markdown body.
|
||||
// Cheap regex — avoids rendering the full HTML for each card.
|
||||
function firstImage(body) {
|
||||
const m = body && body.match(/!\[[^\]]*\]\((\/images\/[^)]+)\)/);
|
||||
return m ? m[1] : null;
|
||||
}
|
||||
|
||||
const enriched = posts.map((p) => ({
|
||||
...p,
|
||||
cover: firstImage(p.body),
|
||||
}));
|
||||
const hero = enriched[0];
|
||||
const rest = enriched.slice(1);
|
||||
|
||||
const fmt = (d) => new Date(d).toLocaleDateString('en-US',
|
||||
{ year: 'numeric', month: 'long', day: 'numeric' });
|
||||
---
|
||||
{tag && (
|
||||
<h2 class="tag-banner">
|
||||
Tagged: <em>{tag}</em>
|
||||
</h2>
|
||||
)}
|
||||
|
||||
{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>
|
||||
</div>
|
||||
</a>
|
||||
</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>
|
||||
</div>
|
||||
</a>
|
||||
</article>
|
||||
))}
|
||||
|
||||
{posts.length === 0 && (
|
||||
<p style="color: #999; text-align: center; padding: 50px 0;">No posts yet.</p>
|
||||
{enriched.length === 0 && (
|
||||
<p class="post-empty">No posts yet.</p>
|
||||
)}
|
||||
|
||||
<script is:inline>
|
||||
(() => {
|
||||
const els = document.querySelectorAll('[data-reveal]');
|
||||
if (!('IntersectionObserver' in window)) {
|
||||
els.forEach((e) => e.classList.add('is-visible'));
|
||||
return;
|
||||
}
|
||||
const obs = new IntersectionObserver((entries) => {
|
||||
for (const e of entries) {
|
||||
if (e.isIntersecting) {
|
||||
e.target.classList.add('is-visible');
|
||||
obs.unobserve(e.target);
|
||||
}
|
||||
}
|
||||
}, { rootMargin: '0px 0px -10% 0px', threshold: 0.05 });
|
||||
els.forEach((e) => obs.observe(e));
|
||||
})();
|
||||
</script>
|
||||
|
||||
@@ -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