From b83e241a331d24718527467e70ae9879f16a71d1 Mon Sep 17 00:00:00 2001 From: grm Date: Thu, 17 Sep 2026 21:54:38 +0300 Subject: 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 Claude-Session: https://claude.ai/code/session_01Sd8UPWrvyYCLj97JexNw3A --- AGENTS.md | 5 +++-- README.md | 2 +- internal/i18n/el.go | 2 +- internal/web/static/blog.css | 7 ++++--- internal/web/templates/dashboard/design.html | 2 +- internal/web/theme.go | 4 ++-- internal/web/web_test.go | 4 ++-- 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-`) 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 @@ - +