add logo in footer with link to 45drives.com

navigator/navigator.css

@@ -30,6 +30,7 @@
 	--scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-bg);
 	--loading-bg-color: rgba(255, 255, 255, 0.5);
 	--textarea-bg: var(--navigation);
+	--logo-45: #333;
 }
 
 [data-theme="dark"] {
@@ -44,6 +45,7 @@
 	--scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-bg);
 	--loading-bg-color: rgba(33, 36, 39, 0.5);
 	--textarea-bg: var(--navigation);
+	--logo-45: #fff;
 }
 
 .pf-c-button:disabled[data-theme="dark"] {
@@ -303,11 +305,21 @@ body::-webkit-scrollbar-thumb {
 	padding: 5px;
 }
 
-/* .nav-footer > div > input[type="checkbox"] {
-	margin: 0;
-	position: relative;
-	bottom: -2px;
-} */
+.nav-footer > a > img {
+	height: 1.25em;
+	width: auto;
+	margin-bottom: 4px;
+}
+
+.nav-footer > a > .logo-45 {
+	font-weight: 900;
+	color: var(--logo-45);
+}
+
+.nav-footer > a > .logo-drives {
+	font-weight: 600;
+	color: #981c20;
+}
 
 .nav-toggle {
 	justify-self: flex-end;

navigator/navigator.html

@@ -134,6 +134,10 @@
 				<span id="nav-num-dirs">-</span> Directories, <span id="nav-num-files">-</span> Files
 			</div>
 			<div class="spacer-stretchy"></div>
+			<a href="https://45drives.com" target="_blank">
+				<img src="branding/logo-light.svg" id="logo-45d"><span class="logo-45">45</span><span class="logo-drives">Drives</span>
+			</a>
+			<div class="spacer-stretchy"></div>
 			<div class="nav-toggle">
 				<div class="nav-btn-group">
 					<i class="fas fa-low-vision" id="nav-show-hidden-icon"></i>

navigator/navigator.js

@@ -58,34 +58,41 @@ function set_last_theme_state() {
 	var toggle_switch = document.getElementById("toggle-theme");
 	var state = localStorage.getItem("houston-theme-state");
 	var icon = document.getElementById("houston-theme-icon");
+	var logo = document.getElementById("logo-45d");
 	if (state === "light") {
 		toggle_switch.checked = false;
 		document.documentElement.setAttribute("data-theme", "light");
 		icon.classList.remove("fa-moon");
 		icon.classList.add("fa-sun");
+		logo.src = "branding/logo-light.svg";
 	} else if (state === "dark") {
 		toggle_switch.checked = true;
 		document.documentElement.setAttribute("data-theme", "dark");
 		icon.classList.remove("fa-sun");
 		icon.classList.add("fa-moon");
+		logo.src = "branding/logo-dark.svg";
 	} else {
 		toggle_switch.checked = false;
 		state = "light";
 		localStorage.setItem("houston-theme-state", state);
+		logo.src = "branding/logo-light.svg";
 	}
 }
 
 function switch_theme(/*event*/ e) {
 	var icon = document.getElementById("houston-theme-icon");
+	var logo = document.getElementById("logo-45d");
 	var state = "";
 	if (e.target.checked) {
 		state = "dark";
 		icon.classList.remove("fa-sun");
 		icon.classList.add("fa-moon");
+		logo.src = "branding/logo-dark.svg";
 	} else {
 		state = "light";
 		icon.classList.remove("fa-moon");
 		icon.classList.add("fa-sun");
+		logo.src = "branding/logo-light.svg";
 	}
 	document.documentElement.setAttribute("data-theme", state);
 	localStorage.setItem("houston-theme-state", state);