Add a header rule beside the title or logo, and plain menu links

gizmolab's header is a logo with a striped rule filling the rest of the
row, and a menu of plain underlined links under it; nothing in the Design
tab could draw either. The rule (line, dots or stripes) is a theme option
drawn in the header text colour beside the title and logo modules — on
both sides when the header is centred — as table cells, so it is as tall
as the brand and old browsers lay it out the same; it is hidden on phones
so a long title can wrap. The menu's link style gains "plain, underlined"
next to bold and uppercase.

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

1 files changed, 17 insertions, 0 deletions

diff --git a/internal/web/static/blog.css b/internal/web/static/blog.css
index eabb314..10568fa 100644
--- a/internal/web/static/blog.css
+++ b/internal/web/static/blog.css
@@ -7,6 +7,22 @@ img { max-width: 100%; height: auto; }
 .header-text { padding: 1.4em 1em; }
 .header-logo { padding: 1em; }
 .header-logo img.logo { display: inline-block; width: auto; }
+/* header rule: a line beside the title or logo (both sides when centred) filling
+   the rest of the row. Table cells, so the rule is as tall as the brand and old
+   browsers lay it out the same; the stripes are a gradient in currentColor (the
+   header text colour). Wide screens only: on a phone a long title must wrap. */
+.ruled { display: table; width: 100%; }
+.ruled > .brand, .ruled > .header-rule { display: table-cell; vertical-align: middle; }
+.ruled > .brand { white-space: nowrap; padding: 0 1em; }
+.ruled > .brand:first-child { padding-left: 0; }
+.ruled > .brand:last-child { padding-right: 0; }
+.ruled > .brand a, .ruled > .brand img.logo { display: block; } /* no line box under the logo: the rule is exactly as tall as it */
+.ruled > .brand img.logo { max-width: none; } /* a percentage max-width is 0 inside an auto-width cell */
+.ruled > .header-rule { width: 100%; }
+.ruled > .header-rule:first-child, .ruled > .header-rule:first-child ~ .header-rule { width: 50%; } /* centred: two rules share the remainder */
+.rule-line > .header-rule::before, .rule-dots > .header-rule::before { content: ""; display: block; border-top: 1px solid; }
+.rule-dots > .header-rule::before { border-top: 3px dotted; }
+.rule-stripes > .header-rule { background: repeating-linear-gradient(90deg, currentColor, currentColor 2px, transparent 2px, transparent 10px); }
 .site-title { margin: 0; font-size: 2em; line-height: 1.2; }
 .site-title a { text-decoration: none; }
 .tagline { margin: 0.3em 0 0; opacity: 0.85; }
@@ -126,6 +142,7 @@ img { max-width: 100%; height: auto; }
   .content { padding: 1em; }
   .post-thumb { width: 40%; margin-left: 1em; }
   .site-title { font-size: 1.5em; }
+  .ruled > .header-rule { display: none; } .ruled > .brand { white-space: normal; }
   .cols { display: block; }
   .col-left, .col-right { padding: 0; margin-top: 1.5em; }
   .col-left { order: 0; }