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 --- internal/web/static/blog.css | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) (limited to 'internal/web/static') 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; } -- cgit v1.2.3