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:
1 parent
1830fb2e2b
commit
fd61e35b56
16 files changed
+846
-221
No files matched your search
@@ -7,16 +7,16 @@
|
||||
<style>
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
:root {
|
||||
--ink: #1a1a1a; --ink-mid: #3d3730; --ink-light: #5f5649;
|
||||
--paper: #f5f2ec; --paper-dark: #ece7db; --paper-darker: #ddd6c7;
|
||||
--border: #b9ae9b; --accent: #c25a2a; --cool: #2a6b8a;
|
||||
--ink: #0d1b2a; --ink-mid: #2b3f55; --ink-light: #5a7089;
|
||||
--paper: #edf2f7; --paper-dark: #ffffff; --paper-darker: #e3eaf2;
|
||||
--border: #ccd6e2; --accent: #2563eb; --cool: #0e7490;
|
||||
--mono: 'Segoe UI Rounded', 'Trebuchet MS', 'Avenir Next', sans-serif;
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--ink: #ece7dc; --ink-mid: #d2c8b1; --ink-light: #beb399;
|
||||
--paper: #191510; --paper-dark: #201c16; --paper-darker: #2b2620;
|
||||
--border: #3a342a; --accent: #e07848; --cool: #5ab0d8;
|
||||
--ink: #dce6f0; --ink-mid: #b7c6d6; --ink-light: #8aa2b8;
|
||||
--paper: #070c14; --paper-dark: #0d1720; --paper-darker: #101c29;
|
||||
--border: #22405c; --accent: #60a5fa; --cool: #38bdf8;
|
||||
}
|
||||
}
|
||||
html, body { min-height: 100%; background: var(--paper); color: var(--ink); font-family: var(--mono); font-size: 15px; }
|
||||
|
||||
Reference in new issue
Block a user