home2 cards round 4: all cards tinted + top strip, inset photos, centered static headers
- All four cards now tinted with a taller (18px), darker (~24%) top color strip. - Photos (news top, art right) sit inset + rounded so the card colour frames them. - Static cards: header centered; CTA pinned to the bottom so Play/Daily Moment links line up. News tint = soft amber, Art = soft lilac, Play = sky, Moment = sage. - Hub spacing: intro pulled up a touch, more gap between the intro and the cards. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -1,7 +1,7 @@
|
||||
<script>
|
||||
// A single hub "room" card. Presentational — the page passes live preview data in.
|
||||
// Every card shares a side-by-side icon+title header; layout varies by preview type:
|
||||
// news = photo on top, art = photo on the right, static = tinted with a darker top strip.
|
||||
// Every card is tinted with a darker top strip; layout varies by preview type:
|
||||
// news = inset photo on top, art = inset photo on the right, static = centered header.
|
||||
let { room, artImg = null, newsImg = null, newsHeadline = '' } = $props();
|
||||
</script>
|
||||
|
||||
@@ -34,19 +34,27 @@
|
||||
|
||||
<style>
|
||||
.card {
|
||||
--pad: clamp(13px, 1.7vw, 18px);
|
||||
--strip: 18px;
|
||||
position: relative; display: flex; overflow: hidden; text-decoration: none; color: var(--ink);
|
||||
background: var(--surface); border: 1px solid var(--line); border-radius: 18px;
|
||||
box-shadow: 0 10px 30px rgba(20, 30, 45, 0.06);
|
||||
transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
|
||||
background: var(--tint, var(--surface)); border: 1px solid rgba(20, 30, 45, 0.07);
|
||||
border-radius: 18px; box-shadow: 0 10px 30px rgba(20, 30, 45, 0.06);
|
||||
transition: transform 0.18s ease, box-shadow 0.18s ease;
|
||||
padding: calc(var(--pad) + var(--strip)) var(--pad) var(--pad);
|
||||
}
|
||||
.card:hover { transform: translateY(-4px); box-shadow: 0 20px 46px rgba(20, 30, 45, 0.12); }
|
||||
/* the darker color strip across the top — a touch of each tint, deepened */
|
||||
.card::before {
|
||||
content: ""; position: absolute; top: 0; left: 0; right: 0; height: var(--strip);
|
||||
background: color-mix(in srgb, var(--tint, #e8e8e8), #0c1620 24%);
|
||||
}
|
||||
.card:hover { transform: translateY(-4px); box-shadow: 0 20px 46px rgba(20, 30, 45, 0.12); border-color: #ddd4c4; }
|
||||
|
||||
/* size variants — grid spans set by the page; these set the heights */
|
||||
.card--large { min-height: 340px; }
|
||||
.card--wide { min-height: 200px; }
|
||||
.card--small { min-height: 168px; }
|
||||
|
||||
.content { display: flex; flex-direction: column; }
|
||||
.content { display: flex; flex-direction: column; flex: 1; }
|
||||
|
||||
/* shared side-by-side header (icon + title), clean modern sans title */
|
||||
.head { display: flex; align-items: center; gap: 10px; }
|
||||
@@ -55,44 +63,32 @@
|
||||
font-family: var(--sans); font-weight: 700; letter-spacing: -0.015em;
|
||||
font-size: clamp(1.25rem, 2vw, 1.5rem);
|
||||
}
|
||||
.blurb { margin: 10px 0 15px; color: var(--muted); font-size: 1rem; line-height: 1.45; max-width: 42ch; }
|
||||
.blurb { margin: 11px 0 14px; 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; larger hero header */
|
||||
/* photos sit inset (rounded) so the card colour shows all around them */
|
||||
.photo { background-size: cover; background-position: center; border-radius: 11px; }
|
||||
|
||||
/* News — inset 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 .content { padding: clamp(18px, 2.2vw, 26px); }
|
||||
.card--news .photo--top { width: 100%; flex: 1 1 auto; min-height: 150px; }
|
||||
.card--news .content { flex: 0 0 auto; padding-top: 14px; }
|
||||
.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: 12px 0 15px; font-family: Georgia, serif; font-style: italic;
|
||||
margin: 12px 0 4px; 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 RIGHT (cover-cropped to hide ragged scan edges) */
|
||||
.card--art { flex-direction: row; align-items: stretch; }
|
||||
.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);
|
||||
}
|
||||
/* Art — inset rectangular photo on the RIGHT (cover-cropped to hide ragged edges) */
|
||||
.card--art { flex-direction: row; align-items: stretch; gap: var(--pad); }
|
||||
.card--art .content { justify-content: center; }
|
||||
.card--art .photo--right { flex: 0 0 40%; min-width: 120px; align-self: stretch; }
|
||||
|
||||
/* Static — tinted body with a darker color strip on top (Monopoly-card feel) */
|
||||
.card--static {
|
||||
flex-direction: column; background: var(--tint, var(--surface));
|
||||
border-color: rgba(20, 30, 45, 0.07); padding: clamp(20px, 2.4vw, 28px);
|
||||
}
|
||||
.card--static::before {
|
||||
content: ""; position: absolute; top: 0; left: 0; right: 0; height: 13px;
|
||||
background: color-mix(in srgb, var(--tint), #1b2733 17%);
|
||||
}
|
||||
/* Static — centered header, body left, link pinned to the bottom (cards line up) */
|
||||
.card--static .head { justify-content: center; }
|
||||
.card--static .blurb { margin: 12px 0 14px; }
|
||||
.card--static .cta { margin-top: auto; }
|
||||
</style>
|
||||
|
||||
@@ -12,6 +12,7 @@ export const ROOMS = [
|
||||
size: 'large',
|
||||
preview: 'news',
|
||||
icon: '📰',
|
||||
tint: '#fbecdb', // soft amber
|
||||
},
|
||||
{
|
||||
id: 'art',
|
||||
@@ -22,6 +23,7 @@ export const ROOMS = [
|
||||
size: 'wide',
|
||||
preview: 'art',
|
||||
icon: '🖼️',
|
||||
tint: '#f4ecf3', // soft lilac
|
||||
},
|
||||
{
|
||||
id: 'play',
|
||||
|
||||
@@ -108,9 +108,9 @@
|
||||
|
||||
.hub {
|
||||
flex: 1; width: 100%; max-width: 1180px; margin: 0 auto; box-sizing: border-box;
|
||||
padding: clamp(16px, 3vw, 40px) clamp(18px, 5vw, 64px) clamp(40px, 6vw, 72px);
|
||||
padding: clamp(12px, 2.4vw, 30px) clamp(18px, 5vw, 64px) clamp(40px, 6vw, 72px);
|
||||
}
|
||||
.intro { text-align: center; margin: clamp(8px, 2vw, 22px) 0 clamp(28px, 4vw, 44px); }
|
||||
.intro { text-align: center; margin: clamp(6px, 1.2vw, 14px) 0 clamp(40px, 6vw, 64px); }
|
||||
.intro h1 {
|
||||
font-family: Georgia, "Iowan Old Style", "Times New Roman", serif;
|
||||
font-size: clamp(1.9rem, 4.5vw, 3rem); margin: 0; letter-spacing: -0.015em; line-height: 1.08;
|
||||
|
||||
Reference in New Issue
Block a user