Redesign main app: slim top bar, dynamic sky hero, nowcast, scrub chart, unified palette

- One slate/blue palette across the app, dashboard, account/login pages (data colours
  stay orange = warm, blue = cool on the dashboard)
- Slim sticky top bar with location chip, gear (settings) and ? (learn); 4-tab nav
  (Now, Station, Map, Alerts) with a thumb-reach bottom bar on phones
- Hero sky gradient by condition/time with rain, storm, snow and star effects
  (respects reduced motion); keeps the searched city and badges when temps come from your station
- One-line summary, 'Next 2 hours' bars and rain countdown from 15-minute precipitation,
  rain/cold-aware 'Bring' chips; yesterday + 'vs usual' context from the station
- Scrubbable hourly chart (temp, rain chance, wind), 7-day range bars, AQI gauge,
  details tiles instead of drawers, taller radar with location marker + alert polygons
- Skeleton loading instead of a full-screen spinner, sticky section headers, safe areas
- Server: minutely_15 precipitation, public /api/station/summary

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
This commit is contained in:
Nate EmmertandClaude Sonnet 5.5 committed 2026-10-15 12:56:18 -04:00
1 parent 1830fb2e2b
commit fd61e35b56
16 files changed
+846 -221

No files matched your search

+7
View File
@@ -108,3 +108,10 @@ canvas.sparkline { max-width: 100%; }
.settings-panel.always-open > summary { cursor: default; pointer-events: none; }
.settings-panel.always-open > summary::before { display: none; }
.settings-panel.always-open { margin-top: 1rem !important; }
/* ── Unified slate/blue chrome (data colours stay orange = warm, blue = cool) ── */
.tab.active, .range-btn.active, .always-open { --chrome: var(--ui); }
.tab.active, .range-btn.active { background: var(--ui) !important; border-color: var(--ui) !important; color: #fff; }
.tab:hover, .logout:hover { border-color: var(--ui); color: var(--ui); }
.chart-reset:hover { border-color: var(--ui); }
a { color: var(--ui); }