responsive footer

assets/scss/colors.scss

@@ -280,3 +280,27 @@ button {
   &:hover {background-color: transparent;}
   background-color: transparent;
 }
+
+#hamburger-bg{
+  background-color: $dark-bg;
+  & .hamburger-nav-item {
+    background-color: transparent;
+    color: $dark-ln;
+    border-color: $dark-ln;
+    &:hover {
+      background-color: $dark-ln;
+      color: $dark-bg;
+    }
+  }
+  &.light{
+    background-color: $light-bg;
+    & .hamburger-nav-item{
+      color: $light-ln;
+      border-color: $light-ln;
+      &:hover {
+        background-color: $light-ln;
+        color: $light-bg;
+      }
+    }
+  }
+}

assets/scss/layout.scss

@@ -136,7 +136,6 @@ header{
 
 #hamburger-bg{
   position: fixed;
-  background-color: red;
   width: 100%;
   height: calc(100% - 42pt);
   left: 0pt;
@@ -148,8 +147,15 @@ header{
   justify-content: center;
   & * {
     display: grid;
-    margin-top: 14pt;
-    margin-bottom: 14pt;
+    margin-top: 2%;
+    margin-bottom: 2%;
     text-align: center;
   }
+  &.hidden{
+    display: none;
+  }
+}
+
+#darkmode-button-small {
+  margin-right: 8pt;
 }

assets/scss/responsive.css

@@ -1,4 +1,6 @@
-#hamburger-button {
+#hamburger-button,
+#hamburger-bg,
+#darkmode-button-small{
     display: none;
 }
 
@@ -9,8 +11,18 @@
     {
             display: none;
     }
-    #hamburger-button {
+    #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;
+    }
 }
 

assets/scss/style.scss

@@ -101,3 +101,10 @@ ul a{
   border-style: solid;
   padding: 0.12em;
 }
+
+#hamburger-bg {
+  & .hamburger-nav-item {
+    border-style: solid;
+    padding: 0.12em;
+  }
+}