hotel-manage-stack/weather
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Today's hourly cards: bigger icon/temp (~150%), rain%/wind on 2 lines with icons

Browse source 
Icon 26->39px, temp font-size scaled ~150%. Rain% and wind now render on
separate lines (was one line with a '·' separator) with a small Droplet/
Wind icon in front of each. large prop on PointMeta keeps the next-2-days
cards at their existing smaller size -- only today's hourly strip is meant
to read as the detailed/primary view.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
jtricerolph 2026-08-25 13:14:12 +00:00
parent e4f4f031ef
commit 1a5c37d011
2 changed files with 26 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

15
frontend/src/index.css
View file

@ -114,11 +114,14 @@ html, body, #root { height: 100%; margin: 0; font-size: 14px; }
.wx-astro { display: flex; gap: clamp(10px, 1.2vw, 18px); color: var(--text-muted); font-size: clamp(0.7rem, 0.85vw, 0.9rem); }
.wx-astro-item { display: inline-flex; align-items: center; gap: 4px; }
/* Rain% + wind, one line, shown on hourly and 3-hourly point cards */
.wx-meta { display: flex; align-items: center; gap: 4px; font-size: clamp(0.6rem, 0.72vw, 0.72rem); white-space: nowrap; }
/* Rain% and wind, each their own line with a small leading icon — shown on hourly
and 3-hourly point cards. .wx-meta-lg (today's hourly cards) runs ~150% bigger
than the default (next-2-days cards), matching today's larger icon/temp. */
.wx-meta { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: clamp(0.6rem, 0.72vw, 0.72rem); white-space: nowrap; }
.wx-meta-lg { font-size: clamp(0.9rem, 1.08vw, 1.08rem); gap: 3px; }
.wx-meta-line { display: inline-flex; align-items: center; gap: 3px; }
.wx-meta-precip { color: #7dd3fc; }
.wx-meta-wind { color: var(--text-muted); }
.wx-meta-sep { color: var(--text-muted); opacity: .5; }
/* Today — wrapped in its own block so its hourly cards read as one distinct
group, not a continuation of the "Coming up" cards below it. Fills its grid
@ -144,19 +147,19 @@ html, body, #root { height: 100%; margin: 0; font-size: 14px; }
min-height: 0;
}
.wx-hour-card {
flex: 1 0 clamp(52px, 5.2vw, 76px);
flex: 1 0 clamp(74px, 7.4vw, 106px);
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
gap: 4px;
gap: 5px;
padding: clamp(6px, 1vh, 10px) 4px;
border-radius: var(--radius);
background: var(--surface-2);
}
.wx-hour-card.now { background: rgba(201,168,76,0.16); border: 1px solid rgba(201,168,76,0.4); }
.wx-hour-time { font-size: clamp(0.68rem, 0.82vw, 0.88rem); color: var(--text-muted); }
.wx-hour-temp { font-size: clamp(0.85rem, 1vw, 1.1rem); font-weight: 600; }
.wx-hour-temp { font-size: clamp(1.28rem, 1.5vw, 1.65rem); font-weight: 600; }
/* "Coming up" — tomorrow/day-after (3-hourly) above, days 4-7 (daily) below,
sharing one grid row between them so the pair always fits. */