Using color-scheme and light-dark() to implement dark mode (#154)

* Lint fixes.

* Implement light-dark().

* Lint css with biome, remove stylelint.

* Biome lint fixes.

* Dark mode adjustments.

* Style bug fixes.

* Colour adjustments.

* Move header and footer styles to base.

* Site header adjustments.

* Removing jQuery and umbrella libs. They where great but not needed anymore.

* Add colorScheme to optionally lock light/dark.

* Update README.

* Biome adjustments.

layouts/_partials/head/scripts.html

@@ -12,16 +12,6 @@
 <script defer src="{{ $alpine.RelPermalink }}"></script>
 {{ end -}}
 
-{{ if $.Param "jquery" -}}
-{{ $jquery := resources.Get "libs/jquery.slim.min.js" | fingerprint -}}
-<script defer src="{{ $jquery.RelPermalink }}"></script>
-{{ end -}}
-
-{{ if $.Param "umbrella" -}}
-{{ $umbrella := resources.Get "libs/umbrella.min.js" | fingerprint -}}
-<script defer src="{{ $umbrella.RelPermalink }}"></script>
-{{ end -}}
-
 {{ if $.Param "mobilemenu" -}}
 {{ $mobilemenu := resources.Get "js/mobilemenu.js" | js.Build $opts | fingerprint -}}
 <script defer src="{{ $mobilemenu.RelPermalink }}"></script>

layouts/_partials/mobilemenu.html

@@ -8,7 +8,7 @@
       <rect width="80" height="12" x="10" y="70" rx="5"></rect>
     </svg>
   </button>
-  <div class="mobile-nav__sheet link-inverted link-nav" id="sheet" aria-hidden="true">
+  <div class="mobile-nav__sheet link-nav" id="sheet" data-theme="dark" aria-hidden="true">
     <div class="mobile-nav__region">{{ if hugo.IsMultilingual }}{{ partial "language-selector.html" . }}{{ end }}</div>
     <nav class="mobile-nav__main-menu" aria-label="{{ i18n "menu_title" }}">
     <ul class="mobile-nav__navbar">

layouts/baseof.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html class="nojs" lang="{{ site.Language.Locale | default site.Language.Name }}" dir="{{ site.Language.Direction | default "ltr" }}">
+<html class="nojs" lang="{{ site.Language.Locale | default site.Language.Name }}" dir="{{ site.Language.Direction | default "ltr" }}"{{ with $.Param "colorScheme" }} data-theme="{{ . }}"{{ end }}>
 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width">