valknar/palina-theme
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: add fancy hover effect and current route marker to navigation
All checks were successful
Deploy Theme / deploy (push) Successful in 13s
Details

Browse Source
This commit is contained in:
Sebastian Krüger
2026-02-20 10:18:57 +01:00
parent 041f46f551
commit ad8b7777f2
2 changed files with 15 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
assets/css/tailwind.css
View File

@@ -90,19 +90,13 @@
@layer components { @layer components {
/* Main navigation styling */ /* Main navigation styling */
header nav ul { header nav ul.nav {
@apply flex items-center space-x-4; @apply flex items-center space-x-6;
}
header nav ul li a {
@apply text-[var(--text-primary)] hover:text-[var(--brand-primary)] transition-colors duration-200;
} }
/* Mobile navigation styling */ /* Mobile navigation styling */
#mobile-menu nav ul { #mobile-menu nav ul.nav {
@apply flex flex-col items-center space-y-8; @apply flex flex-col items-center space-y-10 text-4xl;
}
#mobile-menu nav ul li a {
@apply text-[var(--text-primary)] text-3xl font-bold hover:text-[var(--brand-primary)] transition-colors duration-200;
} }
/* Button & Link Components */ /* Button & Link Components */

11
partials/navigation.hbs Normal file
View File

@@ -0,0 +1,11 @@
<ul class="nav">
{{#foreach navigation}}
<li class="{{link_class for=url class=(concat "nav-" slug)}}">
<a href="{{url absolute="true"}}" class="relative py-2 px-1 transition-all duration-300 {{#if current}}text-[var(--brand-primary)] font-bold{{else}}hover:text-[var(--brand-primary)] opacity-80 hover:opacity-100{{/if}} group">
{{label}}
{{!-- Animated Underline --}}
<span class="absolute bottom-0 left-0 w-full h-0.5 bg-[var(--brand-primary)] transform {{#if current}}scale-x-100{{else}}scale-x-0 group-hover:scale-x-100{{/if}} transition-transform duration-300 ease-out origin-left"></span>
</a>
</li>
{{/foreach}}
</ul>