diff --git a/static/app.js b/static/app.js index b3ac1bf..148fe18 100644 --- a/static/app.js +++ b/static/app.js @@ -131,8 +131,11 @@ function render(data) {

${placeLabel(data)}

-

${data.place ? coords + " · " : ""}~${cell.area_sq_mi} sq mi cell · climatology from ${yrs} - (${c.n_samples.toLocaleString()} days around this date)

+
diff --git a/static/calendar.js b/static/calendar.js index 68acf7c..3570d48 100644 --- a/static/calendar.js +++ b/static/calendar.js @@ -552,7 +552,7 @@ function renderHead(remaining, loading) { calHead.innerHTML = `

${place}

${data.range.start} → ${data.range.end} · ${data.days.length.toLocaleString()} days graded - (~${years.toFixed(1)} yr) · ~${cell.area_sq_mi} sq mi cell${note}

+ (~${years.toFixed(1)} yr)${note}

${IC_POINTER} Tap or click any day for its weather and grades

`; } diff --git a/static/day.js b/static/day.js index 699cad2..57085e1 100644 --- a/static/day.js +++ b/static/day.js @@ -137,7 +137,7 @@ function render(data) { dayHead.innerHTML = `

${nice}

${wt ? `

${wt.icon} ${wt.text}

` : ""} -

${place} · ~${cell.area_sq_mi} sq mi cell +

${place} · ${d.n_samples.toLocaleString()} days around this date (${yrs})

`; dayBody.innerHTML = [ diff --git a/static/index.html b/static/index.html index eee41e2..edad48e 100644 --- a/static/index.html +++ b/static/index.html @@ -35,7 +35,7 @@ - Cells are ~4 sq mi. What do the grades mean? → + What do the grades mean? →
diff --git a/static/style.css b/static/style.css index 8c9750d..e7514fb 100644 --- a/static/style.css +++ b/static/style.css @@ -134,6 +134,9 @@ main { max-width: 1200px; margin: 0 auto; padding: 20px 24px 60px; } .loc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 16px; } .loc-head h2 { margin: 0 0 2px; font-size: 18px; } .loc-head .meta { color: var(--muted); font-size: 12.5px; margin: 0; } +/* Context stacked top-down, one fact per line, instead of dot-joined tags. */ +.loc-meta { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; } +.loc-meta li { color: var(--muted); font-size: 12.5px; line-height: 1.35; } .share { display: flex; gap: 6px; flex-shrink: 0; flex-wrap: wrap; } .share button, .share .share-btn { padding: 6px 11px; border-radius: 8px; border: 1px solid var(--border);