From 075996049673309132d3e914ae6db3c64fc75403 Mon Sep 17 00:00:00 2001
From: zoe <zoe@cat.fritz.box>
Date: Sat, 16 Apr 2022 15:27:59 +0200
Subject: [PATCH] update build

---
 public/about/index.html             | 22 ++++++------
 public/categories/index.html        | 22 ++++++------
 public/games/index.html             | 22 ++++++------
 public/index.html                   | 22 ++++++------
 public/js/hamburger.js              | 26 +++++++++++++-
 public/js/lightmode.js              |  7 ++++
 public/links/buddies/index.html     | 22 ++++++------
 public/links/contact/index.html     | 22 ++++++------
 public/links/index.html             | 22 ++++++------
 public/links/nice_things/index.html | 22 ++++++------
 public/music/index.html             | 22 ++++++------
 public/posts/index.html             | 22 ++++++------
 public/scss/main.css                | 56 +++++++++++++++++++++++++----
 public/software/index.html          | 22 ++++++------
 public/tags/index.html              | 22 ++++++------
 15 files changed, 214 insertions(+), 139 deletions(-)

diff --git a/public/about/index.html b/public/about/index.html
index 2df66b6..45fbbf5 100644
--- a/public/about/index.html
+++ b/public/about/index.html
@@ -69,27 +69,27 @@ i&rsquo;m also trans and gay and queer :)</p>
 <span id="footer-right">
         <input type="checkbox" id="darkmode-toggle" aria-label="darkmode toggle" class="toggleinput">
         <label class="togglelabel colorswitch" for="darkmode-toggle" aria-label="darkmode toggle" role="checkbox" id="darkmode-toggle-label"></label>
-        <button type="button" id="hamburger-button" class="colorswitch hamburger"></button>
-        <div class="hamburger colorswitch" id="hamburger-bg">
-<nav id="footer-nav" aria-label="navigation">
+        <button type="button" id="darkmode-button-small" class="colorswitch hamburger"></button>
+        <button type="button" id="hamburger-button" class="colorswitch hamburger" title="hamburger navigation menu button"></button>
+        <div class="hamburger colorswitch hidden" id="hamburger-bg">
+<nav id="hamburger-nav" aria-label="navigation">
     
     
-    <a class="footer-nav-item colorswitch" href="/" title="home"></a>
+    <a class="hamburger-nav-item colorswitch" href="/" title="home"> home</a><br>
     
-    <a class="footer-nav-item active colorswitch" href="/about/" title="about"></a>
+    <a class="hamburger-nav-item active colorswitch" href="/about/" title="about"> about</a><br>
     
-    <a class="footer-nav-item colorswitch" href="/links/" title="links"></a>
+    <a class="hamburger-nav-item colorswitch" href="/links/" title="links"> links</a><br>
     
-    <a class="footer-nav-item colorswitch" href="/music/" title="music"></a>
+    <a class="hamburger-nav-item colorswitch" href="/music/" title="music"> music</a><br>
     
-    <a class="footer-nav-item colorswitch" href="/games/" title="games"></a>
+    <a class="hamburger-nav-item colorswitch" href="/games/" title="games"> games</a><br>
     
-    <a class="footer-nav-item colorswitch" href="/software/" title="software"></a>
+    <a class="hamburger-nav-item colorswitch" href="/software/" title="software"> software</a><br>
     
-    <a class="footer-nav-item colorswitch" href="/posts/" title="posts">龎</a>
+    <a class="hamburger-nav-item colorswitch" href="/posts/" title="posts">龎 posts</a><br>
     
 </nav>
-
         </div>
 </span>
 </footer>
diff --git a/public/categories/index.html b/public/categories/index.html
index 47ad147..42f9ebe 100644
--- a/public/categories/index.html
+++ b/public/categories/index.html
@@ -48,27 +48,27 @@
 <span id="footer-right">
         <input type="checkbox" id="darkmode-toggle" aria-label="darkmode toggle" class="toggleinput">
         <label class="togglelabel colorswitch" for="darkmode-toggle" aria-label="darkmode toggle" role="checkbox" id="darkmode-toggle-label"></label>
-        <button type="button" id="hamburger-button" class="colorswitch hamburger"></button>
-        <div class="hamburger colorswitch" id="hamburger-bg">
-<nav id="footer-nav" aria-label="navigation">
+        <button type="button" id="darkmode-button-small" class="colorswitch hamburger"></button>
+        <button type="button" id="hamburger-button" class="colorswitch hamburger" title="hamburger navigation menu button"></button>
+        <div class="hamburger colorswitch hidden" id="hamburger-bg">
+<nav id="hamburger-nav" aria-label="navigation">
     
     
-    <a class="footer-nav-item colorswitch" href="/" title="home"></a>
+    <a class="hamburger-nav-item colorswitch" href="/" title="home"> home</a><br>
     
-    <a class="footer-nav-item colorswitch" href="/about/" title="about"></a>
+    <a class="hamburger-nav-item colorswitch" href="/about/" title="about"> about</a><br>
     
-    <a class="footer-nav-item colorswitch" href="/links/" title="links"></a>
+    <a class="hamburger-nav-item colorswitch" href="/links/" title="links"> links</a><br>
     
-    <a class="footer-nav-item colorswitch" href="/music/" title="music"></a>
+    <a class="hamburger-nav-item colorswitch" href="/music/" title="music"> music</a><br>
     
-    <a class="footer-nav-item colorswitch" href="/games/" title="games"></a>
+    <a class="hamburger-nav-item colorswitch" href="/games/" title="games"> games</a><br>
     
-    <a class="footer-nav-item colorswitch" href="/software/" title="software"></a>
+    <a class="hamburger-nav-item colorswitch" href="/software/" title="software"> software</a><br>
     
-    <a class="footer-nav-item colorswitch" href="/posts/" title="posts">龎</a>
+    <a class="hamburger-nav-item colorswitch" href="/posts/" title="posts">龎 posts</a><br>
     
 </nav>
-
         </div>
 </span>
 </footer>
diff --git a/public/games/index.html b/public/games/index.html
index 92279ac..2b025a3 100644
--- a/public/games/index.html
+++ b/public/games/index.html
@@ -48,27 +48,27 @@
 <span id="footer-right">
         <input type="checkbox" id="darkmode-toggle" aria-label="darkmode toggle" class="toggleinput">
         <label class="togglelabel colorswitch" for="darkmode-toggle" aria-label="darkmode toggle" role="checkbox" id="darkmode-toggle-label"></label>
-        <button type="button" id="hamburger-button" class="colorswitch hamburger"></button>
-        <div class="hamburger colorswitch" id="hamburger-bg">
-<nav id="footer-nav" aria-label="navigation">
+        <button type="button" id="darkmode-button-small" class="colorswitch hamburger"></button>
+        <button type="button" id="hamburger-button" class="colorswitch hamburger" title="hamburger navigation menu button"></button>
+        <div class="hamburger colorswitch hidden" id="hamburger-bg">
+<nav id="hamburger-nav" aria-label="navigation">
     
     
-    <a class="footer-nav-item colorswitch" href="/" title="home"></a>
+    <a class="hamburger-nav-item colorswitch" href="/" title="home"> home</a><br>
     
-    <a class="footer-nav-item colorswitch" href="/about/" title="about"></a>
+    <a class="hamburger-nav-item colorswitch" href="/about/" title="about"> about</a><br>
     
-    <a class="footer-nav-item colorswitch" href="/links/" title="links"></a>
+    <a class="hamburger-nav-item colorswitch" href="/links/" title="links"> links</a><br>
     
-    <a class="footer-nav-item colorswitch" href="/music/" title="music"></a>
+    <a class="hamburger-nav-item colorswitch" href="/music/" title="music"> music</a><br>
     
-    <a class="footer-nav-item active colorswitch" href="/games/" title="games"></a>
+    <a class="hamburger-nav-item active colorswitch" href="/games/" title="games"> games</a><br>
     
-    <a class="footer-nav-item colorswitch" href="/software/" title="software"></a>
+    <a class="hamburger-nav-item colorswitch" href="/software/" title="software"> software</a><br>
     
-    <a class="footer-nav-item colorswitch" href="/posts/" title="posts">龎</a>
+    <a class="hamburger-nav-item colorswitch" href="/posts/" title="posts">龎 posts</a><br>
     
 </nav>
-
         </div>
 </span>
 </footer>
diff --git a/public/index.html b/public/index.html
index 6cb41d5..90c7733 100644
--- a/public/index.html
+++ b/public/index.html
@@ -63,27 +63,27 @@ if you ever wish to <em>experience</em> of of those, i hope you enjoy!</p>
 <span id="footer-right">
         <input type="checkbox" id="darkmode-toggle" aria-label="darkmode toggle" class="toggleinput">
         <label class="togglelabel colorswitch" for="darkmode-toggle" aria-label="darkmode toggle" role="checkbox" id="darkmode-toggle-label"></label>
-        <button type="button" id="hamburger-button" class="colorswitch hamburger"></button>
-        <div class="hamburger colorswitch" id="hamburger-bg">
-<nav id="footer-nav" aria-label="navigation">
+        <button type="button" id="darkmode-button-small" class="colorswitch hamburger"></button>
+        <button type="button" id="hamburger-button" class="colorswitch hamburger" title="hamburger navigation menu button"></button>
+        <div class="hamburger colorswitch hidden" id="hamburger-bg">
+<nav id="hamburger-nav" aria-label="navigation">
     
     
-    <a class="footer-nav-item active colorswitch" href="/" title="home"></a>
+    <a class="hamburger-nav-item active colorswitch" href="/" title="home"> home</a><br>
     
-    <a class="footer-nav-item colorswitch" href="/about/" title="about"></a>
+    <a class="hamburger-nav-item colorswitch" href="/about/" title="about"> about</a><br>
     
-    <a class="footer-nav-item colorswitch" href="/links/" title="links"></a>
+    <a class="hamburger-nav-item colorswitch" href="/links/" title="links"> links</a><br>
     
-    <a class="footer-nav-item colorswitch" href="/music/" title="music"></a>
+    <a class="hamburger-nav-item colorswitch" href="/music/" title="music"> music</a><br>
     
-    <a class="footer-nav-item colorswitch" href="/games/" title="games"></a>
+    <a class="hamburger-nav-item colorswitch" href="/games/" title="games"> games</a><br>
     
-    <a class="footer-nav-item colorswitch" href="/software/" title="software"></a>
+    <a class="hamburger-nav-item colorswitch" href="/software/" title="software"> software</a><br>
     
-    <a class="footer-nav-item colorswitch" href="/posts/" title="posts">龎</a>
+    <a class="hamburger-nav-item colorswitch" href="/posts/" title="posts">龎 posts</a><br>
     
 </nav>
-
         </div>
 </span>
 </footer>
diff --git a/public/js/hamburger.js b/public/js/hamburger.js
index 2433a0e..4b2b8f0 100644
--- a/public/js/hamburger.js
+++ b/public/js/hamburger.js
@@ -1 +1,25 @@
-function activateHamburger() {}
+const button = document.getElementById("hamburger-button");
+const bg = document.getElementById("hamburger-bg");
+let hidden = true;
+
+export function activateHamburger() {
+  button.addEventListener("click", function () {
+    hidden = !hidden;
+    console.log(hidden);
+    if (hidden === true) {
+      hide();
+    } else {
+      unhide();
+    }
+  });
+}
+
+function unhide() {
+  bg.classList.remove("hidden");
+  button.innerHTML = "窱";
+}
+
+function hide() {
+  bg.classList.add("hidden");
+  button.innerHTML = "";
+}
diff --git a/public/js/lightmode.js b/public/js/lightmode.js
index 11f6d52..cc5f62d 100644
--- a/public/js/lightmode.js
+++ b/public/js/lightmode.js
@@ -1,13 +1,16 @@
 const checkbox = document.getElementById("darkmode-toggle");
 const colorswitchers = document.getElementsByClassName("colorswitch");
+const button = document.getElementById("darkmode-button-small");
 
 function switchToLight() {
+  button.innerHTML = "滛";
   for (let item of colorswitchers) {
     item.classList.add("light");
   }
 }
 
 function switchToDark() {
+  button.innerHTML = "";
   for (let item of colorswitchers) {
     console.log(item);
     item.classList.remove("light");
@@ -21,6 +24,10 @@ export function updateMode() {
     switchToDark();
   }
   checkbox.checked = localStorage.getItem("dark");
+
+  button.addEventListener("click", function () {
+    checkbox.click();
+  });
   checkbox.addEventListener("change", function () {
     localStorage.setItem("light", this.checked);
     if (this.checked) {
diff --git a/public/links/buddies/index.html b/public/links/buddies/index.html
index fe470e2..c20d970 100644
--- a/public/links/buddies/index.html
+++ b/public/links/buddies/index.html
@@ -89,27 +89,27 @@ this type of website also just makes me happy!</p>
 <span id="footer-right">
         <input type="checkbox" id="darkmode-toggle" aria-label="darkmode toggle" class="toggleinput">
         <label class="togglelabel colorswitch" for="darkmode-toggle" aria-label="darkmode toggle" role="checkbox" id="darkmode-toggle-label"></label>
-        <button type="button" id="hamburger-button" class="colorswitch hamburger"></button>
-        <div class="hamburger colorswitch" id="hamburger-bg">
-<nav id="footer-nav" aria-label="navigation">
+        <button type="button" id="darkmode-button-small" class="colorswitch hamburger"></button>
+        <button type="button" id="hamburger-button" class="colorswitch hamburger" title="hamburger navigation menu button"></button>
+        <div class="hamburger colorswitch hidden" id="hamburger-bg">
+<nav id="hamburger-nav" aria-label="navigation">
     
     
-    <a class="footer-nav-item colorswitch" href="/" title="home"></a>
+    <a class="hamburger-nav-item colorswitch" href="/" title="home"> home</a><br>
     
-    <a class="footer-nav-item colorswitch" href="/about/" title="about"></a>
+    <a class="hamburger-nav-item colorswitch" href="/about/" title="about"> about</a><br>
     
-    <a class="footer-nav-item active colorswitch" href="/links/" title="links"></a>
+    <a class="hamburger-nav-item active colorswitch" href="/links/" title="links"> links</a><br>
     
-    <a class="footer-nav-item colorswitch" href="/music/" title="music"></a>
+    <a class="hamburger-nav-item colorswitch" href="/music/" title="music"> music</a><br>
     
-    <a class="footer-nav-item colorswitch" href="/games/" title="games"></a>
+    <a class="hamburger-nav-item colorswitch" href="/games/" title="games"> games</a><br>
     
-    <a class="footer-nav-item colorswitch" href="/software/" title="software"></a>
+    <a class="hamburger-nav-item colorswitch" href="/software/" title="software"> software</a><br>
     
-    <a class="footer-nav-item colorswitch" href="/posts/" title="posts">龎</a>
+    <a class="hamburger-nav-item colorswitch" href="/posts/" title="posts">龎 posts</a><br>
     
 </nav>
-
         </div>
 </span>
 </footer>
diff --git a/public/links/contact/index.html b/public/links/contact/index.html
index 1916640..6c4ab2f 100644
--- a/public/links/contact/index.html
+++ b/public/links/contact/index.html
@@ -58,27 +58,27 @@
 <span id="footer-right">
         <input type="checkbox" id="darkmode-toggle" aria-label="darkmode toggle" class="toggleinput">
         <label class="togglelabel colorswitch" for="darkmode-toggle" aria-label="darkmode toggle" role="checkbox" id="darkmode-toggle-label"></label>
-        <button type="button" id="hamburger-button" class="colorswitch hamburger"></button>
-        <div class="hamburger colorswitch" id="hamburger-bg">
-<nav id="footer-nav" aria-label="navigation">
+        <button type="button" id="darkmode-button-small" class="colorswitch hamburger"></button>
+        <button type="button" id="hamburger-button" class="colorswitch hamburger" title="hamburger navigation menu button"></button>
+        <div class="hamburger colorswitch hidden" id="hamburger-bg">
+<nav id="hamburger-nav" aria-label="navigation">
     
     
-    <a class="footer-nav-item colorswitch" href="/" title="home"></a>
+    <a class="hamburger-nav-item colorswitch" href="/" title="home"> home</a><br>
     
-    <a class="footer-nav-item colorswitch" href="/about/" title="about"></a>
+    <a class="hamburger-nav-item colorswitch" href="/about/" title="about"> about</a><br>
     
-    <a class="footer-nav-item active colorswitch" href="/links/" title="links"></a>
+    <a class="hamburger-nav-item active colorswitch" href="/links/" title="links"> links</a><br>
     
-    <a class="footer-nav-item colorswitch" href="/music/" title="music"></a>
+    <a class="hamburger-nav-item colorswitch" href="/music/" title="music"> music</a><br>
     
-    <a class="footer-nav-item colorswitch" href="/games/" title="games"></a>
+    <a class="hamburger-nav-item colorswitch" href="/games/" title="games"> games</a><br>
     
-    <a class="footer-nav-item colorswitch" href="/software/" title="software"></a>
+    <a class="hamburger-nav-item colorswitch" href="/software/" title="software"> software</a><br>
     
-    <a class="footer-nav-item colorswitch" href="/posts/" title="posts">龎</a>
+    <a class="hamburger-nav-item colorswitch" href="/posts/" title="posts">龎 posts</a><br>
     
 </nav>
-
         </div>
 </span>
 </footer>
diff --git a/public/links/index.html b/public/links/index.html
index 2f095ef..e17d1c6 100644
--- a/public/links/index.html
+++ b/public/links/index.html
@@ -66,27 +66,27 @@
 <span id="footer-right">
         <input type="checkbox" id="darkmode-toggle" aria-label="darkmode toggle" class="toggleinput">
         <label class="togglelabel colorswitch" for="darkmode-toggle" aria-label="darkmode toggle" role="checkbox" id="darkmode-toggle-label"></label>
-        <button type="button" id="hamburger-button" class="colorswitch hamburger"></button>
-        <div class="hamburger colorswitch" id="hamburger-bg">
-<nav id="footer-nav" aria-label="navigation">
+        <button type="button" id="darkmode-button-small" class="colorswitch hamburger"></button>
+        <button type="button" id="hamburger-button" class="colorswitch hamburger" title="hamburger navigation menu button"></button>
+        <div class="hamburger colorswitch hidden" id="hamburger-bg">
+<nav id="hamburger-nav" aria-label="navigation">
     
     
-    <a class="footer-nav-item colorswitch" href="/" title="home"></a>
+    <a class="hamburger-nav-item colorswitch" href="/" title="home"> home</a><br>
     
-    <a class="footer-nav-item colorswitch" href="/about/" title="about"></a>
+    <a class="hamburger-nav-item colorswitch" href="/about/" title="about"> about</a><br>
     
-    <a class="footer-nav-item active colorswitch" href="/links/" title="links"></a>
+    <a class="hamburger-nav-item active colorswitch" href="/links/" title="links"> links</a><br>
     
-    <a class="footer-nav-item colorswitch" href="/music/" title="music"></a>
+    <a class="hamburger-nav-item colorswitch" href="/music/" title="music"> music</a><br>
     
-    <a class="footer-nav-item colorswitch" href="/games/" title="games"></a>
+    <a class="hamburger-nav-item colorswitch" href="/games/" title="games"> games</a><br>
     
-    <a class="footer-nav-item colorswitch" href="/software/" title="software"></a>
+    <a class="hamburger-nav-item colorswitch" href="/software/" title="software"> software</a><br>
     
-    <a class="footer-nav-item colorswitch" href="/posts/" title="posts">龎</a>
+    <a class="hamburger-nav-item colorswitch" href="/posts/" title="posts">龎 posts</a><br>
     
 </nav>
-
         </div>
 </span>
 </footer>
diff --git a/public/links/nice_things/index.html b/public/links/nice_things/index.html
index c4ac208..54166e2 100644
--- a/public/links/nice_things/index.html
+++ b/public/links/nice_things/index.html
@@ -69,27 +69,27 @@
 <span id="footer-right">
         <input type="checkbox" id="darkmode-toggle" aria-label="darkmode toggle" class="toggleinput">
         <label class="togglelabel colorswitch" for="darkmode-toggle" aria-label="darkmode toggle" role="checkbox" id="darkmode-toggle-label"></label>
-        <button type="button" id="hamburger-button" class="colorswitch hamburger"></button>
-        <div class="hamburger colorswitch" id="hamburger-bg">
-<nav id="footer-nav" aria-label="navigation">
+        <button type="button" id="darkmode-button-small" class="colorswitch hamburger"></button>
+        <button type="button" id="hamburger-button" class="colorswitch hamburger" title="hamburger navigation menu button"></button>
+        <div class="hamburger colorswitch hidden" id="hamburger-bg">
+<nav id="hamburger-nav" aria-label="navigation">
     
     
-    <a class="footer-nav-item colorswitch" href="/" title="home"></a>
+    <a class="hamburger-nav-item colorswitch" href="/" title="home"> home</a><br>
     
-    <a class="footer-nav-item colorswitch" href="/about/" title="about"></a>
+    <a class="hamburger-nav-item colorswitch" href="/about/" title="about"> about</a><br>
     
-    <a class="footer-nav-item active colorswitch" href="/links/" title="links"></a>
+    <a class="hamburger-nav-item active colorswitch" href="/links/" title="links"> links</a><br>
     
-    <a class="footer-nav-item colorswitch" href="/music/" title="music"></a>
+    <a class="hamburger-nav-item colorswitch" href="/music/" title="music"> music</a><br>
     
-    <a class="footer-nav-item colorswitch" href="/games/" title="games"></a>
+    <a class="hamburger-nav-item colorswitch" href="/games/" title="games"> games</a><br>
     
-    <a class="footer-nav-item colorswitch" href="/software/" title="software"></a>
+    <a class="hamburger-nav-item colorswitch" href="/software/" title="software"> software</a><br>
     
-    <a class="footer-nav-item colorswitch" href="/posts/" title="posts">龎</a>
+    <a class="hamburger-nav-item colorswitch" href="/posts/" title="posts">龎 posts</a><br>
     
 </nav>
-
         </div>
 </span>
 </footer>
diff --git a/public/music/index.html b/public/music/index.html
index 056295f..836e929 100644
--- a/public/music/index.html
+++ b/public/music/index.html
@@ -54,27 +54,27 @@
 <span id="footer-right">
         <input type="checkbox" id="darkmode-toggle" aria-label="darkmode toggle" class="toggleinput">
         <label class="togglelabel colorswitch" for="darkmode-toggle" aria-label="darkmode toggle" role="checkbox" id="darkmode-toggle-label"></label>
-        <button type="button" id="hamburger-button" class="colorswitch hamburger"></button>
-        <div class="hamburger colorswitch" id="hamburger-bg">
-<nav id="footer-nav" aria-label="navigation">
+        <button type="button" id="darkmode-button-small" class="colorswitch hamburger"></button>
+        <button type="button" id="hamburger-button" class="colorswitch hamburger" title="hamburger navigation menu button"></button>
+        <div class="hamburger colorswitch hidden" id="hamburger-bg">
+<nav id="hamburger-nav" aria-label="navigation">
     
     
-    <a class="footer-nav-item colorswitch" href="/" title="home"></a>
+    <a class="hamburger-nav-item colorswitch" href="/" title="home"> home</a><br>
     
-    <a class="footer-nav-item colorswitch" href="/about/" title="about"></a>
+    <a class="hamburger-nav-item colorswitch" href="/about/" title="about"> about</a><br>
     
-    <a class="footer-nav-item colorswitch" href="/links/" title="links"></a>
+    <a class="hamburger-nav-item colorswitch" href="/links/" title="links"> links</a><br>
     
-    <a class="footer-nav-item active colorswitch" href="/music/" title="music"></a>
+    <a class="hamburger-nav-item active colorswitch" href="/music/" title="music"> music</a><br>
     
-    <a class="footer-nav-item colorswitch" href="/games/" title="games"></a>
+    <a class="hamburger-nav-item colorswitch" href="/games/" title="games"> games</a><br>
     
-    <a class="footer-nav-item colorswitch" href="/software/" title="software"></a>
+    <a class="hamburger-nav-item colorswitch" href="/software/" title="software"> software</a><br>
     
-    <a class="footer-nav-item colorswitch" href="/posts/" title="posts">龎</a>
+    <a class="hamburger-nav-item colorswitch" href="/posts/" title="posts">龎 posts</a><br>
     
 </nav>
-
         </div>
 </span>
 </footer>
diff --git a/public/posts/index.html b/public/posts/index.html
index 85c5cf7..b2ad23a 100644
--- a/public/posts/index.html
+++ b/public/posts/index.html
@@ -48,27 +48,27 @@
 <span id="footer-right">
         <input type="checkbox" id="darkmode-toggle" aria-label="darkmode toggle" class="toggleinput">
         <label class="togglelabel colorswitch" for="darkmode-toggle" aria-label="darkmode toggle" role="checkbox" id="darkmode-toggle-label"></label>
-        <button type="button" id="hamburger-button" class="colorswitch hamburger"></button>
-        <div class="hamburger colorswitch" id="hamburger-bg">
-<nav id="footer-nav" aria-label="navigation">
+        <button type="button" id="darkmode-button-small" class="colorswitch hamburger"></button>
+        <button type="button" id="hamburger-button" class="colorswitch hamburger" title="hamburger navigation menu button"></button>
+        <div class="hamburger colorswitch hidden" id="hamburger-bg">
+<nav id="hamburger-nav" aria-label="navigation">
     
     
-    <a class="footer-nav-item colorswitch" href="/" title="home"></a>
+    <a class="hamburger-nav-item colorswitch" href="/" title="home"> home</a><br>
     
-    <a class="footer-nav-item colorswitch" href="/about/" title="about"></a>
+    <a class="hamburger-nav-item colorswitch" href="/about/" title="about"> about</a><br>
     
-    <a class="footer-nav-item colorswitch" href="/links/" title="links"></a>
+    <a class="hamburger-nav-item colorswitch" href="/links/" title="links"> links</a><br>
     
-    <a class="footer-nav-item colorswitch" href="/music/" title="music"></a>
+    <a class="hamburger-nav-item colorswitch" href="/music/" title="music"> music</a><br>
     
-    <a class="footer-nav-item colorswitch" href="/games/" title="games"></a>
+    <a class="hamburger-nav-item colorswitch" href="/games/" title="games"> games</a><br>
     
-    <a class="footer-nav-item colorswitch" href="/software/" title="software"></a>
+    <a class="hamburger-nav-item colorswitch" href="/software/" title="software"> software</a><br>
     
-    <a class="footer-nav-item active colorswitch" href="/posts/" title="posts">龎</a>
+    <a class="hamburger-nav-item active colorswitch" href="/posts/" title="posts">龎 posts</a><br>
     
 </nav>
-
         </div>
 </span>
 </footer>
diff --git a/public/scss/main.css b/public/scss/main.css
index 691be61..0e9bf45 100644
--- a/public/scss/main.css
+++ b/public/scss/main.css
@@ -220,6 +220,24 @@ button {
   #pageindicator:hover {
     background-color: transparent; }
 
+#hamburger-bg {
+  background-color: #413c74; }
+  #hamburger-bg .hamburger-nav-item {
+    background-color: transparent;
+    color: #ffdc6d;
+    border-color: #ffdc6d; }
+    #hamburger-bg .hamburger-nav-item:hover {
+      background-color: #ffdc6d;
+      color: #413c74; }
+  #hamburger-bg.light {
+    background-color: #ffffff; }
+    #hamburger-bg.light .hamburger-nav-item {
+      color: #9b5bb4;
+      border-color: #9b5bb4; }
+      #hamburger-bg.light .hamburger-nav-item:hover {
+        background-color: #9b5bb4;
+        color: #ffffff; }
+
 html,
 body {
   height: 100%;
@@ -337,14 +355,25 @@ header {
 
 #hamburger-bg {
   position: fixed;
-  background-color: red;
-  opacity: 40%;
   width: 100%;
   height: calc(100% - 42pt);
   left: 0pt;
   top: 0pt;
   right: 0;
-  transition: 0s; }
+  transition: 0s;
+  display: grid;
+  align-items: center;
+  justify-content: center; }
+  #hamburger-bg * {
+    display: grid;
+    margin-top: 2%;
+    margin-bottom: 2%;
+    text-align: center; }
+  #hamburger-bg.hidden {
+    display: none; }
+
+#darkmode-button-small {
+  margin-right: 8pt; }
 
 @font-face {
   font-family: CaskaydiaCove;
@@ -490,7 +519,13 @@ ul a {
   border-style: solid;
   padding: 0.12em; }
 
-#hamburger-button {
+#hamburger-bg .hamburger-nav-item {
+  border-style: solid;
+  padding: 0.12em; }
+
+#hamburger-button,
+#hamburger-bg,
+#darkmode-button-small {
   display: none; }
 
 @media screen and (max-width: 640pt) {
@@ -498,5 +533,14 @@ ul a {
   #darkmode-toggle,
   #darkmode-toggle-label {
     display: none; }
-  #hamburger-button {
-    display: flex; } }
+  #hamburger-button,
+  #darkmode-button-small,
+  #hamburger-bg,
+  #hamburger-bg #darkmode-toggle-label,
+  #hamburger-bg #darkmode-toggle {
+    display: flex; }
+  #hamburger-bg #darkmode-toggle,
+  #hamburger-bg #darkmode-toggle-label {
+    position: absolute;
+    bottom: 1em;
+    right: 1em; } }
diff --git a/public/software/index.html b/public/software/index.html
index bb42d7b..cfd84ec 100644
--- a/public/software/index.html
+++ b/public/software/index.html
@@ -48,27 +48,27 @@
 <span id="footer-right">
         <input type="checkbox" id="darkmode-toggle" aria-label="darkmode toggle" class="toggleinput">
         <label class="togglelabel colorswitch" for="darkmode-toggle" aria-label="darkmode toggle" role="checkbox" id="darkmode-toggle-label"></label>
-        <button type="button" id="hamburger-button" class="colorswitch hamburger"></button>
-        <div class="hamburger colorswitch" id="hamburger-bg">
-<nav id="footer-nav" aria-label="navigation">
+        <button type="button" id="darkmode-button-small" class="colorswitch hamburger"></button>
+        <button type="button" id="hamburger-button" class="colorswitch hamburger" title="hamburger navigation menu button"></button>
+        <div class="hamburger colorswitch hidden" id="hamburger-bg">
+<nav id="hamburger-nav" aria-label="navigation">
     
     
-    <a class="footer-nav-item colorswitch" href="/" title="home"></a>
+    <a class="hamburger-nav-item colorswitch" href="/" title="home"> home</a><br>
     
-    <a class="footer-nav-item colorswitch" href="/about/" title="about"></a>
+    <a class="hamburger-nav-item colorswitch" href="/about/" title="about"> about</a><br>
     
-    <a class="footer-nav-item colorswitch" href="/links/" title="links"></a>
+    <a class="hamburger-nav-item colorswitch" href="/links/" title="links"> links</a><br>
     
-    <a class="footer-nav-item colorswitch" href="/music/" title="music"></a>
+    <a class="hamburger-nav-item colorswitch" href="/music/" title="music"> music</a><br>
     
-    <a class="footer-nav-item colorswitch" href="/games/" title="games"></a>
+    <a class="hamburger-nav-item colorswitch" href="/games/" title="games"> games</a><br>
     
-    <a class="footer-nav-item active colorswitch" href="/software/" title="software"></a>
+    <a class="hamburger-nav-item active colorswitch" href="/software/" title="software"> software</a><br>
     
-    <a class="footer-nav-item colorswitch" href="/posts/" title="posts">龎</a>
+    <a class="hamburger-nav-item colorswitch" href="/posts/" title="posts">龎 posts</a><br>
     
 </nav>
-
         </div>
 </span>
 </footer>
diff --git a/public/tags/index.html b/public/tags/index.html
index 8dc57a3..268a355 100644
--- a/public/tags/index.html
+++ b/public/tags/index.html
@@ -48,27 +48,27 @@
 <span id="footer-right">
         <input type="checkbox" id="darkmode-toggle" aria-label="darkmode toggle" class="toggleinput">
         <label class="togglelabel colorswitch" for="darkmode-toggle" aria-label="darkmode toggle" role="checkbox" id="darkmode-toggle-label"></label>
-        <button type="button" id="hamburger-button" class="colorswitch hamburger"></button>
-        <div class="hamburger colorswitch" id="hamburger-bg">
-<nav id="footer-nav" aria-label="navigation">
+        <button type="button" id="darkmode-button-small" class="colorswitch hamburger"></button>
+        <button type="button" id="hamburger-button" class="colorswitch hamburger" title="hamburger navigation menu button"></button>
+        <div class="hamburger colorswitch hidden" id="hamburger-bg">
+<nav id="hamburger-nav" aria-label="navigation">
     
     
-    <a class="footer-nav-item colorswitch" href="/" title="home"></a>
+    <a class="hamburger-nav-item colorswitch" href="/" title="home"> home</a><br>
     
-    <a class="footer-nav-item colorswitch" href="/about/" title="about"></a>
+    <a class="hamburger-nav-item colorswitch" href="/about/" title="about"> about</a><br>
     
-    <a class="footer-nav-item colorswitch" href="/links/" title="links"></a>
+    <a class="hamburger-nav-item colorswitch" href="/links/" title="links"> links</a><br>
     
-    <a class="footer-nav-item colorswitch" href="/music/" title="music"></a>
+    <a class="hamburger-nav-item colorswitch" href="/music/" title="music"> music</a><br>
     
-    <a class="footer-nav-item colorswitch" href="/games/" title="games"></a>
+    <a class="hamburger-nav-item colorswitch" href="/games/" title="games"> games</a><br>
     
-    <a class="footer-nav-item colorswitch" href="/software/" title="software"></a>
+    <a class="hamburger-nav-item colorswitch" href="/software/" title="software"> software</a><br>
     
-    <a class="footer-nav-item colorswitch" href="/posts/" title="posts">龎</a>
+    <a class="hamburger-nav-item colorswitch" href="/posts/" title="posts">龎 posts</a><br>
     
 </nav>
-
         </div>
 </span>
 </footer>