fix some dark mode logic glitches & random clean up

assets/js/dark-mode.js

@@ -1,56 +1,54 @@
-/* jshint esversion: 6, indent: 2, browser: true */
+/* jshint esversion: 6, indent: 2, browser: true, quotmark: single */
 
 // inspired by https://codepen.io/kevinpowell/pen/EMdjOV
 
 // lightbulb toggle re-appears now that we know user has JS enabled
 const toggle = document.querySelector('button#dark-mode-toggle');
-toggle.style.visibility = "visible";
+toggle.style.visibility = 'visible';
 
 // check for preset `dark_mode_pref` in localStorage
 let pref = localStorage.getItem('dark_mode_pref');
 
-// check for OS dark mode setting
-// https://gist.github.com/Gioni06/eb5b28343bcf5793a70f6703004cf333#file-darkmode-js-L47
-const isSystemDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
-const isSystemLight = window.matchMedia("(prefers-color-scheme: light)").matches;
+// keep track of current state, light by default
+let activated = false;
 
 const activateDarkMode = function() {
   document.body.classList.remove('light');
   document.body.classList.add('dark');
+  activated = true;
 };
 
 const activateLightMode = function() {
   document.body.classList.remove('dark');
   document.body.classList.add('light');
+  activated = false;
 };
 
 // if user already explicitly enabled dark mode in the past, turn it back on.
-if (pref === 'true') {
-  activateDarkMode();
-}
+// light is default, so no need to do anything otherwise.
+if (pref === 'true') activateDarkMode();
 
 // user has never clicked the button, so go by their OS preference until/if they do so
-if (pref !== "true" && pref !== "false") {
-  if (isSystemDark) activateDarkMode();
-  if (isSystemLight) activateLightMode();
+if (!pref) {
+  // check for OS dark mode setting and switch accordingly
+  // https://gist.github.com/Gioni06/eb5b28343bcf5793a70f6703004cf333#file-darkmode-js-L47
+  if (window.matchMedia('(prefers-color-scheme: dark)').matches) activateDarkMode();
 
   // real-time switching if supported by OS/browser
-  // TODO: these keep listening even when the parent condition becomes false (until refresh or new page)
-  window.matchMedia("(prefers-color-scheme: dark)").addListener(e => e.matches && activateDarkMode());
-  window.matchMedia("(prefers-color-scheme: light)").addListener(e => e.matches && activateLightMode());
+  // TODO: stop listening when the parent condition becomes false,
+  //       right now these keep listening even if pref is set.
+  window.matchMedia('(prefers-color-scheme: dark)').addListener(e => e.matches && activateDarkMode());
+  window.matchMedia('(prefers-color-scheme: light)').addListener(e => e.matches && activateLightMode());
 }
 
-// handle toggle click
-toggle.addEventListener("click", function() {
-  // get current preference, if there is one
-  let pref = localStorage.getItem("dark_mode_pref");
-
+// handle lightbulb click
+toggle.addEventListener('click', function() {
   // switch to the opposite theme & save preference in local storage
-  if (pref !== "true") {
+  if (!activated) {
     activateDarkMode();
-    localStorage.setItem("dark_mode_pref", "true");
+    localStorage.setItem('dark_mode_pref', 'true');
   } else {
     activateLightMode();
-    localStorage.setItem("dark_mode_pref", "false");
+    localStorage.setItem('dark_mode_pref', 'false');
   }
 });

assets/sass/abstracts/_settings.scss

@@ -17,7 +17,7 @@ $system-fonts-monospace: "SFMono-Regular", "Consolas", "Liberation Mono",
 // stylelint-enable indentation
 
 // Width at which to switch to mobile styles
-$responsive-width: 780px;
+$responsive-width: 820px;
 
 // Fancy link underline settings
 $link-underline-opacity: 40%;

assets/sass/components/_header.scss

@@ -144,7 +144,7 @@ header {
         font-size: 1.7em;
 
         li {
-          margin-left: 0.85em;
+          margin-left: 1em;
 
           a {
             span.icon {

assets/sass/pages/_single.scss

@@ -31,6 +31,7 @@ main#single {
     font-size: 2.2em;
     line-height: 1.3;
     font-weight: 700;
+    letter-spacing: -0.005em;
 
     a {
       color: inherit;