Add menu link size, spacing, a current-page mark and a spread alignment

Size and spacing selects, a choice of how the current page's link is
marked (underlined as before, bold, boxed or not at all) and a fourth
alignment that spreads the header's links across the bar. Alignment
joins the other menu classes on the body, so the theme CSS no longer
sets it; spread is justified text with a full-width last line, which
old browsers lay out too, and stays out of the column menus.

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

1 files changed, 17 insertions, 1 deletions

diff --git a/internal/web/static/blog.css b/internal/web/static/blog.css
index 054532d..7b91dbe 100644
--- a/internal/web/static/blog.css
+++ b/internal/web/static/blog.css
@@ -32,7 +32,23 @@ img { max-width: 100%; height: auto; }
 /* menu link styles (body.nav-*, from the theme's switches; colours are the theme CSS's) */
 .nav-bold .site-nav a { font-weight: bold; }
 .nav-upper .site-nav a { text-transform: uppercase; letter-spacing: 0.05em; }
-.nav-ul-always .site-nav a, .nav-ul-hover .site-nav a:hover, .site-nav a.active { text-decoration: underline; }
+.nav-ul-always .site-nav a, .nav-ul-hover .site-nav a:hover { text-decoration: underline; }
+.nav-size-small .site-nav a { font-size: 0.9em; }
+.nav-size-large .site-nav a { font-size: 1.15em; }
+.nav-gap-tight .site-nav a { padding-left: 0.4em; padding-right: 0.4em; }
+.nav-gap-wide .site-nav a { padding-left: 1.4em; padding-right: 1.4em; }
+.nav-active-underline .site-nav a.active { text-decoration: underline; }
+.nav-active-bold .site-nav a.active { font-weight: bold; }
+.nav-active-box .site-nav a.active { box-shadow: inset 0 0 0 1px currentColor; border-radius: 3px; }
+.nav-center .nav-inner { text-align: center; }
+.nav-right .nav-inner { text-align: right; }
+/* spread: the header's links share the bar evenly — justified text with a
+   full-width last line, which old browsers lay out too; line-height 0 keeps
+   that forced line from adding height, the links carry their own. A floated
+   search box just shortens the line. */
+.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%; }
 .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; }