clean up js, start adding hamburger

assets/scss/colors.scss

@@ -1,9 +1,9 @@
 $light-bg: #ffffff;
 $light-bg-alt: #413c74;
 $light-fg: #413c74;
-$light-ln:   #9b5bb4  ;
+$light-ln: #9b5bb4;
 $light-accent1: #9b5bb4;
-$light-accent2:  #5183b9 ;
+$light-accent2: #5183b9;
 $light-accent3: #413c74;
 
 $dark-bg: #413c74;
@@ -50,7 +50,7 @@ a.footer-nav-item:hover {
   }
   color: $dark-bg-alt;
   background-color: $dark-bg;
-    border-color: $dark-bg;
+  border-color: $dark-bg;
   transition: $trans-short;
 }
 
@@ -131,7 +131,7 @@ h2 {
 
 h2 a {
   color: $dark-bg;
-  &.light{
+  &.light {
     color: $light-bg;
   }
 }
@@ -251,3 +251,32 @@ header {
     background-color: transparent;
   }
 }
+
+button {
+  color: $dark-bg;
+  background-color: $dark-bg-alt;
+  border-color: $dark-bg;
+  &:hover {
+    transition: $trans-short;
+    background-color: $dark-bg;
+    color: $dark-bg-alt;
+  }
+  &.light {
+    color: $light-bg;
+    background-color: $light-bg-alt;
+    border-color: $light-bg;
+    &:hover {
+      transition: $trans-short;
+      background-color: $light-bg;
+      color: $light-bg-alt;
+    }
+  }
+}
+
+#pageindicator {
+  &.light {
+    color: $light-bg;
+  }
+  &:hover {background-color: transparent;}
+  background-color: transparent;
+}

assets/scss/font.scss

@@ -17,6 +17,7 @@ $small: 12pt;
 * {
   font-family: CaskaydiaCove;
   font-size: $small;
+  text-overflow: clip;
 }
 
 p,

assets/scss/layout.scss

@@ -50,6 +50,7 @@ p code{
   justify-self: left;
   margin-right: auto;
   display: inline-flex;
+  align-items: center;
 }
 
 #footer-right {
@@ -133,3 +134,14 @@ header{
   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;
+}

assets/scss/main.scss

@@ -2,3 +2,4 @@
 @import "./layout";
 @import "./font";
 @import "./style";
+@import "./responsive"

assets/scss/responsive.css

@@ -0,0 +1,16 @@
+#hamburger-button {
+    display: none;
+}
+
+@media screen and (max-width: 640pt) {
+    #footer-center,
+    #darkmode-toggle,
+    #darkmode-toggle-label
+    {
+            display: none;
+    }
+    #hamburger-button {
+        display: flex;
+    }
+}
+

assets/scss/style.scss

@@ -52,13 +52,15 @@ 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;
+  cursor: pointer;
 }
 
 .togglelabel {

layouts/_default/baseof.html

@@ -5,6 +5,6 @@
     {{- partial "header.html" . -}}
     <div id="content">{{- block "main" . }}{{- end }}</div>
     {{- partial "footer.html" . -}}
-    <script src="/js/main.js"></script>
+    <script type="module" src="/js/main.js"></script>
   </body>
 </html>

layouts/partials/footer.html

@@ -1,5 +1,5 @@
 <footer class="colorswitch">
-<span id="footer-left"></span>
+    <span id="footer-left"><a href="/" id="pageindicator" class="colorswitch" title="{{.Title}}"> {{.Site.Title | truncate 14}}</a></span>
 <span id="footer-center">
 <nav id="footer-nav" aria-label="navigation">
     {{ $currentPage := . }}
@@ -10,6 +10,16 @@
 </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">
+    {{ $currentPage := . }}
+    {{ range .Site.Menus.nav }}
+    <a class="footer-nav-item{{if or ($currentPage.IsMenuCurrent "nav" .) ($currentPage.HasMenuCurrent "nav" .) }} active{{end}} colorswitch" href="{{ .URL }}" title="{{ .Title }}">{{ .Name }}</a>
+    {{ end }}
+</nav>
+
+        </div>
 </span>
 </footer>

static/js/hamburger.js

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

static/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;
+  }
+}

static/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;
-  }
 });