From eaa6dc04d05ad24dea5a7b211928cddb6db5aa73 Mon Sep 17 00:00:00 2001 From: grm Date: Thu, 17 Sep 2026 21:47:37 +0300 Subject: 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 Claude-Session: https://claude.ai/code/session_01Sd8UPWrvyYCLj97JexNw3A --- AGENTS.md | 4 ++-- README.md | 2 +- internal/i18n/el.go | 3 ++- internal/web/static/blog.css | 4 +++- internal/web/templates/dashboard/design.html | 4 +++- internal/web/theme.go | 4 ++-- internal/web/web_test.go | 3 +++ 7 files changed, 16 insertions(+), 8 deletions(-) diff --git a/AGENTS.md b/AGENTS.md index 1336739..148bc91 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -184,8 +184,8 @@ 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` | `stripes`) is the same - rule under page and post titles (`.page-title`, `.post-title`): a body + 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 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 800c30d..03cc531 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 or stripes — and + content (dates, summaries, a rule under titles — line, dots, colons 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 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 @@
-
+

{{t "The rule goes under page and post titles, in the link colour."}}