diff --git a/sass/stylesheet.css b/sass/stylesheet.css
index 627224e..b220310 100644
--- a/sass/stylesheet.css
+++ b/sass/stylesheet.css
@@ -1,8 +1,14 @@
+/*
+  Made with love by @kittywitch ^_^
+*/
 * {
   box-sizing: border-box; }
 
 html {
-  font-family: "Monaspace Krypton", monospace; }
+  color: #ddd;
+  background: #141414; }
+  html h1, html h2, html h3 {
+    color: #eee; }
 
 body {
   /* Make the body a 80 character wide container */
@@ -14,6 +20,10 @@ body {
   /* Make sure the edge of the body has a gap for mobile */
   padding: 1em; }
 
+/* A kindness to those of you who don't use Javascript */
+.nonoscript {
+  display: none; }
+
 #gallery ul {
   list-style-type: none;
   margin: 0;
@@ -67,14 +77,11 @@ footer nav ul {
   list-style-type: none;
   padding: 0;
   margin: 0;
-  display: flex;
-  flex-wrap: wrap;
-  column-count: 2;
-  gap: 0.5em 0.25em; }
+  display: grid;
+  grid-template-columns: 1fr 1fr; }
   footer nav ul li {
     padding: 0;
-    margin: 0;
-    flex-grow: 1; }
+    margin: 0; }
     footer nav ul li:nth-child(2n) {
       text-align: right; }
 
@@ -82,15 +89,15 @@ footer nav ul {
   html {
     color: #ddd;
     background: #141414; }
-  h1, h2, h3 {
-    color: #eee; } }
+    html h1, html h2, html h3 {
+      color: #eee; } }
 
 @media (prefers-color-scheme: light) {
   html {
     color: #333;
     background: #fcfcfc; }
-  h1, h2, h3 {
-    color: #111; } }
+    html h1, html h2, html h3 {
+      color: #111; } }
 
 html:has(#color-scheme-dark:checked) {
   color: #ddd;
diff --git a/templates/base-page-title.html b/templates/base-page-title.html
deleted file mode 100644
index 49f1fab..0000000
--- a/templates/base-page-title.html
+++ /dev/null
@@ -1,24 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="utf-8">
-  <title>{{ page.title }}  - {{ config.extra.site_title }}</title>
-  {% include "head.html" %}
-</head>
-
-<body>
-    <div>
-        <header>
-          {% include "header.html" %}
-        </header>
-        <main>
-          {% block content %} {% endblock content %}
-        </main>
-        <footer>
-          {% include "footer.html" %}
-        </footer>
-      </div>
-</body>
-
-</html>
diff --git a/templates/base-section-title.html b/templates/base-section-title.html
deleted file mode 100644
index 9695fca..0000000
--- a/templates/base-section-title.html
+++ /dev/null
@@ -1,24 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="utf-8">
-  <title>{{ section.title }}  - {{ config.extra.site_title }}</title>
-  {% include "head.html" %}
-</head>
-
-<body>
-    <div>
-        <header>
-          {% include "header.html" %}
-        </header>
-        <main>
-          {% block content %} {% endblock content %}
-        </main>
-        <footer>
-          {% include "footer.html" %}
-        </footer>
-      </div>
-</body>
-
-</html>
diff --git a/templates/base.html b/templates/base.html
index 055434d..521c47d 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -1,24 +1,35 @@
 <!DOCTYPE html>
+
+{% include "love.html" %}
+
 <html lang="en">
 
-<head>
-  <meta charset="utf-8">
-  <title>{{ config.extra.site_title }}</title>
-  {% include "head.html" %}
-</head>
+  <head>
+    <meta charset="utf-8">
+    <title>
+      {% if section is defined and section.title is defined and section.title is string %}
+        {{ section.title }} -
+        {% elif page is defined and page.title is defined and page.title is string %}
+        {{ page.title }} -
+      {% endif %}
+      {{ config.extra.site_title }}
+    </title>
+    {% include "head.html" %}
+  </head>
 
-<body>
+  <body>
     <div>
-        <header>
-          {% include "header.html" %}
-        </header>
-        <main>
-          {% block content %} {% endblock content %}
-        </main>
-        <footer>
-          {% include "footer.html" %}
-        </footer>
-      </div>
-</body>
+      <header>
+        {% include "header.html" %}
+      </header>
+      <main>
+        {% block content %} {% endblock content %}
+      </main>
+      <footer>
+        {% include "footer.html" %}
+      </footer>
+    </div>
+    {% include "nonoscript.html" %}
+  </body>
 
 </html>
diff --git a/templates/blog.html b/templates/blog.html
index 3635866..90b3a03 100644
--- a/templates/blog.html
+++ b/templates/blog.html
@@ -1,4 +1,4 @@
-{% extends "base-section-title.html" %}
+{% extends "base.html" %}
 
 {% block content %}
 <section id="blogposts">
diff --git a/templates/colorscheme.html b/templates/colorscheme.html
new file mode 100644
index 0000000..e8ac7f2
--- /dev/null
+++ b/templates/colorscheme.html
@@ -0,0 +1,74 @@
+<!-- Component for persistent user color scheme selection -->
+
+<!--
+  Motivation:
+    * Allow for auto-detection via prefers-color-scheme
+    * Allow for providing a color scheme by user preference anyway
+    * Fail (relatively) quietly without Javascript
+
+  Other parts of the implementation:
+  ```scss
+    /* Ideally, you use CSS/SCSS variables for colouring here */
+    html {
+      /* Choose one to default to; light or dark and implement it here */
+    }
+    @media (prefers-color-scheme: dark) {
+      html {
+        /* Implement dark with color, background, maybe a separate thing for headings if you feel spicy */
+      }
+    }
+    @media (prefers-color-scheme: light) {
+      html {
+        /* Implement light with color, background, maybe a separate thing for headings if you feel spicy */
+      }
+    }
+    html:has(#color-scheme-dark:checked) {
+      /* Implement dark with color, background, maybe a separate thing for headings if you feel spicy */
+    }
+    html:has(#color-scheme-light:checked) {
+      /* Implement light with color, background, maybe a separate thing for headings if you feel spicy */
+    }
+  ```
+-->
+
+<fieldset class="nonoscript">
+  <legend>Site color scheme</legend>
+
+  <input name="color-scheme" type="radio" id="color-scheme-dark" value="dark">
+  <label for="color-scheme-dark">Dark</label>
+  <input name="color-scheme" type="radio" id="color-scheme-light" value="light">
+  <label for="color-scheme-light">Light</label>
+  <button
+    id="clear-color-scheme"
+    type="button"
+    title="Will also revert the page back to the color scheme preference as provided by the system and browser."
+  >
+    Clear preference
+  </button>
+</fieldset>
+
+<noscript>Persistence of user-selected color scheme is not possible without Javascript, however automatic detection from CSS will still work.</noscript>
+
+<script>
+  var radios = document.getElementsByName("color-scheme");
+  var prev = localStorage.getItem("color-scheme");
+  for (var i = 0; i < radios.length; i++) {
+    var _this = radios[i];
+    _this.checked = _this.value == prev;
+    radios[i].addEventListener("change", function() {
+      if (this.value !== prev) {
+        prev = this.value;
+        localStorage.setItem("color-scheme", this.value);
+      }
+    });
+  }
+  var button = document.getElementById("clear-color-scheme");
+  button.addEventListener("click", function() {
+    for (var i = 0; i < radios.length; i++) {
+      var _this = radios[i];
+      _this.checked = false;
+      localStorage.removeItem("color-scheme");
+    }
+  });
+</script>
+<!-- End of component for color scheme selection -->
diff --git a/templates/header.html b/templates/header.html
index 67640ed..37d69f8 100644
--- a/templates/header.html
+++ b/templates/header.html
@@ -1,7 +1,4 @@
-<input name="color-scheme" type="radio" id="color-scheme-dark" value="dark">
-<label for="color-scheme-dark">Dark</label>
-<input name="color-scheme" type="radio" id="color-scheme-light" value="light">
-<label for="color-scheme-light">Light</label>
+{% include "colorscheme.html" %}
 
 <h1><a href="/">{{ config.extra.site_title }}</h1>
 <nav>
diff --git a/templates/index.html b/templates/index.html
index 035f8bb..aa4af7e 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -1,16 +1,6 @@
 {% extends "base.html" %}
 
 {% block content %}
-<section id="todo">
-  <h2>Remaining website to-dos</h2>
-
-  <ul>
-    <li>Add theme persistency javascript with unset button</li>
-    <li>Hide theme buttons if javascript is disabled; rely solely on preferred color scheme</li>
-    <li>Make light and dark color schemes better and more interesting</li>
-  </ul>
-</section>
-
 <section id="about">
   <h2>About</h2>
 
@@ -21,23 +11,29 @@
   <h2>Interests</h2>
 
   <ul>
-    <li>Software Development</li>
-    <li>Video game modding</li>
-    <li>System Administration</li>
-    <li>Development Operations</li>
-    <li>Digital Infrastructure</li>
     <li>Hobbyist Electronics</li>
-    <li>Smart Home Projects</li>
     <li>Software-defined Radio</li>
     <li>Amateur Radio (not yet licensed!)</li>
     <li>Firearms</li>
     <li>Anime and Manga</li>
-    <li>Cyber Security</li>
     <li>3D Printing</li>
     <li>Mechanical Keyboards</li>
   </ul>
 </section>
 
+<section id="tech-interests">
+  <h2>Tech Interests</h2>
+
+  <ul>
+    <li>Software Development</li>
+    <li>Video Game Modding</li>
+    <li>System Administration</li>
+    <li>DevSecOps + GitOps</li>
+    <li>Smart Home</li>
+    <li>Cyber Security</li>
+  </ul>
+</section>
+
 <section id="projects">
   <h2>Projects</h2>
 
diff --git a/templates/love.html b/templates/love.html
new file mode 100644
index 0000000..e5888bc
--- /dev/null
+++ b/templates/love.html
@@ -0,0 +1,3 @@
+<!--
+  Made with love by @kittywitch ^_^
+-->
diff --git a/templates/nonoscript.html b/templates/nonoscript.html
new file mode 100644
index 0000000..55a6ebd
--- /dev/null
+++ b/templates/nonoscript.html
@@ -0,0 +1,30 @@
+<!-- Component for no-noscript; Showing an item only if you have Javascript -->
+
+<!--
+  Motivation:
+    * Provide things with script tag related behaviour only if the user has Javascript
+    * If the user does not have Javascript, just don't display those elements to them
+
+  Other parts of the implementation:
+    * Components with scripted behaviour should be given the "nonoscript" class.
+
+  ```scss
+  /* A kindness to those of you who don't use Javascript */
+  .nonoscript {
+    display: none;
+  }
+  ```
+-->
+
+<script>
+  function nonoscriptImplementer() {
+    var nonoscript = document.getElementsByClassName("nonoscript");
+    console.log(nonoscript);
+    for (let item of nonoscript) {
+      console.log("meep!");
+      item.classList.remove("nonoscript");
+    }
+  }
+  window.onload = nonoscriptImplementer();
+</script>
+<!-- End of component for no-noscript -->
diff --git a/templates/page.html b/templates/page.html
index cfb5f0d..c127084 100644
--- a/templates/page.html
+++ b/templates/page.html
@@ -1,4 +1,4 @@
-{% extends "base-page-title.html" %}
+{% extends "base.html" %}
 
 {% block content %}
 <h1 class="title">
