From a80f5e21e30b1073ee587e11dc7b7a776ce91af1 Mon Sep 17 00:00:00 2001 From: Emi Griffith Date: Wed, 15 Jul 2026 21:14:19 -0700 Subject: [PATCH] SEO: make month/season records tables mobile-friendly (#108) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The all-time-records redesign (#106) removed the min-width floor that let the wide records tables scroll, so the month and season records tables — still five columns (value + separate date, twice) — compressed below their content on phones and overlapped/clipped. Fold each record's date under its value so those tables become three columns (period · record high · record low), which fit any width without horizontal scroll. Also tighten all climate tables under 560px (smaller font + padding) so a hot city's 3-digit °F values with °C in parens never collide in the city page's normals table. --- static/style.css | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/static/style.css b/static/style.css index 48ee853..2bcde03 100644 --- a/static/style.css +++ b/static/style.css @@ -1489,6 +1489,14 @@ table.normals-table th, table.normals-table td { padding: 8px 12px; text-align: table.normals-table thead th { color: var(--muted); font-weight: 600; font-size: 13px; } table.normals-table td a { text-decoration: none; } table.normals-table tbody tr:hover { background: var(--surface-2); } +/* On phones, tighten the climate tables so wide values (3-digit °F with the °C in + parens) never collide — the records tables are already 3 columns (date folded + under each value), and this keeps the city's 4-column normals table roomy too. */ +@media (max-width: 560px) { + table.normals-table { font-size: 13px; } + table.normals-table th, table.normals-table td { padding: 7px 8px; } + .rec-on { font-size: 10.5px; } +} .climate-records ul { margin: 8px 0; padding-left: 20px; } .climate-records li { margin: 4px 0; } @@ -1501,6 +1509,9 @@ table.normals-table tbody tr:hover { background: var(--surface-2); } legible in both themes; the date column stays muted and untinted. */ td.t-cell { font-weight: 600; } td.rec-date { color: var(--muted); font-size: 13px; } +/* The date each record occurred, folded under its value so the month/season tables + stay 3 columns and fit a phone without horizontal scroll. */ +.rec-on { display: block; font-size: 11px; font-weight: 400; color: var(--muted); margin-top: 1px; } .t-rec-cold { background: color-mix(in srgb, var(--rec-cold) 26%, var(--surface)); } .t-very-cold { background: color-mix(in srgb, var(--very-cold) 26%, var(--surface)); } .t-cold { background: color-mix(in srgb, var(--cold) 28%, var(--surface)); }