fix(header): Fix inline menu items and theme switch icon styling

This commit is contained in:
2026-02-17 19:49:10 +01:00
parent 78fe818877
commit 920c0a1d49
2 changed files with 19 additions and 1 deletions

View File

@@ -48,6 +48,24 @@ html[data-theme='light'] {
}
}
@layer components {
/* Main navigation styling */
header nav ul {
@apply flex items-center space-x-4; /* Make li items inline with spacing */
}
header nav ul li a {
@apply text-[var(--text-primary)] hover:text-[var(--text-secondary)] transition-colors duration-200; /* Default link style */
}
/* Mobile navigation styling */
#mobile-menu nav ul {
@apply flex flex-col items-center space-y-8; /* Stack items vertically in mobile menu */
}
#mobile-menu nav ul li a {
@apply text-[var(--text-primary)] text-3xl font-bold hover:text-[var(--text-secondary)] transition-colors duration-200;
}
}
@keyframes fadeInUp {
from {
opacity: 0;

View File

@@ -5,7 +5,7 @@
</a>
<div class="flex items-center">
<nav class="hidden md:flex flex-wrap items-center text-base justify-center">
<nav class="hidden md:flex flex-wrap items-center justify-center">
{{navigation type="primary"}}
<button id="theme-toggle" class="ml-4 p-2 rounded-full bg-[var(--bg-secondary)] text-[var(--text-primary)] hover:bg-[var(--bg-tertiary)] transition-colors duration-200">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5">