honour theme preference, add new random

static/styles/global.css

@@ -11,6 +11,7 @@ body {
   box-sizing: border-box;
   min-height: 100vh;
   padding: 35px 10vw;
+  background-color: white;
   color: #222;
 }
 
@@ -115,3 +116,25 @@ label[for="dark-mode"]:hover {
   color: white;
   content: "☀️";
 }
+
+@media (prefers-color-scheme: dark) {
+  #dark-mode + label[for="dark-mode"]::after {
+    color: white;
+    content: "☀";
+  }
+
+  #dark-mode:checked + label[for="dark-mode"]::after {
+    color: black;
+    content: "🌙";
+  }
+
+  #main {
+    background-color: #222;
+    color: white;
+  }
+  
+  #dark-mode:checked ~ #main {
+    background-color: white;
+    color: #222;
+  }
+}

templates/components/random/email.html

@@ -0,0 +1,7 @@
+<div class="random" id="email">
+  <div class="random-content">
+    <span>Email me at prussia [at] prussia [dot] dev! My pgp key can be found <a href="https://keys.openpgp.org/search?q=prussia%40prussia.dev">here</a>.</span>
+  </div>
+  <a href="/#badges">More random stuff</a>
+</div>
+

templates/components/random/minesweeper.html

@@ -1,6 +1,6 @@
 <div class="random" id="minesweeper">
   <div class="random-content">
-    <a href="https://prussia.dev/retro?open_windows=minesweeper">Play Minesweeper</a>
+    <a href="https://prussia.dev/retro?open_windows=minesweeper">Play Minesweeper?</a>
   </div>
   <a href="/#wikipedia">More random stuff</a>
 </div>

templates/components/random/rss.html

@@ -2,6 +2,6 @@
   <div class="random-content">
     <span>This blog has a <a href="/atom.xml">rss feed</a>!</span>
   </div>
-  <a href="/#badges">More random stuff</a>
+  <a href="/#email">More random stuff</a>
 </div>
 

templates/index.html

@@ -34,6 +34,7 @@
         [[ component:random/quote3 ]]
         [[ component:random/quote4 ]]
         [[ component:random/rss ]]
+        [[ component:random/email ]]
         <a id="ciran" href="/#badges">See some random stuff</a>
       </div>
     </div>