thejayman77/upbeatBytes
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

/art desktop: fix CTA overlap, widen card for a bigger piece, darken labels

Browse Source 
- .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 <noreply@anthropic.com>
This commit is contained in:
jay
2026-06-23 20:31:20 -04:00
parent 5157c221ed
commit 9c41da5fcc
1 changed files with 6 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/routes/art/+page.svelte
+6 -3
View File
@@ -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%; }