deploy: 74285e314d

static/main.css

@@ -147,7 +147,7 @@ blockquote, main p {
 }
 
 main h1, main h2 {
-    margin-bottom: .5em;
+    /* margin-bottom: .2em; */
 }
 
 main h2 {
@@ -163,6 +163,28 @@ blockquote {
     margin-left: 2.8em;
 }
 
+hr {
+    border-bottom: thick solid rgba(255, 255, 255, 0.1);
+    box-shadow: 
+    2px 7px 5px rgba(0,0,0,0.3),
+    0px -4px 10px rgba(0,0,0,0.3);
+    /* margin: .5em 0; */
+}
+
+.box {
+    border: thick solid rgba(255, 255, 255, 0.1);
+    padding: 1em;
+    background-color: rgba(0, 0, 0, 0.15);
+}
+
+.box *:last-child {
+    margin-bottom: 0;
+}
+
+.pageHeaderBox {
+    border-bottom: 0;
+}
+
 #headerSubtitle {
     color: white;
     opacity: 0.6;
@@ -760,6 +782,15 @@ hs {
     margin-bottom: 1em;
 }
 
+.i88x31 {
+    transition: .2s;
+    image-rendering: pixelated;
+}
+
+.i88x31.selected {
+    transform: scale(2);
+}
+
 @keyframes ellipsis-loader {
     0%, 25% {
         transform: translateX(0);

static/scripts/88x31.js

@@ -0,0 +1,13 @@
+const images = document.querySelectorAll(".i88x31");
+
+images.forEach(image => {
+    image.addEventListener("click", () => {
+        const selected = document.querySelectorAll(".i88x31.selected");
+        selected.forEach(s => {
+            if (s != image) {
+                s.classList.toggle("selected");
+            }
+        })
+        image.classList.toggle("selected");
+    })
+})