Theme cleanup

This isn't technically part of the Jekyllification, but it was bothering me.

_includes/footer.html

@@ -1,5 +1,10 @@
 <footer class="container">
-    <p class="float-end"><a class="social" href="#top"><i class="fa fa-arrow-up"></i></a></p>
+    <p id="end-block" class="float-end">
+        <span id="theme-container">
+        </span>
+        <a class="social" href="#top"><i class="fa fa-arrow-up"></i></a>
+
+    </p>
     <p id="social-block">
         <span class="item">&copy; <span id="year">2022-2024</span> Norse IoT Club</span>
         · <a href="https://norseiot.club/bylaws" class="item">Club Bylaws</a>

css/dark.css

@@ -21,11 +21,6 @@
     color: var(--color-tertiary);
 }
 
-#iot-theme {
-    height: 5.4em;
-
-}
-
 #campusgroups {
     filter: invert();
 }

css/index.css

@@ -9,22 +9,19 @@
 }
 
 #iot-theme {
-    position: fixed;
-    bottom: 0;
-    right: 0;
-    padding: 20px;
-	margin-bottom: 20px;
-	margin-right: 20px;
+	margin-right: 1.2em;
     cursor: pointer;
     border-radius: 50%;
 	display: flex;
 	justify-content: center;
-	align-items: center;
-	background-color: var(--body-bg);
-	filter: drop-shadow(2px 4px 6px var(--shadow-color));
+	align-items: top;
 
 }
 
+#end-block {
+	display: flex;
+}
+
 body {
 	background-color: var(--body-bg);
 }
@@ -186,7 +183,7 @@ body {
 	font-size: 28px;
 	color: var(--text);
 }
-.social:hover, .social:active {
+.social:hover, .social:active, #iot-theme:hover, #iot-theme:active {
 	color: var(--social-hover);
 }
 .social-header {

css/light.css

@@ -11,10 +11,4 @@
     --audio-border-color: #eee;
     --shadow-color: grey;
     --box-shadow-dark: 0 1rem 3rem rgba(0, 0, 0, .6);
-}
-
-
-#iot-theme {
-    height: 5.2em;
-
 }

js/index.js

@@ -1,6 +1,6 @@
 
 //This section of the code handles the Dark Mode popup.
-document.querySelector("body").innerHTML += `
+document.querySelector("#theme-container").innerHTML = `
 <div tabindex=0 onclick="theme('dark')" id="iot-theme" src="/images/dark.webp" class="" alt="Dark Mode">
 <i class="fa fa-2x fa-moon-o" aria-hidden="true"></i>
 </div>`