feat: finish breaking up the stylesheets

sass/88x31.scss

@@ -0,0 +1,17 @@
+
+.netscape-container img {
+  width: 88px;
+  height: 31px;
+}
+
+.button-container {
+  width: fit-content;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-flow: row wrap;
+  gap: .5em;
+  img {
+    align-self: center;
+  }
+}

sass/code.scss

@@ -0,0 +1,10 @@
+code {
+  padding: .5pt 5pt;
+  border: 2px transparent solid;
+}
+
+code:has(pre) {
+  display: block;
+  width: fit-content;
+  margin: 1em 0;
+}

sass/coloring.scss

@@ -75,3 +75,26 @@ $themes: (
   }
 }
 
+html {
+  @include set-colors;
+}
+
+@media (prefers-color-scheme: dark) {
+  html {
+  @include set-colors(dark);
+  }
+}
+
+@media (prefers-color-scheme: light) {
+  html {
+    @include set-colors(light);
+  }
+}
+
+html:has(#color-scheme-dark:checked) {
+  @include set-colors(dark);
+}
+
+html:has(#color-scheme-light:checked) {
+  @include set-colors(light);
+}

sass/footer.scss

@@ -0,0 +1,18 @@
+@use "sticky";
+
+/* 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 {
+    list-style-type: none;
+    padding: 0;
+    margin: 0;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    li {
+        padding: 0;
+        margin: 0;
+        &:nth-child(2n) {
+            text-align: right;
+        }
+    }
+}

sass/header.scss

@@ -0,0 +1,15 @@
+header nav ul {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5em;
+  li {
+    display: inline-block;
+    padding: 0;
+    margin: 0;
+    flex-grow: 1;
+    text-align: center;
+  }
+}

sass/helper.scss

@@ -0,0 +1,4 @@
+ul.two {
+  column-count: 2;
+}
+

sass/images.scss

@@ -0,0 +1,23 @@
+img {
+    /* Make sure that the images do not overflow the body */
+    max-width: 100%;
+    /* Make sure that the images are not too tall as to be annoying */
+    max-height: 50ch;
+}
+
+#gallery {
+  ul {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    column-count: 2;
+  }
+}
+
+a:has(img) {
+  border-bottom: none !important;
+  padding: 0.02rem;
+  img {
+    border: 0.01em transparent solid;
+  }
+}

sass/nonoscript.scss

@@ -0,0 +1,4 @@
+/* A kindness to those of you who don't use Javascript */
+.nonoscript {
+  display: none;
+}

sass/sticky.scss

@@ -0,0 +1,28 @@
+/*
+  https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Sticky_footers
+*/
+
+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;
+  }
+}

sass/stylesheet.scss

@@ -4,57 +4,30 @@
 
 @use "headings";
 @use "coloring";
-@use "sass:map";
+@use "code";
+@use "footer";
+@use "header";
+@use "images";
+@use "nonoscript";
+@use "helper";
+@use "88x31" as netscape;
 
 * {
   box-sizing: border-box;
 }
 
-html {
+/* For the subculture "code" dropdowns */
 summary > h3 {
   display: inline-block;
 }
-  code {
+
-    padding: .5pt 5pt;
+/* Otherwise the border overflows the content */
-    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 {
     /* Make the body a 80 character wide container */
@@ -67,49 +40,6 @@ body {
     padding: 1em;
 }
 
-/* A kindness to those of you who don't use Javascript */
-.nonoscript {
-  display: none;
-}
-
-#gallery {
-  ul {
-    list-style-type: none;
-    margin: 0;
-    padding: 0;
-    column-count: 2;
-    li {
-    }
-  }
-}
-
-img {
-    /* Make sure that the images do not overflow the body */
-    max-width: 100%;
-    /* Make sure that the images are not too tall as to be annoying */
-    max-height: 50ch;
-}
-
-header nav ul {
-  list-style-type: none;
-  margin: 0;
-  padding: 0;
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.5em;
-  li {
-    display: inline-block;
-    padding: 0;
-    margin: 0;
-    flex-grow: 1;
-    text-align: center;
-  }
-}
-
-ul.two {
-  column-count: 2;
-}
-
 // 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;
@@ -118,65 +48,3 @@ a, a:link, a:visited {
     border-bottom: 0.01em transparent solid;
   }
 }
-
-a:has(img) {
-  border-bottom: none !important;
-  padding: 0.02rem;
-  img {
-    border: 0.01em transparent solid;
-  }
-}
-
-.netscape-container img {
-  width: 88px;
-  height: 31px;
-}
-
-.button-container {
-  width: fit-content;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-flow: row wrap;
-  gap: .5em;
-  img {
-    align-self: center;
-  }
-}
-
-/* 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 {
-    list-style-type: none;
-    padding: 0;
-    margin: 0;
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    li {
-        padding: 0;
-        margin: 0;
-        &:nth-child(2n) {
-            text-align: right;
-        }
-    }
-}
-
-@media (prefers-color-scheme: dark) {
-  html {
-  @include coloring.set-colors(dark);
-  }
-}
-
-@media (prefers-color-scheme: light) {
-  html {
-    @include coloring.set-colors(light);
-  }
-}
-
-html:has(#color-scheme-dark:checked) {
-  @include coloring.set-colors(dark);
-}
-
-html:has(#color-scheme-light:checked) {
-  @include coloring.set-colors(light);
-}