From c09ec958d64dc8600d0b21cd75d58fc233870a55 Mon Sep 17 00:00:00 2001
From: Emi Griffith <emerytgriffith@gmail.com>
Date: Sat, 11 Jul 2026 00:10:46 -0700
Subject: [PATCH] Stack the location head context top-down; drop sq-mi-cell
 wording (#19)

The Weekly location card joined coordinates, cell size, climatology range
and sample count into one dot-separated meta line. Stack them as one fact
per line so the important context reads top-down instead of as a run of
tags. Drop the '~N sq mi cell' wording from the Weekly/Day/Calendar meta
lines and the map hint.
---
 static/app.js      | 7 +++++--
 static/calendar.js | 2 +-
 static/day.js      | 2 +-
 static/index.html  | 2 +-
 static/style.css   | 3 +++
 5 files changed, 11 insertions(+), 5 deletions(-)

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) {
     <div class="loc-head">
       <div class="loc-title">
         <h2>${placeLabel(data)}</h2>
-        <p class="meta">${data.place ? coords + " · " : ""}~${cell.area_sq_mi} sq mi cell · climatology from ${yrs}
-           (${c.n_samples.toLocaleString()} days around this date)</p>
+        <ul class="loc-meta">
+          ${data.place ? `<li>${coords}</li>` : ""}
+          <li>Climatology from ${yrs}</li>
+          <li>${c.n_samples.toLocaleString()} days around this date</li>
+        </ul>
       </div>
       <div class="share">
         <button id="btn-link" title="Copy a link back to this exact view">${IC.link} Copy link</button>
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 = `
     <h2>${place}</h2>
     <p class="meta">${data.range.start} → ${data.range.end} · ${data.days.length.toLocaleString()} days graded
-       (~${years.toFixed(1)} yr) · ~${cell.area_sq_mi} sq mi cell${note}</p>
+       (~${years.toFixed(1)} yr)${note}</p>
     <p class="cal-hint">${IC_POINTER} Tap or click any day for its weather and grades</p>`;
 }
 
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 = `
     <h2>${nice}</h2>
     ${wt ? `<p class="day-weather">${wt.icon} ${wt.text}</p>` : ""}
-    <p class="meta">${place} · ~${cell.area_sq_mi} sq mi cell
+    <p class="meta">${place}
        · ${d.n_samples.toLocaleString()} days around this date (${yrs})</p>`;
 
   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 @@
           <input id="date-input" type="date" />
         </label>
         <button type="button" id="today-btn" class="today-chip" title="Reset the target date to today">Today</button>
-        <span class="hint">Cells are ~4&nbsp;sq&nbsp;mi. <a href="legend">What do the grades mean? →</a></span>
+        <span class="hint"><a href="legend">What do the grades mean? →</a></span>
       </div>
     </section>
 
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);