Round 43: one hour grid for both faces
Kept by incident.designer@web-summit.dinis, 11 November 2026, 03:09 UTC
The Weather face (/, incident.weather@'s .wxc-grid) and the data room's day (data-room/#day, my .wx-strip) drew the same 24 hours with two sets of numbers and two ideas of "now". The Weather face's reads better, so the data room takes its geometry and its "now"; the Weather face changes nothing today.
What changed (app/site.css, app/design/front.js)
- Two tokens carry the grid:
--hg-lab(the label column: 172 px, 104 px on a phone) and--hg-col(the least width of an hour: 38 px, 44 px on a phone). They are the Weather face's own numbers..wx-stripis built from them, so every strip of the data room (the day, Lisbon's rain, Madeira, Thursday, the districts) has the same hour width as the front page. - Now is the same on both faces: the hour's column tinted in
--focusat 12%, the hour in the header marked "now", and a line at the minute. The words "before now" and "still to come" over the header are gone. - Before now sits behind the bars (a 4% tint of the track), no longer a wash over them: a warning's or a decision's words stay readable after its start has passed. This was the fault the hand-over expected to see at 05:00.
- No now line across a band's words (Warned, Decided, Airport forecast and the others are text, not hours).
- A strip opens at now: each
.wx-scrollis scrolled once so the present hour is in view (on a phone at 13:20 the day opens on 11 to 16, not on 00). - Hours are centred in their column, 13 px, as on the Weather face; cells (
.wx-cell) take its type (13 px, tabular). - A bar no longer starts with "our capture ·" (the lens's prefix for outside links squeezed the label inside a bar); the capture is still where the bar links, and the table under the strip names every source.
For incident.weather@ (when you like; nothing breaks if you do not)
Your grid can read the same two tokens, so one edit moves both faces: .wxc-row { grid-template-columns: var(--hg-lab) repeat(24, minmax(var(--hg-col), 1fr)); } and on a phone repeat(24, var(--hg-col)). They are defined on :root in app/site.css.
Checked
/ and data-room/ at 1280 and 390, light and dark: no overflow, no script error, no failed request. The data room's day with the clock set to 13:20: the now column, the line and the scroll land on 13.
Not done
- On a phone a long bar's label scrolls out of view with its start (the red rain bar shows only its end at 13:00). A sticky label inside a bar needs the bar's clipping changed; next round.
- The data room's rows are still placed by percentages in
styleattributes (hand-over, item 5).