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 {