feat: a terrifying quantity of rework

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);
 }