update css; add 88x31s

changelog

@@ -23,3 +23,4 @@
 2024-07-27: modernize /html/site-info.html, finally
 2024-07-27: improve image accessibility, update blog posts to be compliant with new style
 2024-07-28: add support for planned footer in all relevant html documents, simplify inclusion of other documents in a document using include script
+2024-08-05: add 88x31s, clean up css

files/88x31/bunbun.dev.html

@@ -0,0 +1,2 @@
+<a href='https://bunbun.dev'><img src='data:image/gif;base64,R0lGODlhWAAfAPAAAAAAAP///yH/C05FVFNDQVBFMi4wAwEAAAAh/wtJbWFnZU1hZ2ljaw1nYW1tYT0wLjQ1NDU1ACH5BAAjAP8ALAAAAABYAB8AAAKphI+py+0Po5y02ouz3rz7D4biSJbmiabqOgWB5opxOGP1d3t5tXP99pMEM0Pbi3gEFS+u5rEWc86kz2RUqqAasABo8kF9ebvaMPlw5W7LbPTXMY5bxfPz2o7HX936d0POB3gnmCeHNRZBuDdYp/hl6NQn1EgZWMnIl3m200Tmx2AWSnnYhinKhaqVoOrZCekVKajK2rmmxoKbq7vL2+v7CxwsPExcbExSAAAh/wtJbWFnZU1hZ2ljaw1nYW1tYT0wLjQ1NDU1ACH5BAAjAP8ALAAAAABYAB8AAAKmhI+py+0Po5y02ouz3rz7D4biSJbmiabqOgWB5opxOGP1d3t5tXP99pMEM0Pbi3gEFS+u5rEWc86kz2RUqqAasABo8kF9ebvaMPlw5W7LbPTXMY5bxfPz2o7HX936d0POB3gnmCeHNRZBuDdYp/hl6NQn1EgZWMnIl3m200Tmx2AWSnnYhinKpQahtRYJ6dV6ubrqyVJre4ubq7vL2+v7CxwsPJxbAAA7' alt='bunbun.dev'></a>
+

files/88x31/luxen.neocities.html

@@ -0,0 +1 @@
+<a href='https://luxen.neocities.org/'><img src='https://luxen.neocities.org/88x31.gif'></a>

files/88x31/natalieee.net.html

@@ -0,0 +1 @@
+<a href='https://natalieee.net'><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFgAAAAfCAYAAABjyArgAAABb2lDQ1BpY2MAACiRdZG7S8NQFMa/PqRFKx10EHHIUB9DC0VBHKWCXapDW8GqS3KbtEKShpsUKa6Ci0PBQXTxNfgf6Cq4KgiCIog4OvtapMRzm0KLtCecnB/fPd/h5gTwZ3Rm2MEkYJgOz6ZT0mphTQq9IwwfgpSTMrOtpdxiHj3j55H6KB4SYlbvvq4xUFRtBvjCxLPM4g7xPHFmy7EE7xEPs7JcJD4hjnO6IPGt0BWP3wSXPP4SzPPZBcAvZkqlDlY6mJW5QTxFHDP0KmvdR3xJRDVXclRHKcdgI4s0UpCgoIpN6HCQoGrSzrr7kk3fMirkYfS2UAMnRwll8sZJrdJUlapGukqPjprY+/992trMtDc9kgL6Xl33cxwI7QONuuv+nrpu4wwIvADXZttfoT3NfZNeb2uxYyC6A1zetDXlALjaBUaeLZnLTSlA6dc04OMCGCwAQ/dA/7q3q9Y5zp+A/Db9ojvg8AiYoP7oxh+f12feK5ElyAAAAAlwSFlzAAALEgAACxIB0t1+/AAAApdJREFUaEPtWktOAzEMnSJOwYYFp0GITS9RCXXDgpsgJC7RDUKchgUbrlHwjFycjJMXx5OpWmakolL7+fPG4yRuV13X7X9fyzU9AysyeUl/Pr++pzf/jy3eXF8dsu8JXq4mDPSd4aKFaXkHrfYJi/BIbvU5tf56ve7o1YxgMvzx/lYVN7crhEfyKucNQE0quEGcgclTWjOCHqw9enEysU5Kvn3Y/JKyGS2gCJ+7ORKbIhnZ98qtxTNa5J5fXgMbFJBMht7Lx1OT02dsh3Rv7+4PNhE+lwBj6ebFdgnHsaTi88qt5JK+uouQhFAVymS0KteSJeOhnSE8C15LaLBJT4d+jWMJ4/fKrSSbtmlaBQytoOzy4ku8cGtK6XrlJTFIHRPBBNQqwOLUi0e+4hYX63vlyH8sNxMsDXj3o158KlmtNUldr9xCsolgWmQGUoa28Pd/6FLqxQukFc9+4qS0XUocH2M4Bq/cQizr0kBiL0nQFqz4M7lKUzWkFjnWiyvGiqdgkQ2ZvHYIkXivHBH99LjtVXa7XTciGIEXOWZAEgxPcjV9sgaDwy7XOLZ/GSkkmJRrzv01mHIKseax/XOERQTjdBaNFAOjXQR6vErP8qlZRO5WzDELmbsURsOeeFYgT2roLC+3bqlZBEowNwuZwz+KzyofVTA6aaGzvAwAbehTweZmIXP4t5KY0zcdNKZ0XGsLzRJq7bbCnRzBaJbQiqhau1mC0YJX69SLq209Xr81+IBgNGvQzvLxoigXOu0bjZogGYNmCZresb9eUo/KaFYQb+JTFZWaReRIts5C2JYWQ41/TwEwdplFTMFixoZpFtE4lrM33/dgXsz4xxJnn/WMCdIsgvpw/0O15ZqeAUns8ivL6fntfgARjrcUTOE2HQAAAA5lWElmTU0AKgAAAAgAAAAAAAAA0lOTAAAAAElFTkSuQmCC"/></a>

style.css

@@ -22,6 +22,12 @@
   }
 }
 
+* {
+  font-family: 'MapleMono';
+  font-size: 16.5px;
+  text-wrap: wrap;
+}
+
 :root {
   --bg: #F2F4F8;
   --alt-bg: #dde1e6;
@@ -64,6 +70,27 @@ body {
   padding-bottom: 10px;
 }
 
+h1 {
+  font-size: 33px;
+  font-weight: normal;
+}
+
+h2 {
+  font-size: 22px;
+  font-family: 'MapleMonoItalic';
+  font-weight: normal;
+}
+
+h3 {
+  font-size: 18px;
+  font-weight: bold;
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+}
+
 main {
   display: flex;
   flex-direction: column;
@@ -104,10 +131,30 @@ header {
   }
 }
 
-* {
+section {
-  font-family: 'MapleMono';
+  display: flex;
-  font-size: 16.5px;
+  flex-direction: column;
-  text-wrap: wrap;
+  justify-content: center;
+
+  background: var(--alt-bg);
+  box-shadow: 10px 10px var(--gray);
+  margin: 15px 30px;
+  padding: 20px;
+
+  > p {
+    margin: 5px 0;
+  }
+
+  > h1, h2, h3 {
+    margin: 10px 0;
+  }
+
+  .ignore-section {
+    background: var(--bg);
+    box-shadow: none;
+    margin: 0;
+    padding: 5px 10px;
+  }
 }
 
 form {
@@ -125,49 +172,46 @@ form {
     border: none;
     color: var(--fg);
     background: var(--bg);
-  }
     
-  > button:hover {
+    &:hover {
-    background: var(--hl);
+      background: var(--hl);
+    }
   }
 
   > input {
     color: var(--fg);
     margin: 10px;
     border: none;
-    background: var(--bg) 
+    background: var(--bg);
-  }
   
-  > input:focus {
+    &:focus {
-    outline: none;
+      outline: none;
+    }
   }
 }
 
-section {
+figure {
   display: flex;
   flex-direction: column;
-  justify-content: center;
+  justify-content: flex-start;
-
+  max-width: 125%;
-  background: var(--alt-bg);
-  box-shadow: 10px 10px var(--gray);
-  margin: 15px 30px;
-  padding: 20px;
-  /* border-bottom: 1px solid var(--fg); */
-
-  > p {
-    margin: 5px 0;
-  }
-
-  > h1, h2, h3 {
-    margin: 10px 0;
-  }
-}
-
-.ignore-section {
   background: var(--bg);
-  box-shadow: none;
   margin: 0;
-  padding: 5px 10px;
+  margin-bottom: 15px;
+
+  > img {
+    height: auto;
+    padding: 10px;
+    padding-bottom: 0;
+  }
+
+  > figcaption {
+    display: flex;
+    justify-content: center;
+    text-align: center;
+    padding: 5px;
+    margin: 0;
+  }
 }
 
 table {
@@ -189,10 +233,6 @@ th:last-child, td:last-child {
   width: 20%;
 }
 
-tr.rowhighlight {
-  background-color: var(--fg);
-}
-
 iframe {
   border: none;
   padding: 0;
@@ -201,49 +241,12 @@ iframe {
   overflow: hidden;
 }
 
-h1 {
-  font-size: 33px;
-  font-weight: normal;
-}
-
-h2 {
-  font-size: 22px;
-  font-family: 'MapleMonoItalic';
-  font-weight: normal;
-}
-
-h3 {
-  font-size: 18px;
-  font-weight: bold;
-}
-
-img {
-  max-width: 100%;
-  height: auto;
-}
-
 summary {
   -webkit-user-select: none;
   -ms-user-select: none;
   user-select: none;
 }
 
-.post {
-  background: var(--alt-bg);
-  box-shadow: 10px 10px var(--gray);
-  margin: 30px;
-  padding: 20px;
-}
-
-::-webkit-scrollbar {
-  width: 0px;
-  height: 0px;
-}
-
-.italic {
-  font-family: 'MapleMonoItalic' !important; 
-}
-
 code, pre {
   background: var(--bg);
   margin: 10px;
@@ -263,8 +266,15 @@ a:visited {
   color: var(--visited-link);
 }
 
-::selection {
+.post {
-  background: var(--highlight)
+  background: var(--alt-bg);
+  box-shadow: 10px 10px var(--gray);
+  margin: 30px;
+  padding: 20px;
+}
+
+.italic {
+  font-family: 'MapleMonoItalic' !important; 
 }
 
 .captioned-image {
@@ -290,6 +300,15 @@ a:visited {
   }
 }
 
+::-webkit-scrollbar {
+  width: 0px;
+  height: 0px;
+}
+
+::selection {
+  background: var(--highlight)
+}
+
 image-column-container {
   min-width: 100%;
   display: flex;
@@ -304,30 +323,6 @@ image-container {
   height: auto;
 }
 
-figure {
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
-  max-width: 125%;
-  background: var(--bg);
-  margin: 0;
-  margin-bottom: 15px;
-
-  > img {
-    height: auto;
-    padding: 10px;
-    padding-bottom: 0;
-  }
-
-  > figcaption {
-    display: flex;
-    justify-content: center;
-    text-align: center;
-    padding: 5px;
-    margin: 0;
-  }
-}
-
 flex-column {
   width: 100%;
   display: flex;
@@ -353,7 +348,7 @@ flex-grid {
 }
 
 flex-grid-item {
-    flex: 1 0 200px; /* Flex grow, flex shrink, flex basis */
+    flex: 1 0 200px;
     margin: 5px;
     overflow: hidden;
     position: relative;