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/index.mustache | 3 ++- pages/log.mustache | 53 ++++++++++++++++++++++------------------- pages/style.css | 67 +++++++++++++++++++++++++++++++++++++++++----------- 3 files changed, 84 insertions(+), 39 deletions(-) (limited to 'pages') diff --git a/pages/index.mustache b/pages/index.mustache index cc0a8f4..642e4ba 100644 --- a/pages/index.mustache +++ b/pages/index.mustache @@ -2,7 +2,8 @@ - Ircbrowse2 + ircbrowse2 + diff --git a/pages/log.mustache b/pages/log.mustache index 24b7b78..851288d 100644 --- a/pages/log.mustache +++ b/pages/log.mustache @@ -2,7 +2,8 @@ - Ircbrowse2: {{channel}} ({{network}}) + ircbrowse2: {{channel}} ({{network}}) + @@ -10,35 +11,39 @@
Home - {{network}}/{{channel}} - Calendar
-

Logs for {{channel}} on {{network}}

+

Logs: {{network}}/{{channel}}

{{#picker}} - Page - {{#prevpage}} - 1 - .. - <Prev - {{/prevpage}} - {{#leftnums}} - {{.}} - {{/leftnums}} - {{curnum}} - {{#rightnums}} - {{.}} - {{/rightnums}} - {{#nextpage}} - Next> - .. - {{npages}} - {{/nextpage}} + {{#prevpage}}{{/prevpage}}{{^prevpage}}{{/prevpage}}←Prev  + {{#nextpage}}{{/nextpage}}{{^nextpage}}{{/nextpage}}Next→ +
+ Page + {{#firstpage}} + 1 + {{/firstpage}} + {{#leftdots}} + .. + {{/leftdots}} + {{#leftnums}} + {{.}} + {{/leftnums}} + {{curnum}} + {{#rightnums}} + {{.}} + {{/rightnums}} + {{#rightdots}} + .. + {{/rightdots}} + {{#lastpage}} + {{npages}} + {{/lastpage}} +
{{/picker}} - — - {{totalevents}} events total. + — + {{totalevents}} events total
{{#events}} 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