From 8715a7b464ff5773511e9f36466db6dcae05064b Mon Sep 17 00:00:00 2001 From: Emi Griffith Date: Sat, 11 Jul 2026 00:20:13 -0700 Subject: [PATCH] Metric cards: status to top-right, normal under the value; bold head context (#20) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Move each metric card's grade status into the top-right corner and put the median on its own 'normal: ' 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. --- static/app.js | 16 ++++++++-------- static/calendar.html | 3 +-- static/style.css | 15 +++++++++++---- 3 files changed, 20 insertions(+), 14 deletions(-) diff --git a/static/app.js b/static/app.js index 148fe18..d542fff 100644 --- a/static/app.js +++ b/static/app.js @@ -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 - ? `${g.grade} · normal ${normalVal}` - : `normal ${normalVal}`; + const grade = g + ? `${g.grade}` + : ""; return ` -

${label}

+

${label}

${grade}
${big}
-
${sub}
+
normal: ${normalVal}
`; }; @@ -132,9 +132,9 @@ function render(data) {

${placeLabel(data)}

    - ${data.place ? `
  • ${coords}
    • ` : ""} -
  • Climatology from ${yrs}
    • -
  • ${c.n_samples.toLocaleString()} days around this date
    • + ${data.place ? `
  • ${coords}
    • ` : ""} +
  • Climatology from ${yrs}
    • +
  • ${c.n_samples.toLocaleString()} days sample size (day ±7)