add games

public/about/index.html

@@ -45,7 +45,7 @@ i&rsquo;m also trans and gay and queer :)</p>
     </div>
 </aside>
 </div><footer class="colorswitch">
-<span id="footer-left"></span>
+    <span id="footer-left"><a href="/" id="pageindicator" class="colorswitch" title="about"> batsite</a></span>
 <span id="footer-center">
 <nav id="footer-nav" aria-label="navigation">
     
@@ -68,9 +68,31 @@ i&rsquo;m also trans and gay and queer :)</p>
 </span>
 <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"></label>
+        <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">
+    
+    
+    <a class="footer-nav-item colorswitch" href="/" title="home"></a>
+    
+    <a class="footer-nav-item active colorswitch" href="/about/" title="about"></a>
+    
+    <a class="footer-nav-item colorswitch" href="/links/" title="links"></a>
+    
+    <a class="footer-nav-item colorswitch" href="/music/" title="music"></a>
+    
+    <a class="footer-nav-item colorswitch" href="/games/" title="games"></a>
+    
+    <a class="footer-nav-item colorswitch" href="/software/" title="software"></a>
+    
+    <a class="footer-nav-item colorswitch" href="/posts/" title="posts">龎</a>
+    
+</nav>
+
+        </div>
 </span>
 </footer>
-<script src="/js/main.js"></script>
+<script type="module" src="/js/main.js"></script>
   </body>
 </html>

public/categories/index.html

@@ -24,7 +24,7 @@
     </div>
 </main>
 </div><footer class="colorswitch">
-<span id="footer-left"></span>
+    <span id="footer-left"><a href="/" id="pageindicator" class="colorswitch" title="Categories"> batsite</a></span>
 <span id="footer-center">
 <nav id="footer-nav" aria-label="navigation">
     
@@ -47,9 +47,31 @@
 </span>
 <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"></label>
+        <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">
+    
+    
+    <a class="footer-nav-item colorswitch" href="/" title="home"></a>
+    
+    <a class="footer-nav-item colorswitch" href="/about/" title="about"></a>
+    
+    <a class="footer-nav-item colorswitch" href="/links/" title="links"></a>
+    
+    <a class="footer-nav-item colorswitch" href="/music/" title="music"></a>
+    
+    <a class="footer-nav-item colorswitch" href="/games/" title="games"></a>
+    
+    <a class="footer-nav-item colorswitch" href="/software/" title="software"></a>
+    
+    <a class="footer-nav-item colorswitch" href="/posts/" title="posts">龎</a>
+    
+</nav>
+
+        </div>
 </span>
 </footer>
-<script src="/js/main.js"></script>
+<script type="module" src="/js/main.js"></script>
   </body>
 </html>

public/games/index.html

@@ -24,7 +24,7 @@
     </div>
 </main>
 </div><footer class="colorswitch">
-<span id="footer-left"></span>
+    <span id="footer-left"><a href="/" id="pageindicator" class="colorswitch" title="games"> batsite</a></span>
 <span id="footer-center">
 <nav id="footer-nav" aria-label="navigation">
     
@@ -47,9 +47,31 @@
 </span>
 <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"></label>
+        <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">
+    
+    
+    <a class="footer-nav-item colorswitch" href="/" title="home"></a>
+    
+    <a class="footer-nav-item colorswitch" href="/about/" title="about"></a>
+    
+    <a class="footer-nav-item colorswitch" href="/links/" title="links"></a>
+    
+    <a class="footer-nav-item colorswitch" href="/music/" title="music"></a>
+    
+    <a class="footer-nav-item active colorswitch" href="/games/" title="games"></a>
+    
+    <a class="footer-nav-item colorswitch" href="/software/" title="software"></a>
+    
+    <a class="footer-nav-item colorswitch" href="/posts/" title="posts">龎</a>
+    
+</nav>
+
+        </div>
 </span>
 </footer>
-<script src="/js/main.js"></script>
+<script type="module" src="/js/main.js"></script>
   </body>
 </html>

public/index.html

@@ -39,7 +39,7 @@ if you ever wish to <em>experience</em> of of those, i hope you enjoy!</p>
   </p>
 </article>
 </div><footer class="colorswitch">
-<span id="footer-left"></span>
+    <span id="footer-left"><a href="/" id="pageindicator" class="colorswitch" title="home"> batsite</a></span>
 <span id="footer-center">
 <nav id="footer-nav" aria-label="navigation">
     
@@ -62,9 +62,31 @@ if you ever wish to <em>experience</em> of of those, i hope you enjoy!</p>
 </span>
 <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"></label>
+        <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">
+    
+    
+    <a class="footer-nav-item active colorswitch" href="/" title="home"></a>
+    
+    <a class="footer-nav-item colorswitch" href="/about/" title="about"></a>
+    
+    <a class="footer-nav-item colorswitch" href="/links/" title="links"></a>
+    
+    <a class="footer-nav-item colorswitch" href="/music/" title="music"></a>
+    
+    <a class="footer-nav-item colorswitch" href="/games/" title="games"></a>
+    
+    <a class="footer-nav-item colorswitch" href="/software/" title="software"></a>
+    
+    <a class="footer-nav-item colorswitch" href="/posts/" title="posts">龎</a>
+    
+</nav>
+
+        </div>
 </span>
 </footer>
-<script src="/js/main.js"></script>
+<script type="module" src="/js/main.js"></script>
   </body>
 </html>

public/js/hamburger.js

@@ -0,0 +1 @@
+function activateHamburger() {}

public/js/lightmode.js

@@ -0,0 +1,36 @@
+const checkbox = document.getElementById("darkmode-toggle");
+const colorswitchers = document.getElementsByClassName("colorswitch");
+
+function switchToLight() {
+  for (let item of colorswitchers) {
+    item.classList.add("light");
+  }
+}
+
+function switchToDark() {
+  for (let item of colorswitchers) {
+    console.log(item);
+    item.classList.remove("light");
+  }
+}
+
+export function updateMode() {
+  if (localStorage.getItem("light")) {
+    switchToLight();
+  } else {
+    switchToDark();
+  }
+  checkbox.checked = localStorage.getItem("dark");
+  checkbox.addEventListener("change", function () {
+    localStorage.setItem("light", this.checked);
+    if (this.checked) {
+      switchToLight();
+    } else {
+      localStorage.removeItem("light");
+      switchToDark();
+    }
+  });
+  if (localStorage.getItem("light")) {
+    checkbox.checked = true;
+  }
+}

public/js/main.js

@@ -1,36 +1,7 @@
-const checkbox = document.getElementById("darkmode-toggle");
+import { updateMode } from "./lightmode.js";
-const colorswitchers = document.getElementsByClassName("colorswitch");
+import { activateHamburger } from "./hamburger.js";
-
-function switchToLight() {
-  for (let item of colorswitchers) {
-    item.classList.add("light");
-  }
-}
-
-function switchToDark() {
-  for (let item of colorswitchers) {
-    console.log(item);
-    item.classList.remove("light");
-  }
-}
 
 document.addEventListener("DOMContentLoaded", () => {
-  if (localStorage.getItem("light")) {
+  updateMode();
-    switchToLight();
+  activateHamburger();
-  } else {
-    switchToDark();
-  }
-  checkbox.checked = localStorage.getItem("dark");
-  checkbox.addEventListener("change", function () {
-    localStorage.setItem("light", this.checked);
-    if (this.checked) {
-      switchToLight();
-    } else {
-      localStorage.removeItem("light");
-      switchToDark();
-    }
-  });
-  if (localStorage.getItem("light")) {
-    checkbox.checked = true;
-  }
 });

public/links/buddies/index.html

@@ -65,7 +65,7 @@ this type of website also just makes me happy!</p>
     </div>
 </aside>
 </div><footer class="colorswitch">
-<span id="footer-left"></span>
+    <span id="footer-left"><a href="/" id="pageindicator" class="colorswitch" title="buddies"> batsite</a></span>
 <span id="footer-center">
 <nav id="footer-nav" aria-label="navigation">
     
@@ -88,9 +88,31 @@ this type of website also just makes me happy!</p>
 </span>
 <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"></label>
+        <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">
+    
+    
+    <a class="footer-nav-item colorswitch" href="/" title="home"></a>
+    
+    <a class="footer-nav-item colorswitch" href="/about/" title="about"></a>
+    
+    <a class="footer-nav-item active colorswitch" href="/links/" title="links"></a>
+    
+    <a class="footer-nav-item colorswitch" href="/music/" title="music"></a>
+    
+    <a class="footer-nav-item colorswitch" href="/games/" title="games"></a>
+    
+    <a class="footer-nav-item colorswitch" href="/software/" title="software"></a>
+    
+    <a class="footer-nav-item colorswitch" href="/posts/" title="posts">龎</a>
+    
+</nav>
+
+        </div>
 </span>
 </footer>
-<script src="/js/main.js"></script>
+<script type="module" src="/js/main.js"></script>
   </body>
 </html>

public/links/contact/index.html

@@ -34,7 +34,7 @@
     </div>
 </aside>
 </div><footer class="colorswitch">
-<span id="footer-left"></span>
+    <span id="footer-left"><a href="/" id="pageindicator" class="colorswitch" title="find me"> batsite</a></span>
 <span id="footer-center">
 <nav id="footer-nav" aria-label="navigation">
     
@@ -57,9 +57,31 @@
 </span>
 <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"></label>
+        <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">
+    
+    
+    <a class="footer-nav-item colorswitch" href="/" title="home"></a>
+    
+    <a class="footer-nav-item colorswitch" href="/about/" title="about"></a>
+    
+    <a class="footer-nav-item active colorswitch" href="/links/" title="links"></a>
+    
+    <a class="footer-nav-item colorswitch" href="/music/" title="music"></a>
+    
+    <a class="footer-nav-item colorswitch" href="/games/" title="games"></a>
+    
+    <a class="footer-nav-item colorswitch" href="/software/" title="software"></a>
+    
+    <a class="footer-nav-item colorswitch" href="/posts/" title="posts">龎</a>
+    
+</nav>
+
+        </div>
 </span>
 </footer>
-<script src="/js/main.js"></script>
+<script type="module" src="/js/main.js"></script>
   </body>
 </html>

public/links/index.html

@@ -42,7 +42,7 @@
     </div>
 </main>
 </div><footer class="colorswitch">
-<span id="footer-left"></span>
+    <span id="footer-left"><a href="/" id="pageindicator" class="colorswitch" title="links"> batsite</a></span>
 <span id="footer-center">
 <nav id="footer-nav" aria-label="navigation">
     
@@ -65,9 +65,31 @@
 </span>
 <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"></label>
+        <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">
+    
+    
+    <a class="footer-nav-item colorswitch" href="/" title="home"></a>
+    
+    <a class="footer-nav-item colorswitch" href="/about/" title="about"></a>
+    
+    <a class="footer-nav-item active colorswitch" href="/links/" title="links"></a>
+    
+    <a class="footer-nav-item colorswitch" href="/music/" title="music"></a>
+    
+    <a class="footer-nav-item colorswitch" href="/games/" title="games"></a>
+    
+    <a class="footer-nav-item colorswitch" href="/software/" title="software"></a>
+    
+    <a class="footer-nav-item colorswitch" href="/posts/" title="posts">龎</a>
+    
+</nav>
+
+        </div>
 </span>
 </footer>
-<script src="/js/main.js"></script>
+<script type="module" src="/js/main.js"></script>
   </body>
 </html>

public/links/nice_things/index.html

@@ -45,7 +45,7 @@
     </div>
 </aside>
 </div><footer class="colorswitch">
-<span id="footer-left"></span>
+    <span id="footer-left"><a href="/" id="pageindicator" class="colorswitch" title="things that make me happy"> batsite</a></span>
 <span id="footer-center">
 <nav id="footer-nav" aria-label="navigation">
     
@@ -68,9 +68,31 @@
 </span>
 <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"></label>
+        <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">
+    
+    
+    <a class="footer-nav-item colorswitch" href="/" title="home"></a>
+    
+    <a class="footer-nav-item colorswitch" href="/about/" title="about"></a>
+    
+    <a class="footer-nav-item active colorswitch" href="/links/" title="links"></a>
+    
+    <a class="footer-nav-item colorswitch" href="/music/" title="music"></a>
+    
+    <a class="footer-nav-item colorswitch" href="/games/" title="games"></a>
+    
+    <a class="footer-nav-item colorswitch" href="/software/" title="software"></a>
+    
+    <a class="footer-nav-item colorswitch" href="/posts/" title="posts">龎</a>
+    
+</nav>
+
+        </div>
 </span>
 </footer>
-<script src="/js/main.js"></script>
+<script type="module" src="/js/main.js"></script>
   </body>
 </html>

public/music/index.html

@@ -30,7 +30,7 @@
     </div>
 </main>
 </div><footer class="colorswitch">
-<span id="footer-left"></span>
+    <span id="footer-left"><a href="/" id="pageindicator" class="colorswitch" title="music"> batsite</a></span>
 <span id="footer-center">
 <nav id="footer-nav" aria-label="navigation">
     
@@ -53,9 +53,31 @@
 </span>
 <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"></label>
+        <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">
+    
+    
+    <a class="footer-nav-item colorswitch" href="/" title="home"></a>
+    
+    <a class="footer-nav-item colorswitch" href="/about/" title="about"></a>
+    
+    <a class="footer-nav-item colorswitch" href="/links/" title="links"></a>
+    
+    <a class="footer-nav-item active colorswitch" href="/music/" title="music"></a>
+    
+    <a class="footer-nav-item colorswitch" href="/games/" title="games"></a>
+    
+    <a class="footer-nav-item colorswitch" href="/software/" title="software"></a>
+    
+    <a class="footer-nav-item colorswitch" href="/posts/" title="posts">龎</a>
+    
+</nav>
+
+        </div>
 </span>
 </footer>
-<script src="/js/main.js"></script>
+<script type="module" src="/js/main.js"></script>
   </body>
 </html>

public/posts/index.html

@@ -24,7 +24,7 @@
     </div>
 </main>
 </div><footer class="colorswitch">
-<span id="footer-left"></span>
+    <span id="footer-left"><a href="/" id="pageindicator" class="colorswitch" title="posts"> batsite</a></span>
 <span id="footer-center">
 <nav id="footer-nav" aria-label="navigation">
     
@@ -47,9 +47,31 @@
 </span>
 <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"></label>
+        <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">
+    
+    
+    <a class="footer-nav-item colorswitch" href="/" title="home"></a>
+    
+    <a class="footer-nav-item colorswitch" href="/about/" title="about"></a>
+    
+    <a class="footer-nav-item colorswitch" href="/links/" title="links"></a>
+    
+    <a class="footer-nav-item colorswitch" href="/music/" title="music"></a>
+    
+    <a class="footer-nav-item colorswitch" href="/games/" title="games"></a>
+    
+    <a class="footer-nav-item colorswitch" href="/software/" title="software"></a>
+    
+    <a class="footer-nav-item active colorswitch" href="/posts/" title="posts">龎</a>
+    
+</nav>
+
+        </div>
 </span>
 </footer>
-<script src="/js/main.js"></script>
+<script type="module" src="/js/main.js"></script>
   </body>
 </html>

public/scss/main.css

@@ -196,6 +196,30 @@ header {
   .posttitle a:hover {
     background-color: transparent; }
 
+button {
+  color: #413c74;
+  background-color: #ff8ad0;
+  border-color: #413c74; }
+  button:hover {
+    transition: 0.2s;
+    background-color: #413c74;
+    color: #ff8ad0; }
+  button.light {
+    color: #ffffff;
+    background-color: #413c74;
+    border-color: #ffffff; }
+    button.light:hover {
+      transition: 0.2s;
+      background-color: #ffffff;
+      color: #413c74; }
+
+#pageindicator {
+  background-color: transparent; }
+  #pageindicator.light {
+    color: #ffffff; }
+  #pageindicator:hover {
+    background-color: transparent; }
+
 html,
 body {
   height: 100%;
@@ -238,7 +262,8 @@ p code {
   margin-left: 24pt;
   justify-self: left;
   margin-right: auto;
-  display: inline-flex; }
+  display: inline-flex;
+  align-items: center; }
 
 #footer-right {
   margin-top: auto;
@@ -310,6 +335,17 @@ header {
   width: 100%;
   padding-top: 42pt; }
 
+#hamburger-bg {
+  position: fixed;
+  background-color: red;
+  opacity: 40%;
+  width: 100%;
+  height: calc(100% - 42pt);
+  left: 0pt;
+  top: 0pt;
+  right: 0;
+  transition: 0s; }
+
 @font-face {
   font-family: CaskaydiaCove;
   src: url(/font/CaskaydiaCove.ttf); }
@@ -320,7 +356,8 @@ header {
 
 * {
   font-family: CaskaydiaCove;
-  font-size: 12pt; }
+  font-size: 12pt;
+  text-overflow: clip; }
 
 p,
 .postdescription,
@@ -402,13 +439,15 @@ input:checked + label:after {
 input:checked + label::after {
   content: "滛"; }
 
-.footer-nav-item {
+.footer-nav-item,
+button {
   border-radius: 100%;
   height: 1em;
   width: 1em;
   justify-content: center;
   align-items: center;
-  border-style: solid; }
+  border-style: solid;
+  cursor: pointer; }
 
 .togglelabel {
   border: solid; }
@@ -450,3 +489,14 @@ p a,
 ul a {
   border-style: solid;
   padding: 0.12em; }
+
+#hamburger-button {
+  display: none; }
+
+@media screen and (max-width: 640pt) {
+  #footer-center,
+  #darkmode-toggle,
+  #darkmode-toggle-label {
+    display: none; }
+  #hamburger-button {
+    display: flex; } }

public/software/index.html

@@ -24,7 +24,7 @@
     </div>
 </main>
 </div><footer class="colorswitch">
-<span id="footer-left"></span>
+    <span id="footer-left"><a href="/" id="pageindicator" class="colorswitch" title="software"> batsite</a></span>
 <span id="footer-center">
 <nav id="footer-nav" aria-label="navigation">
     
@@ -47,9 +47,31 @@
 </span>
 <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"></label>
+        <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">
+    
+    
+    <a class="footer-nav-item colorswitch" href="/" title="home"></a>
+    
+    <a class="footer-nav-item colorswitch" href="/about/" title="about"></a>
+    
+    <a class="footer-nav-item colorswitch" href="/links/" title="links"></a>
+    
+    <a class="footer-nav-item colorswitch" href="/music/" title="music"></a>
+    
+    <a class="footer-nav-item colorswitch" href="/games/" title="games"></a>
+    
+    <a class="footer-nav-item active colorswitch" href="/software/" title="software"></a>
+    
+    <a class="footer-nav-item colorswitch" href="/posts/" title="posts">龎</a>
+    
+</nav>
+
+        </div>
 </span>
 </footer>
-<script src="/js/main.js"></script>
+<script type="module" src="/js/main.js"></script>
   </body>
 </html>

public/tags/index.html

@@ -24,7 +24,7 @@
     </div>
 </main>
 </div><footer class="colorswitch">
-<span id="footer-left"></span>
+    <span id="footer-left"><a href="/" id="pageindicator" class="colorswitch" title="Tags"> batsite</a></span>
 <span id="footer-center">
 <nav id="footer-nav" aria-label="navigation">
     
@@ -47,9 +47,31 @@
 </span>
 <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"></label>
+        <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">
+    
+    
+    <a class="footer-nav-item colorswitch" href="/" title="home"></a>
+    
+    <a class="footer-nav-item colorswitch" href="/about/" title="about"></a>
+    
+    <a class="footer-nav-item colorswitch" href="/links/" title="links"></a>
+    
+    <a class="footer-nav-item colorswitch" href="/music/" title="music"></a>
+    
+    <a class="footer-nav-item colorswitch" href="/games/" title="games"></a>
+    
+    <a class="footer-nav-item colorswitch" href="/software/" title="software"></a>
+    
+    <a class="footer-nav-item colorswitch" href="/posts/" title="posts">龎</a>
+    
+</nav>
+
+        </div>
 </span>
 </footer>
-<script src="/js/main.js"></script>
+<script type="module" src="/js/main.js"></script>
   </body>
 </html>

resources/_gen/assets/scss/scss/main.scss_f300667da4f5b5f84e1a9e0702b2fdde.content

@@ -338,13 +338,20 @@ 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: 14pt;
+    margin-bottom: 14pt;
+    text-align: center; }
 
 @font-face {
   font-family: CaskaydiaCove;