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)

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>