1 files changed, 53 insertions, 14 deletions

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; }