SEO: collapsible climate hub + mobile formatting fixes (#103)

- 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.
This commit is contained in:
Emi Griffith 2026-07-15 20:17:00 -07:00 committed by GitHub
parent 235c910417
commit 586a7b1aa1
3 changed files with 7 additions and 7 deletions

View file

@ -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 %}

View file

@ -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 %}

View file

@ -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 %}