Add a colons kind to the rule under titles, and stop its label wrapping

The design form's hint on "Rule under titles" wrapped to three lines and
pushed the select below its neighbours; it is a note under the row now.
"Colons" is a row of ":" (a long string in an ::after, clipped to the
title's width), the look of the reference site's dotted borders in text.

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

5 files changed, 13 insertions, 5 deletions

diff --git a/internal/i18n/el.go b/internal/i18n/el.go
index a8a1bde..4375419 100644
--- a/internal/i18n/el.go
+++ b/internal/i18n/el.go
@@ -388,7 +388,8 @@ var el = map[string]string{
 	"Show the date on posts":         "Εμφάνιση ημερομηνίας στις δημοσιεύσεις",
 	"Show tags with a # in front":    "Εμφάνιση των ετικετών με # μπροστά",
 	"Rule under titles":              "Γραμμή κάτω από τους τίτλους",
-	"page and post titles, in the link colour": "τίτλοι σελίδων και δημοσιεύσεων, στο χρώμα των συνδέσμων",
+	"The rule goes under page and post titles, in the link colour.": "Η γραμμή μπαίνει κάτω από τους τίτλους σελίδων και δημοσιεύσεων, στο χρώμα των συνδέσμων.",
+	"Colons":             "Άνω-κάτω τελείες",
 	"Date format":        "Μορφή ημερομηνίας",
 	"Logo & site icon":   "Λογότυπο & εικονίδιο ιστολογίου",
 	"Logo size":          "Μέγεθος λογότυπου",
diff --git a/internal/web/static/blog.css b/internal/web/static/blog.css
index 155269d..30b1612 100644
--- a/internal/web/static/blog.css
+++ b/internal/web/static/blog.css
@@ -39,10 +39,12 @@ 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-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-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 { 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; }
 .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 798a0d0..0ce7c6d 100644
--- a/internal/web/templates/dashboard/design.html
+++ b/internal/web/templates/dashboard/design.html
@@ -187,10 +187,11 @@
   <label class="check"><input type="checkbox" name="show_dates"{{if $t.ShowDates}} checked{{end}}> {{t "Show the date on posts"}}</label>
   <label class="check"><input type="checkbox" name="tag_hash"{{if $t.TagHash}} checked{{end}}> {{t "Show tags with a # in front"}} <span class="muted">(#garden)</span></label>
   <div class="row">
-    <label>{{t "Rule under titles"}} <span class="muted">({{t "page and post titles, in the link colour"}})</span><br><select name="title_rule">
+    <label>{{t "Rule under titles"}}<br><select name="title_rule">
       <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="stripes"{{if eq $t.TitleRule "stripes"}} selected{{end}}>{{t "Stripes"}}</option>
     </select></label>
     <label>{{t "Date format"}}<br><select name="date_format">
@@ -202,6 +203,7 @@
       {{range .Data.perPage}}<option value="{{.}}"{{if eq . $t.PostsPerPage}} selected{{end}}>{{.}}</option>{{end}}
     </select></label>
   </div>
+  <p class="muted small">{{t "The rule goes under page and post titles, in the link colour."}}</p>
   <div class="row">
     <label>{{t "On listings show"}}<br><select name="list_style">
       <option value="full"{{if eq $t.ListStyle "full"}} selected{{end}}>{{t "The whole post"}}</option>
diff --git a/internal/web/theme.go b/internal/web/theme.go
index 0dc8eff..8d9bf98 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 | stripes, drawn under page and post titles in the link colour
+	TitleRule    string `json:"title_rule"`     // none | line | dots | colons | 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", "stripes")
+	t.TitleRule = pick(t.TitleRule, "none", "line", "dots", "colons", "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 205e42f..c0a68c5 100644
--- a/internal/web/web_test.go
+++ b/internal/web/web_test.go
@@ -144,6 +144,9 @@ 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)
+	}
 	th = ThemeFromForm(th, url.Values{"title_rule": {"neon"}})
 	if th.TitleRuleClass() != "" || th.TagHash {
 		t.Errorf("junk rule falls back, unticked box is off: %+v", th)