diff options
| author | grm <grm@eyesin.space> | 2026-09-17 21:54:38 +0300 |
|---|---|---|
| committer | grm <grm@eyesin.space> | 2026-09-17 21:54:38 +0300 |
| commit | b83e241a331d24718527467e70ae9879f16a71d1 (patch) | |
| tree | ce4a1c2abefa81e0efc1f220a8d7513c78a8bf8b /internal/web/static | |
| parent | eaa6dc04d05ad24dea5a7b211928cddb6db5aa73 (diff) | |
| download | blogspace-b83e241a331d24718527467e70ae9879f16a71d1.tar.gz blogspace-b83e241a331d24718527467e70ae9879f16a71d1.tar.bz2 blogspace-b83e241a331d24718527467e70ae9879f16a71d1.zip | |
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
Diffstat (limited to 'internal/web/static')
| -rw-r--r-- | internal/web/static/blog.css | 7 |
1 files changed, 4 insertions, 3 deletions
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; } |