From 30608ff6de8c326d32098f648c0afadf895f33c7 Mon Sep 17 00:00:00 2001 From: Emi Griffith Date: Wed, 15 Jul 2026 20:37:51 -0700 Subject: [PATCH] Records: color-accented cards, vertical on mobile (#106) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Replace the 5-column records table (which forced horizontal scrolling on mobile — only high OR low visible) with a responsive card grid: one card per metric, each with a red-accented 'Highest' row and a blue-accented 'Lowest' row (tier colors). Grids on desktop, stacks to a single column on mobile with high/low stacked vertically — no horizontal scroll. Precip reads Wettest / longest dry spell. --- static/style.css | 20 ++++++++++++++++---- 1 file changed, 16 insertions(+), 4 deletions(-) diff --git a/static/style.css b/static/style.css index a8409c7..ca409d5 100644 --- a/static/style.css +++ b/static/style.css @@ -1468,10 +1468,22 @@ main.content a { color: var(--accent); } .table-wrap { overflow-x: auto; } table.normals-table { border-collapse: collapse; width: 100%; margin: 8px 0; font-size: 15px; table-layout: fixed; } -/* Records has 5 columns — give it a floor width so it scrolls inside .table-wrap on - narrow screens instead of overlapping. */ -table.records-table { min-width: 560px; } -.records-note { font-size: 13px; margin-top: 10px; } +/* Records as color-accented cards: a grid on desktop, single-column (high/low + stacked vertically) on mobile — no horizontal scroll. */ +.records-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); margin: 14px 0; } +.record-card { border: 1px solid var(--border); background: var(--surface); border-radius: 12px; padding: 12px 14px; } +.rc-metric { margin: 0 0 8px; font-size: 16px; } +.rc-row { display: flex; align-items: baseline; gap: 8px; padding: 6px 0 6px 10px; border-left: 4px solid var(--border); } +.rc-row + .rc-row { margin-top: 4px; } +.rc-high { border-left-color: var(--very-hot); } +.rc-low { border-left-color: var(--very-cold); } +.rc-tag { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; min-width: 62px; flex-shrink: 0; } +.rc-high .rc-tag { color: var(--very-hot); } +.rc-low .rc-tag { color: var(--very-cold); } +.rc-val { font-weight: 700; font-size: 15px; } +.rc-date { color: var(--muted); font-size: 13px; margin-left: auto; white-space: nowrap; padding-left: 6px; } +.records-note { font-size: 13px; margin-top: 12px; } +@media (max-width: 640px) { .records-grid { grid-template-columns: 1fr; } } table.normals-table th:first-child, table.normals-table td:first-child { width: 26%; } table.normals-table th, table.normals-table td { padding: 8px 12px; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; } table.normals-table thead th { color: var(--muted); font-weight: 600; font-size: 13px; }