d24049a78d
Replace the 5-column records table (which forced horizontal scrolling on mobile — only high OR low visible) with a responsive card grid: one card per metric, each with a red-accented 'Highest' row and a blue-accented 'Lowest' row (tier colors). Grids on desktop, stacks to a single column on mobile with high/low stacked vertically — no horizontal scroll. Precip reads Wettest / longest dry spell.
38 lines
1.8 KiB
Django/Jinja
38 lines
1.8 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>{{ display }} weather records</h1>
|
||
<p class="lede">All-time record highs and lows for {{ display }}, and the dates they occurred, across
|
||
{{ year_range[0] }}–{{ year_range[1] }} of daily climate history.</p>
|
||
|
||
<div class="records-grid">
|
||
{% for r in rows %}
|
||
<div class="record-card">
|
||
<h2 class="rc-metric">{{ r.label }}</h2>
|
||
<div class="rc-row rc-high">
|
||
<span class="rc-tag">{% if r.label == 'Precip' %}Wettest{% else %}Highest{% endif %}</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">{% if r.label == 'Precip' %}Driest{% else %}Lowest{% endif %}</span>
|
||
<span class="rc-val">{{ r.low }}</span>
|
||
<span class="rc-date">{{ r.low_date }}</span>
|
||
</div>
|
||
</div>
|
||
{% endfor %}
|
||
</div>
|
||
<p class="records-note muted">For rainfall, the “driest” figure is the <b>longest run of consecutive
|
||
days without measurable rain</b>, dated to when that dry spell began.</p>
|
||
|
||
<p><a class="cta" href="{{ base }}/#{{ '%.5f,%.5f' | format(city.lat, city.lon) }}">Grade {{ name }}'s weather now →</a></p>
|
||
<p class="climate-foot muted"><a href="{{ base }}/climate/{{ city.slug }}">‹ Back to {{ name }} climate</a></p>
|
||
</article>
|
||
{% endblock %}
|