diff --git a/static/style.css b/static/style.css index 2bcde03..a37fd7d 100644 --- a/static/style.css +++ b/static/style.css @@ -1492,10 +1492,18 @@ 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. */ +/* Month/season records tables: value+date (and season name+span) stack within a + cell, so top-align keeps the two lines tidy instead of vertically centred. */ +table.records-table td { vertical-align: top; } +table.records-table td:first-child { white-space: normal; } + @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; } + /* Stack the "(Dec–Feb)" span under the season name so it can't overflow the + narrow first column and slide under the tinted value cell. */ + .season-span { display: block; } } .climate-records ul { margin: 8px 0; padding-left: 20px; } @@ -1538,6 +1546,15 @@ td.rec-date { color: var(--muted); font-size: 13px; } } .range-vals { font-size: 13px; color: var(--text); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; } .range-note { font-size: 13px; margin-top: 6px; } +/* Phone: cap the strip so bars + values pack into a tight group on the left + instead of stretching edge-to-edge, and shrink the values to fit (no reserved + 92px column). Placed after the base rules above so it actually wins. */ +@media (max-width: 560px) { + .range-strip { max-width: 300px; } + .range-row { grid-template-columns: 26px 1fr auto; gap: 8px; } + .range-month { font-size: 12px; } + .range-vals { font-size: 12px; } +} .climate-foot { font-size: 14px; margin-top: 28px; border-top: 1px solid var(--border); padding-top: 16px; } .city-blurb { font-size: 15px; margin: 4px 0 14px; } .blurb-src { color: var(--muted); text-decoration: none; font-size: 13px; white-space: nowrap; }