diff --git a/navigator/branding/logo-dark.svg b/navigator/branding/logo-dark.svg
new file mode 100644
index 0000000..52ff1d2
--- /dev/null
+++ b/navigator/branding/logo-dark.svg
@@ -0,0 +1,74 @@
+
+
diff --git a/navigator/branding/logo-light.svg b/navigator/branding/logo-light.svg
new file mode 100644
index 0000000..ad5f8d7
--- /dev/null
+++ b/navigator/branding/logo-light.svg
@@ -0,0 +1,73 @@
+
+
diff --git a/navigator/navigator.css b/navigator/navigator.css
index fe5bd2b..5a830eb 100644
--- a/navigator/navigator.css
+++ b/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;
diff --git a/navigator/navigator.html b/navigator/navigator.html
index 998e02e..89c6cc2 100644
--- a/navigator/navigator.html
+++ b/navigator/navigator.html
@@ -134,6 +134,10 @@
- Directories, - Files
+
+
45Drives
+
+
diff --git a/navigator/navigator.js b/navigator/navigator.js
index ee84630..feac31b 100644
--- a/navigator/navigator.js
+++ b/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);