From 586a7b1aa1d5bdb1a6b0b180e92bff042ff994b4 Mon Sep 17 00:00:00 2001
From: Emi Griffith <me@emigriffith.dev>
Date: Wed, 15 Jul 2026 20:17:00 -0700
Subject: [PATCH] SEO: collapsible climate hub + mobile formatting fixes (#103)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Climate hub (/climate) now uses native <details> per country — collapsible
  expand/shrink sections with a city count and a rotating marker (top 3 countries
  open by default). Links stay in the DOM, so crawling/SEO is unaffected.
- Fix nested F/C parentheses in the city lede (e.g. 'July (71°F (22°C) average
  high)') by rephrasing so the already-parenthesized temperature isn't wrapped in
  another paren.
- Fix the 5-column records table overlapping on mobile: give it a min-width so it
  scrolls inside .table-wrap on narrow screens instead of colliding.
---
 templates/city.html.j2    | 6 +++---
 templates/hub.html.j2     | 6 +++---
 templates/records.html.j2 | 2 +-
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/templates/city.html.j2 b/templates/city.html.j2
index e060575..5d88aed 100644
--- a/templates/city.html.j2
+++ b/templates/city.html.j2
@@ -12,9 +12,9 @@
   <h1>{{ display }} climate</h1>
   <p class="lede">Average temperatures, precipitation and all-time records for <b>{{ display }}</b>,
      with every day graded against ~{{ n_years }} years of local climate history
-     ({{ year_range[0] }}–{{ year_range[1] }}). See where {% if warmest %}the warmest month is
-     <b>{{ warmest.name }}</b> ({{ warmest.high }} average high){% endif %}{% if coldest %} and the coldest
-     is <b>{{ coldest.name }}</b> ({{ coldest.low }} average low){% endif %}.</p>
+     ({{ year_range[0] }}–{{ year_range[1] }}).{% if warmest and coldest %} Its warmest month is
+     <b>{{ warmest.name }}</b>, averaging a high of {{ warmest.high }}, and its coldest is
+     <b>{{ coldest.name }}</b>, with an average low of {{ coldest.low }}.{% endif %}</p>
 
   {% if flavor %}
   <p class="city-blurb">{{ flavor.extract }}{% if flavor.url %}
diff --git a/templates/hub.html.j2 b/templates/hub.html.j2
index 1180b1b..12113ec 100644
--- a/templates/hub.html.j2
+++ b/templates/hub.html.j2
@@ -12,12 +12,12 @@
      {{ n_cities }} cities across {{ n_countries }} countries. Every day is graded against that
      location's own ~45 years of climate history.</p>
   {% for country, cs in groups.items() %}
-  <section class="hub-country">
-    <h2>{{ country }}</h2>
+  <details class="hub-country"{% if loop.index <= 3 %} open{% endif %}>
+    <summary>{{ country }} <span class="hub-count">{{ cs | length }}</span></summary>
     <ul class="city-links">
       {% for c in cs %}<li><a href="{{ base }}/climate/{{ c.slug }}">{{ c.name }}</a></li>{% endfor %}
     </ul>
-  </section>
+  </details>
   {% endfor %}
 </article>
 {% endblock %}
diff --git a/templates/records.html.j2 b/templates/records.html.j2
index 55345a0..98223ad 100644
--- a/templates/records.html.j2
+++ b/templates/records.html.j2
@@ -13,7 +13,7 @@
      {{ year_range[0] }}–{{ year_range[1] }} of daily climate history.</p>
 
   <div class="table-wrap">
-    <table class="normals-table">
+    <table class="normals-table records-table">
       <thead><tr><th>Metric</th><th>Record high</th><th>On</th><th>Record low</th><th>On</th></tr></thead>
       <tbody>
         {% for r in rows %}