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

Mobile hamburger nav; crisp SVG logo; month travel-note callout (#117)

Browse source 
- Collapse the view navigation into a hamburger menu on phones. The nav is
  wrapped in a <details> (pure CSS, no JS — so it works on the crawlable SEO
  pages too): transparent (display:contents) on desktop so the tabs render
  inline, a dropdown behind a hamburger under 640px. The °F/°C toggle, bell and
  account stay in the header bar; units.js/account.js now anchor their injected
  controls on the wrapper.
- Replace the header logo: the ▚ glyph was a rotated Unicode char that fonts
  rendered inconsistently (warped). Use a crisp inline SVG of the two accent
  squares (currentColor) across all headers.
- Month pages: turn the plain "Visiting <city> in <month>?" line into a bordered
  callout with a CTA button, matching the city page's travel box.

Verified in Firefox and Chromium at desktop and 390px, light and dark: desktop
nav inline, mobile hamburger opens the dropdown, logo crisp, travel note styled.
This commit is contained in:
Emi Griffith 2026-07-15 22:42:59 -07:00 committed by GitHub
parent 8260948dd8
commit 31f68981a0
2 changed files with 10 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
templates/base.html.j2
View file

@ -26,17 +26,20 @@
<body>
<header>
<div class="brand">
<a class="logo" href="{{ base }}/" aria-label="Thermograph home">▚</a>
<a class="logo" href="{{ base }}/" aria-label="Thermograph home"><svg viewBox="116 116 280 280" width="28" height="28" aria-hidden="true"><rect x="116" y="116" width="134" height="134" rx="20" fill="currentColor"/><rect x="262" y="262" width="134" height="134" rx="20" fill="currentColor"/></svg></a>
<div>
<h1 class="site-name"><a href="{{ base }}/">Thermograph</a></h1>
<p class="tag">How unusual is the weather? Graded against ~45 years of local climate history.</p>
</div>
<nav class="view-nav" aria-label="Views">
<details class="nav-menu">
<summary class="nav-toggle" aria-label="Menu"><svg viewBox="0 0 24 24" width="22" height="22" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M4 7h16M4 12h16M4 17h16"/></svg></summary>
<nav class="view-nav" aria-label="Views">
<a href="{{ base }}/">Weekly</a>
<a href="{{ base }}/calendar">Calendar</a>
<a href="{{ base }}/compare">Compare</a>
<a href="{{ base }}/climate"{% if section == 'climate' %} class="active"{% endif %}>Climate</a>
</nav>
</details>
</div>
</header>

7
templates/month.html.j2
View file

@ -48,8 +48,11 @@
<p><a class="cta" href="{{ base }}/#{{ tool_hash }}">See {{ name }}'s live weather grade →</a></p>
<p class="travel-note">Visiting {{ name }} in {{ month_name }}?
<a href="{{ compare_url }}">Compare its comfort with your home city →</a></p>
<div class="travel-note">
<p>Visiting <b>{{ name }}</b> in {{ month_name }}? See how its comfort stacks up against
where you live.</p>
<a class="cta" href="{{ compare_url }}">Compare {{ name }} with your city →</a>
</div>
<p class="climate-foot muted">
<a href="{{ base }}/climate/{{ city.slug }}/{{ prev.slug }}">‹ {{ prev.name }}</a> ·