From e24ea510232b0831a81ba0d4a2623976f79a3d9f Mon Sep 17 00:00:00 2001 From: Tom Smeding Date: Wed, 1 Apr 2026 00:21:56 +0200 Subject: Styling and layout Thanks Daniel! --- pages/style.css | 67 +++++++++++++++++++++++++++++++++++++++++++++------------ 1 file changed, 53 insertions(+), 14 deletions(-) (limited to 'pages/style.css') diff --git a/pages/style.css b/pages/style.css index e7c850a..551bb21 100644 --- a/pages/style.css +++ b/pages/style.css @@ -1,11 +1,48 @@ +body { + --font-color: #000; + --bg-color: #f8f8f8; + --header-bg-color: #ddd; + --footer-text-color: #333; + --footer-bg-color: #eee; + --meta-color: #777; + --nickwrap-color: #999; + --link-color: #33f; +} + +@media (prefers-color-scheme: dark) { + body { + --font-color: #ddd; + --header-bg-color: #282828; + --bg-color: #1d1d1d; + --footer-bg-color: #333; + --footer-text-color: #eee; + --meta-color: #676767; + --nickwrap-color: var(--meta-color); + --link-color: #abf; + } +} + html, body { margin: 0; } body { - font-family: sans-serif; + font-family: "Adwaita Sans", sans-serif; + font-variant-numeric: tabular-nums; + background-color: var(--bg-color); + color: var(--font-color); +} + +a { + text-decoration: none; + color: var(--link-color); +} + +a:hover { + text-decoration: underline; } +/* put footer at bottom */ #gridwrapper { min-height: 100vh; display: grid; @@ -20,7 +57,7 @@ body { } header { - background-color: #ddd; + background-color: var(--header-bg-color); padding: 10px; padding-left: 20px; } @@ -30,10 +67,10 @@ main { } footer { - background-color: #eee; + background-color: var(--footer-bg-color); padding: 20px; font-size: smaller; - color: #333; + color: var(--footer-text-color); } .hdrspacer { @@ -41,13 +78,6 @@ footer { width: 15px; } -.hdrchannel { - font-size: larger; - font-weight: bold; - vertical-align: middle; - margin-left: 15px; -} - .hdritem { margin-top: auto; margin-bottom: auto; @@ -62,12 +92,21 @@ footer { /* log page */ #pagepicker { display: inline-block; - background-color: #eee; + background-color: var(--footer-bg-color); padding: 5px; border-radius: 5px; margin-bottom: 10px; } +#pagepicker-pages { + display: inline-block; + margin-left: 10px; +} + +#pagepicker-pages a, #pagepicker-pages b { + padding: 0 6px; +} + table#events td { padding: 2px; vertical-align: top; @@ -82,8 +121,8 @@ table#events td:nth-child(-n + 2) { padding-right: 10px; } -span.nickwrap { color: #888; } -table#events tr.ev-meta > td:nth-child(n + 2) { color: #666; } +span.nickwrap { color: var(--nickwrap-color); } +table#events tr.ev-meta > td:nth-child(n + 2) { color: var(--meta-color); } table#events tr.ev-act > td:nth-child(n + 2) { font-style: italic; } table#events tr.ev-notice > td:nth-child(n + 2) { font-weight: bold; } table#events tr.ev-parseerror > td:nth-child(n + 2) { color: red; } -- cgit v1.3