From 4684a216b8dc51c43b9d6895a607e01b7ce5a3f6 Mon Sep 17 00:00:00 2001 From: jay Date: Sun, 21 Jun 2026 19:57:18 -0400 Subject: [PATCH] home2 cards round 3: photo-right art, unified side-by-side header, Manrope titles, top strip - Art photo moved to the RIGHT (text/icon left) so it no longer clusters with the news photo in the center. - Unified header: every card now has icon + title side-by-side; card titles switched from serif (too 'document') to Manrope bold. Art icon/title now match Play/Daily Moment sizes. - Static cards (Play/Daily Moment) gain a darker top color strip (Monopoly-card feel) over the tinted body, derived from each tint via color-mix. Co-Authored-By: Claude Opus 4.8 --- frontend/src/lib/components/RoomCard.svelte | 78 ++++++++++----------- 1 file changed, 36 insertions(+), 42 deletions(-) diff --git a/frontend/src/lib/components/RoomCard.svelte b/frontend/src/lib/components/RoomCard.svelte index 5427bab..9335dca 100644 --- a/frontend/src/lib/components/RoomCard.svelte +++ b/frontend/src/lib/components/RoomCard.svelte @@ -1,7 +1,7 @@ @@ -9,26 +9,23 @@ style={room.tint ? `--tint:${room.tint}` : ''}> {#if room.preview === 'news'} {#if newsImg}
{/if} -
-
{room.icon}{room.title}
+
+
{room.icon}{room.title}
{#if newsHeadline}

“{newsHeadline}”

{:else}

{room.blurb}

{/if} {room.cta} →
{:else if room.preview === 'art'} - {#if artImg}
{/if} -
-
{room.icon}{room.title}
+
+
{room.icon}{room.title}

{room.blurb}

{room.cta} →
+ {#if artImg}
{/if} {:else} -
- {room.icon} - {room.title} -
-
+
+
{room.icon}{room.title}

{room.blurb}

{room.cta} →
@@ -49,56 +46,53 @@ .card--wide { min-height: 200px; } .card--small { min-height: 168px; } - .eyebrow { - display: flex; align-items: center; gap: 9px; - font-family: Georgia, "Iowan Old Style", "Times New Roman", serif; - font-size: clamp(1.15rem, 2vw, 1.5rem); font-weight: 600; letter-spacing: -0.01em; + .content { display: flex; flex-direction: column; } + + /* shared side-by-side header (icon + title), clean modern sans title */ + .head { display: flex; align-items: center; gap: 10px; } + .ic { font-size: clamp(1.7rem, 2.4vw, 2.1rem); line-height: 1; } + .title { + font-family: var(--sans); font-weight: 700; letter-spacing: -0.015em; + font-size: clamp(1.25rem, 2vw, 1.5rem); } - .ic { font-size: 1.05em; line-height: 1; } - .blurb { margin: 9px 0 15px; color: var(--muted); font-size: 1rem; line-height: 1.45; max-width: 42ch; } + .blurb { margin: 10px 0 15px; color: var(--muted); font-size: 1rem; line-height: 1.45; max-width: 42ch; } .cta { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--accent); font-size: 0.98rem; } .arr { transition: transform 0.18s ease; } .card:hover .arr { transform: translateX(4px); } - /* News — photo on top, headline below */ + /* News — photo on top, headline below; larger hero header */ .card--news { flex-direction: column; } .card--news .photo--top { width: 100%; flex: 1 1 auto; min-height: 150px; background-size: cover; background-position: center; } - .card--news .body { padding: clamp(18px, 2.2vw, 26px); } - .card--news .eyebrow { font-size: clamp(1.4rem, 2.6vw, 1.9rem); } + .card--news .content { padding: clamp(18px, 2.2vw, 26px); } + .card--news .ic { font-size: clamp(2rem, 2.8vw, 2.5rem); } + .card--news .title { font-size: clamp(1.5rem, 2.6vw, 2rem); } .card--news .headline { - margin: 11px 0 15px; font-family: Georgia, serif; font-style: italic; + margin: 12px 0 15px; font-family: Georgia, serif; font-style: italic; font-size: clamp(1.1rem, 1.9vw, 1.4rem); line-height: 1.34; max-width: 40ch; } - /* Art — rectangular photo on the left (cover-cropped to hide ragged scan edges) */ + /* Art — rectangular photo on the RIGHT (cover-cropped to hide ragged scan edges) */ .card--art { flex-direction: row; align-items: stretch; } - .card--art .photo--left { + .card--art .content { + flex: 1; padding: clamp(16px, 2vw, 26px); justify-content: center; + } + .card--art .photo--right { flex: 0 0 42%; min-width: 130px; background-size: cover; background-position: center; - box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.06); - } - .card--art .body { - flex: 1; padding: clamp(16px, 2vw, 26px); - display: flex; flex-direction: column; justify-content: center; + box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.06); } - /* Static — tinted, big centered icon + title, body left-aligned below */ + /* Static — tinted body with a darker color strip on top (Monopoly-card feel) */ .card--static { - flex-direction: column; justify-content: center; align-items: stretch; - background: var(--tint, var(--surface)); border-color: rgba(20, 30, 45, 0.07); - padding: clamp(18px, 2.4vw, 26px); + flex-direction: column; background: var(--tint, var(--surface)); + border-color: rgba(20, 30, 45, 0.07); padding: clamp(20px, 2.4vw, 28px); } - .card--static .head { - display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; + .card--static::before { + content: ""; position: absolute; top: 0; left: 0; right: 0; height: 13px; + background: color-mix(in srgb, var(--tint), #1b2733 17%); } - .card--static .ic-big { font-size: clamp(2.2rem, 4vw, 2.9rem); line-height: 1; } - .card--static .s-title { - font-family: Georgia, "Iowan Old Style", "Times New Roman", serif; - font-size: clamp(1.2rem, 2.2vw, 1.55rem); font-weight: 600; letter-spacing: -0.01em; - } - .card--static .tail { margin-top: 16px; text-align: left; } - .card--static .blurb { margin: 0 0 12px; } + .card--static .blurb { margin: 12px 0 14px; }