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, 5 deletions

diff --git a/internal/web/theme.go b/internal/web/theme.go
index df2c613..c0c0729 100644
--- a/internal/web/theme.go
+++ b/internal/web/theme.go
@@ -34,10 +34,11 @@ type Theme struct {
 	HeaderAlign       string `json:"header_align"`        // left | center
 	HeaderBg          string `json:"header_bg"`
 	HeaderText        string `json:"header_text"`
-	TitleSize         string `json:"title_size"` // normal | small | large (the site title in the header)
+	TitleSize         string `json:"title_size"`  // normal | small | large (the site title in the header)
+	HeaderRule        string `json:"header_rule"` // none | line | dots | stripes, drawn beside the title/logo modules in the header
 
 	NavAlign string `json:"nav_align"` // left | center | right (header menu)
-	NavStyle string `json:"nav_style"` // normal | uppercase
+	NavStyle string `json:"nav_style"` // normal | uppercase | plain (regular weight, underlined)
 	NavBg    string `json:"nav_bg"`
 	NavText  string `json:"nav_text"`
 	NavHover string `json:"nav_hover"` // "" = same as NavText
@@ -91,7 +92,7 @@ func DefaultTheme() Theme {
 		ContentBg: "#ffffff", TextColor: "#222222", LinkColor: "#1a5fb4", LinkUnderline: "always",
 		ContentStyle: "card", ContentPadding: "normal",
 		Font: "sans", HeadingFont: "same", FontSize: "normal",
-		HeaderImageHeight: "medium", HeaderAlign: "left", HeaderBg: "#2f3a4a", HeaderText: "#ffffff", TitleSize: "normal",
+		HeaderImageHeight: "medium", HeaderAlign: "left", HeaderBg: "#2f3a4a", HeaderText: "#ffffff", TitleSize: "normal", HeaderRule: "none",
 		NavAlign: "left", NavStyle: "normal", NavBg: "#ffffff", NavText: "#222222",
 		ShowDates: true, DateFormat: "long", PostsPerPage: postsPerPageChoices[0], ListStyle: "full", PostImage: "top",
 		FooterBg: "#2f3a4a", FooterColor: "#d0d5dc", FooterAlign: "center",
@@ -170,8 +171,9 @@ func (t *Theme) normalize() {
 	t.HeaderBg = color(t.HeaderBg, d.HeaderBg)
 	t.HeaderText = color(t.HeaderText, d.HeaderText)
 	t.TitleSize = pick(t.TitleSize, "normal", "small", "large")
+	t.HeaderRule = pick(t.HeaderRule, "none", "line", "dots", "stripes")
 	t.NavAlign = pick(t.NavAlign, "left", "center", "right")
-	t.NavStyle = pick(t.NavStyle, "normal", "uppercase")
+	t.NavStyle = pick(t.NavStyle, "normal", "uppercase", "plain")
 	t.NavBg = color(t.NavBg, d.NavBg)
 	t.NavText = color(t.NavText, d.NavText)
 	t.NavHover = optColor(t.NavHover)
@@ -233,6 +235,7 @@ func ThemeFromForm(cur Theme, f url.Values) Theme {
 	t.HeaderBg = get("header_bg")
 	t.HeaderText = get("header_text")
 	t.TitleSize = get("title_size")
+	t.HeaderRule = get("header_rule")
 	t.NavAlign = get("nav_align")
 	t.NavStyle = get("nav_style")
 	t.NavBg = get("nav_bg")
@@ -413,6 +416,15 @@ func (t Theme) TitleSizeCSS() string {
 	return ""
 }
 
+// RuleClass is what a title or logo block in the header carries when a rule
+// is drawn beside it; blog.css does the drawing (normalize clamped the value).
+func (t Theme) RuleClass() string {
+	if t.HeaderRule == "none" {
+		return ""
+	}
+	return "ruled rule-" + t.HeaderRule
+}
+
 func (t Theme) HeaderImageMaxHeight() string {
 	switch t.HeaderImageHeight {
 	case "short":
@@ -442,7 +454,7 @@ a:hover {{"{"}}{{if .LinkHover}} color:{{.LinkHover}};{{end}}{{if eq .LinkUnderl
 .header-image img { max-height:{{.HeaderImageMaxHeight}}; }
 .site-nav { background:{{.NavBg}}; }
 .nav-inner { text-align:{{.NavAlign}}; }
-.site-nav a { color:{{.NavText}};{{if eq .NavStyle "uppercase"}} text-transform:uppercase; letter-spacing:0.05em; font-size:0.9em;{{end}} }
+.site-nav a { color:{{.NavText}};{{if eq .NavStyle "uppercase"}} text-transform:uppercase; letter-spacing:0.05em; font-size:0.9em;{{else if eq .NavStyle "plain"}} font-weight:normal; text-decoration:underline;{{end}} }
 {{- if .NavHover}}
 .site-nav a:hover { color:{{.NavHover}}; }
 {{- end}}