admin/portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix(UI): Navigation header styles.

Browse Source
This commit is contained in:
Teddy Middleton-Smith
2025-04-09 14:51:43 +01:00
parent e1597f496f
commit 26a0b49492
3 changed files with 16 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
index.html
View File

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

6
styles/layouts/navigation.css
View File

@@ -24,7 +24,11 @@ nav a {
font-weight: 500; font-weight: 500;
transition: color 0.3s; 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); color: var(--accent-colour);
} }

16
styles/themes.css
View File

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