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

7 files changed, 14 insertions, 12 deletions

diff --git a/AGENTS.md b/AGENTS.md
index 148bc91..4cf36a3 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -184,8 +184,9 @@ internal/web/         server.go (host router, middleware, render helpers)
   as tall as the brand and old browsers agree) in `currentColor`, i.e. the
   header text colour; hidden on phones so a long title can wrap. `NavStyle`
   `plain` is regular weight + underline for the menu links (blog.css makes
-  them bold). `TitleRule` (`none` | `line` | `dots` | `colons` | `stripes`) is the header
-  rule's kinds, plus a row of ":" (an `::after` with a long clipped string), under page and post titles (`.page-title`, `.post-title`): a body
+  them bold). `TitleRule` (`none` | `line` | `dots` | `dots2` | `stripes`) is the header
+  rule's kinds, plus a double dotted row (`dots2`: the border and an
+  absolutely positioned `::after` with a second one 2px above), under page and post titles (`.page-title`, `.post-title`): a body
   class from `Theme.TitleRuleClass` (`titles-<kind>`) that blog.css draws
   (border width/style only — never the shorthand, or it would reset the
   colour; stripes are an `::after` gradient in `currentColor`), coloured
diff --git a/README.md b/README.md
index 03cc531..a4ea70d 100644
--- a/README.md
+++ b/README.md
@@ -25,7 +25,7 @@ Server-rendered HTML, no JavaScript required, works on old browsers and phones.
 - **Design** tab: one form, one Save, organised by part of the blog — colours & fonts
   (schemes, background colour/image, text and link colours, fonts — built-in
   stacks or your own uploaded WOFF2/WOFF/TTF/OTF files), header, menu,
-  content (dates, summaries, a rule under titles — line, dots, colons or stripes — and
+  content (dates, summaries, a rule under titles — line, dots, double dots or stripes — and
   tags shown as #tag), side columns, footer, logo & site icon. The page is five areas — header,
   left column, main content, right column, footer — each holding modules in any
   order: blog title, logo, menu, archive (posts by year and month), recent posts,
diff --git a/internal/i18n/el.go b/internal/i18n/el.go
index 4375419..f97ac3f 100644
--- a/internal/i18n/el.go
+++ b/internal/i18n/el.go
@@ -389,7 +389,7 @@ var el = map[string]string{
 	"Show tags with a # in front":    "Εμφάνιση των ετικετών με # μπροστά",
 	"Rule under titles":              "Γραμμή κάτω από τους τίτλους",
 	"The rule goes under page and post titles, in the link colour.": "Η γραμμή μπαίνει κάτω από τους τίτλους σελίδων και δημοσιεύσεων, στο χρώμα των συνδέσμων.",
-	"Colons":             "Άνω-κάτω τελείες",
+	"Double dots":        "Διπλές τελείες",
 	"Date format":        "Μορφή ημερομηνίας",
 	"Logo & site icon":   "Λογότυπο & εικονίδιο ιστολογίου",
 	"Logo size":          "Μέγεθος λογότυπου",
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 {