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

viralmvp Y2K mix: bubble-letter brand + multi-color sticker tags

Browse Source 
Restores the MTV/Geocities-era visual identity in editorial form:

- Bungee Shade for the "mvp" word in the brand wordmark — built-in
  3D bevel + drop shadow gives a sticker/bubble-letter pop without
  needing extra layers
- Hot magenta + electric cyan + lemon yellow + electric purple as
  multi-color palette (was just one magenta accent before)
- Body background picks up four subtle radial corner gradients in the
  full palette (pink + cyan + lemon + purple) — barely there but adds
  Y2K warmth instead of flat off-white
- post-hero-flag now renders as a Bungee sticker badge: solid magenta
  pill with cyan + lemon stacked drop shadows and a -1.5deg tilt
- post-hero-tag and post-row-tag rotate through pastel sticker colors
  via :nth-child (magenta, cyan, lemon, purple) for that MTV programme
  guide energy
- Hero + row hover shadows shift from grey to magenta-tinted
- Drop cap chromatic Y2K stack: magenta letter + cyan offset + lemon
  second offset
- hero-row alignment fixed (flex-end so nav baseline aligns with tagline)
- post-row image gets the same position: absolute inset: 0 fix as
  hype404 so image always fills its grid cell cleanly

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Claude Code
2026-05-01 17:07:22 +08:00
parent 8cf68e49bf
commit 7858d922ea
1 changed files with 83 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

114
src/layouts/Layout.astro
View File

@@ -47,21 +47,30 @@ 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&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Bungee+Shade&family=Bungee&display=swap" rel="stylesheet" />
<style is:global>
:root {
--bg: #fbfaf6;
--bg: #fff9f3;
--bg-card: #ffffff;
--bg-soft: #f5f0ef;
--bg-soft: #fbecf3;
--ink: #1a121d;
--ink-soft: #4f3f57;
--ink-muted: #897a8f;
--line: #ebe4e8;
--accent: #d4308f;
--accent-soft: #fbe2f0;
--link: #6c2bd9;
--link-hover: #4c1d95;
--line: #f1dfe6;
/* Y2K multi-color palette — magenta primary, cyan + lemon supporting,
electric purple links */
--accent: #ec3a8e; /* hot magenta */
--accent-soft: #ffd8eb;
--cyan: #2bb6e2; /* electric cyan */
--cyan-soft: #cdf0fb;
--lemon: #fbcc31; /* lemon yellow */
--lemon-soft:#fff1c2;
--grape: #9b3de5; /* electric purple */
--link: #9b3de5;
--link-hover: #6f1ec3;
--display-bubble: 'Bungee Shade', 'Bungee', cursive;
--display-bungee: 'Bungee', 'Inter', sans-serif;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
@@ -78,7 +87,12 @@ const year = new Date().getFullYear();
font-size: 17px;
line-height: 1.65;
color: var(--ink);
background: var(--bg);
background:
radial-gradient(circle at 6% -4%, rgba(236, 58, 142, 0.12) 0%, transparent 38%),
radial-gradient(circle at 96% 4%, rgba( 43, 182, 226, 0.12) 0%, transparent 40%),
radial-gradient(circle at 50%102%, rgba(251, 204, 49, 0.10) 0%, transparent 45%),
radial-gradient(circle at 18% 95%, rgba(155, 61, 229, 0.08) 0%, transparent 42%),
var(--bg);
min-height: 100vh;
}
@@ -96,7 +110,7 @@ const year = new Date().getFullYear();
}
.hero-row {
display: flex;
align-items: center;
align-items: flex-end;
justify-content: space-between;
gap: 24px;
flex-wrap: wrap;
@@ -105,15 +119,23 @@ const year = new Date().getFullYear();
.ascii-brand {
font-family: 'Fraunces', 'Times New Roman', serif;
font-weight: 800;
font-size: 38px;
letter-spacing: -0.02em;
font-size: 42px;
letter-spacing: -0.025em;
color: var(--ink);
line-height: 1;
font-variation-settings: 'opsz' 144;
display: inline-block;
}
/* Bubble-letter Y2K accent on the "mvp" word — Bungee Shade has built-in
3D shadow + bevel that reads as MTV/sticker even at small sizes. */
.ascii-brand .cursor {
font-family: var(--display-bubble);
color: var(--accent);
font-weight: 800;
font-weight: 400;
font-size: 0.78em;
letter-spacing: 0.04em;
margin-left: 6px;
vertical-align: 6px;
}
.tagline {
color: var(--ink-soft);
@@ -246,13 +268,17 @@ const year = new Date().getFullYear();
}
.post-content > p:first-of-type::first-letter {
font-family: 'Fraunces', serif;
font-weight: 700;
font-size: 64px;
font-weight: 800;
font-size: 72px;
float: left;
line-height: 0.92;
padding: 6px 10px 0 0;
line-height: 0.9;
padding: 6px 14px 0 0;
color: var(--accent);
font-variation-settings: 'opsz' 144;
/* Y2K chromatic — magenta + cyan offset */
text-shadow:
3px 3px 0 var(--cyan),
6px 6px 0 var(--lemon);
}
.post-content a {
color: var(--link);
@@ -485,7 +511,8 @@ const year = new Date().getFullYear();
}
.post-hero:hover {
transform: translateY(-2px);
box-shadow: 0 18px 48px -22px rgba(40, 30, 50, 0.22);
box-shadow: 0 22px 56px -22px rgba(236, 58, 142, 0.32);
border-color: var(--accent-soft);
}
.post-hero-link {
display: grid;
@@ -510,13 +537,22 @@ const year = new Date().getFullYear();
flex-direction: column;
justify-content: center;
}
/* Y2K sticker flag — Bungee + colored bg pill, slight tilt for sticker feel */
.post-hero-flag {
color: var(--accent);
font-size: 11px;
font-weight: 700;
display: inline-block;
font-family: var(--display-bungee);
background: var(--accent);
color: #fff;
font-size: 12px;
letter-spacing: 0.12em;
padding: 4px 14px;
border-radius: 999px;
margin-bottom: 14px;
transform: rotate(-1.5deg);
box-shadow:
2px 2px 0 var(--cyan),
4px 4px 0 var(--lemon);
text-transform: uppercase;
letter-spacing: 0.16em;
margin-bottom: 12px;
}
.post-hero-title {
font-family: 'Fraunces', 'Noto Serif SC', serif;
@@ -549,8 +585,14 @@ const year = new Date().getFullYear();
border-radius: 999px;
color: var(--ink-soft);
font-size: 12px;
font-weight: 600;
}
.post-hero-tag a { color: inherit; text-decoration: none; }
/* Rotating Y2K pastel sticker colors per nth-child */
.post-hero-tag:nth-child(2) { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-soft); }
.post-hero-tag:nth-child(3) { background: var(--cyan-soft); color: #1a7eaa; border-color: var(--cyan-soft); }
.post-hero-tag:nth-child(4) { background: var(--lemon-soft); color: #8a6c00; border-color: var(--lemon-soft); }
.post-hero-tag:nth-child(5) { background: #efdcfb; color: var(--grape); border-color: #efdcfb; }
/* ========== Row cards ========== */
.post-row {
@@ -563,22 +605,28 @@ const year = new Date().getFullYear();
}
.post-row:hover {
transform: translateY(-2px);
box-shadow: 0 14px 36px -18px rgba(40, 30, 50, 0.18);
box-shadow: 0 16px 40px -18px rgba(236, 58, 142, 0.25);
border-color: var(--accent-soft);
}
.post-row-link {
display: grid;
grid-template-columns: 220px 1fr;
grid-template-columns: 240px 1fr;
align-items: stretch;
text-decoration: none;
color: inherit;
}
.post-row-img {
position: relative;
overflow: hidden;
background: var(--bg-soft);
}
.post-row-img img {
width: 100%; height: 100%;
min-height: 160px;
object-fit: cover; display: block;
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); }
@@ -586,6 +634,7 @@ const year = new Date().getFullYear();
padding: 22px 26px;
display: flex; flex-direction: column;
justify-content: center;
gap: 6px;
}
.post-row-link:has(.post-row-body:only-child) {
grid-template-columns: 1fr;
@@ -620,15 +669,18 @@ const year = new Date().getFullYear();
}
.post-row-tag {
display: inline-block;
padding: 1px 9px;
padding: 1px 10px;
background: var(--bg-soft);
border: 1px solid var(--line);
border: 1px solid transparent;
border-radius: 999px;
color: var(--ink-soft);
font-size: 11px;
font-weight: 500;
font-weight: 600;
}
.post-row-tag a { color: inherit; text-decoration: none; }
.post-row-tag:nth-child(2) { background: var(--accent-soft); color: var(--accent); }
.post-row-tag:nth-child(3) { background: var(--cyan-soft); color: #1a7eaa; }
.post-row-tag:nth-child(4) { background: var(--lemon-soft); color: #8a6c00; }
.post-empty {
color: var(--ink-muted);