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

Metric cards: status to top-right, normal under the value; bold head context (#20)

Browse source 
Move each metric card's grade status into the top-right corner and put the
median on its own 'normal: <value>' line under the big number. Bold the
coordinates, climatology year range and sample-size count in the location
head, and label the sample line 'N days sample size (day ±7)'.

Calendar: drop the tagline and use a compact, roughly half-height header.
This commit is contained in:
Emi Griffith 2026-07-11 00:20:13 -07:00 committed by GitHub
parent c09ec958d6
commit 8715a7b464
3 changed files with 20 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
static/app.js
View file

@ -117,13 +117,13 @@ function render(data) {
const normalVal = clim ? fmt(clim.p50) : "—";
const cat = g ? (TIER_COLORS[g.class] || "") : "";
const big = g ? fmt(g.value) : normalVal;
const sub = g
? `<span class="nc-grade" style="--cat:${cat}">${g.grade}</span> · normal ${normalVal}`
: `normal ${normalVal}`;
const grade = g
? `<span class="nc-grade" style="--cat:${cat}">${g.grade}</span>`
: "";
return `<a class="normal-card" href="${dayHref}">
<h3>${label}</h3>
<div class="nc-head"><h3>${label}</h3>${grade}</div>
<div class="big"${g ? ` style="--cat:${cat}"` : ""}>${big}</div>
<div class="range">${sub}</div>
<div class="range">normal: <b>${normalVal}</b></div>
</a>`;
};
@ -132,9 +132,9 @@ function render(data) {
<div class="loc-title">
<h2>${placeLabel(data)}</h2>
<ul class="loc-meta">
${data.place ? `<li>${coords}</li>` : ""}
<li>Climatology from ${yrs}</li>
<li>${c.n_samples.toLocaleString()} days around this date</li>
${data.place ? `<li><b>${coords}</b></li>` : ""}
<li>Climatology from <b>${yrs}</b></li>
<li><b>${c.n_samples.toLocaleString()}</b> days sample size (day ±7)</li>
</ul>
</div>
<div class="share">

3
static/calendar.html
View file

@ -8,12 +8,11 @@
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header>
<header class="compact">
<div class="brand">
<span class="logo">▚</span>
<div>
<h1>Thermograph · Calendar</h1>
<p class="tag">Two years of daily grades vs local climate history</p>
</div>
<nav class="view-nav" aria-label="Views">
<a href="./" data-view="map">Weekly</a>

15
static/style.css
View file

@ -67,6 +67,11 @@ header {
}
h1 { margin: 0; font-size: 22px; letter-spacing: -0.02em; }
.tag { margin: 2px 0 0; color: var(--muted); font-size: 13px; }
/* Compact header (e.g. Calendar): no tagline, roughly half the height.
Only the vertical padding is trimmed so the responsive side padding stands. */
header.compact { padding-top: 9px; padding-bottom: 9px; }
header.compact .logo { font-size: 22px; }
header.compact h1 { font-size: 18px; }
main { max-width: 1200px; margin: 0 auto; padding: 20px 24px 60px; }
@ -219,12 +224,14 @@ main { max-width: 1200px; margin: 0 auto; padding: 20px 24px 60px; }
transition: border-color .12s ease, background .12s ease;
}
.normal-card:hover { border-color: var(--accent); background: var(--surface); }
.normal-card h3 { margin: 0 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
/* Title on the left, grade status pinned to the top-right corner of the card. */
.normal-card .nc-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.normal-card h3 { margin: 0; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
/* Big value is the day's own reading, tinted by its grade (lifted toward the text
color so dark tiers stay legible); the sub line shows the grade + normal median. */
color so dark tiers stay legible); the line under it shows the normal median. */
.normal-card .big { font-size: 22px; font-weight: 800; color: color-mix(in oklab, var(--cat, var(--text)), var(--text) 15%); }
.normal-card .range { font-size: 12px; color: var(--muted); }
.normal-card .nc-grade { font-weight: 700; color: color-mix(in oklab, var(--cat, var(--muted)), var(--text) 28%); }
.normal-card .range { font-size: 12px; color: var(--muted); margin-top: 2px; }
.normal-card .nc-grade { font-size: 11px; font-weight: 700; text-align: right; line-height: 1.2; color: color-mix(in oklab, var(--cat, var(--muted)), var(--text) 28%); }
.section-title {
font-size: 12px; text-transform: uppercase; letter-spacing: .05em;