diff options
| author | Tom Smeding <tom@tomsmeding.com> | 2026-04-01 00:21:56 +0200 |
|---|---|---|
| committer | Tom Smeding <tom@tomsmeding.com> | 2026-04-01 00:21:56 +0200 |
| commit | e24ea510232b0831a81ba0d4a2623976f79a3d9f (patch) | |
| tree | 00767d8b2994475e37d362a3ae6fd540f6c59fdf /pages | |
| parent | f8981b5c5ec4519bc087bea2d465b7a4a82dca8b (diff) | |
Styling and layout
Thanks Daniel!
Diffstat (limited to 'pages')
| -rw-r--r-- | pages/index.mustache | 3 | ||||
| -rw-r--r-- | pages/log.mustache | 53 | ||||
| -rw-r--r-- | pages/style.css | 67 |
3 files changed, 84 insertions, 39 deletions
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 @@ <html lang="en"> <head> <meta charset="utf-8"> - <title>Ircbrowse2</title> + <title>ircbrowse2</title> + <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="/style.css"> </head> <body> 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 @@ <html lang="en"> <head> <meta charset="utf-8"> - <title>Ircbrowse2: {{channel}} ({{network}})</title> + <title>ircbrowse2: {{channel}} ({{network}})</title> + <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="/style.css"> </head> <body> @@ -10,35 +11,39 @@ <header> <a href="/" class="hdritem">Home</a> <span class="hdrspacer"></span> - <span class="hdrchannel">{{network}}/{{channel}}</span> - <span class="hdrspacer"></span> <a href="/cal/{{alias}}" class="hdritem">Calendar</a> </header> <main> - <h1>Logs for {{channel}} on {{network}}</h1> + <h1>Logs: {{network}}/{{channel}}</h1> <div id="pagepicker"> {{#picker}} - Page - {{#prevpage}} - <a href="?page=1">1</a> - .. - <a href="?page={{prevpage}}"><Prev</a> - {{/prevpage}} - {{#leftnums}} - <a href="?page={{.}}">{{.}}</a> - {{/leftnums}} - <b>{{curnum}}</b> - {{#rightnums}} - <a href="?page={{.}}">{{.}}</a> - {{/rightnums}} - {{#nextpage}} - <a href="?page={{nextpage}}">Next></a> - .. - <a href="?page={{npages}}">{{npages}}</a> - {{/nextpage}} + {{#prevpage}}<a href="?page={{prevpage}}">{{/prevpage}}{{^prevpage}}<span class="link-disabled">{{/prevpage}}←Prev</a> + {{#nextpage}}<a href="?page={{nextpage}}">{{/nextpage}}{{^nextpage}}<span class="link-disabled">{{/nextpage}}Next→</a> + <div id="pagepicker-pages"> + Page + {{#firstpage}} + <a href="?page=1">1</a> + {{/firstpage}} + {{#leftdots}} + .. + {{/leftdots}} + {{#leftnums}} + <a href="?page={{.}}">{{.}}</a> + {{/leftnums}} + <b>{{curnum}}</b> + {{#rightnums}} + <a href="?page={{.}}">{{.}}</a> + {{/rightnums}} + {{#rightdots}} + .. + {{/rightdots}} + {{#lastpage}} + <a href="?page={{npages}}">{{npages}}</a> + {{/lastpage}} + </div> {{/picker}} - <span style="margin: 0 10px 0 11px">—</span> - {{totalevents}} events total. + <span style="margin: 0 9px 0 4px">—</span> + {{totalevents}} events total </div> <table id="events"><tbody> {{#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; } |