2 files changed, 97 insertions, 20 deletions
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index a88314b..90fe12d 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -12,9 +12,9 @@
   <body>
     <nav>
     <ul class="menu">
-      {{ range .Site.Menus.main }}
+      {{- range .Site.Menus.main -}}
       <li><a href="{{ .URL | relURL }}">{{ .Name }}</a></li>
-      {{ end }}
+      {{- end -}}
     </ul>
     <hr/>
     </nav>
diff --git a/static/css/style.css b/static/css/style.css
index 0b51cd6..ef0104b 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -1,51 +1,128 @@
+:root {
+    --bg-colour: #FAFCFA;
+    --fg-colour: #060806;
+    --primary-colour: #536E53;
+    --secondary-colour: #6E536E;
+
+    --primary-colour-1: #F2F5F2;
+    --primary-colour-2: #E5ECE5;
+    --primary-colour-3: #D8E2D8;
+    --primary-colour-4: #BFCEBF;
+    --primary-colour-5: #7E9E7E;
+}
+
+@media (prefers-color-scheme: dark) {
+
+    :root {
+        --fg-colour: #FAFCFA;
+        --bg-colour: #060806;
+        --primary-colour: #536E53;
+        --secondary-colour: #C3AFC3;
+
+        --primary-colour-1: #2D342D;
+        --primary-colour-2: #3B443B;
+        --primary-colour-3: #495349;
+        --primary-colour-4: #647364;
+        --primary-colour-5: #819181;
+    }
+
+}
+
 body {
-  max-width: 800px;
-  margin: auto;
-  padding: 1em;
-  line-height: 1.5;
+    max-width: 800px;
+    margin: auto;
+    padding: 1em;
+    line-height: 1.5;
+    color: var(--fg-colour);
+    background-color: var(--bg-colour);
 }
 
 /* header and footer areas */
 .menu { padding: 0; }
 .menu li { display: inline-block; }
 .article-meta, .menu a {
-  text-decoration: none;
-  background: #eee;
-  padding: 5px;
-  border-radius: 5px;
+    text-decoration: none;
+    padding: 5px;
+    border-radius: 5px;
+    background-color: var(--primary-colour-1);
 }
 .menu, .article-meta, footer { text-align: center; }
 .title { font-size: 1.1em; }
 footer a { text-decoration: none; }
 hr {
   border-style: dashed;
-  color: #ddd;
+  color: var(--primary-colour-3);
 }
 
 /* code */
 pre {
-  border: 1px solid #ddd;
-  box-shadow: 5px 5px 5px #eee;
+  border: 1px solid var(--primary-colour-3);
+  box-shadow: 5px 5px 5px var(--primary-colour-1);
   padding: 1em;
   overflow-x: auto;
 }
-code { background: #f9f9f9; }
+code {
+    padding: 2px;
+    border: 0px solid white;
+    border-radius: 5px;
+    background: var(--primary-colour-2);
+}
 pre code { background: none; }
 
 /* misc elements */
 img, iframe, video { max-width: 100%; }
 main { hyphens: auto; }
+.menu li { margin-right: 0.5em; }
 blockquote {
-  background: #f9f9f9;
-  border-left: 5px solid #ccc;
+  background: var(--primary-colour-2);
+  border-left: 5px solid var(--primary-colour-4);;
   padding: 3px 1em 3px;
 }
 
 table {
   margin: auto;
-  border-top: 1px solid #666;
-  border-bottom: 1px solid #666;
+  border-top: 1px solid var(--primary-colour);
+  border-bottom: 1px solid var(--primary-colour);
 }
-table thead th { border-bottom: 1px solid #ddd; }
+table thead th { border-bottom: 1px solid var(--primary-colour-3); }
 th, td { padding: 5px; }
-thead, tfoot, tr:nth-child(even) { background: #eee; }
+thead, tfoot, tr:nth-child(even) { background: var(--primary-colour-1); }
+
+table.post-list {
+    width: 100%;
+    border: none;
+    border-collapse: collapse;
+}
+
+.post-list td {
+    background-color: var(--bg-colour);
+    border-top: thin solid var(--primary-colour);
+    margin: none;
+}
+
+.post-list td.date-td {
+    text-align: right;
+}
+
+a {
+    text-decoration: none;
+    color: var(--secondary-colour);
+}
+
+.transclude-1, .transclude-2, .transclude-3 {
+    padding: 0.5em;
+    border: 0px solid var(--bg-colour);
+    border-radius: 5px;
+}
+
+.transclude-1:hover {
+    background-color: var(--primary-colour-1);
+}
+
+.transclude-2:hover {
+    background-color: var(--primary-colour-2);
+}
+
+.transclude-3:hover {
+    background-color: var(--primary-colour-3);
+}