Jinemi/thermograph
4
0
Fork 0
Code Issues 2 Pull requests 4 Projects Releases Packages Wiki Activity Actions

SEO: make month/season records tables mobile-friendly (#108)

Browse source 
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.
This commit is contained in:
Emi Griffith 2026-07-15 21:14:19 -07:00 committed by GitHub
parent 536d9541bd
commit a80f5e21e3
1 changed files with 11 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
static/style.css
View file

@ -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 thead th { color: var(--muted); font-weight: 600; font-size: 13px; }
table.normals-table td a { text-decoration: none; } table.normals-table td a { text-decoration: none; }
table.normals-table tbody tr:hover { background: var(--surface-2); } 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 ul { margin: 8px 0; padding-left: 20px; }
.climate-records li { margin: 4px 0; } .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. */ legible in both themes; the date column stays muted and untinted. */
td.t-cell { font-weight: 600; } td.t-cell { font-weight: 600; }
td.rec-date { color: var(--muted); font-size: 13px; } 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-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-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)); } .t-cold { background: color-mix(in srgb, var(--cold) 28%, var(--surface)); }