Fix(UI): Navigation header styles.

index.html

@@ -42,11 +42,11 @@
             <li><a href="#experience">Experience</a></li>
             <li><a href="#contact">Contact</a></li>
             <li>
-                <!-- <div id="theme-switch"></div> -->
                 <button class="theme-switch" aria-label="Toggle Dark Mode">
                     <img src="content/images/dark-mode-icon.webp" alt="Dark Mode" class="theme-icon dark-mode-icon">
-                    <!-- Added with JavaScript
-                    <img src="content/images/light-mode-icon.webp" alt="Light Mode" class="theme-icon light-mode-icon"> -->
+                    <!-- Deprecated - this is added with JavaScript now
+                        <img src="content/images/light-mode-icon.webp" alt="Light Mode" class="theme-icon light-mode-icon">
+                    -->
                 </button>
             </li>
             <li><div id="google_translate_element"></div></li>

styles/layouts/navigation.css

@@ -24,7 +24,11 @@ nav a {
     font-weight: 500;
     transition: color 0.3s;
 }
+nav a:visited {
+    color: var(--text-background-colour);
+}
 
-nav a:hover {
+nav a:hover,
+nav a:hover:visited {
     color: var(--accent-colour);
 }

styles/themes.css

@@ -87,15 +87,15 @@
     background: none;
     border: none;
     cursor: pointer;
-    width: 5vh;
-    height: 5vh;
+    width: 4vh;
+    height: 4vh;
     padding: 0;
     display: flex;
     align-items: center;
     justify-content: center;
     position: relative;
     margin-top: auto;
-    border-radius: 2.5vh;
+    border-radius: 2vh;
 }
 .theme-switch:hover {
     background-color: var(--primary-colour);
@@ -111,13 +111,13 @@
 }
 img.theme-icon.dark-mode-icon {
     top: 0vh;
-    left: -0.1vh;
+    left: 0vh;
 }
 svg.theme-icon.light-mode-icon {
-    width: 4vh;
-    height: 4vh;
-    top: 0.55vh;
-    left: 0.45vh;
+    width: 3.5vh;
+    height: 3.5vh;
+    top: 0.25vh;
+    left: 0.25vh;
 }
 svg.theme-icon.light-mode-icon .background {
     fill: var(--secondary-colour);