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, 8 insertions, 4 deletions

diff --git a/internal/web/templates/layouts/blog.html b/internal/web/templates/layouts/blog.html
index 76475b9..ba9ea24 100644
--- a/internal/web/templates/layouts/blog.html
+++ b/internal/web/templates/layouts/blog.html
@@ -53,12 +53,12 @@
 
 {{/* One layout module. .m is the store.Module, .root the page data; the same
      kind renders differently in the header (big blocks) and elsewhere (boxes). */}}
-{{define "module"}}{{$m := .m}}{{$r := .root}}{{$t := $r.Data.theme}}
-{{- if eq $m.Kind "title"}}<div class="wrap header-text">
+{{define "module"}}{{$m := .m}}{{$r := .root}}{{$t := $r.Data.theme}}{{$rc := $t.RuleClass}}
+{{- if eq $m.Kind "title"}}<div class="wrap header-text{{with $rc}} {{.}}{{end}}">{{template "rule" (dict "before" true "rc" $rc "theme" $t)}}<div class="brand">
   <h1 class="site-title"><a href="/">{{$r.Blog.Title}}</a></h1>
   {{if $r.Blog.Tagline}}<p class="tagline">{{$r.Blog.Tagline}}</p>{{end}}
-</div>
-{{- else if eq $m.Kind "logo"}}{{if $t.Logo}}{{if eq $m.Area "header"}}<div class="wrap header-logo"><a href="/"><img class="logo" src="/media/{{$t.Logo}}" alt="{{$r.Blog.Title}}"></a></div>
+</div>{{template "rule" (dict "before" false "rc" $rc "theme" $t)}}</div>
+{{- else if eq $m.Kind "logo"}}{{if $t.Logo}}{{if eq $m.Area "header"}}<div class="wrap header-logo{{with $rc}} {{.}}{{end}}">{{template "rule" (dict "before" true "rc" $rc "theme" $t)}}<div class="brand"><a href="/"><img class="logo" src="/media/{{$t.Logo}}" alt="{{$r.Blog.Title}}"></a></div>{{template "rule" (dict "before" false "rc" $rc "theme" $t)}}</div>
 {{else}}<div class="mod mod-logo"><a href="/"><img class="logo" src="/media/{{$t.Logo}}" alt="{{$r.Blog.Title}}"></a></div>{{end}}{{end}}
 {{- else if eq $m.Kind "menu"}}{{if eq $m.Area "header"}}<div class="site-nav"><div class="wrap nav-inner">{{if $r.Data.layout.HeaderSearch}}{{template "searchform" $r}}{{end}}{{template "menulinks" $r}}</div></div>
 {{else}}<div class="mod site-nav mod-menu">{{template "modtitle" $m}}<div class="nav-inner">{{template "menulinks" $r}}</div></div>{{end}}
@@ -95,6 +95,10 @@
      say "Search" over and over. .Data.q only exists on the search page. */}}
 {{define "searchform"}}<form method="get" action="/search" class="search-form"><input type="search" name="q"{{with .Data.q}} value="{{.}}"{{end}} placeholder="{{t "Search…"}}" aria-label="{{t "Search…"}}" size="16"></form>{{end}}
 
+{{/* The header rule beside a title or logo block: after it, and before it
+     too when the header is centred. Nothing without a rule (.rc is empty). */}}
+{{define "rule"}}{{if .rc}}{{if or (not .before) (eq .theme.HeaderAlign "center")}}<div class="header-rule"></div>{{end}}{{end}}{{end}}
+
 {{define "modtitle"}}{{if .Title}}<h3 class="mod-title">{{.Title}}</h3>{{end}}{{end}}
 
 {{define "menulinks"}}{{range .Data.menu}}<a href="{{.Href}}"{{if and .PageID $.Data.page (eq $.Data.page.ID (deref64 .PageID))}} class="active"{{end}}>{{.Text}}</a>