icon formatting

assets/scss/font.scss

@@ -5,29 +5,34 @@ $medium: 16pt;
 $small: 12pt;
 
 @font-face {
-    font-family: CaskaydiaCove;
-    src: url(/font/CaskaydiaCove.ttf);
+  font-family: CaskaydiaCove;
+  src: url(/font/CaskaydiaCove.ttf);
 }
 
 @font-face {
-    font-family: CaskaydiaCoveMono;
-    src: url(/font/CaskaydiaCoveMono.ttf);
+  font-family: CaskaydiaCoveMono;
+  src: url(/font/CaskaydiaCoveMono.ttf);
 }
 
 * {
-    font-family: CaskaydiaCove;
-    font-size: $small;
-    }
-h1 {font-size: $huge;}
+  font-family: CaskaydiaCove;
+  font-size: $small;
+}
+
+h1 {
+  font-size: $huge;
+}
 
 a {
-    text-decoration: none;
+  text-decoration: none;
 }
 
 footer * {
-    font-size: $big;
+  font-size: $large;
+  font-family: CaskaydiaCoveMono;
 }
 
-label::after{
-    font-family: CaskaydiaCoveMono;
+label::after {
+  font-family: CaskaydiaCoveMono;
+  font-size: $big;
 }

assets/scss/layout.scss

@@ -5,8 +5,8 @@ body {
 }
 
 footer {
-  height: 10%;
-  min-height: 24pt;
+  height: 6%;
+  min-height: 42pt;
   position: sticky;
   display: flex;
   align-items: center;
@@ -15,28 +15,37 @@ footer {
 }
 
 #content {
-  min-height: 90%;
+  min-height: 94%;
   right: auto;
 }
 
 #footer-left {
+  margin-top: auto;
+  margin-bottom: auto;
   margin-left: 24pt;
   justify-self: left;
   margin-right: auto;
+  display: inline-flex;
 }
 
 #footer-right {
+  margin-top: auto;
+  margin-bottom: auto;
   margin-left: auto;
   justify-self: right;
   margin-right: 24pt;
   align-content: center;
+  display: inline-flex;
 }
 
 #footer-center {
+  margin-top: auto;
+  margin-bottom: auto;
   margin-left: auto;
   margin-right: auto;
   justify-content: center;
   justify-self: center;
+  display: inline-flex;
 }
 
 * {
@@ -46,5 +55,15 @@ footer {
 
 #footer-right *{
   display: flex;
+  margin-top: auto;
+  margin-bottom: auto;
+}
+
+#footer-center *{
+  display: flex;
+  margin-right: 8pt;
+  margin-left: 8pt;
+  margin-top: auto;
+  margin-bottom: auto;
 }
 

assets/scss/style.scss

@@ -6,7 +6,9 @@ input[type="checkbox"]{
     cursor: pointer;
 }
 .toggleinput{
-    visibility: hidden;
+    opacity: 0;
+    max-height: 0;
+    overflow: hidden;
 }
 
 .togglelabel{

layouts/partials/footer.html

@@ -9,8 +9,8 @@
 </nav>
 </span>
 <span id="footer-right">
-        <input type="checkbox" id="darkmode-toggle" aria-label="darkmode toggle" class="toggleinput">
-        <label class="togglelabel colorswitch" for="darkmode-toggle"></label>
+        <input type="checkbox" id="darkmode-toggle" aria-label="darkmode toggle" class="toggleinput" aria-hidden="true">
+        <label class="togglelabel colorswitch" for="darkmode-toggle" aria-label="darkmode toggle" tabindex=0 role="checkbox"></label>
 </span>
 </footer>
 <script src="/js/darkmode.js"></script>

static/js/darkmode.js

@@ -8,7 +8,7 @@ if (localStorage.getItem("dark")) {
 }
 checkbox.checked = localStorage.getItem("dark");
 
-checkbox.addEventListener("click", function () {
+checkbox.addEventListener("change", function () {
   localStorage.setItem("dark", this.checked);
   if (this.checked) {
     switchToDark();