31f68981a0
- 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.
63 lines
2.6 KiB
Django/Jinja
63 lines
2.6 KiB
Django/Jinja
{% extends "base.html.j2" %}
|
||
{% block title %}{{ page_title }}{% endblock %}
|
||
{% block description %}{{ page_description }}{% endblock %}
|
||
{% block canonical_path %}{{ canonical_path }}{% endblock %}
|
||
{% block content %}
|
||
<nav class="breadcrumb" aria-label="Breadcrumb">
|
||
{% for label, href in breadcrumb %}{% if href %}<a href="{{ href }}">{{ label }}</a>{% else %}<span>{{ label }}</span>{% endif %}{% if not loop.last %} <span class="sep">›</span> {% endif %}{% endfor %}
|
||
</nav>
|
||
|
||
<article class="climate-page">
|
||
<h1>Weather in {{ display }} in {{ month_name }}</h1>
|
||
<p class="lede">In an average {{ month_name }}, {{ name }} sees a daily high around
|
||
<b class="t-inline t-{{ avg_high_cls }}">{{ avg_high }}</b> and a low around
|
||
<b class="t-inline t-{{ avg_low_cls }}">{{ avg_low }}</b>, based on
|
||
{{ year_range[0] }}–{{ year_range[1] }} of local climate records.</p>
|
||
|
||
<table class="normals-table" style="max-width:520px">
|
||
<tbody>
|
||
{% for label, value in stats %}
|
||
<tr><th style="width:55%">{{ label }}</th><td>{{ value }}</td></tr>
|
||
{% endfor %}
|
||
</tbody>
|
||
</table>
|
||
|
||
{% if records %}
|
||
<h2>{{ month_name }} records</h2>
|
||
<p class="muted">The most extreme {{ month_name }} on record for each metric, across
|
||
{{ year_range[0] }}–{{ year_range[1] }}. For rainfall, the wettest and driest are by
|
||
total {{ month_name }} accumulation.</p>
|
||
<div class="records-grid">
|
||
{% for r in records %}
|
||
<div class="record-card">
|
||
<h3 class="rc-metric">{{ r.label }}</h3>
|
||
<div class="rc-row rc-high">
|
||
<span class="rc-tag">{{ r.high_tag }}</span>
|
||
<span class="rc-val">{{ r.high }}</span>
|
||
<span class="rc-date">{{ r.high_date }}</span>
|
||
</div>
|
||
<div class="rc-row rc-low">
|
||
<span class="rc-tag">{{ r.low_tag }}</span>
|
||
<span class="rc-val">{{ r.low }}</span>
|
||
<span class="rc-date">{{ r.low_date }}</span>
|
||
</div>
|
||
</div>
|
||
{% endfor %}
|
||
</div>
|
||
{% endif %}
|
||
|
||
<p><a class="cta" href="{{ base }}/#{{ tool_hash }}">See {{ name }}'s live weather grade →</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> ·
|
||
<a href="{{ base }}/climate/{{ city.slug }}">{{ name }} climate overview</a> ·
|
||
<a href="{{ base }}/climate/{{ city.slug }}/{{ next.slug }}">{{ next.name }} ›</a>
|
||
</p>
|
||
</article>
|
||
{% endblock %}
|