Fold the header menu into a button when its links do not fit

A long menu wrapped onto two or three lines on phones and narrow
windows. With the new Design switch the header menu folds into a ☰
button (an icon, the word Menu, or both) carried by the title or logo
block just above it, at the right end of its row, or by the menu bar
when nothing is above it; the button opens the links as a stacked list
with the search box on top.

The open/closed state is a hidden checkbox and the button its label,
so opening needs no script and works in old browsers. Whether to fold
is decided by a small inline script — any link on a second line means
the menu does not fit — re-checked on resize; without it blog.css folds
on phones only, and browsers too old for that keep the wrapping menu.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Sd8UPWrvyYCLj97JexNw3A

1 files changed, 47 insertions, 0 deletions

diff --git a/internal/web/static/blog.css b/internal/web/static/blog.css
index 7b91dbe..b3b0312 100644
--- a/internal/web/static/blog.css
+++ b/internal/web/static/blog.css
@@ -49,6 +49,53 @@ img { max-width: 100%; height: auto; }
 .nav-spread .site-header .nav-inner { text-align: justify; line-height: 0; }
 .nav-spread .site-header .nav-inner > a, .nav-spread .site-header .search-form { line-height: 1.5; }
 .nav-spread .site-header .nav-inner::after { content: ""; display: inline-block; width: 100%; }
+/* menu fold (theme nav_fold): the header menu becomes a button when its links
+   do not fit. The hidden (offscreen, still focusable) checkbox before the
+   header's blocks is the open/closed state; the label is the button, at the
+   right of the title or logo block above the menu (.has-burger on that
+   block), or in the bar when nothing is above it. Which state applies:
+   .nav-folded is set by the page's script when a link wraps, .nav-auto is the
+   no-script fallback (folded on phones only) the script removes; the two
+   blocks below must stay identical. */
+.nav-toggle { position: absolute; left: -9999px; }
+.nav-burger { display: none; cursor: pointer; font-weight: bold; font-size: 1.2em; line-height: 2em; padding: 0 0.5em; white-space: nowrap; }
+.burger-icon .nb-text, .burger-text .nb-icon { display: none; }
+.burger-both .nb-icon { margin-right: 0.3em; }
+.nav-toggle:focus-visible ~ .has-burger .nav-burger { outline: 2px solid; } /* the keyboard's focus ring, on the button */
+.nav-folded .nav-burger { display: block; }
+.nav-folded .has-burger { position: relative; padding-right: 3.6em; }
+.nav-folded.header-center .has-burger { padding-left: 3.6em; } /* the brand stays centred */
+.nav-folded .has-burger > .nav-burger { position: absolute; right: 1em; top: 50%; margin-top: -1em; }
+.nav-folded .site-nav.has-burger { padding-right: 0; }
+.nav-folded .site-nav.has-burger .nav-inner { padding-left: 0; padding-right: 0; } /* the button keeps its place when the panel opens */
+.nav-folded .site-nav.has-burger .nav-inner > .nav-burger { display: inline-block; margin-left: 0.5em; }
+.nav-folded .site-nav .nav-inner > a, .nav-folded .site-nav .search-form { display: none; }
+.nav-folded .site-nav:not(.has-burger) { border-bottom: 0; } /* the bar is nothing until opened */
+.nav-folded .site-nav:not(.has-burger) .nav-inner { padding: 0; }
+.nav-folded .nav-toggle:checked ~ .site-nav { border-bottom: 1px solid rgba(0,0,0,0.1); }
+.nav-folded .nav-toggle:checked ~ .site-nav .nav-inner { padding: 0.3em 0; text-align: left; line-height: 1.5; }
+.nav-folded .nav-toggle:checked ~ .site-nav .nav-inner > a { display: block; padding: 0.6em 1.2em; }
+.nav-folded .nav-toggle:checked ~ .site-nav .nav-inner::after { display: none; }
+.nav-folded .nav-toggle:checked ~ .site-nav .search-form { display: block; float: none; margin: 0.4em 1.2em; }
+.nav-folded .nav-toggle:checked ~ .site-nav .search-form input { width: 100%; }
+@media (max-width: 700px) {
+  .nav-auto .nav-burger { display: block; }
+  .nav-auto .has-burger { position: relative; padding-right: 3.6em; }
+  .nav-auto.header-center .has-burger { padding-left: 3.6em; }
+  .nav-auto .has-burger > .nav-burger { position: absolute; right: 1em; top: 50%; margin-top: -1em; }
+  .nav-auto .site-nav.has-burger { padding-right: 0; }
+  .nav-auto .site-nav.has-burger .nav-inner { padding-left: 0; padding-right: 0; } /* the button keeps its place when the panel opens */
+  .nav-auto .site-nav.has-burger .nav-inner > .nav-burger { display: inline-block; margin-left: 0.5em; }
+  .nav-auto .site-nav .nav-inner > a, .nav-auto .site-nav .search-form { display: none; }
+  .nav-auto .site-nav:not(.has-burger) { border-bottom: 0; }
+  .nav-auto .site-nav:not(.has-burger) .nav-inner { padding: 0; }
+  .nav-auto .nav-toggle:checked ~ .site-nav { border-bottom: 1px solid rgba(0,0,0,0.1); }
+  .nav-auto .nav-toggle:checked ~ .site-nav .nav-inner { padding: 0.3em 0; text-align: left; line-height: 1.5; }
+  .nav-auto .nav-toggle:checked ~ .site-nav .nav-inner > a { display: block; padding: 0.6em 1.2em; }
+  .nav-auto .nav-toggle:checked ~ .site-nav .nav-inner::after { display: none; }
+  .nav-auto .nav-toggle:checked ~ .site-nav .search-form { display: block; float: none; margin: 0.4em 1.2em; }
+  .nav-auto .nav-toggle:checked ~ .site-nav .search-form input { width: 100%; }
+}
 .body-wrap { padding: 1.5em 1em; }
 .content { padding: 1.5em 2em; border-radius: 6px; box-shadow: 0 1px 3px rgba(0,0,0,0.15); }
 .page-title { margin-top: 0; }