1 files changed, 113 insertions, 126 deletions

diff --git a/templates/style.css b/templates/style.css
index bd07f97..6888891 100644
--- a/templates/style.css
+++ b/templates/style.css
@@ -1,23 +1,43 @@
+:root {
+  --width: 800px;
+  --font-main: Verdana, sans-serif;
+  --font-secondary: Verdana, sans-serif;
+  --font-scale: 1em;
+  --background-color: #fff;
+  --heading-color: #222;
+  --text-color: #444;
+  --link-color: #3273dc;
+  --visited-color: #8b6fcb;
+  --code-background-color: #f2f2f2;
+  --code-color: #222;
+  --blockquote-color: #222;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background-color: #01242e;
+    --heading-color: #eee;
+    --text-color: #ddd;
+    --link-color: #8cc2dd;
+    --visited-color: #8b6fcb;
+    --code-background-color: #000;
+    --code-color: #ddd;
+    --blockquote-color: #ccc;
+  }
+}
+
 body {
-  font-family: Verdana, sans-serif;
+  font-family: var(--font-secondary);
+  font-size: var(--font-scale);
   margin: auto;
-  padding: 1em;
-  max-width: 50rem;
+  padding: 20px;
+  max-width: var(--width);
   text-align: left;
-  background-color: #fff;
+  background-color: var(--background-color);
   word-wrap: break-word;
   overflow-wrap: break-word;
   line-height: 1.5;
-  color: #444;
-}
-
-.skip {
-  position: absolute;
-  top: -3em;
-  background: #fff;
-}
-.skip:focus {
-  top: 0;
+  color: var(--text-color);
 }
 
 h1,
@@ -25,60 +45,34 @@ h2,
 h3,
 h4,
 h5,
-h6,
-strong,
-b {
-  color: #222;
+h6 {
+  font-family: var(--font-main);
+  color: var(--heading-color);
+  & > a {
+    color: var(--heading-color);
+  }
 }
 
 a {
-  color: #3273dc;
-}
-
-.title {
-  color: #222;
-  text-decoration: none;
-  border: 0;
-}
-
-.filter {
-  margin-bottom: 0;
-}
-
-time {
-  font-style: italic;
+  color: var(--link-color);
+  cursor: pointer;
 }
 
 nav a {
-  margin-right: 1ex;
-}
-
-.tags {
-  padding: unset;
-  font-size: small;
-}
-
-.tags ul {
-  display: inline-block;
-}
-
-.tags li {
-  list-style: none;
-  display: inline-block;
-  padding-right: 1ex;
+  margin-right: 8px;
 }
 
-textarea {
-  width: 100%;
-  font-size: 1rem;
+strong,
+b {
+  color: var(--heading-color);
 }
 
-input {
-  font-size: 1rem;
+button {
+  margin: 0;
+  cursor: pointer;
 }
 
-main,
-article {
+main {
   line-height: 1.6;
 }
 
@@ -86,38 +80,27 @@ table {
   width: 100%;
 }
 
+hr {
+  border: 0;
+  border-top: 1px dashed;
+}
+
 img {
   max-width: 100%;
 }
 
 code {
-  padding: 2px 5px;
-  background-color: #f2f2f2;
-}
-
-pre code {
-  color: #222;
-  display: block;
-  padding: 20px;
-  white-space: pre-wrap;
-  font-size: 0.875rem;
-  overflow-x: auto;
-}
-
-div.highlight pre {
-  background-color: initial;
-  color: initial;
-}
-
-div.highlight code {
-  background-color: unset;
-  color: unset;
+  font-family: monospace;
+  padding: 2px;
+  background-color: var(--code-background-color);
+  color: var(--code-color);
+  border-radius: 3px;
 }
 
 blockquote,
 .aside {
   border-left: 1px solid #999;
-  color: #222;
+  color: var(--code-color);
   padding-left: 20px;
   font-style: italic;
 }
@@ -127,16 +110,34 @@ blockquote,
 }
 
 footer {
-  padding: 25px;
+  padding: 25px 0;
   text-align: center;
 }
 
-.helptext {
-  color: #777;
-  font-size: small;
+.title:hover {
+  text-decoration: none;
+}
+
+.title h1 {
+  font-size: 1.5em;
+}
+
+.inline {
+  width: auto !important;
+}
+
+.highlight,
+.code {
+  padding: 1px 15px;
+  background-color: var(--code-background-color);
+  color: var(--code-color);
+  border-radius: 3px;
+  margin-block-start: 1em;
+  margin-block-end: 1em;
+  overflow-x: auto;
 }
 
-/* blog posts */
+/* blog post list */
 ul.h-feed {
   list-style-type: none;
   padding: unset;
@@ -151,56 +152,42 @@ ul.h-feed li span {
 }
 
 ul.h-feed li a:visited {
-  color: #8b6fcb;
+  color: var(--visited-color);
 }
 
-svg.rss-icon {
-  width: 1.5ex;
-  height: 1.5ex;
+.title {
+  text-decoration: none;
 }
 
-@media (prefers-color-scheme: dark) {
-  body {
-    background-color: #333;
-    color: #ddd;
-  }
-
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6,
-  strong,
-  b,
-  .title {
-    color: #eee;
-  }
-
-  a {
-    color: #8cc2dd;
-  }
+.filter {
+  margin-bottom: 0;
+}
 
-  code {
-    background-color: #777;
-  }
+.skip {
+  position: absolute;
+  top: -3em;
+  background: var(--background-color);
+}
 
-  pre code {
-    color: #ddd;
-  }
+.skip:focus {
+  top: 0;
+}
 
-  blockquote,
-  .aside {
-    color: #ccc;
-  }
+.tags {
+  font-size: small;
+}
 
-  textarea,
-  input {
-    background-color: #252525;
-    color: #ddd;
-  }
+.p-categories,
+ul.tags {
+  display: inline-block;
+  padding-inline-start: 0;
+}
+.tags li {
+  list-style: none;
+  display: inline-block;
+}
 
-  .helptext {
-    color: #aaa;
-  }
+svg.rss-icon {
+  height: 1.5ex;
+  width: 1.5ex;
 }