feat: a terrifying quantity of rework

sass/coloring.scss

@@ -0,0 +1,77 @@
+@use "sass:map";
+@use "headings";
+
+// Let's not destroy people's eyes unless they want that
+$theme: dark !default;
+
+$themes: (
+  light: (
+    bg: #fcfcfc,
+    fg: #333,
+    border: #333,
+    code: #eee,
+    heading: #111,
+    a-link: #16b1bd,
+    a-hover: #37DCE8,
+    a-visited: #3784e8,
+  ),
+  dark: (
+    bg: #141414,
+    fg: #ddd,
+    border: #ddd,
+    code: #282828,
+    heading: #eee,
+    a-link: #16b1bd,
+    a-hover: #37DCE8,
+    a-visited: #3784e8,
+  )
+);
+
+@function color($name, $theme: $theme) {
+  @return map-get(
+    map-get($themes, $theme),
+    $name
+  );
+}
+
+@mixin link_state($name, $theme: $theme) {
+  $color: color("a-#{$name}", $theme);
+  @if $name == "link" {
+    a, a:#{$name} {
+      color: $color;
+    }
+  } else {
+    a:#{$name} {
+      color: $color;
+    }
+  }
+  a:#{$name} {
+    @include headings.headings {
+      color: $color;
+      @if $name == "hover" {
+        border-bottom-color: $color;
+      }
+    }
+  }
+}
+
+@mixin set-colors($theme: $theme) {
+  color: color(fg, $theme);
+  background: color(bg, $theme);
+  @include headings.headings {
+    color: color(heading, $theme);
+  }
+  code {
+    background: color(code, $theme);
+    border-color: color(border, $theme);
+  }
+  $link_states: "link", "visited", "hover";
+  @each $name in $link_states {
+    @include link_state($name, $theme);
+  }
+
+  a:hover:has(img) img {
+    border-color: color(a-hover, $theme);
+  }
+}
+

sass/headings.scss

@@ -0,0 +1,5 @@
+@mixin headings {
+  h1, h2, h3, h4, h5, h6 {
+    @content;
+  }
+}

sass/stylesheet.scss

@@ -2,41 +2,58 @@
   Made with love by @kittywitch ^_^
 */
 
-$light-bg: #fcfcfc;
-$light-fg: #333;
-$light-code: #eee;
-$light-heading: #111;
-$dark-bg: #141414;
-$dark-fg: #ddd;
-$dark-code: #282828;
-$dark-heading: #eee;
-$link-base: #16b1bd;
-$link-hover: #37DCE8;
-$link-visited: #3784e8;
+@use "headings";
+@use "coloring";
+@use "sass:map";
 
 * {
   box-sizing: border-box;
 }
 
 html {
-  color: $dark-fg;
-  background: $dark-bg;
-  h1, h2, h3 {
-    color: $dark-heading;
-  }
   summary > h3 {
     display: inline-block;
   }
   code {
-    background: $dark-code;
     padding: .5pt 5pt;
-    border: $dark-fg 2px solid;
+    border: coloring.color(border) 2px solid;
   }
   code:has(pre) {
     display: block;
     width: fit-content;
     margin: 1em 0;
   }
+  a {
+    @include headings.headings {
+      width: fit-content;
+    }
+  }
+  @include coloring.set-colors;
+}
+
+html, body {
+  height: 100vh;
+}
+
+html, body, .wrapper {
+  min-height: 100%;
+}
+
+.wrapper {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-areas: "header" "main" "footer";
+  grid-template-rows: auto 1fr auto;
+  header {
+    grid-area: header;
+  }
+  main {
+    grid-area: main;
+    display: block;
+  }
+  footer {
+    grid-area: footer;
+  }
 }
 
 body {
@@ -62,8 +79,6 @@ body {
     padding: 0;
     column-count: 2;
     li {
-      img {
-      }
     }
   }
 }
@@ -95,14 +110,21 @@ ul.two {
   column-count: 2;
 }
 
-a, a:link {
+// Set the border to exist before colouration on hover so that it doesn't resize the element
+a, a:link, a:visited {
   text-decoration: none;
-  color: $link-base;
+  border-bottom: 0.01em transparent solid;
+  @include headings.headings {
+    border-bottom: 0.01em transparent solid;
+  }
 }
 
-a:visited {
-  text-decoration: none;
-  color: $link-visited;
+a:has(img) {
+  border-bottom: none !important;
+  padding: 0.02rem;
+  img {
+    border: 0.01em transparent solid;
+  }
 }
 
 .netscape-container img {
@@ -122,20 +144,6 @@ a:visited {
   }
 }
 
-a:hover {
-  text-decoration: none;
-  color: $link-hover;
-  border-bottom: 0.01rem $link-hover solid;
-}
-
-a:hover:has(img) {
-  border: none;
-  padding: 0.02rem;
-  img {
-    border: 0.01rem $link-hover solid;
-  }
-}
-
 /* We want the footer to be like two columns, where the right columns are also right-aligned and the columns grow to share the space sanely. */
 
 footer nav ul {
@@ -155,52 +163,20 @@ footer nav ul {
 
 @media (prefers-color-scheme: dark) {
   html {
-    color: $dark-fg;
-    background: $dark-bg;
-    h1, h2, h3 {
-      color: $dark-heading;
-    }
-    code {
-      background: $dark-code;
-      border: $dark-fg 2px solid;
-    }
+  @include coloring.set-colors(dark);
   }
 }
 
 @media (prefers-color-scheme: light) {
   html {
-    color: $light-fg;
-    background: $light-bg;
-    h1, h2, h3 {
-      color: $light-heading;
-    }
-    code {
-      background: $light-code;
-      border: $light-fg 2px solid;
-    }
+    @include coloring.set-colors(light);
   }
 }
 
 html:has(#color-scheme-dark:checked) {
-  color: $dark-fg;
-  background: $dark-bg;
-  h1, h2, h3 {
-    color: $dark-heading;
-  }
-  code {
-    background: $dark-code;
-    border: $dark-fg 2px solid;
-  }
+  @include coloring.set-colors(dark);
 }
 
 html:has(#color-scheme-light:checked) {
-  color: $light-fg;
-  background: $light-bg;
-  h1, h2, h3 {
-    color: $light-heading;
-  }
-  code {
-    background: $light-code;
-    border: $light-fg 2px solid;
-  }
+  @include coloring.set-colors(light);
 }