diff options
| author | Nicholas Johnson <> | 2026-09-18 00:00:00 +0000 |
|---|---|---|
| committer | Nicholas Johnson <> | 2026-09-19 16:06:44 -0400 |
| commit | 8963ab91a272a57120273703dc2716aae16669dca18fe2c39b9fb18268a3e275 (patch) | |
| tree | fdd411bf09b2d9464ac6f04cd86f54c9d68270a4556a9018947f70c87daec27f /assets/static | |
| parent | ca3e0cfa9eb0dbc09e727de4a6546da18741ac65f21a7ea1dbe85e416360709f (diff) | |
| download | hugo-theme-journal-8963ab91a272a57120273703dc2716aae16669dca18fe2c39b9fb18268a3e275.tar.gz hugo-theme-journal-8963ab91a272a57120273703dc2716aae16669dca18fe2c39b9fb18268a3e275.zip | |
Improve dark mode, focus and wrapping in the stylesheet
The page declared no colour scheme, so browsers styled their own widgets
for a light page against this theme's dark one. That was invisible until
entries gained audio, since the audio player is the first user interface
control the theme renders; scrollbars and form controls were affected
too.
Also give keyboard users the highlight that pointer users get on hover,
and let long words break in list items, blockquotes and headings rather
than only in paragraphs, so that a long URL cannot push the layout
sideways. Preformatted blocks keep scrolling instead of breaking.
The empty rulesets left as block placeholders are removed; the html and
body colours are deliberately different and are untouched.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Diffstat (limited to 'assets/static')
| -rw-r--r-- | assets/static/css/style.css | 13 |
1 files changed, 4 insertions, 9 deletions
diff --git a/assets/static/css/style.css b/assets/static/css/style.css index f8a294a..f8045b4 100644 --- a/assets/static/css/style.css +++ b/assets/static/css/style.css @@ -18,6 +18,7 @@ html { background-color: #181A1B; + color-scheme: dark; font-size: 62.5%; } @@ -41,7 +42,7 @@ h1, h2, h3, h4, h5, h6 { margin-bottom: 1.0em; } -p { +blockquote, li, p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; } @@ -117,8 +118,6 @@ article:last-child header p, } } -.entry {} - .entry__details { margin-bottom: 1.5em; margin-top: 1.5em; @@ -141,8 +140,6 @@ article:last-child header p, margin-top: 0.2em; } -.footer {} - .footer__text { margin-bottom: 0; margin-top: 2em; @@ -161,7 +158,7 @@ article:last-child header p, color: #0091ea; } -.link--internal:hover { +.link--internal:hover, .link--internal:focus-visible { background-color: #0091ea; color: black; } @@ -170,7 +167,7 @@ article:last-child header p, color: #9370DB; } -.link--external:hover { +.link--external:hover, .link--external:focus-visible { background-color: #9370DB; color: black; } @@ -187,8 +184,6 @@ article:last-child header p, } } -.logo {} - .logo__text { line-height: 1.2; margin-bottom: 2em; |
