Jinemi/thermograph
4
0
Fork 0
Code Issues 2 Pull requests 9 Projects Releases Packages Wiki Activity Actions 1

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

Browse source 
- 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 05a7e3165e
commit f0f9c73cac
1 changed files with 17 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
static/style.css
View file

@ -1468,6 +1468,9 @@ main.content a { color: var(--accent); }
.table-wrap { overflow-x: auto; }
table.normals-table { border-collapse: collapse; width: 100%; margin: 8px 0; font-size: 15px; table-layout: fixed; }
/* Records has 5 columns — give it a floor width so it scrolls inside .table-wrap on
narrow screens instead of overlapping. */
table.records-table { min-width: 560px; }
table.normals-table th:first-child, table.normals-table td:first-child { width: 26%; }
table.normals-table th, table.normals-table td { padding: 8px 12px; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; }
table.normals-table thead th { color: var(--muted); font-weight: 600; font-size: 13px; }
@ -1488,9 +1491,20 @@ table.normals-table tbody tr:hover { background: var(--surface-2); }
.travel-note { font-size: 15px; }
/* Hub / directory of cities */
.hub-country { margin: 22px 0; }
.hub-country h2 { margin: 0 0 8px; font-size: 18px; }
.city-links { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; padding: 0; list-style: none; }
/* Collapsible country sections (native <details>). */
details.hub-country { border-bottom: 1px solid var(--border); }
details.hub-country > summary {
cursor: pointer; padding: 12px 4px; font-weight: 700; font-size: 16px;
list-style: none; display: flex; align-items: center; gap: 8px;
}
details.hub-country > summary::-webkit-details-marker { display: none; }
details.hub-country > summary::before {
content: "\25B8"; color: var(--muted); transition: transform .15s ease; display: inline-block;
}
details.hub-country[open] > summary::before { transform: rotate(90deg); }
details.hub-country > summary:hover { color: var(--accent); }
.hub-count { margin-left: auto; color: var(--muted); font-weight: 500; font-size: 13px; }
.city-links { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 0; padding: 2px 4px 16px 22px; list-style: none; }
.city-links a { text-decoration: none; }
/* Glossary / about editorial */