From 9c41da5fcc99202ec5f3599f8c48c8e32e8f1a14 Mon Sep 17 00:00:00 2001 From: jay Date: Tue, 23 Jun 2026 20:31:20 -0400 Subject: [PATCH] /art desktop: fix CTA overlap, widen card for a bigger piece, darken labels MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - .body wasn't a flex container, so the "View at The Met" CTA's align-self was ignored and the inline link collapsed over the metadata. Make .head/.body flex columns → CTA sits correctly below the collection/rights. - Widen the /art desktop card (max-width 1052→1280, art column 46→50%, tighter padding) so the framed piece is properly sized and the frame reads in better proportion — /art intentionally breaks the hub's 1180 column since the artwork is the point and mobile has its own layout. - Darken the Space Mono micro-labels (Frame / Thickness / Colors / Collection / Rights) so they stand out. Co-Authored-By: Claude Opus 4.8 --- frontend/src/routes/art/+page.svelte | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/frontend/src/routes/art/+page.svelte b/frontend/src/routes/art/+page.svelte index fee3174..da48034 100644 --- a/frontend/src/routes/art/+page.svelte +++ b/frontend/src/routes/art/+page.svelte @@ -230,7 +230,7 @@ --ink: #232a31; /* dark slate — titles */ --story: #4f4a3f; /* warm body text */ --muted: #8a8273; - --label: #6f6757; /* Space Mono micro-labels */ + --label: #4a4334; /* Space Mono micro-labels — darker so they stand out */ --line: #ece5d8; --accent: #8857C2; /* Daily-Art purple (matches the home tile) */ --accent-deep: #6f42a8; @@ -242,8 +242,10 @@ flex-direction: column; } + /* /art runs wider than the hub's 1180 column — the artwork is the point, and the + mobile view is separate, so the desktop card gets room for a properly-sized piece. */ .gallery { - flex: 1; width: 100%; max-width: 1052px; margin: 0 auto; + flex: 1; width: 100%; max-width: 1280px; margin: 0 auto; padding: clamp(10px, 2vw, 22px) clamp(18px, 5vw, 44px) clamp(28px, 5vw, 48px); box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; @@ -267,6 +269,7 @@ box-shadow: 0 16px 40px -22px rgba(120, 95, 50, 0.32); } .left { flex: 1; min-width: 0; padding: clamp(28px, 4vw, 50px) clamp(24px, 3.4vw, 46px); display: flex; flex-direction: column; justify-content: center; } + .head, .body { display: flex; flex-direction: column; } /* so .cta align-self works (no overlap) */ .kicker { display: inline-flex; align-items: center; gap: 9px; font-family: 'Space Mono', monospace; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); } .kicker-rule { width: 18px; height: 2px; background: var(--accent); border-radius: 2px; } .art-title { font-family: 'Newsreader', Georgia, serif; font-weight: 500; font-size: clamp(2rem, 4.2vw, 2.9rem); line-height: 1.05; letter-spacing: -0.01em; color: var(--ink); margin: 14px 0 0; } @@ -280,7 +283,7 @@ .cta:hover { background: var(--accent-deep); } /* right column: the framed piece on a deeper-tan ground, controls beneath */ - .right { flex: 0 0 46%; background: var(--art-band); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: clamp(28px, 3.4vw, 44px) clamp(22px, 3vw, 38px); } + .right { flex: 0 0 50%; background: var(--art-band); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: clamp(28px, 3vw, 42px) clamp(20px, 2.5vw, 34px); } .art-stage { display: flex; justify-content: center; width: 100%; } .art-frame { max-width: 100%; }