From 82c776f5bad0f63cec11e9469e12e06520d93cdb Mon Sep 17 00:00:00 2001 From: Emi Griffith Date: Sat, 18 Jul 2026 01:19:27 -0700 Subject: [PATCH] Give the records strip real context, and colour the explore cards (#183) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Every card in "Unusual right now" read the same: a city, "100th", "Near Record". Nothing said what was unusual, by how much, or even whether it was hot or cold. Cards now lead with the reading and say what it is measured against: Tehran, Iran 108°F Near Record hot High temp · 99th pct · normal 97°F - "Near Record" is the band label at BOTH ends of the scale, so a cold extreme and a hot one rendered identically and colour was the only thing telling them apart. Qualify that tier with its direction; the other tiers already read directionally ("Very High", "Low") and are left alone. - Carry the ±7-day median through to the card. A percentile means little without the value it describes and the normal it departs from. - Floor the percentile label into 1-99. An empirical percentile can round to 100, and "100th percentile" reads as a measurement error. - Shorten the city label to "City, Country". display_name keeps admin1 when it differs from the city, which gave "Dar es Salaam, Dar es Salaam Region, Tanzania" — truncated to nonsense in a one-line card. - Temperatures render as .temp spans and the homepage now loads climate.js, so the strip follows the °F/°C toggle like every other server-rendered page. Colour: the strip cards and the explore cards take a wash and a border from their token instead of being uniform grey, and Calendar carries the nine grade tiers in order — it is a miniature of the calendar itself. Text colours mix 50% band colour with the foreground. That is the most colour they can carry and still clear 4.5:1 against the tinted card in both schemes; the worst case is the deliberately-dark --rec-cold/--rec-hot tiers, which at the previous 78% measured 2.33:1 in dark mode. Measured, not eyeballed: worst text contrast is now 4.79 (light) and 4.81 (dark). --- static/style.css | 38 ++++++++++++++++++++++++++++++-------- 1 file changed, 30 insertions(+), 8 deletions(-) diff --git a/static/style.css b/static/style.css index 4973be3..e462cae 100644 --- a/static/style.css +++ b/static/style.css @@ -1848,16 +1848,27 @@ details.hub-country > summary:hover { color: var(--accent); } } .unusual-card { scroll-snap-align: start; flex: 0 0 auto; } .unusual-card a { - display: grid; gap: 2px; min-width: 150px; padding: 12px 14px; - background: var(--surface); border: 1px solid var(--border); + display: grid; gap: 2px; min-width: 190px; padding: 12px 14px; + /* A wash of the band colour, so the card reads as its grade at a glance and + the strip isn't a row of identical grey boxes. */ + background: color-mix(in oklab, var(--cat, var(--surface)) 10%, var(--surface)); + border: 1px solid color-mix(in oklab, var(--cat, var(--border)) 25%, var(--border)); border-left: 4px solid var(--cat, var(--border)); border-radius: 11px; text-decoration: none; color: var(--text); } .unusual-card a:hover { border-color: var(--accent); } .unusual-city { font-weight: 600; font-size: 14px; } -.unusual-pct { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; - color: color-mix(in oklab, var(--cat, var(--text)) 78%, var(--text)); } -.unusual-band { font-size: 12px; color: var(--muted); } +/* The reading itself leads: a percentile with no value attached says nothing + about what the weather actually is. */ +/* 50% is the most band colour these can carry and still clear 4.5:1 against the + tinted card in BOTH schemes — measured across the ramp, worst case being the + deliberately-dark --rec-cold/--rec-hot "Near Record" tiers. Raising it fails + dark mode; the band word carries the meaning anyway, colour only reinforces. */ +.unusual-value { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; + color: color-mix(in oklab, var(--cat, var(--text)) 50%, var(--text)); } +.unusual-band { font-size: 13px; font-weight: 600; + color: color-mix(in oklab, var(--cat, var(--text)) 50%, var(--text)); } +.unusual-meta { font-size: 12px; color: var(--muted); } .unusual-more { margin: 2px 0 0; font-size: 14px; } .unusual-more a { color: var(--accent); text-decoration: none; } @@ -1874,11 +1885,19 @@ details.hub-country > summary:hover { color: var(--accent); } @media (min-width: 1400px) { .explore-cards { grid-template-columns: repeat(4, 1fr); } } .explore-card { display: grid; gap: 4px; padding: 14px 16px; - background: var(--surface); border: 1px solid var(--border); + /* Each card is tinted by its own token so the row carries the product's + palette instead of reading as four identical grey boxes. */ + background: color-mix(in oklab, var(--cat, var(--surface)) 9%, var(--surface)); + border: 1px solid color-mix(in oklab, var(--cat, var(--border)) 28%, var(--border)); + border-left: 4px solid var(--cat, var(--border)); border-radius: 11px; text-decoration: none; color: var(--text); } .explore-card:hover { border-color: var(--accent); } -.explore-name { font-weight: 600; } +.explore-name { font-weight: 600; + color: color-mix(in oklab, var(--cat, var(--text)) 45%, var(--text)); } +/* The nine grade tiers in order — a miniature of the calendar itself. */ +.explore-ramp { display: flex; gap: 2px; margin: 2px 0 1px; } +.explore-ramp i { flex: 1 1 0; height: 6px; border-radius: 2px; } .explore-desc { color: var(--muted); font-size: 14px; line-height: 1.4; } /* --- city chips ---------------------------------------------------------- */ @@ -1889,7 +1908,10 @@ details.hub-country > summary:hover { color: var(--accent); } background: var(--surface); border: 1px solid var(--border); color: var(--text); text-decoration: none; font-size: 14px; } -.city-chips a:hover { border-color: var(--accent); } +.city-chips a:hover { + border-color: var(--accent); + background: color-mix(in oklab, var(--accent) 12%, var(--surface)); +} .city-hub > p a { color: var(--accent); text-decoration: none; } /* --- digest form (site-wide footer pattern) ------------------------------ */