Replace the colons title rule with a double dotted border

A row of ":" characters did not read as a rule. "Double dots" is what the
reference site does: the 3px dotted border and an absolutely positioned
::after carrying a second one 2px above it.

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

4 files changed, 9 insertions, 8 deletions

diff --git a/internal/web/static/blog.css b/internal/web/static/blog.css
index 30b1612..edf92e5 100644
--- a/internal/web/static/blog.css
+++ b/internal/web/static/blog.css
@@ -39,12 +39,13 @@ img { max-width: 100%; height: auto; }
 .post-title { margin: 0 0 0.1em; font-size: 1.5em; line-height: 1.25; }
 /* title rule (body.titles-*): a line under page and post titles, coloured by the
    theme CSS. overflow:hidden ends it at a floated thumbnail instead of under it. */
-.titles-line .page-title, .titles-line .post-title, .titles-dots .page-title, .titles-dots .post-title, .titles-colons .page-title, .titles-colons .post-title, .titles-stripes .page-title, .titles-stripes .post-title { overflow: hidden; padding-bottom: 0.25em; }
+.titles-line .page-title, .titles-line .post-title, .titles-dots .page-title, .titles-dots .post-title, .titles-dots2 .page-title, .titles-dots2 .post-title, .titles-stripes .page-title, .titles-stripes .post-title { overflow: hidden; padding-bottom: 0.25em; }
 .titles-line .page-title, .titles-line .post-title { border-bottom-width: 1px; border-bottom-style: solid; } /* the colour is the theme's, so no shorthand */
 .titles-dots .page-title, .titles-dots .post-title { border-bottom-width: 3px; border-bottom-style: dotted; }
 .titles-stripes .page-title::after, .titles-stripes .post-title::after { content: ""; display: block; height: 0.4em; margin-top: 0.35em; background: repeating-linear-gradient(90deg, currentColor, currentColor 2px, transparent 2px, transparent 10px); }
-/* colons: a row of ":" clipped to the title's width (the string is long enough for any screen) */
-.titles-colons .page-title::after, .titles-colons .post-title::after { content: "::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::"; display: block; overflow: hidden; white-space: nowrap; margin-top: 0.15em; font-size: 0.7em; font-weight: normal; line-height: 1; letter-spacing: 0.04em; }
+/* double dots: a second dotted row 2px above the border, like the reference site */
+.titles-dots2 .page-title, .titles-dots2 .post-title { position: relative; border-bottom-width: 3px; border-bottom-style: dotted; }
+.titles-dots2 .page-title::after, .titles-dots2 .post-title::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; border-bottom-width: 3px; border-bottom-style: dotted; }
 .post-title a { text-decoration: none; }
 .post-title a:hover { text-decoration: underline; }
 .post-date { margin: 0 0 0.8em; font-size: 0.85em; opacity: 0.7; }
diff --git a/internal/web/templates/dashboard/design.html b/internal/web/templates/dashboard/design.html
index 0ce7c6d..49f4699 100644
--- a/internal/web/templates/dashboard/design.html
+++ b/internal/web/templates/dashboard/design.html
@@ -191,7 +191,7 @@
       <option value="none"{{if eq $t.TitleRule "none"}} selected{{end}}>{{t "None"}}</option>
       <option value="line"{{if eq $t.TitleRule "line"}} selected{{end}}>{{t "Line"}}</option>
       <option value="dots"{{if eq $t.TitleRule "dots"}} selected{{end}}>{{t "Dots"}}</option>
-      <option value="colons"{{if eq $t.TitleRule "colons"}} selected{{end}}>{{t "Colons"}} (::::)</option>
+      <option value="dots2"{{if eq $t.TitleRule "dots2"}} selected{{end}}>{{t "Double dots"}}</option>
       <option value="stripes"{{if eq $t.TitleRule "stripes"}} selected{{end}}>{{t "Stripes"}}</option>
     </select></label>
     <label>{{t "Date format"}}<br><select name="date_format">
diff --git a/internal/web/theme.go b/internal/web/theme.go
index 8d9bf98..66ac7ad 100644
--- a/internal/web/theme.go
+++ b/internal/web/theme.go
@@ -53,7 +53,7 @@ type Theme struct {
 	PostsPerPage int    `json:"posts_per_page"` // on listings and tag pages; one of postsPerPageChoices
 	ListStyle    string `json:"list_style"`     // full | summary (see summary.go)
 	PostImage    string `json:"post_image"`     // where the post page shows the featured image: top | bottom | list (listings only)
-	TitleRule    string `json:"title_rule"`     // none | line | dots | colons | stripes, drawn under page and post titles in the link colour
+	TitleRule    string `json:"title_rule"`     // none | line | dots | dots2 | stripes, drawn under page and post titles in the link colour
 	TagHash      bool   `json:"tag_hash"`       // tags are listed as #name
 
 	FooterBg    string `json:"footer_bg"`
@@ -190,7 +190,7 @@ func (t *Theme) normalize() {
 	t.PostsPerPage = pickInt(t.PostsPerPage, postsPerPageChoices...)
 	t.ListStyle = pick(t.ListStyle, "full", "summary")
 	t.PostImage = pick(t.PostImage, "top", "bottom", "list")
-	t.TitleRule = pick(t.TitleRule, "none", "line", "dots", "colons", "stripes")
+	t.TitleRule = pick(t.TitleRule, "none", "line", "dots", "dots2", "stripes")
 	t.FooterBg = color(t.FooterBg, d.FooterBg)
 	t.FooterColor = color(t.FooterColor, d.FooterColor)
 	t.FooterAlign = pick(t.FooterAlign, "center", "left")
diff --git a/internal/web/web_test.go b/internal/web/web_test.go
index c0a68c5..ffa9db7 100644
--- a/internal/web/web_test.go
+++ b/internal/web/web_test.go
@@ -144,8 +144,8 @@ func TestTitleRuleAndTagHash(t *testing.T) {
 	if th.TitleRuleClass() != "titles-dots" || !th.TagHash || !strings.Contains(th.CSS(), ".page-title, .post-title { border-color:#b03a48; }") {
 		t.Errorf("from form: %+v\n%s", th, th.CSS())
 	}
-	if th = ThemeFromForm(th, url.Values{"title_rule": {"colons"}}); th.TitleRuleClass() != "titles-colons" {
-		t.Errorf("colons: %+v", th)
+	if th = ThemeFromForm(th, url.Values{"title_rule": {"dots2"}}); th.TitleRuleClass() != "titles-dots2" {
+		t.Errorf("dots2: %+v", th)
 	}
 	th = ThemeFromForm(th, url.Values{"title_rule": {"neon"}})
 	if th.TitleRuleClass() != "" || th.TagHash {