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

Records: color-accented cards, vertical on mobile (#106)

Browse source 
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.
This commit is contained in:
Emi Griffith 2026-07-15 20:37:51 -07:00 committed by GitHub
parent 0e895d55d8
commit 30608ff6de
1 changed files with 16 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
static/style.css
View file

@ -1468,10 +1468,22 @@ main.content a { color: var(--accent); }
.table-wrap { overflow-x: auto; } .table-wrap { overflow-x: auto; }
table.normals-table { border-collapse: collapse; width: 100%; margin: 8px 0; font-size: 15px; table-layout: fixed; } 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 /* Records as color-accented cards: a grid on desktop, single-column (high/low
narrow screens instead of overlapping. */ stacked vertically) on mobile — no horizontal scroll. */
table.records-table { min-width: 560px; } .records-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); margin: 14px 0; }
.records-note { font-size: 13px; margin-top: 10px; } .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: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 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; } table.normals-table thead th { color: var(--muted); font-weight: 600; font-size: 13px; }