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

Center the metric selectors and category-totals strip on desktop (#38)

Browse source 
- Calendar: the 'Color the calendar by' selector shrinks to its tabs and sits
  centered over the month grid beyond phone widths (scoped under .metric-block
  so the Compare basis toggle keeps filling its param cell).
- Calendar: the category-totals strip widens to 960px and centers in the
  content column.
- Weekly: the chart metric switch likewise shrinks to its tabs and centers
  over the trend chart. Phone layouts (full-width 4-per-row toggles) are
  untouched.
This commit is contained in:
Emi Griffith 2026-07-11 12:04:30 -07:00 committed by GitHub
parent c12b5953c0
commit efd43dcbb5
1 changed files with 13 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
static/style.css
View file

@ -209,6 +209,11 @@ main { max-width: 1200px; margin: 0 auto; padding: 20px 24px 60px; }
cursor: pointer; font-size: 13.5px; font-weight: 600; min-height: 40px; cursor: pointer; font-size: 13.5px; font-weight: 600; min-height: 40px;
} }
.chart-toggle button + button { border-left: 1px solid var(--border); } .chart-toggle button + button { border-left: 1px solid var(--border); }
/* Beyond phones the switch shrinks to its tabs and sits centered over the chart
(phones keep the full-width 4-per-row grid from the 640px rules). */
@media (min-width: 641px) {
.chart-toggle { width: fit-content; margin-left: auto; margin-right: auto; }
}
.chart-toggle button.active[data-metric="tmax"] { background: var(--very-hot); color: #1a1206; } .chart-toggle button.active[data-metric="tmax"] { background: var(--very-hot); color: #1a1206; }
.chart-toggle button.active[data-metric="tmin"] { background: var(--cold); color: #10222f; } .chart-toggle button.active[data-metric="tmin"] { background: var(--cold); color: #10222f; }
.chart-toggle button.active[data-metric="feels"] { background: var(--accent); color: #1a1206; } .chart-toggle button.active[data-metric="feels"] { background: var(--accent); color: #1a1206; }
@ -323,6 +328,13 @@ main { max-width: 1200px; margin: 0 auto; padding: 20px 24px 60px; }
/* Metric selector block — sits below the time filters, labeling the grid it colors. */ /* Metric selector block — sits below the time filters, labeling the grid it colors. */
.metric-block { margin: 0 0 18px; } .metric-block { margin: 0 0 18px; }
.metric-block .cal-filter-label { display: block; margin: 0 0 8px; } .metric-block .cal-filter-label { display: block; margin: 0 0 8px; }
/* Beyond phones the selector shrinks to its tabs and sits centered over the
month grid (scoped under .metric-block — the Compare page's basis toggle
shares .metric-toggle and must keep filling its param cell). */
@media (min-width: 641px) {
.metric-block { display: flex; flex-direction: column; align-items: center; }
.metric-block .cal-filter-label { text-align: center; }
}
/* Month/year range picker (calendar). 16px inputs avoid iOS zoom-on-focus. */ /* Month/year range picker (calendar). 16px inputs avoid iOS zoom-on-focus. */
.cal-range { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; } .cal-range { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; }
@ -833,7 +845,7 @@ main { max-width: 1200px; margin: 0 auto; padding: 20px 24px 60px; }
"Show count" is ticked, in that category's own status color) above a thin status- "Show count" is ticked, in that category's own status color) above a thin status-
colored line rising from a shared baseline (height ∝ share). Every category draws colored line rising from a shared baseline (height ∝ share). Every category draws
a line — including the neutral "Normal" center of the temperature scale. */ a line — including the neutral "Normal" center of the temperature scale. */
.cal-totals { max-width: 720px; margin: 0 0 18px; } .cal-totals { max-width: 960px; margin: 0 auto 18px; }
/* Header row: the "N days shown — by X" title, with the share/count toggle at the /* Header row: the "N days shown — by X" title, with the share/count toggle at the
far end. Wraps to its own line on narrow screens rather than crushing the title. */ far end. Wraps to its own line on narrow screens rather than crushing the title. */
.ct-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; } .ct-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; }