vh/esh-pfi-infrastructure
1
0
Fork 0
Code Issues 7 Pull Requests Actions Packages Projects Releases Wiki Activity

news-digest: hero brand block links to /index.html (latest edition) from any archive page

Browse Source 
Wrapped .masthead-brand in <a href="index.html"> in both digest.html.j2
and archive.html.j2 so the hero is a clickable shortcut to the latest
edition. Useful when reading an archived edition and you want to jump
back to the freshest one without going through the archive list.

CSS: color: inherit + text-decoration: none keeps the visual
identical; hover drops opacity to 0.85 for affordance; focus-visible
gets an accent outline so keyboard nav is discoverable.
This commit is contained in:
vh
2026-04-27 23:10:42 -07:00
parent 425b1d45d6
commit 1b5a2df6db
3 changed files with 18 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
stacks/news-digest/templates/archive.html.j2
+2 -2
View File
@@ -10,10 +10,10 @@
<body> <body>
<header class="masthead" role="banner"> <header class="masthead" role="banner">
<div class="masthead-inner"> <div class="masthead-inner">
<div class="masthead-brand"> <a class="masthead-brand" href="index.html" title="Latest edition">
<span class="brand-glyph" aria-hidden="true">◢</span> <span class="brand-glyph" aria-hidden="true">◢</span>
<span class="brand-mark">DAILY DIGEST</span> <span class="brand-mark">DAILY DIGEST</span>
</div> </a>
<div class="masthead-edition"> <div class="masthead-edition">
<span class="edition-stamp">ARCHIVE</span> <span class="edition-stamp">ARCHIVE</span>
<a class="archive-link" href="index.html">← LATEST</a> <a class="archive-link" href="index.html">← LATEST</a>
stacks/news-digest/templates/digest.html.j2
+2 -2
View File
@@ -11,10 +11,10 @@
{# ────── header ────── #} {# ────── header ────── #}
<header class="masthead" role="banner"> <header class="masthead" role="banner">
<div class="masthead-inner"> <div class="masthead-inner">
<div class="masthead-brand"> <a class="masthead-brand" href="index.html" title="Latest edition">
<span class="brand-glyph" aria-hidden="true">◢</span> <span class="brand-glyph" aria-hidden="true">◢</span>
<span class="brand-mark">DAILY DIGEST</span> <span class="brand-mark">DAILY DIGEST</span>
</div> </a>
<div class="masthead-edition"> <div class="masthead-edition">
<span class="edition-num">№ {{ generated_at.strftime("%j") }}</span> <span class="edition-num">№ {{ generated_at.strftime("%j") }}</span>
<span class="edition-stamp">{{ edition|upper }} EDITION</span> <span class="edition-stamp">{{ edition|upper }} EDITION</span>
stacks/news-digest/templates/style.css
+14
View File
@@ -108,6 +108,20 @@ a:hover { color: var(--accent); }
align-items: baseline; align-items: baseline;
gap: 10px; gap: 10px;
font-family: var(--font-mono); font-family: var(--font-mono);
/* Brand wraps an <a href="index.html"> so the hero is clickable to
the latest edition from any archived page. Strip default link
styling so the visual is unchanged. */
color: inherit;
text-decoration: none;
transition: opacity 0.15s ease;
}
.masthead-brand:hover {
opacity: 0.85;
}
.masthead-brand:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 4px;
border-radius: 2px;
} }
.brand-glyph { .brand-glyph {
font-size: 32px; font-size: 32px;