4e8d1e9e59
* SEO: monthly & seasonal records on the city records page The /climate/<city>/records page showed only all-time records per metric. Expand it into a full records page: record high/low for each of the 12 months (each linking its month page) and for each meteorological season, alongside the existing all-time table. Seasons are hemisphere-aware — Dec–Feb reads as winter for northern cities and summer for southern ones (picked from the city's latitude). Records reuse grading.all_time_records over a month-filtered archive, so no new data fetching or warming is needed. Adds a Dataset + breadcrumb JSON-LD block and richer title/description for the expanded coverage. * SEO: colour-code climate & records pages (heat-map + range strip) The city, records and month pages were plain muted tables — generic climate-site styling. Bring the interactive grader's diverging cold→hot palette onto them so they read as heat maps in the site's own visual language: - Map absolute °F to the 9-tier palette (temp_class, a Jinja global) and tint the temperature cells across the monthly-normals, monthly/seasonal/all-time records tables. The value stays in the ink token; the tint is a wash behind it. Non-temp rows (humidity/wind/precip) and date columns stay untinted. - Add a monthly temperature-range strip on the city page: one gradient bar per month spanning the average low→high on a shared −10..115°F axis, so a city's whole-year rhythm (and hot-vs-cold character) reads at a glance. - Tint the month page's hero high/low and its record values inline. Palette, light/dark, and 390–1920px layouts verified by rendering hot (Phoenix) and cold (Anchorage) cities.
44 lines
1.9 KiB
Django/Jinja
44 lines
1.9 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>
|
||
<ul class="climate-records">
|
||
{% for r in records %}<li><b>{{ r.label }}:</b>
|
||
<span class="t-inline t-{{ r.cls }}">{{ r.value }}</span> on {{ r.date }}</li>{% endfor %}
|
||
</ul>
|
||
{% endif %}
|
||
|
||
<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>
|
||
|
||
<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 %}
|