From 155d68afb01db5c6356c5f8ee6d08cec2679c8b9 Mon Sep 17 00:00:00 2001
From: alifeee <alifeeerenn@hotmail.com>
Date: Sat, 6 Apr 2024 20:04:36 +0100
Subject: [PATCH 1/3] Revert "remove all styles and comments"

This reverts commit 8dab7e197d325cc04244900ba19d030166fda320.
---
 bike-to-cambridge/index.html         |  62 ++++++++++--
 factorio-proximity-chat/index.html   |  55 +++++++++--
 factorio-proximity-chat/similar.html |   4 +-
 font-workshop/index.html             |  80 ++++++++++++++--
 font-workshop/similar.html           |   2 +-
 hackspace-adventures/index.html      |  28 +++++-
 hackspace-adventures/similar.html    |   2 +-
 hull-bus-sign/index.html             |  28 +++++-
 hull-bus-sign/similar.html           |   2 +-
 index.html                           |  37 ++++++--
 index_template.html                  |  28 +++++-
 making-bogface/index.html            | 136 +++++++++++++++++++++++++--
 making-bogface/similar.html          |   4 +-
 ring-populations/index.html          |  40 +++++++-
 sketch-your-society/index.html       |  30 +++++-
 snippets-of-a-degree/index.html      |  34 ++++++-
 snippets-of-a-degree/similar.html    |   2 +-
 steam-collage-api/index.html         |  41 +++++++-
 steam-collage-api/similar.html       |   2 +-
 what-is-a-third-space/index.html     |  28 +++++-
 zero-md.js                           |   5 +-
 21 files changed, 573 insertions(+), 77 deletions(-)

diff --git a/bike-to-cambridge/index.html b/bike-to-cambridge/index.html
index 68bd232..9503315 100644
--- a/bike-to-cambridge/index.html
+++ b/bike-to-cambridge/index.html
@@ -34,9 +34,12 @@
     <!-- favicon -->
     <link rel="icon" type="image/png" href="../favicon.png" />
     <!-- stylesheets -->
-    
+    <link rel="stylesheet" href="../stylesheet.css" />
     <!-- fonts -->
-    
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css?family=Josefin+Sans|Roboto"
+    />
     <!-- zero-md: https://github.com/zerodevx/zero-md -->
     <script type="module" src="../zero-md.js"></script>
     <!-- alpinejs -->
@@ -82,14 +85,52 @@ <h1>alifeee's blog</h1>
       <section id="content">
         <zero-md src="./bike-to-cambridge.md" no-shadow>
           <template data-merge="append">
-            
-            
+            <link rel="stylesheet" href="../stylesheet_md.css" />
+            <style>
+              /* from https://css-tricks.com/full-width-containers-limited-width-parents/ */
+              /* images with src="url.png#wider" are selected :) */
+              .markdown-body img[src$="wider"] {
+                max-height: unset;
+                max-width: unset;
+                --w-vw: 90vw;
+                --w-rem: 60rem;
+                --w: min(var(--w-vw), var(--w-rem));
+                /* min-width: 40rem; */
+                overflow-x: auto;
+                width: var(--w);
+                position: relative;
+                left: 50%;
+                right: 50%;
+                margin-left: calc(-1 * var(--w) / 2);
+                margin-right: calc(-1 * var(--w) / 2);
+              }
+              :host {
+                contain: unset;
+              }
+            </style>
           </template>
         </zero-md>
       </section>
       <hr />
 
-      
+      <section id="comments">
+        <script
+          src="https://giscus.app/client.js"
+          data-repo="alifeee/blog"
+          data-repo-id="R_kgDOJaqeLQ"
+          data-category="comments"
+          data-category-id="DIC_kwDOJaqeLc4CZQST"
+          data-mapping="og:title"
+          data-strict="1"
+          data-reactions-enabled="1"
+          data-emit-metadata="0"
+          data-input-position="top"
+          data-theme="light"
+          data-lang="en"
+          crossorigin="anonymous"
+          async
+        ></script>
+      </section>
 
       <section id="similar">
         <h1>Similar posts</h1>
@@ -116,5 +157,14 @@ <h1>Similar posts</h1>
     </footer>
   </body>
 
-  
+  <style>
+    #background {
+      position: fixed;
+      top: 0;
+      bottom: 0;
+      margin: auto;
+      z-index: -1;
+      opacity: 0.1;
+    }
+  </style>
 </html>
diff --git a/factorio-proximity-chat/index.html b/factorio-proximity-chat/index.html
index aa38c49..344da28 100644
--- a/factorio-proximity-chat/index.html
+++ b/factorio-proximity-chat/index.html
@@ -31,9 +31,12 @@
     <!-- favicon -->
     <link rel="icon" type="image/png" href="../favicon.png" />
     <!-- stylesheets -->
-    
+    <link rel="stylesheet" href="../stylesheet.css" />
     <!-- fonts -->
-    
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css?family=Josefin+Sans|Roboto"
+    />
     <!-- zero-md: https://github.com/zerodevx/zero-md -->
     <script type="module" src="../zero-md.js"></script>
     <!-- alpinejs -->
@@ -78,15 +81,42 @@ <h1>alifeee's blog</h1>
       <section id="content">
         <zero-md src="./factorio-proximity-chat.md" no-shadow>
           <template data-merge="append">
-            
-            
-            
+            <link rel="stylesheet" href="../stylesheet_md.css" />
+            <style>
+              /* by default, tokens (=, +, etc) have a background that...
+              doesn't get set by themes */
+              .language-css .token.string,
+              .style .token.string,
+              .token.entity,
+              .token.operator,
+              .token.url {
+                background: none;
+              }
+            </style>
+            <link href="prism-atom-dark.css" rel="stylesheet" />
           </template>
         </zero-md>
       </section>
       <hr />
 
-      
+      <section id="comments">
+        <script
+          src="https://giscus.app/client.js"
+          data-repo="alifeee/blog"
+          data-repo-id="R_kgDOJaqeLQ"
+          data-category="comments"
+          data-category-id="DIC_kwDOJaqeLc4CZQST"
+          data-mapping="og:title"
+          data-strict="1"
+          data-reactions-enabled="1"
+          data-emit-metadata="0"
+          data-input-position="top"
+          data-theme="dark"
+          data-lang="en"
+          crossorigin="anonymous"
+          async
+        ></script>
+      </section>
 
       <section id="similar">
         <h1>Similar posts</h1>
@@ -112,5 +142,16 @@ <h1>Similar posts</h1>
       <a class="backlink" href="../">Back to main page</a>
     </footer>
   </body>
-  
+  <style>
+    :root {
+      --text-colour: #fff;
+      --link-colour: #e39827;
+      --unimportanttext-colour: #ccc;
+      --border-colour: #e39827;
+      --background-colour: #002b02;
+    }
+    body {
+      background-image: url("./images/grass-tiled.jpg");
+    }
+  </style>
 </html>
diff --git a/factorio-proximity-chat/similar.html b/factorio-proximity-chat/similar.html
index c7bf54f..1e6142d 100644
--- a/factorio-proximity-chat/similar.html
+++ b/factorio-proximity-chat/similar.html
@@ -1,7 +1,7 @@
 <li class="post">
 <a class="link" href=".././hull-bus-sign">
 <div class="preview-image">
-<img alt="Sketch of Dot Matrix Display showing the text 'Dot Matrix Display'" height="290" src=".././hull-bus-sign/og-image.png"  width="700"/>
+<img alt="Sketch of Dot Matrix Display showing the text 'Dot Matrix Display'" height="290" src=".././hull-bus-sign/og-image.png" style="rotate: -9deg" width="700"/>
 </div>
 <hgroup class="info">
 <h2 class="title">
@@ -38,7 +38,7 @@ <h2 class="title">I ran a computer font-making workshop!</h2>
 <li class="post">
 <a class="link" href=".././steam-collage-api">
 <div class="preview-image">
-<img alt="Thumbnail of alifeee's most played games on Steam." height="215" src=".././steam-collage-api/images/mosaic_small.jpg"  width="450"/>
+<img alt="Thumbnail of alifeee's most played games on Steam." height="215" src=".././steam-collage-api/images/mosaic_small.jpg" style="border-radius: 1em; height: min-content" width="450"/>
 </div>
 <hgroup class="info">
 <h2 class="title">
diff --git a/font-workshop/index.html b/font-workshop/index.html
index 2def9b3..4d047fe 100644
--- a/font-workshop/index.html
+++ b/font-workshop/index.html
@@ -32,9 +32,12 @@
     <!-- favicon -->
     <link rel="icon" type="image/png" href="../favicon.png" />
     <!-- stylesheets -->
-    
+    <link rel="stylesheet" href="../stylesheet.css" />
     <!-- fonts -->
-    
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css?family=Josefin+Sans|Roboto"
+    />
 
     <!-- libraries -->
     <!-- zero-md: https://github.com/zerodevx/zero-md -->
@@ -66,7 +69,16 @@
     ></script>
 
     <!-- extra scripts -->
-    
+    <style>
+      body {
+        opacity: 0.8;
+        background-image: radial-gradient(
+          #444cf7 0.5px,
+          var(--background-colour) 0.5px
+        );
+        background-size: 10px 10px;
+      }
+    </style>
   </head>
 
   <body>
@@ -83,14 +95,70 @@ <h1>alifeee's blog</h1>
       <section id="content">
         <zero-md src="./font-workshop.md" no-shadow>
           <template data-merge="append">
-            
-            
+            <link rel="stylesheet" href="../stylesheet_md.css" />
+            <style>
+              @font-face {
+                font-family: "classic-neil";
+                src: url("fonts/classic-neil/classicneil.woff") format("woff");
+              }
+              .font--classic-neil * {
+                font-family: "classic-neil", cursive;
+              }
+              @font-face {
+                font-family: "vmorse";
+                src: url("fonts/vmorse/VMORSE.woff") format("woff");
+              }
+              .font--vmorse * {
+                font-family: "vmorse", cursive;
+              }
+              @font-face {
+                font-family: "font";
+                src: url("fonts/font/font.woff") format("woff");
+              }
+              .font--font * {
+                font-family: "font", sans-serif;
+              }
+              @font-face {
+                font-family: "Ricardo";
+                src: url("fonts/ricardo/Ricardo.woff") format("woff");
+              }
+              .font--ricardo * {
+                font-family: "Ricardo", cursive;
+              }
+              @font-face {
+                font-family: "A Font";
+                src: url("fonts/a-font/a-font.woff") format("woff");
+              }
+              .font--a-font * {
+                font-family: "A Font", cursive;
+              }
+              .font--cursive * {
+                font-family: cursive;
+              }
+            </style>
           </template>
         </zero-md>
       </section>
       <hr />
 
-      
+      <section id="comments">
+        <script
+          src="https://giscus.app/client.js"
+          data-repo="alifeee/blog"
+          data-repo-id="R_kgDOJaqeLQ"
+          data-category="comments"
+          data-category-id="DIC_kwDOJaqeLc4CZQST"
+          data-mapping="og:title"
+          data-strict="1"
+          data-reactions-enabled="1"
+          data-emit-metadata="0"
+          data-input-position="top"
+          data-theme="light"
+          data-lang="en"
+          crossorigin="anonymous"
+          async
+        ></script>
+      </section>
 
       <section id="similar">
         <h1>Similar posts</h1>
diff --git a/font-workshop/similar.html b/font-workshop/similar.html
index d85a6ec..4145000 100644
--- a/font-workshop/similar.html
+++ b/font-workshop/similar.html
@@ -38,7 +38,7 @@ <h2 class="title">
 <li class="post">
 <a class="link" href=".././hull-bus-sign">
 <div class="preview-image">
-<img alt="Sketch of Dot Matrix Display showing the text 'Dot Matrix Display'" height="290" src=".././hull-bus-sign/og-image.png"  width="700"/>
+<img alt="Sketch of Dot Matrix Display showing the text 'Dot Matrix Display'" height="290" src=".././hull-bus-sign/og-image.png" style="rotate: -9deg" width="700"/>
 </div>
 <hgroup class="info">
 <h2 class="title">
diff --git a/hackspace-adventures/index.html b/hackspace-adventures/index.html
index 14146d7..a3f65b2 100644
--- a/hackspace-adventures/index.html
+++ b/hackspace-adventures/index.html
@@ -31,9 +31,12 @@
     <!-- favicon -->
     <link rel="icon" type="image/png" href="../favicon.png" />
     <!-- stylesheets -->
-    
+    <link rel="stylesheet" href="../stylesheet.css" />
     <!-- fonts -->
-    
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css?family=Josefin+Sans|Roboto"
+    />
     <!-- zero-md: https://github.com/zerodevx/zero-md -->
     <script type="module" src="../zero-md.js"></script>
     <!-- alpinejs -->
@@ -94,13 +97,30 @@ <h1>alifeee's blog</h1>
       <section id="content">
         <zero-md src="./hackspace-adventures.md" no-shadow>
           <template data-merge="append">
-            
+            <link rel="stylesheet" href="../stylesheet_md.css" />
           </template>
         </zero-md>
       </section>
       <hr />
 
-      
+      <section id="comments">
+        <script
+          src="https://giscus.app/client.js"
+          data-repo="alifeee/blog"
+          data-repo-id="R_kgDOJaqeLQ"
+          data-category="comments"
+          data-category-id="DIC_kwDOJaqeLc4CZQST"
+          data-mapping="og:title"
+          data-strict="1"
+          data-reactions-enabled="1"
+          data-emit-metadata="0"
+          data-input-position="top"
+          data-theme="light"
+          data-lang="en"
+          crossorigin="anonymous"
+          async
+        ></script>
+      </section>
 
       <section id="similar">
         <h1>Similar posts</h1>
diff --git a/hackspace-adventures/similar.html b/hackspace-adventures/similar.html
index 13bc4b5..b0d7200 100644
--- a/hackspace-adventures/similar.html
+++ b/hackspace-adventures/similar.html
@@ -36,7 +36,7 @@ <h2 class="title">I ran a computer font-making workshop!</h2>
 <li class="post">
 <a class="link" href=".././hull-bus-sign">
 <div class="preview-image">
-<img alt="Sketch of Dot Matrix Display showing the text 'Dot Matrix Display'" height="290" src=".././hull-bus-sign/og-image.png"  width="700"/>
+<img alt="Sketch of Dot Matrix Display showing the text 'Dot Matrix Display'" height="290" src=".././hull-bus-sign/og-image.png" style="rotate: -9deg" width="700"/>
 </div>
 <hgroup class="info">
 <h2 class="title">
diff --git a/hull-bus-sign/index.html b/hull-bus-sign/index.html
index 4832bb3..a0645ee 100644
--- a/hull-bus-sign/index.html
+++ b/hull-bus-sign/index.html
@@ -31,9 +31,12 @@
     <!-- favicon -->
     <link rel="icon" type="image/png" href="../favicon.png" />
     <!-- stylesheets -->
-    
+    <link rel="stylesheet" href="../stylesheet.css" />
     <!-- fonts -->
-    
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css?family=Josefin+Sans|Roboto"
+    />
     <!-- zero-md: https://github.com/zerodevx/zero-md -->
     <script type="module" src="../zero-md.js"></script>
     <!-- alpinejs -->
@@ -90,13 +93,30 @@ <h1>alifeee's blog</h1>
       <section id="content">
         <zero-md src="./hull-bus-sign.md" no-shadow>
           <template data-merge="append">
-            
+            <link rel="stylesheet" href="../stylesheet_md.css" />
           </template>
         </zero-md>
       </section>
       <hr />
 
-      
+      <section id="comments">
+        <script
+          src="https://giscus.app/client.js"
+          data-repo="alifeee/blog"
+          data-repo-id="R_kgDOJaqeLQ"
+          data-category="comments"
+          data-category-id="DIC_kwDOJaqeLc4CZQST"
+          data-mapping="og:title"
+          data-strict="1"
+          data-reactions-enabled="1"
+          data-emit-metadata="0"
+          data-input-position="top"
+          data-theme="light"
+          data-lang="en"
+          crossorigin="anonymous"
+          async
+        ></script>
+      </section>
 
       <section id="similar">
         <h1>Similar posts</h1>
diff --git a/hull-bus-sign/similar.html b/hull-bus-sign/similar.html
index 5674e75..2c1d93a 100644
--- a/hull-bus-sign/similar.html
+++ b/hull-bus-sign/similar.html
@@ -22,7 +22,7 @@ <h2 class="title">
 <div class="preview-image">
 <img alt='Screenshot
               of 3 players from Factorio saying "Proximity Voice Chat!";
-              "Pardon?" height="290" width="700" 337" src=".././factorio-proximity-chat/og-image.png"  width="337"/>
+              "Pardon?" height="290" width="700" style="rotate: -9deg' height="337" src=".././factorio-proximity-chat/og-image.png" style="height: min-content" width="337"/>
 </div>
 <hgroup class="info">
 <h2 class="title">
diff --git a/index.html b/index.html
index d904b25..5368f18 100644
--- a/index.html
+++ b/index.html
@@ -35,9 +35,34 @@
     <link rel="icon" type="image/png" href="./favicon.png" />
 
     <!-- stylesheets -->
-    
-    
-    
+    <link rel="stylesheet" href="./stylesheet.css" />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css?family=Josefin+Sans|Roboto"
+    />
+    <style>
+      .also {
+        font-size: 1.5em;
+        font-weight: bold;
+        margin: 0.5em 0;
+        text-align: center;
+        width: 100%;
+        display: block;
+      }
+      .also a {
+        text-decoration: underline;
+      }
+      .also:hover a {
+        text-decoration: none;
+      }
+      @font-face {
+        font-family: "BogFace";
+        src: url("making-bogface/BogFace.woff");
+      }
+      .BogFace {
+        font-family: "BogFace";
+      }
+    </style>
   </head>
 
   <body>
@@ -176,7 +201,7 @@ <h2 class="title">
               "Pardon?"'
                 height="337"
                 width="337"
-                
+                style="height: min-content"
               />
             </div>
             <hgroup class="info">
@@ -200,7 +225,7 @@ <h2 class="title">
                 alt="Sketch of Dot Matrix Display showing the text 'Dot Matrix Display'"
                 height="290"
                 width="700"
-                
+                style="rotate: -9deg"
               />
             </div>
             <hgroup class="info">
@@ -226,7 +251,7 @@ <h2 class="title">
                 alt="Thumbnail of alifeee's most played games on Steam."
                 height="215"
                 width="450"
-                
+                style="border-radius: 1em; height: min-content"
               />
             </div>
             <hgroup class="info">
diff --git a/index_template.html b/index_template.html
index 7433af7..06945b6 100644
--- a/index_template.html
+++ b/index_template.html
@@ -23,9 +23,12 @@
     <!-- favicon -->
     <link rel="icon" type="image/png" href="../favicon.png" />
     <!-- stylesheets -->
-    
+    <link rel="stylesheet" href="../stylesheet.css" />
     <!-- fonts -->
-    
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css?family=Josefin+Sans|Roboto"
+    />
 
     <!-- libraries -->
     <!-- zero-md: https://github.com/zerodevx/zero-md -->
@@ -67,13 +70,30 @@ <h1>alifeee's blog</h1>
       <section id="content">
         <zero-md src="./{{ mdfile}}" no-shadow>
           <template data-merge="append">
-            
+            <link rel="stylesheet" href="../stylesheet_md.css" />
           </template>
         </zero-md>
       </section>
       <hr />
 
-      
+      <section id="comments">
+        <script
+          src="https://giscus.app/client.js"
+          data-repo="alifeee/blog"
+          data-repo-id="R_kgDOJaqeLQ"
+          data-category="comments"
+          data-category-id="DIC_kwDOJaqeLc4CZQST"
+          data-mapping="og:title"
+          data-strict="1"
+          data-reactions-enabled="1"
+          data-emit-metadata="0"
+          data-input-position="top"
+          data-theme="{{ giscus_theme }}"
+          data-lang="en"
+          crossorigin="anonymous"
+          async
+        ></script>
+      </section>
 
       <section id="similar">
         <h1>Similar posts</h1>
diff --git a/making-bogface/index.html b/making-bogface/index.html
index 13d5b2f..e1825a0 100644
--- a/making-bogface/index.html
+++ b/making-bogface/index.html
@@ -29,9 +29,12 @@
     <!-- favicon -->
     <link rel="icon" type="image/png" href="../favicon.png" />
     <!-- stylesheets -->
-    
+    <link rel="stylesheet" href="../stylesheet.css" />
     <!-- fonts -->
-    
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css?family=Josefin+Sans|Roboto"
+    />
 
     <!-- libraries -->
     <!-- zero-md: https://github.com/zerodevx/zero-md -->
@@ -96,15 +99,136 @@ <h1>alifeee's blog</h1>
       <section id="content">
         <zero-md src="./making-bogface.md" no-shadow>
           <template data-merge="append">
-            
-            
-            
+            <link rel="stylesheet" href="../stylesheet_md.css" />
+            <link rel="stylesheet" href="./zine.css" />
+            <style>
+              @font-face {
+                font-family: "BogFace";
+                src: url("./BogFace.woff");
+              }
+              .BogFace {
+                font-family: "BogFace";
+              }
+              .large {
+                font-size: 1.5em;
+              }
+              .centred {
+                text-align: center;
+              }
+              .textarea {
+                width: 100%;
+                height: 10rem;
+                font-size: 3em;
+              }
+
+              .view-in-bogface {
+                width: 100%;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+              }
+              .view-in-bogface fieldset {
+                padding: 0.5em;
+                margin: auto;
+                border: 1px solid black;
+                border-radius: 0.5em;
+                background-color: #f0f0f0;
+                font-size: 1.5em;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+              }
+              .view-in-bogface fieldset label {
+                margin: 0 0.5rem;
+              }
+
+              /* from https://www.w3schools.com/howto/howto_css_switch.asp */
+              /* The switch - the box around the slider */
+              .switch {
+                position: relative;
+                display: inline-block;
+                width: 60px;
+                height: 34px;
+              }
+
+              /* Hide default HTML checkbox */
+              .switch input {
+                opacity: 0;
+                width: 0;
+                height: 0;
+              }
+
+              /* The slider */
+              .slider {
+                position: absolute;
+                cursor: pointer;
+                top: 0;
+                left: 0;
+                right: 0;
+                bottom: 0;
+                background-color: #ccc;
+                -webkit-transition: 0.4s;
+                transition: 0.4s;
+              }
+
+              .slider:before {
+                position: absolute;
+                content: "";
+                height: 26px;
+                width: 26px;
+                left: 4px;
+                bottom: 4px;
+                background-color: white;
+                -webkit-transition: 0.4s;
+                transition: 0.4s;
+              }
+
+              input:checked + .slider {
+                background-color: #2196f3;
+              }
+
+              input:focus + .slider {
+                box-shadow: 0 0 1px #2196f3;
+              }
+
+              input:checked + .slider:before {
+                -webkit-transform: translateX(26px);
+                -ms-transform: translateX(26px);
+                transform: translateX(26px);
+              }
+
+              /* Rounded sliders */
+              .slider.round {
+                border-radius: 34px;
+              }
+
+              .slider.round:before {
+                border-radius: 50%;
+              }
+            </style>
           </template>
         </zero-md>
       </section>
       <hr />
 
-      
+      <section id="comments">
+        <script
+          src="https://giscus.app/client.js"
+          data-repo="alifeee/blog"
+          data-repo-id="R_kgDOJaqeLQ"
+          data-category="comments"
+          data-category-id="DIC_kwDOJaqeLc4CZQST"
+          data-mapping="og:title"
+          data-strict="1"
+          data-reactions-enabled="1"
+          data-emit-metadata="0"
+          data-input-position="top"
+          data-theme="light"
+          data-lang="en"
+          crossorigin="anonymous"
+          async
+        ></script>
+      </section>
 
       <section id="similar">
         <h1>Similar posts</h1>
diff --git a/making-bogface/similar.html b/making-bogface/similar.html
index 16554cc..a8311fa 100644
--- a/making-bogface/similar.html
+++ b/making-bogface/similar.html
@@ -18,7 +18,7 @@ <h2 class="title">I ran a computer font-making workshop!</h2>
 <li class="post">
 <a class="link" href=".././steam-collage-api">
 <div class="preview-image">
-<img alt="Thumbnail of alifeee's most played games on Steam." height="215" src=".././steam-collage-api/images/mosaic_small.jpg"  width="450"/>
+<img alt="Thumbnail of alifeee's most played games on Steam." height="215" src=".././steam-collage-api/images/mosaic_small.jpg" style="border-radius: 1em; height: min-content" width="450"/>
 </div>
 <hgroup class="info">
 <h2 class="title">
@@ -36,7 +36,7 @@ <h2 class="title">
 <li class="post">
 <a class="link" href=".././hull-bus-sign">
 <div class="preview-image">
-<img alt="Sketch of Dot Matrix Display showing the text 'Dot Matrix Display'" height="290" src=".././hull-bus-sign/og-image.png"  width="700"/>
+<img alt="Sketch of Dot Matrix Display showing the text 'Dot Matrix Display'" height="290" src=".././hull-bus-sign/og-image.png" style="rotate: -9deg" width="700"/>
 </div>
 <hgroup class="info">
 <h2 class="title">
diff --git a/ring-populations/index.html b/ring-populations/index.html
index 5d99fcd..eeed98a 100644
--- a/ring-populations/index.html
+++ b/ring-populations/index.html
@@ -31,9 +31,12 @@
     <!-- favicon -->
     <link rel="icon" type="image/png" href="../favicon.png" />
     <!-- stylesheets -->
-    
+    <link rel="stylesheet" href="../stylesheet.css" />
     <!-- fonts -->
-    
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css?family=Josefin+Sans|Roboto"
+    />
     <!-- zero-md: https://github.com/zerodevx/zero-md -->
     <script type="module" src="../zero-md.js"></script>
     <!-- alpinejs -->
@@ -88,13 +91,30 @@ <h1>alifeee's blog</h1>
       <section id="content">
         <zero-md src="./ring-populations.md" no-shadow>
           <template data-merge="append">
-            
+            <link rel="stylesheet" href="../stylesheet_md.css" />
           </template>
         </zero-md>
       </section>
       <hr />
 
-      
+      <section id="comments">
+        <script
+          src="https://giscus.app/client.js"
+          data-repo="alifeee/blog"
+          data-repo-id="R_kgDOJaqeLQ"
+          data-category="comments"
+          data-category-id="DIC_kwDOJaqeLc4CZQST"
+          data-mapping="og:title"
+          data-strict="1"
+          data-reactions-enabled="1"
+          data-emit-metadata="0"
+          data-input-position="top"
+          data-theme="light"
+          data-lang="en"
+          crossorigin="anonymous"
+          async
+        ></script>
+      </section>
 
       <section id="similar">
         <h1>Similar posts</h1>
@@ -121,5 +141,15 @@ <h1>Similar posts</h1>
     </footer>
   </body>
 
-  
+  <style>
+    #background {
+      width: 100%;
+      position: fixed;
+      top: 0;
+      bottom: 0;
+      margin: auto;
+      z-index: -1;
+      opacity: 0.1;
+    }
+  </style>
 </html>
diff --git a/sketch-your-society/index.html b/sketch-your-society/index.html
index efc4787..1452a07 100644
--- a/sketch-your-society/index.html
+++ b/sketch-your-society/index.html
@@ -34,9 +34,12 @@
     <!-- favicon -->
     <link rel="icon" type="image/png" href="../favicon.png" />
     <!-- stylesheets -->
-    
+    <link rel="stylesheet" href="../stylesheet.css" />
     <!-- fonts -->
-    
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css?family=Josefin+Sans|Roboto"
+    />
     <!-- zero-md: https://github.com/zerodevx/zero-md -->
     <script type="module" src="../zero-md.js"></script>
     <!-- alpinejs -->
@@ -81,14 +84,31 @@ <h1>alifeee's blog</h1>
       <section id="content">
         <zero-md src="./sketch-your-society.md" no-shadow>
           <template data-merge="append">
-            
-            
+            <link rel="stylesheet" href="../stylesheet_md.css" />
+            <link rel="stylesheet" href="zine.css" />
           </template>
         </zero-md>
       </section>
       <hr />
 
-      
+      <section id="comments">
+        <script
+          src="https://giscus.app/client.js"
+          data-repo="alifeee/blog"
+          data-repo-id="R_kgDOJaqeLQ"
+          data-category="comments"
+          data-category-id="DIC_kwDOJaqeLc4CZQST"
+          data-mapping="og:title"
+          data-strict="1"
+          data-reactions-enabled="1"
+          data-emit-metadata="0"
+          data-input-position="top"
+          data-theme="light"
+          data-lang="en"
+          crossorigin="anonymous"
+          async
+        ></script>
+      </section>
 
       <section id="similar">
         <h1>Similar posts</h1>
diff --git a/snippets-of-a-degree/index.html b/snippets-of-a-degree/index.html
index 9b374cf..38b9958 100644
--- a/snippets-of-a-degree/index.html
+++ b/snippets-of-a-degree/index.html
@@ -31,9 +31,12 @@
     <!-- favicon -->
     <link rel="icon" type="image/png" href="../favicon.png" />
     <!-- stylesheets -->
-    
+    <link rel="stylesheet" href="../stylesheet.css" />
     <!-- fonts -->
-    
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css?family=Josefin+Sans|Roboto"
+    />
     <!-- zero-md: https://github.com/zerodevx/zero-md -->
     <script type="module" src="../zero-md.js"></script>
     <!-- alpinejs -->
@@ -78,14 +81,35 @@ <h1>alifeee's blog</h1>
       <section id="content">
         <zero-md src="./snippets-of-a-degree.md" no-shadow>
           <template data-merge="append">
-            
-            
+            <link rel="stylesheet" href="../stylesheet_md.css" />
+            <style>
+              figcaption {
+                font-style: italic;
+              }
+            </style>
           </template>
         </zero-md>
       </section>
       <hr />
 
-      
+      <section id="comments">
+        <script
+          src="https://giscus.app/client.js"
+          data-repo="alifeee/blog"
+          data-repo-id="R_kgDOJaqeLQ"
+          data-category="comments"
+          data-category-id="DIC_kwDOJaqeLc4CZQST"
+          data-mapping="og:title"
+          data-strict="1"
+          data-reactions-enabled="1"
+          data-emit-metadata="0"
+          data-input-position="top"
+          data-theme="light"
+          data-lang="en"
+          crossorigin="anonymous"
+          async
+        ></script>
+      </section>
 
       <section id="similar">
         <h1>Similar posts</h1>
diff --git a/snippets-of-a-degree/similar.html b/snippets-of-a-degree/similar.html
index 516ac84..4bdac67 100644
--- a/snippets-of-a-degree/similar.html
+++ b/snippets-of-a-degree/similar.html
@@ -20,7 +20,7 @@ <h2 class="title">
 <li class="post">
 <a class="link" href=".././hull-bus-sign">
 <div class="preview-image">
-<img alt="Sketch of Dot Matrix Display showing the text 'Dot Matrix Display'" height="290" src=".././hull-bus-sign/og-image.png"  width="700"/>
+<img alt="Sketch of Dot Matrix Display showing the text 'Dot Matrix Display'" height="290" src=".././hull-bus-sign/og-image.png" style="rotate: -9deg" width="700"/>
 </div>
 <hgroup class="info">
 <h2 class="title">
diff --git a/steam-collage-api/index.html b/steam-collage-api/index.html
index 21f139e..edb3804 100644
--- a/steam-collage-api/index.html
+++ b/steam-collage-api/index.html
@@ -34,9 +34,12 @@
     <!-- favicon -->
     <link rel="icon" type="image/png" href="../favicon.png" />
     <!-- stylesheets -->
-    
+    <link rel="stylesheet" href="../stylesheet.css" />
     <!-- fonts -->
-    
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css?family=Josefin+Sans|Roboto"
+    />
     <!-- zero-md: https://github.com/zerodevx/zero-md -->
     <script type="module" src="../zero-md.js"></script>
     <!-- alpinejs -->
@@ -84,14 +87,42 @@ <h1>alifeee's blog</h1>
       <section id="content">
         <zero-md src="./steam-collage-api.md" no-shadow>
           <template data-merge="append">
-            
-            
+            <link rel="stylesheet" href="../stylesheet_md.css" />
+            <style>
+              input {
+                max-width: 10rem;
+                margin: auto;
+              }
+              .column {
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                gap: 0.5rem;
+              }
+            </style>
           </template>
         </zero-md>
       </section>
       <hr />
 
-      
+      <section id="comments">
+        <script
+          src="https://giscus.app/client.js"
+          data-repo="alifeee/blog"
+          data-repo-id="R_kgDOJaqeLQ"
+          data-category="comments"
+          data-category-id="DIC_kwDOJaqeLc4CZQST"
+          data-mapping="og:title"
+          data-strict="1"
+          data-reactions-enabled="1"
+          data-emit-metadata="0"
+          data-input-position="top"
+          data-theme="light"
+          data-lang="en"
+          crossorigin="anonymous"
+          async
+        ></script>
+      </section>
 
       <section id="similar">
         <h1>Similar posts</h1>
diff --git a/steam-collage-api/similar.html b/steam-collage-api/similar.html
index 0c5d64d..afda119 100644
--- a/steam-collage-api/similar.html
+++ b/steam-collage-api/similar.html
@@ -38,7 +38,7 @@ <h2 class="title">I ran a computer font-making workshop!</h2>
 <div class="preview-image">
 <img alt='Screenshot
               of 3 players from Factorio saying "Proximity Voice Chat!";
-              "Pardon?" height="290" width="700" 337" src=".././factorio-proximity-chat/og-image.png"  width="337"/>
+              "Pardon?" height="290" width="700" style="rotate: -9deg' height="337" src=".././factorio-proximity-chat/og-image.png" style="height: min-content" width="337"/>
 </div>
 <hgroup class="info">
 <h2 class="title">
diff --git a/what-is-a-third-space/index.html b/what-is-a-third-space/index.html
index af64329..c7038dd 100644
--- a/what-is-a-third-space/index.html
+++ b/what-is-a-third-space/index.html
@@ -35,9 +35,12 @@
     <!-- favicon -->
     <link rel="icon" type="image/png" href="../favicon.png" />
     <!-- stylesheets -->
-    
+    <link rel="stylesheet" href="../stylesheet.css" />
     <!-- fonts -->
-    
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css?family=Josefin+Sans|Roboto"
+    />
 
     <!-- libraries -->
     <!-- zero-md: https://github.com/zerodevx/zero-md -->
@@ -83,13 +86,30 @@ <h1>alifeee's blog</h1>
       <section id="content">
         <zero-md src="./what-is-a-third-space.md" no-shadow>
           <template data-merge="append">
-            
+            <link rel="stylesheet" href="../stylesheet_md.css" />
           </template>
         </zero-md>
       </section>
       <hr />
 
-      
+      <section id="comments">
+        <script
+          src="https://giscus.app/client.js"
+          data-repo="alifeee/blog"
+          data-repo-id="R_kgDOJaqeLQ"
+          data-category="comments"
+          data-category-id="DIC_kwDOJaqeLc4CZQST"
+          data-mapping="og:title"
+          data-strict="1"
+          data-reactions-enabled="1"
+          data-emit-metadata="0"
+          data-input-position="top"
+          data-theme="light"
+          data-lang="en"
+          crossorigin="anonymous"
+          async
+        ></script>
+      </section>
 
       <section id="similar">
         <h1>Similar posts</h1>
diff --git a/zero-md.js b/zero-md.js
index 72b1ed8..03b8e88 100644
--- a/zero-md.js
+++ b/zero-md.js
@@ -45,7 +45,10 @@ export class ZeroMd extends HTMLElement {
         ],
         "https://cdn.jsdelivr.net/gh/PrismJS/prism@1/plugins/autoloader/prism-autoloader.min.js",
       ],
-      cssUrls: [],
+      cssUrls: [
+        "https://cdn.jsdelivr.net/gh/sindresorhus/github-markdown-css@4/github-markdown.min.css",
+        "https://cdn.jsdelivr.net/gh/PrismJS/prism@1/themes/prism.min.css",
+      ],
       hostCss:
         ":host{display:block;position:relative;contain:content;}:host([hidden]){display:none;}",
       ...defaults,

From 733cfaa20a04734a6744dd5a9ce7eceb2c53248a Mon Sep 17 00:00:00 2001
From: alifeee <alifeee@users.noreply.github.com>
Date: Mon, 8 Apr 2024 08:39:04 +0000
Subject: [PATCH 2/3] write new similarities

---
 hull-bus-sign/similar.html     | 2 +-
 steam-collage-api/similar.html | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/hull-bus-sign/similar.html b/hull-bus-sign/similar.html
index 2c1d93a..d5e0b16 100644
--- a/hull-bus-sign/similar.html
+++ b/hull-bus-sign/similar.html
@@ -22,7 +22,7 @@ <h2 class="title">
 <div class="preview-image">
 <img alt='Screenshot
               of 3 players from Factorio saying "Proximity Voice Chat!";
-              "Pardon?" height="290" width="700" style="rotate: -9deg' height="337" src=".././factorio-proximity-chat/og-image.png" style="height: min-content" width="337"/>
+              "Pardon?"' height="337" src=".././factorio-proximity-chat/og-image.png" style="height: min-content" width="337"/>
 </div>
 <hgroup class="info">
 <h2 class="title">
diff --git a/steam-collage-api/similar.html b/steam-collage-api/similar.html
index afda119..c2d737d 100644
--- a/steam-collage-api/similar.html
+++ b/steam-collage-api/similar.html
@@ -38,7 +38,7 @@ <h2 class="title">I ran a computer font-making workshop!</h2>
 <div class="preview-image">
 <img alt='Screenshot
               of 3 players from Factorio saying "Proximity Voice Chat!";
-              "Pardon?" height="290" width="700" style="rotate: -9deg' height="337" src=".././factorio-proximity-chat/og-image.png" style="height: min-content" width="337"/>
+              "Pardon?"' height="337" src=".././factorio-proximity-chat/og-image.png" style="height: min-content" width="337"/>
 </div>
 <hgroup class="info">
 <h2 class="title">

From 4bcd6e65a428b54c458501d71775b7a3a06f0113 Mon Sep 17 00:00:00 2001
From: alifeee <alifeee@users.noreply.github.com>
Date: Mon, 8 Apr 2024 08:39:04 +0000
Subject: [PATCH 3/3] Reset `similar.html` files

(cherry picked from commit 020c0898a112c36efae3070f18a13e0e4163ab58)
---
 factorio-proximity-chat/similar.html | 114 +++++++++++++++-----------
 font-workshop/similar.html           | 116 +++++++++++++++------------
 hackspace-adventures/similar.html    | 113 +++++++++++++++-----------
 hull-bus-sign/similar.html           | 113 +++++++++++++++-----------
 making-bogface/similar.html          | 114 +++++++++++++++-----------
 snippets-of-a-degree/similar.html    | 115 ++++++++++++++------------
 steam-collage-api/similar.html       | 112 +++++++++++++++-----------
 7 files changed, 450 insertions(+), 347 deletions(-)

diff --git a/factorio-proximity-chat/similar.html b/factorio-proximity-chat/similar.html
index 1e6142d..33d497c 100644
--- a/factorio-proximity-chat/similar.html
+++ b/factorio-proximity-chat/similar.html
@@ -1,55 +1,71 @@
 <li class="post">
-<a class="link" href=".././hull-bus-sign">
-<div class="preview-image">
-<img alt="Sketch of Dot Matrix Display showing the text 'Dot Matrix Display'" height="290" src=".././hull-bus-sign/og-image.png" style="rotate: -9deg" width="700"/>
-</div>
-<hgroup class="info">
-<h2 class="title">
-                Hull Bus Terminal Signs: Making Pong on an old Dot-Matrix
-                Display
-              </h2>
-<p class="date">
-<time datetime="2023-10-08">2023-10-08</time>
-</p>
-<ul class="categories">
-<li class="electronics">electronics</li>
-<li class="hackspaces">hackspaces</li>
-</ul>
-</hgroup>
-</a>
+  <a class="link" href=".././hull-bus-sign">
+    <div class="preview-image">
+      <img
+        alt="Sketch of Dot Matrix Display showing the text 'Dot Matrix Display'"
+        height="290"
+        src=".././hull-bus-sign/og-image.png"
+        style="rotate: -9deg"
+        width="700"
+      />
+    </div>
+    <hgroup class="info">
+      <h2 class="title">
+        Hull Bus Terminal Signs: Making Pong on an old Dot-Matrix Display
+      </h2>
+      <p class="date">
+        <time datetime="2023-10-08">2023-10-08</time>
+      </p>
+      <ul class="categories">
+        <li class="electronics">electronics</li>
+        <li class="hackspaces">hackspaces</li>
+      </ul>
+    </hgroup>
+  </a>
 </li>
 <li class="post">
-<a class="link" href=".././font-workshop">
-<div class="preview-image">
-<img alt='Text, "FONT MAKING WORKSHOP!"' height="450" src=".././font-workshop/images/poster.svg" width="450"/>
-</div>
-<hgroup class="info">
-<h2 class="title">I ran a computer font-making workshop!</h2>
-<p class="date">
-<time datetime="2024-03-09">2024-03-09</time>
-</p>
-<ul class="categories">
-<li class="font">font</li>
-<li class="hackspaces">hackspaces</li>
-</ul>
-</hgroup>
-</a>
+  <a class="link" href=".././font-workshop">
+    <div class="preview-image">
+      <img
+        alt='Text, "FONT MAKING WORKSHOP!"'
+        height="450"
+        src=".././font-workshop/images/poster.svg"
+        width="450"
+      />
+    </div>
+    <hgroup class="info">
+      <h2 class="title">I ran a computer font-making workshop!</h2>
+      <p class="date">
+        <time datetime="2024-03-09">2024-03-09</time>
+      </p>
+      <ul class="categories">
+        <li class="font">font</li>
+        <li class="hackspaces">hackspaces</li>
+      </ul>
+    </hgroup>
+  </a>
 </li>
 <li class="post">
-<a class="link" href=".././steam-collage-api">
-<div class="preview-image">
-<img alt="Thumbnail of alifeee's most played games on Steam." height="215" src=".././steam-collage-api/images/mosaic_small.jpg" style="border-radius: 1em; height: min-content" width="450"/>
-</div>
-<hgroup class="info">
-<h2 class="title">
-                Coding Projects! #1: Collage generator for Steam games
-              </h2>
-<p class="date">
-<time datetime="2023-08-23">2023-08-23</time>
-</p>
-<ul class="categories">
-<li class="programming">programming</li>
-</ul>
-</hgroup>
-</a>
+  <a class="link" href=".././steam-collage-api">
+    <div class="preview-image">
+      <img
+        alt="Thumbnail of alifeee's most played games on Steam."
+        height="215"
+        src=".././steam-collage-api/images/mosaic_small.jpg"
+        style="border-radius: 1em; height: min-content"
+        width="450"
+      />
+    </div>
+    <hgroup class="info">
+      <h2 class="title">
+        Coding Projects! #1: Collage generator for Steam games
+      </h2>
+      <p class="date">
+        <time datetime="2023-08-23">2023-08-23</time>
+      </p>
+      <ul class="categories">
+        <li class="programming">programming</li>
+      </ul>
+    </hgroup>
+  </a>
 </li>
diff --git a/font-workshop/similar.html b/font-workshop/similar.html
index 4145000..cd6113a 100644
--- a/font-workshop/similar.html
+++ b/font-workshop/similar.html
@@ -1,57 +1,71 @@
 <li class="post">
-<a class="link" href=".././making-bogface">
-<div class="preview-image">
-<img alt="bogface text" height="450" src=".././making-bogface/front-page-image.png" width="450"/>
-</div>
-<hgroup class="info">
-<h2 class="title">
-                Making my own Font - <span class="BogFace">BogFace</span>
-</h2>
-<p class="date">
-<time datetime="2023-12-23">2023-12-23</time>
-</p>
-<ul class="categories">
-<li class="font">font</li>
-</ul>
-</hgroup>
-</a>
+  <a class="link" href=".././making-bogface">
+    <div class="preview-image">
+      <img
+        alt="bogface text"
+        height="450"
+        src=".././making-bogface/front-page-image.png"
+        width="450"
+      />
+    </div>
+    <hgroup class="info">
+      <h2 class="title">
+        Making my own Font - <span class="BogFace">BogFace</span>
+      </h2>
+      <p class="date">
+        <time datetime="2023-12-23">2023-12-23</time>
+      </p>
+      <ul class="categories">
+        <li class="font">font</li>
+      </ul>
+    </hgroup>
+  </a>
 </li>
 <li class="post">
-<a class="link" href=".././hackspace-adventures">
-<div class="preview-image">
-<img alt="three hackspace logos" height="450" src=".././hackspace-adventures/og-image.png" width="450"/>
-</div>
-<hgroup class="info">
-<h2 class="title">
-                What, why, and how is a Hackspace, and what have I used them
-                for?
-              </h2>
-<p class="date">
-<time datetime="2023-11-07">2023-11-07</time>
-</p>
-<ul class="categories">
-<li class="hackspaces">hackspaces</li>
-</ul>
-</hgroup>
-</a>
+  <a class="link" href=".././hackspace-adventures">
+    <div class="preview-image">
+      <img
+        alt="three hackspace logos"
+        height="450"
+        src=".././hackspace-adventures/og-image.png"
+        width="450"
+      />
+    </div>
+    <hgroup class="info">
+      <h2 class="title">
+        What, why, and how is a Hackspace, and what have I used them for?
+      </h2>
+      <p class="date">
+        <time datetime="2023-11-07">2023-11-07</time>
+      </p>
+      <ul class="categories">
+        <li class="hackspaces">hackspaces</li>
+      </ul>
+    </hgroup>
+  </a>
 </li>
 <li class="post">
-<a class="link" href=".././hull-bus-sign">
-<div class="preview-image">
-<img alt="Sketch of Dot Matrix Display showing the text 'Dot Matrix Display'" height="290" src=".././hull-bus-sign/og-image.png" style="rotate: -9deg" width="700"/>
-</div>
-<hgroup class="info">
-<h2 class="title">
-                Hull Bus Terminal Signs: Making Pong on an old Dot-Matrix
-                Display
-              </h2>
-<p class="date">
-<time datetime="2023-10-08">2023-10-08</time>
-</p>
-<ul class="categories">
-<li class="electronics">electronics</li>
-<li class="hackspaces">hackspaces</li>
-</ul>
-</hgroup>
-</a>
+  <a class="link" href=".././hull-bus-sign">
+    <div class="preview-image">
+      <img
+        alt="Sketch of Dot Matrix Display showing the text 'Dot Matrix Display'"
+        height="290"
+        src=".././hull-bus-sign/og-image.png"
+        style="rotate: -9deg"
+        width="700"
+      />
+    </div>
+    <hgroup class="info">
+      <h2 class="title">
+        Hull Bus Terminal Signs: Making Pong on an old Dot-Matrix Display
+      </h2>
+      <p class="date">
+        <time datetime="2023-10-08">2023-10-08</time>
+      </p>
+      <ul class="categories">
+        <li class="electronics">electronics</li>
+        <li class="hackspaces">hackspaces</li>
+      </ul>
+    </hgroup>
+  </a>
 </li>
diff --git a/hackspace-adventures/similar.html b/hackspace-adventures/similar.html
index b0d7200..218a74e 100644
--- a/hackspace-adventures/similar.html
+++ b/hackspace-adventures/similar.html
@@ -1,55 +1,70 @@
 <li class="post">
-<a class="link" href=".././what-is-a-third-space">
-<div class="preview-image">
-<img alt="third space text on a shape background" height="450" src=".././what-is-a-third-space/og-image.png" width="450"/>
-</div>
-<hgroup class="info">
-<h2 class="title">
-                What is a third space and why do I like the concept?
-              </h2>
-<p class="date">
-<time datetime="2023-12-15">2023-12-15</time>
-</p>
-<ul class="categories">
-<li class="social">social</li>
-</ul>
-</hgroup>
-</a>
+  <a class="link" href=".././what-is-a-third-space">
+    <div class="preview-image">
+      <img
+        alt="third space text on a shape background"
+        height="450"
+        src=".././what-is-a-third-space/og-image.png"
+        width="450"
+      />
+    </div>
+    <hgroup class="info">
+      <h2 class="title">
+        What is a third space and why do I like the concept?
+      </h2>
+      <p class="date">
+        <time datetime="2023-12-15">2023-12-15</time>
+      </p>
+      <ul class="categories">
+        <li class="social">social</li>
+      </ul>
+    </hgroup>
+  </a>
 </li>
 <li class="post">
-<a class="link" href=".././font-workshop">
-<div class="preview-image">
-<img alt='Text, "FONT MAKING WORKSHOP!"' height="450" src=".././font-workshop/images/poster.svg" width="450"/>
-</div>
-<hgroup class="info">
-<h2 class="title">I ran a computer font-making workshop!</h2>
-<p class="date">
-<time datetime="2024-03-09">2024-03-09</time>
-</p>
-<ul class="categories">
-<li class="font">font</li>
-<li class="hackspaces">hackspaces</li>
-</ul>
-</hgroup>
-</a>
+  <a class="link" href=".././font-workshop">
+    <div class="preview-image">
+      <img
+        alt='Text, "FONT MAKING WORKSHOP!"'
+        height="450"
+        src=".././font-workshop/images/poster.svg"
+        width="450"
+      />
+    </div>
+    <hgroup class="info">
+      <h2 class="title">I ran a computer font-making workshop!</h2>
+      <p class="date">
+        <time datetime="2024-03-09">2024-03-09</time>
+      </p>
+      <ul class="categories">
+        <li class="font">font</li>
+        <li class="hackspaces">hackspaces</li>
+      </ul>
+    </hgroup>
+  </a>
 </li>
 <li class="post">
-<a class="link" href=".././hull-bus-sign">
-<div class="preview-image">
-<img alt="Sketch of Dot Matrix Display showing the text 'Dot Matrix Display'" height="290" src=".././hull-bus-sign/og-image.png" style="rotate: -9deg" width="700"/>
-</div>
-<hgroup class="info">
-<h2 class="title">
-                Hull Bus Terminal Signs: Making Pong on an old Dot-Matrix
-                Display
-              </h2>
-<p class="date">
-<time datetime="2023-10-08">2023-10-08</time>
-</p>
-<ul class="categories">
-<li class="electronics">electronics</li>
-<li class="hackspaces">hackspaces</li>
-</ul>
-</hgroup>
-</a>
+  <a class="link" href=".././hull-bus-sign">
+    <div class="preview-image">
+      <img
+        alt="Sketch of Dot Matrix Display showing the text 'Dot Matrix Display'"
+        height="290"
+        src=".././hull-bus-sign/og-image.png"
+        style="rotate: -9deg"
+        width="700"
+      />
+    </div>
+    <hgroup class="info">
+      <h2 class="title">
+        Hull Bus Terminal Signs: Making Pong on an old Dot-Matrix Display
+      </h2>
+      <p class="date">
+        <time datetime="2023-10-08">2023-10-08</time>
+      </p>
+      <ul class="categories">
+        <li class="electronics">electronics</li>
+        <li class="hackspaces">hackspaces</li>
+      </ul>
+    </hgroup>
+  </a>
 </li>
diff --git a/hull-bus-sign/similar.html b/hull-bus-sign/similar.html
index d5e0b16..3398043 100644
--- a/hull-bus-sign/similar.html
+++ b/hull-bus-sign/similar.html
@@ -1,56 +1,71 @@
 <li class="post">
-<a class="link" href=".././hackspace-adventures">
-<div class="preview-image">
-<img alt="three hackspace logos" height="450" src=".././hackspace-adventures/og-image.png" width="450"/>
-</div>
-<hgroup class="info">
-<h2 class="title">
-                What, why, and how is a Hackspace, and what have I used them
-                for?
-              </h2>
-<p class="date">
-<time datetime="2023-11-07">2023-11-07</time>
-</p>
-<ul class="categories">
-<li class="hackspaces">hackspaces</li>
-</ul>
-</hgroup>
-</a>
+  <a class="link" href=".././hackspace-adventures">
+    <div class="preview-image">
+      <img
+        alt="three hackspace logos"
+        height="450"
+        src=".././hackspace-adventures/og-image.png"
+        width="450"
+      />
+    </div>
+    <hgroup class="info">
+      <h2 class="title">
+        What, why, and how is a Hackspace, and what have I used them for?
+      </h2>
+      <p class="date">
+        <time datetime="2023-11-07">2023-11-07</time>
+      </p>
+      <ul class="categories">
+        <li class="hackspaces">hackspaces</li>
+      </ul>
+    </hgroup>
+  </a>
 </li>
 <li class="post">
-<a class="link" href=".././factorio-proximity-chat">
-<div class="preview-image">
-<img alt='Screenshot
+  <a class="link" href=".././factorio-proximity-chat">
+    <div class="preview-image">
+      <img
+        alt='Screenshot
               of 3 players from Factorio saying "Proximity Voice Chat!";
-              "Pardon?"' height="337" src=".././factorio-proximity-chat/og-image.png" style="height: min-content" width="337"/>
-</div>
-<hgroup class="info">
-<h2 class="title">
-                Coding Projects! #2: Proximity-based voice chat for Factorio
-              </h2>
-<p class="date">
-<time datetime="2023-10-30">2023-10-30</time>
-</p>
-<ul class="categories">
-<li class="programming">programming</li>
-</ul>
-</hgroup>
-</a>
+              "Pardon?"'
+        height="337"
+        src=".././factorio-proximity-chat/og-image.png"
+        style="height: min-content"
+        width="337"
+      />
+    </div>
+    <hgroup class="info">
+      <h2 class="title">
+        Coding Projects! #2: Proximity-based voice chat for Factorio
+      </h2>
+      <p class="date">
+        <time datetime="2023-10-30">2023-10-30</time>
+      </p>
+      <ul class="categories">
+        <li class="programming">programming</li>
+      </ul>
+    </hgroup>
+  </a>
 </li>
 <li class="post">
-<a class="link" href=".././font-workshop">
-<div class="preview-image">
-<img alt='Text, "FONT MAKING WORKSHOP!"' height="450" src=".././font-workshop/images/poster.svg" width="450"/>
-</div>
-<hgroup class="info">
-<h2 class="title">I ran a computer font-making workshop!</h2>
-<p class="date">
-<time datetime="2024-03-09">2024-03-09</time>
-</p>
-<ul class="categories">
-<li class="font">font</li>
-<li class="hackspaces">hackspaces</li>
-</ul>
-</hgroup>
-</a>
+  <a class="link" href=".././font-workshop">
+    <div class="preview-image">
+      <img
+        alt='Text, "FONT MAKING WORKSHOP!"'
+        height="450"
+        src=".././font-workshop/images/poster.svg"
+        width="450"
+      />
+    </div>
+    <hgroup class="info">
+      <h2 class="title">I ran a computer font-making workshop!</h2>
+      <p class="date">
+        <time datetime="2024-03-09">2024-03-09</time>
+      </p>
+      <ul class="categories">
+        <li class="font">font</li>
+        <li class="hackspaces">hackspaces</li>
+      </ul>
+    </hgroup>
+  </a>
 </li>
diff --git a/making-bogface/similar.html b/making-bogface/similar.html
index a8311fa..2d1ae4a 100644
--- a/making-bogface/similar.html
+++ b/making-bogface/similar.html
@@ -1,55 +1,71 @@
 <li class="post">
-<a class="link" href=".././font-workshop">
-<div class="preview-image">
-<img alt='Text, "FONT MAKING WORKSHOP!"' height="450" src=".././font-workshop/images/poster.svg" width="450"/>
-</div>
-<hgroup class="info">
-<h2 class="title">I ran a computer font-making workshop!</h2>
-<p class="date">
-<time datetime="2024-03-09">2024-03-09</time>
-</p>
-<ul class="categories">
-<li class="font">font</li>
-<li class="hackspaces">hackspaces</li>
-</ul>
-</hgroup>
-</a>
+  <a class="link" href=".././font-workshop">
+    <div class="preview-image">
+      <img
+        alt='Text, "FONT MAKING WORKSHOP!"'
+        height="450"
+        src=".././font-workshop/images/poster.svg"
+        width="450"
+      />
+    </div>
+    <hgroup class="info">
+      <h2 class="title">I ran a computer font-making workshop!</h2>
+      <p class="date">
+        <time datetime="2024-03-09">2024-03-09</time>
+      </p>
+      <ul class="categories">
+        <li class="font">font</li>
+        <li class="hackspaces">hackspaces</li>
+      </ul>
+    </hgroup>
+  </a>
 </li>
 <li class="post">
-<a class="link" href=".././steam-collage-api">
-<div class="preview-image">
-<img alt="Thumbnail of alifeee's most played games on Steam." height="215" src=".././steam-collage-api/images/mosaic_small.jpg" style="border-radius: 1em; height: min-content" width="450"/>
-</div>
-<hgroup class="info">
-<h2 class="title">
-                Coding Projects! #1: Collage generator for Steam games
-              </h2>
-<p class="date">
-<time datetime="2023-08-23">2023-08-23</time>
-</p>
-<ul class="categories">
-<li class="programming">programming</li>
-</ul>
-</hgroup>
-</a>
+  <a class="link" href=".././steam-collage-api">
+    <div class="preview-image">
+      <img
+        alt="Thumbnail of alifeee's most played games on Steam."
+        height="215"
+        src=".././steam-collage-api/images/mosaic_small.jpg"
+        style="border-radius: 1em; height: min-content"
+        width="450"
+      />
+    </div>
+    <hgroup class="info">
+      <h2 class="title">
+        Coding Projects! #1: Collage generator for Steam games
+      </h2>
+      <p class="date">
+        <time datetime="2023-08-23">2023-08-23</time>
+      </p>
+      <ul class="categories">
+        <li class="programming">programming</li>
+      </ul>
+    </hgroup>
+  </a>
 </li>
 <li class="post">
-<a class="link" href=".././hull-bus-sign">
-<div class="preview-image">
-<img alt="Sketch of Dot Matrix Display showing the text 'Dot Matrix Display'" height="290" src=".././hull-bus-sign/og-image.png" style="rotate: -9deg" width="700"/>
-</div>
-<hgroup class="info">
-<h2 class="title">
-                Hull Bus Terminal Signs: Making Pong on an old Dot-Matrix
-                Display
-              </h2>
-<p class="date">
-<time datetime="2023-10-08">2023-10-08</time>
-</p>
-<ul class="categories">
-<li class="electronics">electronics</li>
-<li class="hackspaces">hackspaces</li>
-</ul>
-</hgroup>
-</a>
+  <a class="link" href=".././hull-bus-sign">
+    <div class="preview-image">
+      <img
+        alt="Sketch of Dot Matrix Display showing the text 'Dot Matrix Display'"
+        height="290"
+        src=".././hull-bus-sign/og-image.png"
+        style="rotate: -9deg"
+        width="700"
+      />
+    </div>
+    <hgroup class="info">
+      <h2 class="title">
+        Hull Bus Terminal Signs: Making Pong on an old Dot-Matrix Display
+      </h2>
+      <p class="date">
+        <time datetime="2023-10-08">2023-10-08</time>
+      </p>
+      <ul class="categories">
+        <li class="electronics">electronics</li>
+        <li class="hackspaces">hackspaces</li>
+      </ul>
+    </hgroup>
+  </a>
 </li>
diff --git a/snippets-of-a-degree/similar.html b/snippets-of-a-degree/similar.html
index 4bdac67..26e667b 100644
--- a/snippets-of-a-degree/similar.html
+++ b/snippets-of-a-degree/similar.html
@@ -1,58 +1,69 @@
 <li class="post">
-<a class="link" href=".././sketch-your-society">
-<div class="preview-image">
-<img alt="Photo of sketchbook front cover, slightly open. Title reads 'Durham Uni: 2021 Freshers' Fair Sketchbook" src=".././sketch-your-society/images/sketchbook_screenshot_transparent.png"/>
-</div>
-<hgroup class="info">
-<h2 class="title">
-                Sketch Your Society: 100 different sketches from 100 different
-                societies
-              </h2>
-<p class="date">
-<time datetime="2023-06-24">2023-06-24</time>
-</p>
-<ul class="categories">
-<li class="found-paper">found-paper</li>
-</ul>
-</hgroup>
-</a>
+  <a class="link" href=".././sketch-your-society">
+    <div class="preview-image">
+      <img
+        alt="Photo of sketchbook front cover, slightly open. Title reads 'Durham Uni: 2021 Freshers' Fair Sketchbook"
+        src=".././sketch-your-society/images/sketchbook_screenshot_transparent.png"
+      />
+    </div>
+    <hgroup class="info">
+      <h2 class="title">
+        Sketch Your Society: 100 different sketches from 100 different societies
+      </h2>
+      <p class="date">
+        <time datetime="2023-06-24">2023-06-24</time>
+      </p>
+      <ul class="categories">
+        <li class="found-paper">found-paper</li>
+      </ul>
+    </hgroup>
+  </a>
 </li>
 <li class="post">
-<a class="link" href=".././hull-bus-sign">
-<div class="preview-image">
-<img alt="Sketch of Dot Matrix Display showing the text 'Dot Matrix Display'" height="290" src=".././hull-bus-sign/og-image.png" style="rotate: -9deg" width="700"/>
-</div>
-<hgroup class="info">
-<h2 class="title">
-                Hull Bus Terminal Signs: Making Pong on an old Dot-Matrix
-                Display
-              </h2>
-<p class="date">
-<time datetime="2023-10-08">2023-10-08</time>
-</p>
-<ul class="categories">
-<li class="electronics">electronics</li>
-<li class="hackspaces">hackspaces</li>
-</ul>
-</hgroup>
-</a>
+  <a class="link" href=".././hull-bus-sign">
+    <div class="preview-image">
+      <img
+        alt="Sketch of Dot Matrix Display showing the text 'Dot Matrix Display'"
+        height="290"
+        src=".././hull-bus-sign/og-image.png"
+        style="rotate: -9deg"
+        width="700"
+      />
+    </div>
+    <hgroup class="info">
+      <h2 class="title">
+        Hull Bus Terminal Signs: Making Pong on an old Dot-Matrix Display
+      </h2>
+      <p class="date">
+        <time datetime="2023-10-08">2023-10-08</time>
+      </p>
+      <ul class="categories">
+        <li class="electronics">electronics</li>
+        <li class="hackspaces">hackspaces</li>
+      </ul>
+    </hgroup>
+  </a>
 </li>
 <li class="post">
-<a class="link" href=".././hackspace-adventures">
-<div class="preview-image">
-<img alt="three hackspace logos" height="450" src=".././hackspace-adventures/og-image.png" width="450"/>
-</div>
-<hgroup class="info">
-<h2 class="title">
-                What, why, and how is a Hackspace, and what have I used them
-                for?
-              </h2>
-<p class="date">
-<time datetime="2023-11-07">2023-11-07</time>
-</p>
-<ul class="categories">
-<li class="hackspaces">hackspaces</li>
-</ul>
-</hgroup>
-</a>
+  <a class="link" href=".././hackspace-adventures">
+    <div class="preview-image">
+      <img
+        alt="three hackspace logos"
+        height="450"
+        src=".././hackspace-adventures/og-image.png"
+        width="450"
+      />
+    </div>
+    <hgroup class="info">
+      <h2 class="title">
+        What, why, and how is a Hackspace, and what have I used them for?
+      </h2>
+      <p class="date">
+        <time datetime="2023-11-07">2023-11-07</time>
+      </p>
+      <ul class="categories">
+        <li class="hackspaces">hackspaces</li>
+      </ul>
+    </hgroup>
+  </a>
 </li>
diff --git a/steam-collage-api/similar.html b/steam-collage-api/similar.html
index c2d737d..6ed970d 100644
--- a/steam-collage-api/similar.html
+++ b/steam-collage-api/similar.html
@@ -1,55 +1,71 @@
 <li class="post">
-<a class="link" href=".././making-bogface">
-<div class="preview-image">
-<img alt="bogface text" height="450" src=".././making-bogface/front-page-image.png" width="450"/>
-</div>
-<hgroup class="info">
-<h2 class="title">
-                Making my own Font - <span class="BogFace">BogFace</span>
-</h2>
-<p class="date">
-<time datetime="2023-12-23">2023-12-23</time>
-</p>
-<ul class="categories">
-<li class="font">font</li>
-</ul>
-</hgroup>
-</a>
+  <a class="link" href=".././making-bogface">
+    <div class="preview-image">
+      <img
+        alt="bogface text"
+        height="450"
+        src=".././making-bogface/front-page-image.png"
+        width="450"
+      />
+    </div>
+    <hgroup class="info">
+      <h2 class="title">
+        Making my own Font - <span class="BogFace">BogFace</span>
+      </h2>
+      <p class="date">
+        <time datetime="2023-12-23">2023-12-23</time>
+      </p>
+      <ul class="categories">
+        <li class="font">font</li>
+      </ul>
+    </hgroup>
+  </a>
 </li>
 <li class="post">
-<a class="link" href=".././font-workshop">
-<div class="preview-image">
-<img alt='Text, "FONT MAKING WORKSHOP!"' height="450" src=".././font-workshop/images/poster.svg" width="450"/>
-</div>
-<hgroup class="info">
-<h2 class="title">I ran a computer font-making workshop!</h2>
-<p class="date">
-<time datetime="2024-03-09">2024-03-09</time>
-</p>
-<ul class="categories">
-<li class="font">font</li>
-<li class="hackspaces">hackspaces</li>
-</ul>
-</hgroup>
-</a>
+  <a class="link" href=".././font-workshop">
+    <div class="preview-image">
+      <img
+        alt='Text, "FONT MAKING WORKSHOP!"'
+        height="450"
+        src=".././font-workshop/images/poster.svg"
+        width="450"
+      />
+    </div>
+    <hgroup class="info">
+      <h2 class="title">I ran a computer font-making workshop!</h2>
+      <p class="date">
+        <time datetime="2024-03-09">2024-03-09</time>
+      </p>
+      <ul class="categories">
+        <li class="font">font</li>
+        <li class="hackspaces">hackspaces</li>
+      </ul>
+    </hgroup>
+  </a>
 </li>
 <li class="post">
-<a class="link" href=".././factorio-proximity-chat">
-<div class="preview-image">
-<img alt='Screenshot
+  <a class="link" href=".././factorio-proximity-chat">
+    <div class="preview-image">
+      <img
+        alt='Screenshot
               of 3 players from Factorio saying "Proximity Voice Chat!";
-              "Pardon?"' height="337" src=".././factorio-proximity-chat/og-image.png" style="height: min-content" width="337"/>
-</div>
-<hgroup class="info">
-<h2 class="title">
-                Coding Projects! #2: Proximity-based voice chat for Factorio
-              </h2>
-<p class="date">
-<time datetime="2023-10-30">2023-10-30</time>
-</p>
-<ul class="categories">
-<li class="programming">programming</li>
-</ul>
-</hgroup>
-</a>
+              "Pardon?"'
+        height="337"
+        src=".././factorio-proximity-chat/og-image.png"
+        style="height: min-content"
+        width="337"
+      />
+    </div>
+    <hgroup class="info">
+      <h2 class="title">
+        Coding Projects! #2: Proximity-based voice chat for Factorio
+      </h2>
+      <p class="date">
+        <time datetime="2023-10-30">2023-10-30</time>
+      </p>
+      <ul class="categories">
+        <li class="programming">programming</li>
+      </ul>
+    </hgroup>
+  </a>
 </li>