dark mode 😎 (#112)

* prepare dark mode stuffs

* themed all global colors

* store preference in local storage

* toggle styling

* lightbulb position

* minify bundled script with uglify-js instead of hugo

* detect whether user has an OS-wide dark mode preference and use that by default

* two different colors for each homepage link

* inline bulb SVGs into stylesheet

* fingerprint and cache styles for a year

* fix lightbulb positioning with weird magic numbers, will come back to that

* themed syntax highlighting

* use terser instead of uglify-js (b/c of ES6)

.percy.yml

@@ -10,10 +10,10 @@ snapshot:
       display: none;
     }
     div.highlight {
-      border: 0;  /* no clue why this bugs out... */
+      border: 0 !important;  /* no clue why this bugs out... */
     }
     .wave, .beat {
-      animation: none;
+      animation: none !important;
     }
 static-snapshots:
   path: public/

.stylelintrc

@@ -6,7 +6,7 @@
     "function-parentheses-space-inside": null,
     "function-url-quotes": null,
     "indentation": [ 2, { "severity": "warning" } ],
-    "max-nesting-depth": 5,
+    "max-nesting-depth": 6,
     "number-no-trailing-zeros": null,
     "order/properties-alphabetical-order": null,
     "rule-empty-line-before": null,

assets/js/dark-mode.js

@@ -0,0 +1,61 @@
+/* jshint esversion: 6, indent: 2, browser: true */
+
+// 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";
+
+// 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, no matter how we get there...
+let currentlyDark = false;
+
+const activateDarkMode = function() {
+  document.body.classList.remove('light');
+  document.body.classList.add('dark');
+  currentlyDark = true;
+};
+
+const activateLightMode = function() {
+  document.body.classList.remove('dark');
+  document.body.classList.add('light');
+  currentlyDark = false;
+};
+
+// if user already explicitly enabled dark mode in the past, turn it back on.
+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();
+
+  // 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());
+}
+
+// handle toggle click
+toggle.addEventListener("click", function() {
+  // get current preference, if there is one
+  let pref = localStorage.getItem("dark_mode_pref");
+
+  // switch to the opposite theme & save preference in local storage
+  if (pref !== "true") {
+    activateDarkMode();
+    localStorage.setItem("dark_mode_pref", "true");
+  } else {
+    activateLightMode();
+    localStorage.setItem("dark_mode_pref", "false");
+  }
+});

assets/sass/abstracts/_functions.scss

@@ -6,10 +6,13 @@
   // Calculate lighter underline color compared to text color by
   // mix()'ing with background (#fff) to give the impression of
   // opacity but with MUCH better compatibility.
-  $color-opaque: mix($color, $color-background, $link-underline-opacity);
+  $color-opaque-hex: mix($color, $link-opacity-color, $link-underline-opacity);
+
+  // Less compatible but better for light/dark mode switching.
+  $color-opaque-alpha: rgba($color, $link-underline-opacity / 100%);
 
   // Return non-gradient linear-gradient():
-  @return linear-gradient($color-opaque, $color-opaque);
+  @return linear-gradient($color-opaque-alpha, $color-opaque-alpha);
 }
 
 // Web fonts (see components/_fonts.scss)

assets/sass/abstracts/_themes.scss

@@ -0,0 +1,118 @@
+@charset "UTF-8";
+
+// Dark & Light Themes
+$themes: (
+  light: (
+    color-background:   #ffffff,
+    color-text:         #202020,
+    color-medium-dark:  #494949,
+    color-medium:       #5e5e5e,
+    color-medium-light: #757575,
+    color-light:        #d2d2d2,
+    color-kinda-light:  #e3e3e3,
+    color-super-light:  #f4f4f4,
+    color-super-duper-light: #fbfbfb,
+    color-links:        #0e6dc2,
+    syntax-k:           #0e6dc2,
+    syntax-n:           #111111,
+    syntax-na:          #337a15,
+    syntax-err:         #d43d2e,
+    syntax-l:           #8d4eff,
+    syntax-ld:          #bd5500,
+    syntax-c:           #6b6859,
+    syntax-lnt:         #999999
+  ),
+  dark: (
+    color-background:   #292929,
+    color-text:         #efefef,
+    color-medium-dark:  #cfcfcf,
+    color-medium:       #b1b1b1,
+    color-medium-light: #929292,
+    color-light:        #646464,
+    color-kinda-light:  #535353,
+    color-super-light:  #272727,
+    color-super-duper-light: #1f1f1f,
+    color-links:        #85baea,
+    syntax-k:           #3b9dd2,
+    syntax-n:           #cfcfcf,
+    syntax-na:          #78df55,
+    syntax-err:         #f95757,
+    syntax-l:           #d588fb,
+    syntax-ld:          #fd992a,
+    syntax-c:           #929292,
+    syntax-lnt:         #b1b1b1
+  )
+);
+
+$color-light-background: #fbfbfb;
+$color-dark-background: #1f1f1f;
+
+// For nifty color swapping on svg logo hover in components/_header.scss
+$color-logo1: #6fbc4e;
+$color-logo2: #ffb900;
+$color-logo3: #009cdf;
+
+// Colorful Homepage
+$colors-home:(
+  boston:     (light: #fb4d42, dark: #ff5146),
+  javascript: (light: #f48024, dark: #e18431),
+  node:       (light: #6fbc4e, dark: #84d95f),
+  golang:     (light: #00acd7, dark: #2ad1fb),
+  react:      (light: #4fb3cd, dark: #6fcbe3),
+  angular:    (light: #c3002f, dark: #f95757),
+  php:        (light: #8892bf, dark: #a4afe3),
+  ruby:       (light: #d34135, dark: #f95a4d),
+  python:     (light: #fea500, dark: #ffbb3c),
+  java:       (light: #ab6311, dark: #e86a2c),
+  infosec:    (light: #00b81a, dark: #57f06d),
+  server:     (light: #0098ec, dark: #43b9fb),
+  devops:     (light: #ff6200, dark: #f46c16),
+  containers: (light: #c48f49, dark: #ca9249),
+  y2k:        (light: #4169e1, dark: #8ca9ff),
+  jbb:        (light: #9932cc, dark: #d588fb),
+  birthday:   (light: #e40088, dark: #fd40b1),
+  github:     (light: #8d4eff, dark: #a379f0),
+  linkedin:   (light: #0073b1, dark: #3b9dd2),
+  twitter:    (light: #00acee, dark: #3bc9ff),
+  dm:         (light: #00acee, dark: #3bc9ff),
+  facebook:   (light: #4267b2, dark: #5f8dec),
+  instagram:  (light: #a37754, dark: #c49169),
+  mastodon:   (light: #6d8ca7, dark: #87b0d5),
+  resume:     (light: #d54b3d, dark: #f46151),
+  email:      (light: #de0c0c, dark: #ff5050),
+  pgp:        (light: #757575, dark: #979797),
+  sms:        (light: #6fcc01, dark: #8edb34),
+  news-1:     (light: #ff1b1b, dark: #f06060),
+  news-2:     (light: #f78200, dark: #fd992a),
+  news-3:     (light: #f2b702, dark: #ffcc2e),
+  news-4:     (light: #5ebd3e, dark: #78df55),
+  news-5:     (light: #009cdf, dark: #29bfff),
+  news-6:     (light: #3e49bb, dark: #7b87ff),
+  news-7:     (light: #973999, dark: #db60dd)
+);
+$color-serverless: #87cef7;
+
+// Icons (modified twemojis)
+// lightbulb on
+$icon-bulb-on: "data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjIgMzUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbC1ydWxlPSJub256ZXJvIiBmaWxsPSJub25lIj48cGF0aCBkPSJNMjIgMTEuMDZjMCA2LjQ0LTUgNy40NC01IDEzLjQ0IDAgMy4xLTMuMTIgMy4zNi01LjUgMy4zNi0yLjA1IDAtNi41OS0uNzgtNi41OS0zLjM2IDAtNi00LjkxLTctNC45MS0xMy40NEMwIDUuMDMgNS4yOS4xNCAxMS4wOC4xNCAxNi44OC4xNCAyMiA1LjAzIDIyIDExLjA2eiIgZmlsbD0iI0ZGRDk4MyIvPjxwYXRoIGQ9Ik0xNS4xNyAzMi41YzAgLjgzLTIuMjQgMi41LTQuMTcgMi41LTEuOTMgMC00LjE3LTEuNjctNC4xNy0yLjUgMC0uODMgMi4yNC0uNSA0LjE3LS41IDEuOTMgMCA0LjE3LS4zMyA0LjE3LjV6IiBmaWxsPSIjQ0NENkREIi8+PHBhdGggZD0iTTE1LjcgMTAuM2ExIDEgMCAwMC0xLjQgMEwxMSAxMy41OGwtMy4zLTMuM2ExIDEgMCAxMC0xLjQgMS40MmwzLjcgMy43VjI2YTEgMSAwIDEwMiAwVjE1LjQxbDMuNy0zLjdhMSAxIDAgMDAwLTEuNDJ6IiBmaWxsPSIjRkZDQzREIi8+PHBhdGggZD0iTTE3IDMxYTIgMiAwIDAxLTIgMkg3YTIgMiAwIDAxLTItMnYtNmgxMnY2eiIgZmlsbD0iIzk5QUFCNSIvPjxwYXRoIGQ9Ik01IDMyYTEgMSAwIDAxLS4xNi0xLjk5bDEyLTJhMSAxIDAgMTEuMzMgMS45N2wtMTIgMkEuOTMuOTMgMCAwMTUgMzJ6bTAtNGExIDEgMCAwMS0uMTYtMS45OWwxMi0yYTEgMSAwIDExLjMzIDEuOTdsLTEyIDJBLjkzLjkzIDAgMDE1IDI4eiIgZmlsbD0iI0NDRDZERCIvPjwvZz48L3N2Zz4K";
+// lightbulb off
+$icon-bulb-off: "data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjIgMzUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbC1ydWxlPSJub256ZXJvIiBmaWxsPSJub25lIj48cGF0aCBkPSJNMjIgMTEuMDZjMCA2LjQ0LTUgNy40NC01IDEzLjQ0IDAgMy4xLTMuMTIgMy4zNi01LjUgMy4zNi0yLjA1IDAtNi41OS0uNzgtNi41OS0zLjM2IDAtNi00LjkxLTctNC45MS0xMy40NEMwIDUuMDMgNS4yOS4xNCAxMS4wOC4xNCAxNi44OC4xNCAyMiA1LjAzIDIyIDExLjA2eiIgZmlsbD0iI0NDQ0JDQiIvPjxwYXRoIGQ9Ik0xNS4xNyAzMi41YzAgLjgzLTIuMjQgMi41LTQuMTcgMi41LTEuOTMgMC00LjE3LTEuNjctNC4xNy0yLjUgMC0uODMgMi4yNC0uNSA0LjE3LS41IDEuOTMgMCA0LjE3LS4zMyA0LjE3LjV6IiBmaWxsPSIjQ0NENkREIi8+PHBhdGggZD0iTTE1LjcgMTAuM2ExIDEgMCAwMC0xLjQgMEwxMSAxMy41OGwtMy4zLTMuM2ExIDEgMCAxMC0xLjQgMS40MmwzLjcgMy43VjI2YTEgMSAwIDEwMiAwVjE1LjQxbDMuNy0zLjdhMSAxIDAgMDAwLTEuNDJ6IiBmaWxsPSIjN0Q3QTcyIi8+PHBhdGggZD0iTTE3IDMxYTIgMiAwIDAxLTIgMkg3YTIgMiAwIDAxLTItMnYtNmgxMnY2eiIgZmlsbD0iIzk5QUFCNSIvPjxwYXRoIGQ9Ik01IDMyYTEgMSAwIDAxLS4xNi0xLjk5bDEyLTJhMSAxIDAgMTEuMzMgMS45N2wtMTIgMkEuOTMuOTMgMCAwMTUgMzJ6bTAtNGExIDEgMCAwMS0uMTYtMS45OWwxMi0yYTEgMSAwIDExLjMzIDEuOTdsLTEyIDJBLjkzLjkzIDAgMDE1IDI4eiIgZmlsbD0iI0NDRDZERCIvPjwvZz48L3N2Zz4K";
+
+// https://medium.com/@katiemctigue/how-to-create-a-dark-mode-in-sass-609f131a3995
+@mixin themed() {
+  @each $theme, $map in $themes {
+    body.#{$theme} & {
+      $theme-map: () !global;
+      @each $key, $submap in $map {
+        $value: map-get(map-get($themes, $theme), "#{$key}");
+        $theme-map: map-merge($theme-map, ($key: $value)) !global;
+      }
+      @content;
+      $theme-map: null !global;
+    }
+  }
+}
+
+@function t($key) {
+  @return map-get($theme-map, $key);
+}

assets/sass/abstracts/_variables.scss

@@ -16,64 +16,10 @@ $system-fonts-monospace: "SFMono-Regular", "Consolas", "Liberation Mono",
                "Menlo", "Courier", monospace;
 // stylelint-enable indentation
 
-// Misc Settings
+// Width at which to switch to mobile styles
 $responsive-width: 820px;
+
+// Fancy link underline settings
 $link-underline-opacity: 40%;
 $link-underline-size: 2px;
-
+$link-opacity-color: #ffffff;
-// Global Colors
-$color-background:   #ffffff;
-$color-text:         #202020;
-$color-medium-dark:  #494949;
-$color-medium:       #5e5e5e;
-$color-medium-light: #757575;
-$color-light:        #d2d2d2;
-$color-kinda-light:  #e3e3e3;
-$color-super-light:  #f4f4f4;
-$color-super-duper-light: #fbfbfb;
-$color-links:        #0e6dc2;
-
-// For nifty color swapping on svg logo hover in components/_header.scss
-$color-logo1: #6fbc4e;
-$color-logo2: #ffb900;
-$color-logo3: #009cdf;
-
-// Colorful Homepage
-$colors-home:(
-  boston:     #fb4d42,
-  javascript: #f48024,
-  node:       #6fbc4e,
-  golang:     #00acd7,
-  react:      #4fb3cd,
-  angular:    #c3002f,
-  php:        #8892bf,
-  ruby:       #d34135,
-  python:     #fea500,
-  java:       #ab6311,
-  infosec:    #00b81a,
-  server:     #0098ec,
-  devops:     #ff6200,
-  containers: #c48f49,
-  y2k:        #4169e1,
-  jbb:        #9932cc,
-  birthday:   #e40088,
-  github:     #8d4eff,
-  linkedin:   #0073b1,
-  facebook:   #4267b2,
-  twitter:    #00acee,
-  dm:         #00acee,
-  instagram:  #a37754,
-  mastodon:   #6d8ca7,
-  resume:     #d54b3d,
-  email:      #de0c0c,
-  pgp:        #757575,
-  sms:        #6fcc01,
-  news-1:     #ff1b1b,
-  news-2:     #f78200,
-  news-3:     #f2b702,
-  news-4:     #5ebd3e,
-  news-5:     #009cdf,
-  news-6:     #3e49bb,
-  news-7:     #973999
-);
-$color-serverless: #87cef7;

assets/sass/components/_content.scss

@@ -16,7 +16,10 @@ div#content {
 
   h2 {
     padding-bottom: 0.25em;
-    border-bottom: 1px solid $color-kinda-light;
+
+    @include themed() {
+      border-bottom: 1px solid t(color-kinda-light);
+    }
   }
 
   p.image img,
@@ -38,8 +41,11 @@ div#content {
     // image captions
     figcaption {
       font-size: 0.95em;
-      color: $color-medium;
       text-align: center;
+
+      @include themed() {
+        color: t(color-medium);
+      }
     }
   }
 
@@ -103,8 +109,7 @@ div#content {
   }
 }
 
-
 // Responsive
 @mixin responsive--content() {
-  // stylelint-disable block-no-empty
+  // stylelint-disable-block block-no-empty
 }

assets/sass/components/_footer.scss

@@ -7,11 +7,17 @@ footer {
   line-height: 1.7;
   padding: 1.25em 1.75em;
   box-sizing: border-box;
-  color: $color-medium;
+
-  border-top: 1px solid $color-light;
+  @include themed() {
+    color: t(color-medium);
+    border-top: 1px solid t(color-kinda-light);
+    background-color: t(color-super-duper-light);
+  }
 
   a {
-    color: inherit;
+    @include themed() {
+      color: t(color-medium);
+    }
   }
 
   div#row {
@@ -38,8 +44,11 @@ footer {
       text-align: right;
 
       a#source {
-        border-bottom: 1px solid $color-light;
         padding-bottom: 2px;
+
+        @include themed() {
+          border-bottom: 1px solid t(color-light);
+        }
       }
     }
 

assets/sass/components/_global.scss

@@ -5,8 +5,6 @@ body {
   width: 100%;
   height: 100%;
   margin: 0 auto;
-  background-color: $color-super-duper-light;   // really just the color of header & footer
-  color: $color-text;
   font-family: $webfont-sans;
   font-kerning: normal;
   font-feature-settings: "kern", "liga", "calt", "clig", "ss01";
@@ -14,16 +12,25 @@ body {
   box-sizing: border-box;
 }
 
+main {
+  @include themed() {
+    color: t(color-text);
+  }
+}
+
 a {
-  color: $color-links;
   text-decoration: none;
-  background-image: underline-hack($color-links);
   background-position: 0% 100%;
   background-repeat: no-repeat;
   background-size: 0% $link-underline-size;
   padding-bottom: $link-underline-size;
   transition: background-size 0.25s ease-in-out;
 
+  @include themed() {
+    color: t(color-links);
+    background-image: underline-hack(t(color-links));
+  }
+
   &:hover {
     background-size: 100% $link-underline-size;
   }
@@ -39,42 +46,76 @@ strong {
 }
 
 blockquote {
-  border-left: 5px solid $color-links;
   margin-left: 0.5em;
   padding-left: 1em;
+
+  @include themed() {
+    border-left: 5px solid t(color-links);
+  }
 }
 
 hr {
   margin: 1.5em auto;
   height: 2px;
   border: 0;
-  background-color: $color-light;
+
+  @include themed() {
+    background-color: t(color-light);
+  }
+}
+
+// button reset
+button {
+  border: 0;
+  margin: 0;
+  padding: 0;
+  overflow: visible;
+  background: transparent;
+
+  // inherit font & color from ancestor
+  color: inherit;
+  font: inherit;
+  line-height: normal;
+
+  // corrects inability to style clickable `input` types in iOS
+  appearance: none;
+
+  &::-moz-focus-inner {
+    border: 0;
+    padding: 0;
+  }
 }
 
 // all code
 code {
   font-family: $webfont-mono;
-  background: $color-super-duper-light;
   font-size: 0.95em;
   letter-spacing: 0;
   page-break-inside: avoid;
 
   // inline code in paragraphs (single tildes)
-  border: 1px solid $color-light;
   padding: 0.2em;
+
+  @include themed() {
+    background-color: t(color-super-duper-light);
+    border: 1px solid t(color-light);
+  }
 }
 
 // code fences
 div.highlight {
-  background: $color-super-duper-light;
-  border: 1px solid $color-light;
-  border-left: 3px solid $color-links;
   line-height: 1.6;
   max-width: 100%;
   overflow-x: scroll;
   object-fit: scale-down;
   margin: 1em 0;
 
+  @include themed() {
+    border: 1px solid t(color-light);
+    border-left: 3px solid t(color-links);
+    background-color: t(color-super-duper-light);
+  }
+
   pre {
     display: block;
     margin-left: 1.5em;
@@ -100,9 +141,31 @@ img.emoji {
 // white background for entire width content area
 div#wrap {
   width: 100%;
-  background-color: $color-background;
+
+  @include themed() {
+    background-color: t(color-background);
+  }
 }
 
+// manually setting light/dark mode backgrounds and bulb icon
+// really just the color of header & footer
+body {
+  &.light {
+    background-color: $color-light-background;
+
+    button#dark-mode-toggle {
+      background-image: url($icon-bulb-on);
+    }
+  }
+
+  &.dark {
+    background-color: $color-dark-background;
+
+    button#dark-mode-toggle {
+      background-image: url($icon-bulb-off);
+    }
+  }
+}
 
 // Responsive
 @mixin responsive--global() {

assets/sass/components/_header.scss

@@ -3,7 +3,11 @@
 // Global Header Styles
 header {
   width: 100%;
-  border-bottom: 1px solid $color-kinda-light;
+
+  @include themed() {
+    border-bottom: 1px solid t(color-kinda-light);
+    background-color: t(color-super-duper-light);
+  }
 
   nav {
     width: 100%;
@@ -18,7 +22,10 @@ header {
     a#logo {
       display: flex;
       align-items: center;
-      color: $color-medium-dark;
+
+      @include themed() {
+        color: t(color-medium-dark);
+      }
 
       h1#name {
         margin-left: 0.8em;
@@ -34,7 +41,9 @@ header {
 
       // mix up logo colors on hover
       &:hover {
-        color: $color-links;
+        @include themed() {
+          color: t(color-links);
+        }
 
         svg {
           g#c1 {
@@ -65,12 +74,18 @@ header {
 
         a {
           display: inline-block;
-          color: $color-medium;
           transition: transform 0.15s ease-in-out;
 
+          @include themed() {
+            color: t(color-medium);
+          }
+
           &:hover {
             transform: scale(1.15);
-            color: $color-links;
+
+            @include themed() {
+              color: t(color-links);
+            }
           }
 
           span.icon {
@@ -89,11 +104,23 @@ header {
           margin-left: 0;
         }
       }
+
+      // Dark mode toggle
+      button#dark-mode-toggle {
+        background-repeat: no-repeat;
+        background-size: 100% 100%;
+        display: block;
+        height: 1.5em;
+        width: 1em;
+        cursor: pointer;
+
+        // hide by default in case user's JS is disabled
+        visibility: hidden;
+      }
     }
   }
 }
 
-
 // Responsive
 @mixin responsive--header() {
   header nav {
@@ -115,7 +142,7 @@ header {
       font-size: 1.7em;
 
       li {
-        margin-left: 1em;
+        margin-left: 0.85em;
 
         a {
           span.icon {
@@ -132,6 +159,14 @@ header {
           }
         }
       }
+
+      // Dark mode toggle
+      button#dark-mode-toggle {
+        // TODO: figure out need for weird magic numbers here
+        height: 1.025em;
+        width: 0.75em;
+        margin-top: 0.125em;
+      }
     }
   }
 }

assets/sass/components/_syntax.scss

@@ -3,25 +3,39 @@
 /*! Syntax Highlighting - modified from Monokai Light https://github.com/mlgill/pygments-style-monokailight */
 div.highlight span {
   &.k, &.kc, &.kd, &.kp, &.kr, &.kt, &.no {
-    color: #03748a;
+    @include themed() {
+      color: t(syntax-k);
+    }
   }
   &.n, &.bp, &.nb, &.ni, &.fm, &.nl, &.nn, &.py, &.nv, &.vc, &.vg, &.vi, &.vm, &.p {
-    color: #111111;
+    @include themed() {
+      color: t(syntax-n);
+    }
   }
   &.na, &.nc, &.nd, &.ne, &.nf, &.nx {
-    color: #068200;
+    @include themed() {
+      color: t(syntax-na);
+    }
   }
   &.err, &.nt, &.o, &.ow, &.kn {
-    color: #e8003d;
+    @include themed() {
+      color: t(syntax-err);
+    }
   }
   &.l, &.se, &.m, &.mb, &.mf, &.mh, &.mi, &.il, &.mo {
-    color: #8145ec;
+    @include themed() {
+      color: t(syntax-l);
+    }
   }
   &.ld, &.s, &.sa, &.sb, &.sc, &.dl, &.sd, &.s2, &.sh, &.si, &.sx, &.sr, &.s1, &.ss {
-    color: #b35c00;
+    @include themed() {
+      color: t(syntax-ld);
+    }
   }
   &.c, &.ch, &.cm, &.c1, &.cs, &.cp, &.cpf {
-    color: #6b6859;
+    @include themed() {
+      color: t(syntax-c);
+    }
   }
   &.ge {
     font-style: italic;
@@ -32,7 +46,10 @@ div.highlight span {
 
   // line numbers
   &.lnt {
-    color: #999999;
     user-select: none;
+
+    @include themed() {
+      color: t(syntax-lnt);
+    }
   }
 }

assets/sass/main.scss

@@ -7,6 +7,7 @@ $base-url: "{{ strings.TrimRight "/" .Site.BaseURL }}/";   // consistent trailin
 // stylelint-enable
 
 // Variables & Functions
+@import 'abstracts/themes';
 @import 'abstracts/variables';
 @import 'abstracts/functions';
 

assets/sass/pages/_etc.scss

@@ -17,7 +17,6 @@ main#etc {
   }
 }
 
-
 // Responsive
 @mixin responsive--etc() {
   main#etc {

assets/sass/pages/_home.scss

@@ -43,21 +43,16 @@ main#home {
     margin-bottom: 0.5em;
     margin-left: 1em;
     padding: 4px;
-    border: 1px solid $color-light;
     border-radius: 50%;
     width: 160px;
     height: 160px;
+
+    @include themed() {
+      border: 1px solid t(color-light);
+    }
   }
 
   a {
-    // Loop through $colors-home (see abstracts/_variables)
-    @each $id, $color in $colors-home {
-      &##{$id} {
-        color: $color;
-        background-image: underline-hack($color);
-      }
-    }
-
     &#blog {
       font-size: 0.9em;
       margin-bottom: 0;
@@ -83,11 +78,22 @@ main#home {
     }
 
     &#shh {
-      color: $color-medium-light;
+      @include themed() {
+        color: t(color-medium-light);
+      }
     }
   }
 }
 
+// Loop through $colors-home (see abstracts/_variables)
+@each $id, $colors in $colors-home {
+  @each $theme, $color in $colors {
+    body.#{$theme} main#home a##{$id} {
+      color: $color;
+      background-image: underline-hack($color);
+    }
+  }
+}
 
 // Responsive
 @mixin responsive--home() {

assets/sass/pages/_list.scss

@@ -30,9 +30,12 @@ main#list {
       margin-bottom: 1em;
 
       div.date {
-        color: $color-medium;
         width: 5.25em;
         flex-shrink: 0;
+
+        @include themed() {
+          color: t(color-medium);
+        }
       }
 
       &:last-child {
@@ -42,7 +45,6 @@ main#list {
   }
 }
 
-
 // Responsive
 @mixin responsive--list() {
   main#list {

assets/sass/pages/_single.scss

@@ -7,12 +7,15 @@ main#single {
   margin: 0 auto;
 
   div#meta {
-    color: $color-medium;
     font-size: 0.85em;
     line-height: 1.3;
     letter-spacing: 0.04em;
     margin-top: 0.8em;
 
+    @include themed() {
+      color: t(color-medium);
+    }
+
     a {
       color: inherit;
     }
@@ -37,7 +40,10 @@ main#single {
   div#comments {
     margin-top: 1.5em;
     padding-top: 0.5em;
-    border-top: 2px solid $color-light;
+
+    @include themed() {
+      border-top: 2px solid t(color-light);
+    }
 
     div.utterances {
       max-width: unset;
@@ -45,7 +51,6 @@ main#single {
   }
 }
 
-
 // Responsive
 @mixin responsive--single() {
   main#single {

assets/sass/pages/_videos.scss

@@ -19,9 +19,12 @@ main#video {
     font-size: 0.85em;
     letter-spacing: -0.005em;
     line-height: 1.5;
-    color: #777777;
     margin: 1.25em 1em 0 1em;
 
+    @include themed() {
+      color: t(color-medium-light);
+    }
+
     a {
       font-weight: bold;
       letter-spacing: 0.001em;
@@ -35,7 +38,6 @@ main#video {
   }
 }
 
-
 // Responsive
 @mixin responsive--videos() {
   main#video {

assets/vendor/emoji/emoji.js

@@ -1,8 +1,10 @@
 /*jslint indent: 2, browser: true, bitwise: true, plusplus: true */
-var twemoji = (function (
+
-  /*! Copyright Twitter Inc. and other contributors. Licensed under MIT *//*
+/*! Copyright Twitter Inc. and other contributors. Licensed under MIT *//*
     https://github.com/twitter/twemoji/blob/gh-pages/LICENSE
-  */
+*/
+
+var emoji = (function (
 
   // WARNING:   this file is generated automatically via
   //            `node scripts/build.js`
@@ -16,7 +18,7 @@ var twemoji = (function (
 
   var
     // the exported module object
-    twemoji = {
+    emoji = {
 
 
     /////////////////////////
@@ -48,10 +50,10 @@ var twemoji = (function (
          *          i.e. \uD83D\uDCA9
          *
          * @example
-         *  twemoji.convert.fromCodePoint('1f1e8');
+         *  emoji.convert.fromCodePoint('1f1e8');
          *  // "\ud83c\udde8"
          *
-         *  '1f1e8-1f1f3'.split('-').map(twemoji.convert.fromCodePoint).join('')
+         *  '1f1e8-1f1f3'.split('-').map(emoji.convert.fromCodePoint).join('')
          *  // "\ud83c\udde8\ud83c\uddf3"
          */
         fromCodePoint: fromCodePoint,
@@ -64,10 +66,10 @@ var twemoji = (function (
          * @return  string  utf16 transformed into codepoint, i.e. '1F4A9'
          *
          * @example
-         *  twemoji.convert.toCodePoint('\ud83c\udde8\ud83c\uddf3');
+         *  emoji.convert.toCodePoint('\ud83c\udde8\ud83c\uddf3');
          *  // "1f1e8-1f1f3"
          *
-         *  twemoji.convert.toCodePoint('\ud83c\udde8\ud83c\uddf3', '~');
+         *  emoji.convert.toCodePoint('\ud83c\udde8\ud83c\uddf3', '~');
          *  // "1f1e8~1f1f3"
          */
         toCodePoint: toCodePoint
@@ -84,7 +86,7 @@ var twemoji = (function (
        * a fallback for network problems is desired.
        * Automatically added to Image nodes via DOM
        * It could be recycled for string operations via:
-       *  $('img.emoji').on('error', twemoji.onerror)
+       *  $('img.emoji').on('error', emoji.onerror)
        */
       onerror: function onerror() {
         if (this.parentNode) {
@@ -99,14 +101,14 @@ var twemoji = (function (
        * @overloads
        *
        * String replacement for `innerHTML` or server side operations
-       *  twemoji.parse(string);
+       *  emoji.parse(string);
-       *  twemoji.parse(string, Function);
+       *  emoji.parse(string, Function);
-       *  twemoji.parse(string, Object);
+       *  emoji.parse(string, Object);
        *
        * HTMLElement tree parsing for safer operations over existing DOM
-       *  twemoji.parse(HTMLElement);
+       *  emoji.parse(HTMLElement);
-       *  twemoji.parse(HTMLElement, Function);
+       *  emoji.parse(HTMLElement, Function);
-       *  twemoji.parse(HTMLElement, Object);
+       *  emoji.parse(HTMLElement, Object);
        *
        * @param   string|HTMLElement  the source to parse and enrich with emoji.
        *
@@ -152,23 +154,23 @@ var twemoji = (function (
        *          Object              if specified, an object containing the following properties
        *
        *            callback   Function  the callback to invoke per each found emoji.
-       *            base       string    the base url, by default twemoji.base
+       *            base       string    the base url, by default emoji.base
-       *            ext        string    the image extension, by default twemoji.ext
+       *            ext        string    the image extension, by default emoji.ext
-       *            size       string    the assets size, by default twemoji.size
+       *            size       string    the assets size, by default emoji.size
        *
        * @example
        *
-       *  twemoji.parse("I \u2764\uFE0F emoji!");
+       *  emoji.parse("I \u2764\uFE0F emoji!");
        *  // I <img class="emoji" draggable="false" alt="❤️" src="/assets/2764.gif"/> emoji!
        *
        *
-       *  twemoji.parse("I \u2764\uFE0F emoji!", function(iconId, options) {
+       *  emoji.parse("I \u2764\uFE0F emoji!", function(iconId, options) {
        *    return '/assets/' + iconId + '.gif';
        *  });
        *  // I <img class="emoji" draggable="false" alt="❤️" src="/assets/2764.gif"/> emoji!
        *
        *
-       * twemoji.parse("I \u2764\uFE0F emoji!", {
+       * emoji.parse("I \u2764\uFE0F emoji!", {
        *   size: 72,
        *   callback: function(iconId, options) {
        *     return '/assets/' + options.size + '/' + iconId + options.ext;
@@ -207,7 +209,7 @@ var twemoji = (function (
        *
        * @example
        *
-       *  if (twemoji.test(someContent)) {
+       *  if (emoji.test(someContent)) {
        *    console.log("emoji All The Things!");
        *  }
        */
@@ -243,7 +245,7 @@ var twemoji = (function (
     // just a private shortcut
     fromCharCode = String.fromCharCode;
 
-  return twemoji;
+  return emoji;
 
 
   /////////////////////////
@@ -333,9 +335,9 @@ var twemoji = (function (
    * @param   Object    options  containing info about how to parse
     *
     *            .callback   Function  the callback to invoke per each found emoji.
-    *            .base       string    the base url, by default twemoji.base
+    *            .base       string    the base url, by default emoji.base
-    *            .ext        string    the image extension, by default twemoji.ext
+    *            .ext        string    the image extension, by default emoji.ext
-    *            .size       string    the assets size, by default twemoji.size
+    *            .size       string    the assets size, by default emoji.size
     *
    * @return  Element same generic node with emoji in place, if any.
    */
@@ -420,9 +422,9 @@ var twemoji = (function (
    * @param   Object    options  containing info about how to parse
    *
    *            .callback   Function  the callback to invoke per each found emoji.
-   *            .base       string    the base url, by default twemoji.base
+   *            .base       string    the base url, by default emoji.base
-   *            .ext        string    the image extension, by default twemoji.ext
+   *            .ext        string    the image extension, by default emoji.ext
-   *            .size       string    the assets size, by default twemoji.size
+   *            .size       string    the assets size, by default emoji.size
    *
    * @return  the string with <img tags> replacing all found and parsed emoji
    */
@@ -525,11 +527,11 @@ var twemoji = (function (
     return (typeof what === 'string' ? parseString : parseNode)(what, {
       callback:   how.callback || defaultImageSrcGenerator,
       attributes: typeof how.attributes === 'function' ? how.attributes : returnNull,
-      base:       typeof how.base === 'string' ? how.base : twemoji.base,
+      base:       typeof how.base === 'string' ? how.base : emoji.base,
-      ext:        how.ext || twemoji.ext,
+      ext:        how.ext || emoji.ext,
-      size:       how.folder || toSizeSquaredAsset(how.size || twemoji.size),
+      size:       how.folder || toSizeSquaredAsset(how.size || emoji.size),
-      className:  how.className || twemoji.className,
+      className:  how.className || emoji.className,
-      onerror:    how.onerror || twemoji.onerror
+      onerror:    how.onerror || emoji.onerror
     });
   }
 
@@ -567,4 +569,4 @@ var twemoji = (function (
 
 }());
 
-twemoji.parse(document.body);
+emoji.parse(document.body);

layouts/_default/baseof.html

@@ -4,13 +4,13 @@
   <head>
 {{ partial "head/head" . }}
   </head>
-  <body>
+  <body class="light">
 {{ partialCached "page/header" . }}
 <div id="wrap">
 {{ block "main" . }}{{ end }}
 </div>
 {{ partialCached "page/footer" . }}
-{{ partial "scripts/twemoji" . }}
+{{ partial "scripts/bundle" . }}
 {{ partial "scripts/shortcodes" . }}
 {{ if eq hugo.Environment "production" }}
   {{ partialCached "scripts/simple_analytics" . }}

layouts/index.headers

@@ -5,10 +5,17 @@
   X-Frame-Options: sameorigin
   X-XSS-Protection: 1; mode=block
 
-# Super long cache (one year) for vendored assets: web fonts, emojis, etc.
+# Super long cache (one year) for vendored assets:
+# web fonts, emojis, etc.
 /vendor/*
   Cache-Control: max-age=31536000, public, immutable
 
+# Kinda long cache (one day) for CSS, JS:
+/css/*
+  Cache-Control: max-age=86400, public, immutable
+/js/*
+  Cache-Control: max-age=86400, public, immutable
+
 # Proper MIME type for Atom feed
 /*.atom
   Content-Type: application/atom+xml

layouts/partials/head/styles.html

@@ -1,4 +1,4 @@
-{{ $style := resources.Get "sass/main.scss" | resources.ExecuteAsTemplate "sass/main.scss" . | resources.ToCSS (dict "targetPath" "style.css") | resources.PostCSS (dict "config" "postcss.config.js") }}
+{{ $style := resources.Get "sass/main.scss" | resources.ExecuteAsTemplate "sass/main.scss" . | resources.ToCSS (dict "targetPath" "css/main.css") | resources.PostCSS (dict "config" "postcss.config.js") }}
 <link rel="stylesheet" href="{{ $style.Permalink }}">
 
 {{/* Page-specific styles set via front matter, scoped via SCSS */}}

layouts/partials/page/header.html

@@ -8,6 +8,7 @@
       {{- range .Site.Menus.main }}
       <li><a class="no-underline" {{ printf "href=%q" .URL | safeHTMLAttr }} aria-label="{{ .Name }}"{{ if strings.HasPrefix .URL "http" }} target="_blank" rel="me noopener"{{ end }}><span class="icon">{{ .Pre }}</span><span class="text">{{ .Name }}</span></a></li>
       {{ end -}}
+      <li><button id="dark-mode-toggle" title="Toggle Dark Mode" aria-label="Toggle Dark Mode"></button></li>
     </ul>
   </nav>
 </header>

layouts/partials/scripts/bundle.html

@@ -0,0 +1,5 @@
+{{ $darkmode := resources.Get "js/dark-mode.js" }}
+{{ $twemoji := resources.Get "vendor/emoji/emoji.js" | resources.ExecuteAsTemplate "vendor/emoji/emoji.min.js" . }}
+
+{{ $js := slice $darkmode $twemoji | resources.Concat "/js/main.js" }}
+<script src="{{ $js.Permalink }}"></script>

layouts/partials/scripts/twemoji.html

@@ -1,2 +0,0 @@
-{{ $twemoji := resources.Get "vendor/emoji/emoji.min.js" | resources.ExecuteAsTemplate "vendor/emoji/emoji.min.js" . }}
-<script async defer src="{{ $twemoji.Permalink }}"></script>

package.json

@@ -22,6 +22,7 @@
     "start": "hugo server --disableFastRender --buildDrafts --buildFuture --port 1337 --bind 0.0.0.0 --verbose",
     "optimize": "run-s optimize:**",
     "optimize:html": "html-minifier --html5 --collapse-whitespace --collapse-boolean-attributes --preserve-line-breaks --minify-css --file-ext html --input-dir public --output-dir public **/*.html",
+    "optimize:js": "terser public/js/main.js --comments '/^!/' --output public/js/main.js",
     "optimize:img": "find ./public -type d ! -path './public/vendor*' | xargs -n1 -P8 -I{} imagemin {}/* --plugin=jpegoptim --plugin.jpegoptim.progressive --plugin.jpegoptim.stripAll --plugin=pngquant --plugin.pngquant.speed=5 --plugin.pngquant.strip --plugin=optipng --plugin.optipng.optimizationLevel=2 --plugin=gifsicle --plugin=svgo --out-dir={}",
     "lint": "run-s lint:**",
     "lint:scss": "stylelint assets/sass/**/* --syntax scss",

yarn.lock

@@ -353,9 +353,9 @@
   integrity sha1-aaI6OtKcrwCX8G7aWbNh7i8GOfY=
 
 "@types/node@*":
-  version "13.13.0"
+  version "13.13.1"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-13.13.0.tgz#30d2d09f623fe32cde9cb582c7a6eda2788ce4a8"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-13.13.1.tgz#1ba94c5a177a1692518bfc7b41aec0aa1a14354e"
-  integrity sha512-WE4IOAC6r/yBZss1oQGM5zs2D7RuKR6Q+w+X2SouPofnWn+LbCqClRyhO3ZE7Ix8nmFgo/oVuuE01cJT2XB13A==
+  integrity sha512-uysqysLJ+As9jqI5yqjwP3QJrhOcUwBjHUlUxPxjbplwKoILvXVsmYWEhfmAQlrPfbRZmhJB007o4L9sKqtHqQ==
 
 "@types/normalize-package-data@^2.4.0":
   version "2.4.0"
@@ -391,9 +391,9 @@ agent-base@5:
   integrity sha512-TMeqbNl2fMW0nMjTEPOwe3J/PRFP4vqeoNuQMG0HlMrtm5QxKqdvAkZ1pRBQ/ulIyDD5Yq0nJ7YbdD8ey0TO3g==
 
 ajv@^6.10.2, ajv@^6.5.5:
-  version "6.12.0"
+  version "6.12.2"
-  resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.12.0.tgz#06d60b96d87b8454a5adaba86e7854da629db4b7"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.12.2.tgz#c629c5eced17baf314437918d2da88c99d5958cd"
-  integrity sha512-D6gFiFA0RRLyUbvijN74DWAjXSFxWKaWP7mldxkVhyhAV3+SWA9HEJPHQ2c9soIeTFJqcSdFDGFgdqs1iUU2Hw==
+  integrity sha512-k+V+hzjm5q/Mr8ef/1Y9goCmlsK4I6Sm74teeyGvFk1XrOsbsKLjEdrvny42CZ+a8sXbk8KWpY/bDwS+FLL2UQ==
   dependencies:
     fast-deep-equal "^3.1.1"
     fast-json-stable-stringify "^2.0.0"
@@ -838,9 +838,9 @@ camelcase@^5.0.0, camelcase@^5.3.1:
   integrity sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==
 
 caniuse-lite@^1.0.30001038, caniuse-lite@^1.0.30001039:
-  version "1.0.30001042"
+  version "1.0.30001043"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001042.tgz#c91ec21ec2d270bd76dbc2ce261260c292b8c93c"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001043.tgz#1b561de27aefbe6ff99e41866b8d7d87840c513b"
-  integrity sha512-igMQ4dlqnf4tWv0xjaaE02op9AJ2oQzXKjWf4EuAHFN694Uo9/EfPVIPJcmn2WkU9RqozCxx5e2KPcVClHDbDw==
+  integrity sha512-MrBDRPJPDBYwACtSQvxg9+fkna5jPXhJlKmuxenl/ml9uf8LHKlDmLpElu+zTW/bEz7lC1m0wTDD7jiIB+hgFg==
 
 cardinal@^2.1.1:
   version "2.1.1"
@@ -1129,7 +1129,7 @@ combined-stream@^1.0.6, combined-stream@~1.0.6:
   dependencies:
     delayed-stream "~1.0.0"
 
-commander@^2.19.0, commander@~2.20.3:
+commander@^2.19.0, commander@^2.20.0, commander@~2.20.3:
   version "2.20.3"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
   integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
@@ -4810,9 +4810,9 @@ relateurl@^0.2.7:
   integrity sha1-VNvzd+UUQKypCkzSdGANP/LYiKk=
 
 remark-parse@^8.0.0:
-  version "8.0.0"
+  version "8.0.1"
-  resolved "https://registry.yarnpkg.com/remark-parse/-/remark-parse-8.0.0.tgz#0aaae4b49e607ee7e972a6cf688026f46bbf6d1a"
+  resolved "https://registry.yarnpkg.com/remark-parse/-/remark-parse-8.0.1.tgz#7fc95d8f2b58fc6791cffb54803c763eb3756743"
-  integrity sha512-Ck14G1Ns/GEPXhSw6m1Uv28kMtVk63e59NyL+QlhBBwBdIUXROM6MPfBehPhW6TW2d73batMdZsKwuxl5i3tEA==
+  integrity sha512-Ye/5W57tdQZWsfkuVyRq9SUWRgECHnDsMuyUMzdSKpTbNPkZeGtoYfsrkeSi4+Xyl0mhcPPddHITXPcCPHrl3w==
   dependencies:
     ccount "^1.0.0"
     collapse-white-space "^1.0.2"
@@ -5192,12 +5192,20 @@ sort-keys@^2.0.0:
   dependencies:
     is-plain-obj "^1.0.0"
 
+source-map-support@~0.5.12:
+  version "0.5.17"
+  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.17.tgz#29fe1b3c98b9dbd5064ada89052ee8ff070cb46c"
+  integrity sha512-bwdKOBZ5L0gFRh4KOxNap/J/MpvX9Yxsq9lFDx65s3o7F/NiHy7JRaGIS8MwW6tZPAq9UXE207Il0cfcb5yu/Q==
+  dependencies:
+    buffer-from "^1.0.0"
+    source-map "^0.6.0"
+
 source-map@^0.5.0:
   version "0.5.7"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
   integrity sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=
 
-source-map@^0.6.1, source-map@~0.6.0:
+source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.0, source-map@~0.6.1:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
   integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
@@ -5689,6 +5697,15 @@ tempfile@^2.0.0:
     temp-dir "^1.0.0"
     uuid "^3.0.1"
 
+terser@^4.6.11:
+  version "4.6.11"
+  resolved "https://registry.yarnpkg.com/terser/-/terser-4.6.11.tgz#12ff99fdd62a26de2a82f508515407eb6ccd8a9f"
+  integrity sha512-76Ynm7OXUG5xhOpblhytE7X58oeNSmC8xnNhjWVo8CksHit0U0kO4hfNbPrrYwowLWFgM2n9L176VNx2QaHmtA==
+  dependencies:
+    commander "^2.20.0"
+    source-map "~0.6.1"
+    source-map-support "~0.5.12"
+
 text-hex@1.0.x:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/text-hex/-/text-hex-1.0.0.tgz#69dc9c1b17446ee79a92bf5b884bb4b9127506f5"
@@ -6182,9 +6199,9 @@ yallist@^2.1.2:
   integrity sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI=
 
 yaml@^1.7.2:
-  version "1.9.1"
+  version "1.9.2"
-  resolved "https://registry.yarnpkg.com/yaml/-/yaml-1.9.1.tgz#2df608ca571a0cf94e25e417e2795c08f48acdc5"
+  resolved "https://registry.yarnpkg.com/yaml/-/yaml-1.9.2.tgz#f0cfa865f003ab707663e4f04b3956957ea564ed"
-  integrity sha512-xbWX1ayUVoW8DPM8qxOBowac4XxSTi0mFLbiokRq880ViYglN+F3nJ4Dc2GdypXpykrknKS39d8I3lzFoHv1kA==
+  integrity sha512-HPT7cGGI0DuRcsO51qC1j9O16Dh1mZ2bnXwsi0jrSpsLz0WxOLSLXfkABVl6bZO629py3CU+OMJtpNHDLB97kg==
   dependencies:
     "@babel/runtime" "^7.9.2"