From 3b606bcc096a6d9860672e6d0d003ca9e80c067e Mon Sep 17 00:00:00 2001
From: Hannah Isopod <me@bathynomus.xyz>
Date: Sun, 15 Feb 2026 22:42:27 -0700
Subject: THE BIG ONE

Total website redesign.
Multiple new blog posts.
Routine updates on several pages.
Too much to list, even if I remembered it all.
Remind me not to put this git repo on any portfolios.
---
 style.css | 1375 ++++++++++++++++++++++++++++++++++++++++++++++++-------------
 1 file changed, 1089 insertions(+), 286 deletions(-)

(limited to 'style.css')

diff --git a/style.css b/style.css
index f4a756a..2111fa2 100644
--- a/style.css
+++ b/style.css
@@ -1,307 +1,705 @@
+@font-face {
+  font-family: b612;
+  src: url(https://isopod.cool/stuff/fonts/B612/B612-Regular.ttf);
+}
+@font-face {
+  font-family: b612;
+  src: url(https://isopod.cool/stuff/fonts/B612/B612-Bold.ttf);
+  font-weight: bold;
+}
+@font-face {
+  font-family: b612;
+  src: url(https://isopod.cool/stuff/fonts/B612/B612-Italic.ttf);
+  font-style: italic;
+}
+@font-face {
+  font-family: b612;
+  src: url(https://isopod.cool/stuff/fonts/B612/B612-BoldItalic.ttf);
+  font-weight: bold;
+  font-style: italic;
+}
+
 @font-face {
   font-family: b612_mono;
-  src: url(stuff/fonts/B612_Mono/B612Mono-Regular.ttf);
+  src: url(https://isopod.cool/stuff/fonts/B612_Mono/B612Mono-Regular.ttf);
 }
 @font-face {
   font-family: b612_mono;
-  src: url(stuff/fonts/B612_Mono/B612Mono-Bold.ttf);
+  src: url(https://isopod.cool/stuff/fonts/B612_Mono/B612Mono-Bold.ttf);
   font-weight: bold;
 }
 @font-face {
   font-family: b612_mono;
-  src: url(stuff/fonts/B612_Mono/B612Mono-Italic.ttf);
+  src: url(https://isopod.cool/stuff/fonts/B612_Mono/B612Mono-Italic.ttf);
   font-style: italic;
 }
 @font-face {
   font-family: b612_mono;
-  src: url(stuff/fonts/B612_Mono/B612Mono-BoldItalic.ttf);
+  src: url(https://isopod.cool/stuff/fonts/B612_Mono/B612Mono-BoldItalic.ttf);
   font-weight: bold;
   font-style: italic;
 }
 
 
 :root {
-  --stdfont: b612_mono, monospace;
-  --bgcolor: #222222;
-  --fontcolor: #dcdcdc;
-  --linkcolor: #df1955;
-  --linkhover: #00ffd5;
-  --blockbg: #fff1;
-  --blockbghover: #fff2;
-  --stdshadow: #000;
+  color-scheme: dark light;
+
+  /* Trying to define as few specific colours as possible as generically as possible */
+  --background: light-dark(#fff5eb, #1a1a1d);
+  --foreground: light-dark(#222, #ddd);
+  --accent1: light-dark(#64790a, #ff1159);
+  --accent2: light-dark(#007a70, #00ffd5);
+  --shadow: #000a;
+  --message-red: light-dark(#c00, red);
+  --message-green: light-dark(#007500, lime);
+  --message-yellow: light-dark(#d3b200, yellow);
+  --message-blue: light-dark(#005fbb, dodgerblue);
+
+  --linkcolor: var(--accent1);
+  --linkhover: var(--accent2);
+
+  --fg0: var(--foreground);
+  --fg1: color-mix(in srgb, var(--foreground) 85%, var(--background) 15%);
+  --fg2: color-mix(in srgb, var(--foreground) 75%, var(--background) 25%);
+  --fg3: color-mix(in srgb, var(--foreground) 65%, var(--background) 35%);
+
+  --bg0: var(--background);
+  --bg1: color-mix(in srgb, var(--background) 93%, var(--foreground) 7%);
+  --bg2: color-mix(in srgb, var(--background) 87%, var(--foreground) 13%);
+  --bg3: color-mix(in srgb, var(--background) 80%, var(--foreground) 20%);
+  --bg00: light-dark(white, black);
+
   /* ALL colors should be defined here. 
   If there's a color value somewhere else, move it here so it can be responsive */
 
-  --stdaccentborder: 3px solid var(--fontcolor);
-  --bodywidth: min(90vw, 80ch);
-  --stddropshadow: 4px 4px 8px var(--stdshadow);
   --stdpadding: 1rem;
-  --navbarheight: calc(var(--stdpadding) * 4.5);
-  --h1-image: url('images/isopod.php');
-  --shadowsize: 3rem;
-  --blockbackdrop: blur(1.5px);
+  --idealwidth: calc(80ch + (var(--stdpadding) * 10));
+  --bodywidth: min(calc(90vw - (4 * var(--stdpadding))), var(--idealwidth));
+  /*--mobileviewmaxwidth: calc(92ch + 24rem); root variables don't work in media queries, apparently. Keeping this here for reference */
+
+  --border-size-x: 1rem;
+  --border-size-y: .33rem;
+
+  --accentbordercolor: light-dark(var(--accent1), var(--fg0));
+  --stdaccentborder: .2rem solid var(--accentbordercolor);
+
+  --stddropshadow: .25rem .25rem .5rem var(--shadow);
+  --blockshadow: drop-shadow(0 0 1.5rem var(--shadow));
+
+  --bodyfont: b612_mono, monospace;
+
 }
 html, body {
   height: 100%;
+  padding: 0;
+  margin: 0;
 }
 
 body {
-  color: var(--fontcolor);
-  font-family: var(--stdfont);
-  text-shadow: 1px 1px 3px var(--stdshadow);
+  color: var(--fg0);
+  font-family: var(--bodyfont);
 
-  max-width: var(--bodywidth);
-  margin: auto;
-  background-color: var(--bgcolor);
-  box-sizing: border-box;
+  background:
+    url('https://isopod.cool/bg-dither.png') repeat center/cover fixed,
+    var(--bg0);
 }
 body > p:last-child {
   padding-bottom: var(--stdpadding);
 }
 
-/* Headings */
-body > h1:first-of-type, body > main:first-of-type > div > h1:first-of-type {
-  margin-top: calc(var(--navbarheight) + var(--stdpadding));
-  font-size: 3em;
-  background-image: var(--h1-image);
-  background-size: contain;
-  background-position: right;
-  background-repeat: no-repeat;
-  padding-bottom: calc(var(--stdpadding) * 2);
-  margin-bottom: calc(var(--stdpadding) * -2);
-}
-h1 + h2#caption {font-weight: normal;
-  padding-top: 0;
-  margin-top: -1.4em;
-}
-h1, h2, h3, h4, h5, h6 {
-  border-left: var(--stdaccentborder);
-  padding-left: var(--stdpadding);
-}
-summary :is(h1, h2, h3, h4, h5, h6) {
-  display: inline-block;
-  border-left: none;
-  padding-left: initial;
-  margin: 0;
-}
-
 /* Links */
+
 a {
-  color: var(--linkcolor);
+  color: var(--accent1);
 }
 a:hover {
-  color: var(--linkhover);
+  color: var(--accent2);
 }
+.backlink {
+  border-left: var(--stdpadding) solid var(--accent1);
+  padding: calc(var(--stdpadding) * 0.7) var(--stdpadding);
+  width: fit-content;
+  margin-left: calc(-1 * var(--stdpadding));
+}
+
+/* Header */
 
-/* Nav & Header */
 header {
-  position: absolute;
+  position: fixed;
   top: 0;
-  width: max-content;
-  min-width: var(--bodywidth);
-  height: var(--navbarheight);
-  padding-top: 0.5rem;
-  left: 50%;
-  transform: translateX(-50%);
+  left: 0;
+  right: 0;
+  filter: var(--blockshadow);
+  pointer-events: none;
+  z-index: 5;
+}
+header * {
+  pointer-events: auto;
 }
-#header-content {
+
+.headerbar { /* This div represents the top header bar */
   display: flex;
+  flex-direction: row;
+  justify-content: space-between;
   align-items: center;
+
+  padding: 0 var(--stdpadding);
+
+  background: var(--bg0);
+  filter: drop-shadow(0 var(--border-size-y) 0 var(--accent1));
 }
-#header-content > * {
-  margin: 0;
+.headerbar > * {
+  flex: 1 1 0;
 }
-#header-content > :last-child {
-  flex: 1;
+.headerbar p {
   text-align: right;
 }
-nav {
+
+.headerbar > div { /* Center image in the top bar */
   display: flex;
-  flex-wrap: wrap;
-  max-width: 100%;
-  align-items: center;
   justify-content: center;
-  gap: calc(var(--stdpadding / 2));
+  align-items: center;
+  height: 5rem;
 }
-nav a, nav span, body > a{
-  padding: calc(var(--stdpadding) / 2) calc(var(--stdpadding) / 4 * 3);
-  margin: calc(var(--stdpadding) / 2) 0;
+.headerbar img {
+  max-height: 100%;
 }
-nav a, body > a, summary {
-  border-left: var(--stdaccentborder);
-  background: linear-gradient(var(--blockbghover) 0 0) 0 / var(--bgpos, 0) no-repeat;
-  transition: background .3s, border .3s;
+
+
+.bubblecolumn {
+  position: fixed;
+  left: 4rem;
+  top: 0;
+  width: 29px;
+  height: 100vh;
+  background-image: url(/images/bubblecolumn1.gif);
+  background-repeat: repeat-y;
+  pointer-events: none;
+  z-index: -1;
 }
-nav a {
-  border-color: #0000;
+
+  /* Header nav */
+header nav {
+  max-width: fit-content;
+  filter: drop-shadow(var(--border-size-x) 0 0 var(--accent1));
+  background: var(--bg0);
+  background: linear-gradient(315deg, transparent var(--stdpadding), var(--bg0) 0) bottom right; /* TODO: replace this nonsense once border-shape drops */
+  padding-bottom: var(--stdpadding);
 }
-nav a:hover, body > a:hover, summary:hover {
-  --bgpos: 100%;
-  border-left: var(--stdaccentborder);
+#header-inside-corner-kludge { /* Janky solution to get an inside bevel where the top bar and nav sidebar meet. */
+  background: var(--bg0);
+  background: linear-gradient(135deg, var(--bg0) var(--stdpadding), transparent 0) top left;
+  width: calc(var(--stdpadding) * 2);
+  height: calc(var(--stdpadding) * 2);
+  top: 0;
+  right: calc(0px - var(--stdpadding) * 2);
+  position: absolute;
 }
-body > a {
-  display: block;
-  margin-left: 0;
-  padding-left: 1rem;
-  font-weight: bold;
-  font-size: 1.25em;
+nav ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+nav li {
+  padding: calc(var(--stdpadding) / 2) calc(var(--stdpadding) * 2);
+  margin-top: 0;
+  margin-bottom: 0;
+}
+.burgermenu {
+  display: none;
+}
+
+/* Main */
+
+main {
+  padding: calc(var(--stdpadding) * 5);
+  padding-top: 6rem;
+  padding-bottom: 4rem;
+
+  margin: auto;
+  max-width: var(--bodywidth);
+  min-height: 100vh;
+  box-sizing: border-box;
+
+  background-color: var(--bg0);
+  box-shadow: 0 0 2.5rem var(--shadow) inset;
+
+  line-height: 1.4;
+}
+section {
+  margin-bottom: calc(var(--stdpadding) * 3);
+}
+
+.pagenav ul {
+  display: flex;
+  flex-wrap: wrap;
+  list-style: none;
+  padding: 0;
+  gap: var(--stdpadding);
+  justify-content: center;
+  align-items: center;
+}
+.pagenav li {
+  padding: 0;
 }
 
-/* Background image type beat */
-#leftsidebg, #rightsidebg {
-  --bgimg: url(/bg_dither.png)/*, url(/bg.jxl), url(/bg.jpg)*/;
-  background-image: /*linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06)), */var(--bgimg);
-  background-size: /*100% 2px, 3px 100%, cover, cover, cover, */cover;
-  background-repeat: repeat;
-  background-position: center;
+/* Footer */
+
+footer {
   position: fixed;
-  z-index: -10;
+  right: 0;
   bottom: 0;
-  top: 0;
-  --distancefromcenter: calc((var(--bodywidth) / -2) - (var(--stdpadding) * 3));
+  background: var(--bg0);
+  background: linear-gradient(135deg, transparent var(--stdpadding), var(--bg0) 0) top left;
+  padding: var(--stdpadding);
+  filter: drop-shadow(calc(0px - var(--border-size-x)) 0 0 var(--accent2))
+          var(--blockshadow);
+  max-width: 85vw;
+
+  display: flex;
+  gap: var(--stdpadding);
+  align-items: center;
+  flex-wrap: wrap;
 }
-#leftsidebg {
-  right: calc(50% - var(--distancefromcenter));
-  left: 0;
-  box-shadow: calc(0rem - var(--shadowsize)) 0 var(--shadowsize) calc(0rem - var(--shadowsize)) black inset;
+footer p {
+  margin: 0;
 }
-#rightsidebg {
-  right: 0;
-  left: calc(50% - var(--distancefromcenter));
-  box-shadow: var(--shadowsize) 0 var(--shadowsize) calc(0rem - var(--shadowsize)) black inset;
+
+/* Headings */
+
+h2, h3, h4, h5, h6 {
+  margin-top: calc(var(--stdpadding) * 3);
 }
+h2, h3, h4 {
+  border-bottom: .2rem solid;
+  padding-bottom: .2em;
+  width: fit-content;
 
-/* 88x31 button container */
-.buttons {
-  text-align: center;
-  font-size: 0;
+  --hbcolor: var(--fg0);
+  border-image: linear-gradient(to right, var(--hbcolor) 50%, transparent 50%) 100% 1;
 }
-.buttons > * {
-  display: inline-block;
-  margin: 0.1rem;
-  font-size: 0;
+h2 {
+  font-size: 2.5rem;
 }
-.buttons > a > img {
-  transition-duration: .5s;
-  box-shadow: none;
-  display: inline-block;
-  transform: translate(0, 0);
+h3 {
+  font-size: 1.5rem;
+  --hbcolor: var(--accent1);
+  border-bottom-width: .1rem;
 }
-.buttons > a > img:hover {
-  box-shadow: 2px 2px 4px black;
-  z-index: 5;
-  transform: translate(-2px, -2px);
+h4 {
+  font-size: 1.25rem;
+  --hbcolor: var(--accent2);
+  border-bottom-width: .1rem;
+}
+h5 {
+  font-size: 1rem;
+}
+h6 {
+  font-size: .9rem;
+}
+.h2caption {
+  margin-top: -2.9rem;
+  margin-bottom: 1.6rem;
+  margin-left: auto;
+  width: 50%;
+  text-align: right;
+  font-style: italic;
+}
+h3 + .h2caption, h4 + .h2caption {
+  margin-top: -2.4rem;
+  margin-bottom: 1.1rem;
+}
+
+/* Details/summary */
+
+details {
+  border-left: var(--stdaccentborder);
+  padding-left: var(--stdpadding);
+}
+details:open summary {
+  margin-bottom: var(--stdpadding);
+}
+summary {
+  padding: var(--stdpadding);
+  margin-left: calc(var(--stdpadding) * -1);
+  background-color: var(--bg1);
+  background: linear-gradient(225deg, transparent var(--stdpadding), var(--bg1) 0) top right;
+}
+
+/* Universal for the next 4 things */
+
+figure, section > blockquote, pre, .codetitle, .aside, .notice {
+  margin: var(--stdpadding) calc(var(--stdpadding) * 3);
+  border-left: var(--stdaccentborder);
+}
+
+/* Interjections */
+
+.aside {
+  background-color: var(--bg1);
+  font-size: 0.9em;
+  min-height: calc(7rem + (var(--stdpadding) * 2));
+}
+.aside-image {
+  height: 100%;
+  max-height: 7rem;
+  width: 7rem;
+  float: left;
+  padding: var(--stdpadding);
+  margin: 0 var(--stdpadding) var(--stdpadding) 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-right: .1rem solid var(--accent1);
+}
+.aside-image img, .aside-image picture {
+  max-height: 100%;
+}
+.aside-content {
+  padding: var(--stdpadding);
+}
+.aside-content :first-child {
+  margin-top: 0;
+}
+.aside-content :last-child {
+  margin-bottom: 0;
+}
+
+.notice {
+  border-left-color: var(--message-blue);
+  background-color: color-mix(in srgb, var(--bg0) 90%, var(--message-blue) 10%);
+  padding: var(--stdpadding);
+  font-size: 0.9em;
+}
+.error {
+  border-left-color: var(--message-red);
+  background-color: color-mix(in srgb, var(--bg0) 90%, var(--message-red) 10%);
+}
+.success {
+  border-left-color: var(--message-green);
+  background-color: color-mix(in srgb, var(--bg0) 90%, var(--message-green) 10%);
+}
+.warning {
+  border-left-color: var(--message-yellow);
+  background-color: color-mix(in srgb, var(--bg0) 90%, var(--message-yellow) 10%);
+}
+
+/* Blockquotes */
+
+figure.quote, section > blockquote {
+  background-color: var(--bg1);
+  padding: var(--stdpadding);
+  background: linear-gradient(315deg, transparent var(--stdpadding), var(--bg1) 0) bottom right;
 }
 
 /* Code snippets */
+
+pre {
+  height: fit-content;
+}
 code {
-  padding: 0.15rem;
+  padding: 0.15em .5em;
 }
 pre > code {
   display: block;
-  margin-bottom: 1rem;
   overflow-x: auto;
+  border-top: .1rem solid var(--accent2);
+}
+code {
+  background-color: var(--bg00);
 }
-code, .codetitle {
-  background-color: black;
+:not(pre) > code {
+  border: .1rem solid var(--fg3);
 }
 pre > code, .codetitle {
-  width: 75%;
-  margin: auto;
-  border: 1px solid #00ffd5;
-  padding: 0.7rem;
+  padding: calc(0.7 * var(--stdpadding));
 }
 .codetitle {
   margin-bottom: 0;
   border-bottom: none;
-  text-align: center;
+  font-size: .9em;
+  display: block;
+  background-color: var(--bg1);
+  background: linear-gradient(225deg, transparent var(--stdpadding), var(--bg1) 0) top right;
 }
 .codetitle + pre {
   margin-top: 0;
 }
 
+/* Media */
+
+img, picture, video {
+  max-width: 100%;
+  max-height: 50rem;
+  min-width: 0;
+}
+:is(main, section, picture, .media) > img, picture, video {
+  margin: auto;
+  display: block;
+}
+figure.media {
+  background-color: var(--bg1);
+  background: linear-gradient(315deg, var(--bg1) var(--stdpadding), transparent var(--stdpadding), transparent calc(var(--stdpadding) * 1.3), var(--bg1) 0) bottom right;
+  border-left: var(--stdaccentborder);
+}
+figure.media * {
+  margin: 0 auto;
+}
+figure.media figcaption {
+  padding: var(--stdpadding);
+  font-size: .9em;
+}
+.gallery {
+  display: flex;
+  max-width: 100%;
+  width: max-content;
+}
+.gallery > * {
+  flex: 1 1 0;
+}
+p img {
+  height: 2em;
+  display: inline;
+  margin: initial;
+  vertical-align: middle;
+  transition: .15s;
+}
+p img:hover {
+  transform: scale(1.3);
+}
+
 /* Tables */
+
 table {
+  font-size: .9em;
+  width: fit-content;
   border-collapse: collapse;
+  border: .1rem solid var(--fg0);
+}
+.tablecontainer {
+  overflow-x: scroll;
+}
+table, .tablecontainer {
+  margin: var(--stdpadding) 0;
+}
+.tablecontainer table {
+  margin: 0 auto;
+}
+.tablecontainer caption {
+  text-align: left;
+}
+caption {
+  background: var(--bg1);
+  background:
+		linear-gradient(135deg, transparent var(--stdpadding), var(--bg1) 0) top left,
+		linear-gradient(225deg, transparent var(--stdpadding), var(--bg1) 0) top right;
+    padding: var(--stdpadding);
+  background-size: 50% 100%;
+  background-repeat: no-repeat;
+}
+thead, tfoot {
+  border-top: .1rem solid var(--accent1);
+  border-collapse: separate;
+}
+tbody {
+  border-top: .1rem solid var(--accent2);
+  border-collapse: separate;
 }
 td {
-  padding: calc(var(--stdpadding) / 2);
+  min-width: 10ch;
+  border: .1rem solid var(--fg1);
 }
-tr > td:first-child {
-  padding-left: 0;
+td, th {
+  padding: calc(var(--stdpadding) * .4);
 }
-tr.indent-1 td {
-  padding-left: calc(var(--stdpadding));
+thead th, thead td {
+  padding: calc(var(--stdpadding) * .4) var(--stdpadding);
 }
-tr.indent-1 td:first-child {
-  border-left: var(--stdaccentborder);
+
+/* Lists */
+
+dl {
+  display: flex;
+  flex-wrap: wrap;
+  --ratio: .333; /* Ratio of dt's width to dd's width. Defaults to 1/3 here. */
+}
+dt, dd {
+  padding: calc(var(--stdpadding) * .5);
+  box-sizing: border-box;
+}
+dt {
+  width: calc(100% * var(--ratio));
+  padding-left: var(--stdpadding);
+}
+dd {
+  width: calc(100% - (100% * var(--ratio)));
+  margin-left: 0;
+  padding-right: var(--stdpadding);
 }
+:is(dt, dd):nth-of-type(2n) {
+  background-color: var(--bg1);
+}
+dt:empty{
+  width: 0;
+  padding: 0;
+}
+dt:empty + dd {
+  width: 100%;
+  padding-left: var(--stdpadding);
+}
+
+/* Forms & Comments */
 
-/* Quotations */
-figure.quote, blockquote {
-  padding: calc(var(--stdpadding) * 1.5);
+input, textarea {
+  border: none;
+  background-color: var(--bg00);
+  font-family: var(--bodyfont);
   margin: 0;
+}
+
+input, textarea, .commentform .notice, .commentform-field label {
+  padding: calc(var(--stdpadding) * 0.5) calc(var(--stdpadding) * 0.8);
+  box-sizing: border-box;
+  font-size: 0.85rem;
+}
+
+input[type="text"], textarea {
+  width: 100%;
+  min-width: 100%;
+  max-width: 100%;
   border-left: var(--stdaccentborder);
-  background-color: var(--blockbg);
-  margin-bottom: var(--stdpadding);
-  backdrop-filter: var(--blockbackdrop);
 }
-figure.quote blockquote {
-  padding: initial;
-  border-left: initial;
-  background-color: initial;
-  margin-bottom: initial;
-  backdrop-filter: initial;
+
+input[type="text"] {
+  border-top: .1rem solid var(--accent1);
 }
-figure.quote figcaption {
-  margin-left: calc(var(--stdpadding) * 3);
-  margin-top: var(--stdpadding);
+
+textarea {
+  border-bottom: .1rem solid var(--accent2);
 }
-blockquote > :first-child {
-  margin-top: 0;
+
+input[type="submit"] {
+  border: var(--stdaccentborder);
+  height: min-content;
+  background-color: var(--bg1);
 }
-blockquote > :last-child {
-  margin-bottom: 0;
+
+input[type="submit"]:hover {
+  border-color: var(--accent2);
+  color: var(--accent2);
+  background-color: var(--bg2);
+  cursor: pointer;
 }
 
-/* Media, plus captions thereof */
-img, picture, video {
-  max-width: 100%;
-  max-height: 50rem;
-  min-width: 0;
+.commentform-field {
+  flex: 1 1 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: end;
 }
-:is(body, p, picture) > img, picture, video, figure.media {
-  margin: auto;
-  display: block;
+
+.commentform-field label {
+  background-color: var(--bg1);
+  border-left: var(--stdaccentborder);
 }
 
-.gallery {
+#commentform-top, .commentform-top {
   display: flex;
-  max-width: 100%;
+  gap: var(--stdpadding);
 }
-figure.media {
-  width: fit-content;
-  max-width: 100%;
+
+.commentform {
+  display: flex;
+  flex-direction: column;
+  gap: var(--stdpadding);
+  margin: var(--stdpadding) 0;
 }
-figure.media > div {
-  display: inline-block;
+
+#commentform-bottom, .commentform-bottom {
+  display: flex;
+  justify-content: space-between;
+  flex-direction: row-reverse;
+  gap: var(--stdpadding);
 }
-figure.media > div > figcaption {
-  width: min-content;
-  min-width: 100%;
-  font-size: 0.9em;
-  padding: calc(var(--stdpadding) * 0.9);
+
+.commentform .notice {
+  display: flex;
+  justify-content: center;
+  align-items: center;
   margin: 0;
-  margin-bottom: initial;
-  margin-top: -4px;
+}
+
+.comment {
+  margin: 2rem auto;
+  display: flex;
+  flex-direction: column;
+}
+
+.comment > div {
   border-left: var(--stdaccentborder);
-  background-color: var(--blockbg);
-  box-sizing: border-box;
+  border-left-color: var(--accent1);
+  margin: 0;
+  padding: 0 var(--stdpadding);
+  background: var(--bg1);
+}
+
+.gb-cool/*, .gb-found*/ {
+  word-break: break-all;
+}
+
+.comment > .gb-reply {
+  border-left: none;
+  border-right: var(--stdaccentborder);
+  border-right-color: var(--accent2);
+  border-top: var(--stdaccentborder);
+  padding: 0;
+}
+
+.gb-reply > div { /* Reply contents */
+  
+  margin: var(--stdpadding);
+  text-align: right;
+}
+
+.gb-reply > p { /* "Reply:" label */
+  float: left;
+  margin: 0;
+  margin-right: var(--stdpadding);
+  padding: var(--stdpadding);
+  border-right: .1rem solid var(--accent2);
+}
+
+.gb-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: .1rem solid var(--fg1);
+}
+
+.gb-head p {
+  flex: 1 1 0;
+  text-align: center;
+}
+
+.gb-head p:first-of-type {
+  text-align: left;
+}
+
+.gb-head p:last-of-type {
+  text-align: right;
 }
 
 /* Misc */
-summary {
-  padding: calc(var(--stdpadding)/2) var(--stdpadding);
+
+hr {
+  border-bottom: none;
+  border-left: none;
+  border-right: none;
+  color: var(--stdaccentborder);
+  border-top-color: var(--stdaccentborder);
+}
+.prefers-contrast-less-message {
+  display: none;
 }
 summary:hover {
   cursor: pointer;
@@ -312,8 +710,169 @@ summary:hover {
 [title]:hover {
   cursor: help;
 }
-hr {
-  width: 30%;
+.webrings {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--stdpadding);
+  width: 100%;
+  justify-content: space-around;
+  margin: calc(3 * var(--stdpadding)) 0;
+}
+.ring {
+  display: flex;
+  gap: 1ch;
+}
+.ring * {
+  text-wrap: nowrap;
+}
+.buttons {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+.buttons > * {
+  width: 88px;
+  max-height: 31px;
+}
+
+/* Music page stuff */
+.musicpage section {
+  min-height: 23rem;
+}
+.cd {
+  --cdsize: min(20rem, var(--bodywidth));
+  --clearplastic: color-mix(in srgb, var(--background) 90%, var(--foreground) 10%);
+
+  width: var(--cdsize);
+  aspect-ratio: 1;
+
+  border-radius: 50%;
+  border: calc(var(--cdsize) / 50) solid var(--clearplastic);
+  overflow: hidden;
+  line-height: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: var(--stdpadding);
+  margin-top: 3rem;
+  box-shadow: 0 0 3rem #0003;
+  transform: scale(1);
+  transition: .2s;
+  box-sizing: border-box;
+}
+.cd:hover {
+  transform: scale(1.1);
+  box-shadow: 0 0 8rem #0007;
+}
+.cd + h3 {
+  display: inline-block;
+}
+.cd img {
+  animation-duration: 100000ms;
+  animation-iteration-count: infinite;
+  animation-timing-function: linear;
+  width: 100%;
+}
+.cd:hover img {
+  animation-duration: 300ms;
+}
+section:nth-child(2n+1) .cd {
+  float: left;
+  margin-right: 2rem;
+  animation-name: spin;
+}
+section:nth-child(2n) .cd {
+  float: right;
+  margin-left: 2rem;
+  animation-name: spin-reverse;
+}
+section:nth-child(2n+1) .cd img {
+  animation-name: spin;
+}
+section:nth-child(2n) .cd img {
+  animation-name: spin-reverse;
+}
+
+.cd::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: calc(var(--cdsize) / 8);
+  height: calc(var(--cdsize) / 8);
+  background-color: var(--bg0);
+  border-radius: 50%;
+  border: calc(var(--cdsize) / 12) solid var(--clearplastic);
+  box-shadow: 0 0 calc(var(--cdsize) / 8) #0003 inset;
+}
+
+/* Blog stuff */
+
+.prevnextnav {
+  display: flex;
+  gap: var(--stdpadding);
+}
+.prevlink, .nextlink {
+  padding: var(--stdpadding);
+  flex-grow: 1;
+}
+.prevlink {
+  border-left: var(--stdpadding) solid var(--accent1);
+  margin-left: calc(-1 * var(--stdpadding));;
+}
+.nextlink {
+  border-right: var(--stdpadding) solid var(--accent1);
+  margin-right: calc(-1 * var(--stdpadding));;
+  text-align: right;
+}
+
+
+ul#articles {
+  margin: 0;
+  margin-top: 1rem;
+  display: flex;
+  flex-direction: column;
+  padding-left: 0;
+  list-style: none;
+}
+.blogentry {
+  max-width: 100%;
+  list-style: none;
+  display: inline-block;
+  margin: calc(var(--stdpadding)) 0;
+}
+ul#articles h3 {
+  margin: calc(var(--stdpadding)) 0;
+}
+.blogentry > * {
+  display: block;
+  margin: 0.1rem 0;
+  box-sizing: border-box;
+}
+.blogentry > div :first-child {
+  margin-top: .1rem;
+}
+.blogentry > div :last-child {
+  margin-bottom: .1rem;
+}
+.entrysummary {
+  font-size: .9em;
+}
+.entrytag {
+  font-size: .9em;
+  color: var(--fg2);
+  font-style: italic;
+  display: inline-block;
+  margin-right: 1ch;
+}
+time.entrydate, .entrydate time {
+  font-weight: bold;
+}
+.entrytitle {
+  padding-left: initial;
+  border-left: initial;
+  margin-bottom: .25rem;
 }
 
 /* Funsies */
@@ -340,6 +899,7 @@ hr {
     animation-iteration-count: infinite;
     color: yellow;
     float: right;
+    text-shadow: 0 0 1em black, 0 0 2em black, 0 0 3em black, 0 0 4em black;
 }
 .house {
   color: cornflowerblue;
@@ -353,18 +913,34 @@ hr {
   50.001%, 100% {opacity: 1;}
 }
 @keyframes rainbow-text {
-  100%,0%{color: rgb(255,0,0); text-shadow: 0 0 4px rgb(216, 1, 1);}
-  8%{color: rgb(255,127,0); text-shadow: 0 0 4px rgb(211, 105, 0);}
-  16%{color: rgb(255,255,0); text-shadow: 0 0 4px rgb(214, 214, 0);}
-  25%{color: rgb(127,255,0); text-shadow: 0 0 4px rgb(105, 211, 0);}
-  33%{color: rgb(0,255,0); text-shadow: 0 0 4px rgb(0, 204, 0);}
-  41%{color: rgb(0,255,127); text-shadow: 0 0 4px rgb(0, 209, 105);}
-  50%{color: rgb(0,255,255); text-shadow: 0 0 4px rgb(0, 202, 202);}
-  58%{color: rgb(0,127,255); text-shadow: 0 0 4px rgb(0, 103, 206);}
-  66%{color: rgb(0,0,255); text-shadow: 0 0 4px rgb(0, 0, 206);}
-  75%{color: rgb(127,0,255); text-shadow: 0 0 4px rgb(103, 0, 206);}
-  83%{color: rgb(255,0,255); text-shadow: 0 0 4px rgb(211, 0, 211);}
-  91%{color: rgb(255,0,127); text-shadow: 0 0 4px rgb(211, 0, 105);}
+  100%,0%{color: rgb(255,0,0); text-shadow: 0 0 .25rem rgb(216, 1, 1);}
+  8%{color: rgb(255,127,0); text-shadow: 0 0 .25rem rgb(211, 105, 0);}
+  16%{color: rgb(255,255,0); text-shadow: 0 0 .25rem rgb(214, 214, 0);}
+  25%{color: rgb(127,255,0); text-shadow: 0 0 .25rem rgb(105, 211, 0);}
+  33%{color: rgb(0,255,0); text-shadow: 0 0 .25rem rgb(0, 204, 0);}
+  41%{color: rgb(0,255,127); text-shadow: 0 0 .25rem rgb(0, 209, 105);}
+  50%{color: rgb(0,255,255); text-shadow: 0 0 .25rem rgb(0, 202, 202);}
+  58%{color: rgb(0,127,255); text-shadow: 0 0 .25rem rgb(0, 103, 206);}
+  66%{color: rgb(0,0,255); text-shadow: 0 0 .25rem rgb(0, 0, 206);}
+  75%{color: rgb(127,0,255); text-shadow: 0 0 .25rem rgb(103, 0, 206);}
+  83%{color: rgb(255,0,255); text-shadow: 0 0 .25rem rgb(211, 0, 211);}
+  91%{color: rgb(255,0,127); text-shadow: 0 0 .25rem rgb(211, 0, 105);}
+}
+@keyframes spin {
+    from {
+        transform:rotate(0deg);
+    }
+    to {
+        transform:rotate(360deg);
+    }
+}
+@keyframes spin-reverse {
+    from {
+        transform:rotate(360deg);
+    }
+    to {
+        transform:rotate(0deg);
+    }
 }
 
 /* ads */
@@ -393,129 +969,356 @@ hr {
   }
 }
 
-/* If user is on mobile */
-@media only screen and (hover: none) {
-  header {
-    position: initial;
-    top: initial;
-    left: initial;
-    right: initial;
-    height: initial;
-    transform: initial;
-    width: fit-content;
+/* Responsive Layout */
+
+@media screen and (max-width: calc(92ch + 24rem)) {
+
+  /* Body stuff */
+  main {
+    padding: calc((100vw - var(--bodywidth)) / 4);
+    padding-top: calc(8.5rem + var(--stdpadding) + var(--border-size-y));
+    padding-bottom: calc(var(--stdpadding) * 2);
+    box-sizing: content-box;
+    overflow: hidden;
+  }
+
+  figure, blockquote, section > blockquote, pre, .codetitle, .aside, :not(.commentform-bottom) > .notice {
+    margin: var(--stdpadding) calc(var(--stdpadding) * 2);
+  }
+  @media (max-width: 100vh) {
+    figure, blockquote, section > blockquote, pre, .codetitle, .aside, :not(.commentform-bottom) > .notice {
+      margin: var(--stdpadding) 0;
+    }
   }
-  #header-content {
-    padding-bottom: calc(var(--stdpadding) / 2);
+  .codetitle {
+    margin-bottom: 0;
   }
-  #header-content > * {
-    flex: 1;
+  .gallery {
+    flex-direction: column;
   }
-  #header-content > :last-child {
-    word-break: break-word;
+  .aside-image {
+    height: 7rem;
+  }
+  
+  dl {
+    flex-direction: column;
   }
-  body > h1:first-of-type {
-    margin-top: var(--stdpadding);
-    word-break: break-word;
+  dt, dd {
+    width: 100%;
+    padding: calc(var(--stdpadding) * .5) var(--stdpadding);
   }
-  nav a, nav span {
-    flex-grow: 1;
+  dt {
+    padding-top: var(--stdpadding);
   }
-  nav a, body > a, summary {
-    border-left: 3px solid var(--fontcolor);
-    background-color: var(--blockbg);
-    backdrop-filter: var(--blockbackdrop);
+  dd {
+    padding-bottom: var(--stdpadding);
+    padding-left: calc(var(--stdpadding) * 2);
   }
-  nav a, body > a, nav span {
-    padding: calc(var(--stdpadding) / 2) calc(var(--stdpadding) / 4 * 3);
-    margin: 0 0 calc(var(--stdpadding) / 2) 0;
+  #commentform-top, .commentform-top {
+    flex-direction: column;
   }
-  body > a {
-    margin-left: 0;
-    margin-top: var(--stdpadding);
+  .comment > .gb-head {
+    gap: calc(var(--stdpadding) * 0.4);
+    flex-wrap: wrap;
+    padding: var(--stdpadding);
   }
-  pre > code, .codetitle {
-    border-width: .1rem;
-    width: initial;
+  .gb-head p {
+    flex: initial;
+    margin: 0;
+    text-align: left;
   }
-  @media (max-width: 43rem) {
-    .buttons > * {
-      width: 24%;
+  .gb-head .gb-name {
+    width: 100%;
+  }
+
+  /* Footer stuff */
+  footer {
+    position: initial;
+    filter: drop-shadow(0 calc(0px - var(--border-size-y)) 0 var(--accent2))
+            var(--blockshadow);
+    max-width: 100%;
+  }
+}
+
+@media screen and ((max-width: calc(92ch + 24rem)) or (max-height: 38rem)) {
+
+  /* Header stuff */
+  .headerbar {
+    max-width: 100vw;
+    box-sizing: border-box;
+  }
+  .headerbar > * {
+    width: 100%;
+  }
+  header h1 {
+    display: none;
+  }
+  .headerbar > div {
+    margin-left: calc((var(--stdpadding) * 2) + 3rem);
+  }
+  .headerbar img {
+    font-size: 2rem;
+    font-weight: bold;
+    max-height: 80%;
+    margin-top: 0;
+  }
+  @media (max-width: 100vh) {
+    .headerbar {
+      flex-direction: column;
     }
-    .buttons > a > img {
-      width: 100%;
+  }
+  @media (max-height: 100vw) {
+    .headerbar > div {
+      justify-content: initial;
     }
   }
-  #leftsidebg, #rightsidebg {
-    top: 0; left: 0; right: 0; bottom: 0;
-    filter: brightness(0.3);
-    box-shadow: none;
+
+  header nav {
+    transition: .3s;
+    transform: translateX(-100%);
+    position: fixed;
+    top: 0;
+    padding-top: var(--stdpadding);
+    max-height: 100vh;
+    box-sizing: border-box;
   }
-  tr:hover {
-    background-color: initial;
+  #nav-checkbox-hack:checked ~ nav, nav:has(:focus) {
+    transform: translateX(0);
   }
-  td {
-    display: block;
+  #nav-darkened-background-kludge {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    transform: translateY(-100vh);
+    transition: .3s;
+    background-color: var(--shadow);
+    filter: none;
+    padding: 0;
   }
-  @media (prefers-contrast: more) {
-    #leftsidebg, #rightsidebg {
-      display: none;
-    }
+  :is(#nav-checkbox-hack:checked, nav:has(:focus)) ~ #nav-darkened-background-kludge {
+    transform: translateY(0);
+  }
+  #header-inside-corner-kludge {
+    display: none;
+  }
+  .burgermenu {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 3rem;
+    height: 3rem;
+  }
+  .bm-open {
+    position: fixed;
+    top: var(--stdpadding);
+    left: calc(var(--stdpadding) * 2);
+  }
+  .bm-close {
+    margin-left: calc(var(--stdpadding) * 2);
   }
-}
 
-@media screen and (orientation:portrait) {
-  .gallery {
-    flex-direction: column;
+  .bubblecolumn {
+    display: none;
   }
 }
 
-/* TODO: Light theme 
-@media (prefers-color-scheme: light) {
-  :root {
-    --bgcolor: #dffffa;
-    --fontcolor: #222222;
-    --blockbg: #0001;
-    --blockbghover: #00000022;
-    --stdshadow: #19191977;
+@media screen and (max-height: 38rem) { /* If the viewport isn't tall enough for the nav */
+  header nav ul {
+    display: flex;
+    flex-wrap: wrap;
+  }
+  header nav {
+    max-width: calc(100vw - var(--stdpadding));
+    overflow-y: scroll;
   }
 }
-*/
 
-@media (prefers-contrast: more) {
+/* Light theme stuff not covered by colours */
+
+@media screen and (prefers-color-scheme: light) {
   body {
-    color: white;
-    background-color:#111111;
+    background:
+      url('https://isopod.cool/bg-light-dither.png') repeat center/cover fixed,
+      var(--bg0);
   }
-  #leftsidebg, #rightsidebg {
-    display: none;
-    /*box-shadow: 100vw 0 0 #000000ee inset;*/
+  .headerbar img {
+    filter: invert(1);
+  }
+}
+
+/* Accessibility Stuff */
+/* https://developer.mozilla.org/en-US/docs/Web/CSS/system-color for colours to use */
+
+@media screen and (prefers-contrast: more) {
+  :root {
+    --background: Canvas;
+    --foreground: CanvasText;
+    --accent1: ActiveText; /* I'm more or less just letting the OS/browser pick colours for me here */
+    --accent2: AccentColorText;
+
+    --fg0: var(--foreground);
+    --fg1: var(--foreground);
+    --fg2: var(--foreground);
+    --fg3: var(--foreground);
+
+    --bg0: var(--background);
+    --bg1: var(--background);
+    --bg2: var(--background);
+    --bg3: var(--background);
+  }
+  figure.quote, section > blockquote, figure.media, .aside { /* TODO: replace this nonsense once border-shape drops */
+    filter: drop-shadow(.1rem 0 0 var(--fg0))
+            drop-shadow(0 .1rem 0 var(--fg0))
+            drop-shadow(-.1rem 0 0 var(--fg0))
+            drop-shadow(0 -.1rem 0 var(--fg0));
+    border-left-width: .4rem;
+  }
+  details {
+    border-top: .1rem solid var(--fg0);
+    border-bottom: .1rem solid var(--fg0);
+    border-right: .1rem solid var(--fg0);
+    border-left-width: .4rem;
+  }
+  details:open summary {
+    border-bottom: .1rem solid var(--fg0);
+    margin-right: calc(var(--stdpadding) * -1);
+  }
+  details:open {
+    padding-right: var(--stdpadding);
+  }
+  code {
+    border: .1rem solid var(--fg0);
+  }
+  pre code {
+    border: none;
+    border-top: .1rem solid var(--accent1);
+  }
+  pre {
+    filter: drop-shadow(.1rem 0 0 var(--fg0))
+            drop-shadow(0 .1rem 0 var(--fg0));
+  }
+  .codetitle {
+    filter: drop-shadow(.1rem 0 0 var(--fg0))
+            drop-shadow(0 -.1rem 0 var(--fg0));
+  }
+  a:hover {
+    background-color: AccentColor;
+  }
+  :is(dt, dd):nth-of-type(2n) {
+    border: .1rem solid var(--fg0);
+  }
+  input[type="text"], textarea {
+    border-left-width: .4rem;
+  }
+  input[type="text"] {
+    border-bottom: .1rem solid var(--fg0);
+    border-right: .1rem solid var(--fg0);
+  }
+  textarea {
+    border-top: .1rem solid var(--fg0);
+    border-right: .1rem solid var(--fg0);
+    border-bottom-color: var(--fg0);
   }
-  a {
-    color: #00ffd5;
+  .notice {
+    border: .1rem solid var(--message-blue);
+  }
+  .error {
+    border: .1rem solid var(--message-red);
+  }
+  .success {
+    border: .1rem solid var(--message-green);
+  }
+  .warning {
+    border: .1rem solid var(--message-yellow);
+  }
+  .comment {
+    border-bottom: .1rem solid var(--fg1);
+    border-top: .1rem solid var(--fg1);
+  }
+  .comment > div {
+    border-right: .1rem solid var(--fg1);
+    border-left-width: .4rem;
+  }
+
+  .comment > .gb-reply {
+    border-left: .1rem solid var(--fg1);
+    border-right-width: .4rem;
+  }
+
+  .commentform-field label {
+    border-left-width: .4rem;
+    border-top: .1rem solid var(--fg0);
+    border-right: .1rem solid var(--fg0);
+  }
+  .commentform-field textarea ~ label {
+    border-top: none;
+    border-bottom: .1rem solid var(--fg0);
+  }
+
+
+  .gb-reply > p { /* "Reply:" label */
+    
+    border-right: .1rem solid var(--accent2);
+  }
+  pre, .codetitle, .notice {
+    border-left-width: .4rem;
+  }
+  @media (max-width: calc(92ch + 24rem)) {
+    dt:nth-of-type(2n) {
+      border-bottom: none;
+    }
+    dd:nth-of-type(2n) {
+      border-top: none;
+    }
+  }
+  @media (min-width: calc(92ch + 24rem)) {
+    dt:nth-of-type(2n) {
+      border-right: none;
+    }
+    dd:nth-of-type(2n) {
+      border-left: none;
+    }
   }
 }
 
-/* TODO: Low contrast theme */
-/*@media (prefers-contrast: less) {
+@media screen and (prefers-contrast: less) { /* I don't know how to trigger this value in the OS nor do I know how I'm supposed to use it. Doing this until I find a better solution. */
+  :root {
+    filter: contrast(.7);
+  }
 
-}*/
+  .prefers-contrast-less-message {
+    display: initial;
+  }
+}
 
-@media (prefers-reduced-motion) {
-  * {
-    transition-duration: 0s !important;
+@media screen and (forced-colors: active) {
+  header nav, footer {
+    background: var(--bg0) !important; /* Forced colors mode deletes backgrounds on anything with a background-image set, like my janky beveled corners solution. This is to restore them, and won't be necessary once border-shape drops */
+  }
+  figure.quote, section > blockquote, figure.media, pre, .codetitle { /* TODO: once border-shape drops, this is about what the corresponding styling in HC mode should be */
+    border: .1rem solid var(--fg0);
+    border-left: var(--stdaccentborder);
+    border-left-width: .4em;
+    filter: none;
   }
 }
 
-@media print {
-  body {
-    text-shadow: none;
-    color: black;
+@media screen and (prefers-reduced-motion: reduce) {
+  html:focus-within {
+   scroll-behavior: auto;
   }
-  h1 {
-    margin-top: initial;
+  
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
   }
-  nav, form, #leftsidebg, #rightsidebg {
+  .bubblecolumn {
     display: none;
   }
-  
 }
\ No newline at end of file
-- 
cgit v1.2.3