valknar/pivoine.art
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

polish: smooth hover transitions on nav and footer links

Browse Source 
- Desktop nav: underline uses scaleX transform (origin-left) instead of
  width, now shows on hover for inactive links too
- Mobile nav: link text slides translateX on hover for directional feel
- Footer nav: matching scaleX underline on hover
- Footer social: external arrow icon nudges diagonally on hover

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Sebastian Krüger
2026-04-10 18:38:14 +02:00
parent 245a8e614d
commit d967dd261a
2 changed files with 11 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
layouts/partials/footer.html
+6 -3
View File
@@ -23,14 +23,17 @@
<ul class="flex flex-wrap gap-x-8 gap-y-4"> <ul class="flex flex-wrap gap-x-8 gap-y-4">
{{- range .Site.Menus.footer -}} {{- range .Site.Menus.footer -}}
<li> <li>
<a href="{{ .URL }}" class="label text-fog hover:text-heat transition-colors">{{ .Name }}</a> <a href="{{ .URL }}" class="group label relative text-fog hover:text-heat transition-colors duration-200">
{{ .Name }}
<span class="absolute -bottom-0.5 left-0 h-px w-full bg-heat origin-left scale-x-0 group-hover:scale-x-100 transition-transform duration-300 ease-out"></span>
</a>
</li> </li>
{{- end -}} {{- end -}}
{{- with .Site.Params.social -}} {{- with .Site.Params.social -}}
{{- range $platform, $url := . -}} {{- range $platform, $url := . -}}
<li> <li>
<a href="{{ $url }}" target="_blank" rel="noopener noreferrer" class="label text-fog hover:text-frost transition-colors"> <a href="{{ $url }}" target="_blank" rel="noopener noreferrer" class="group label text-fog hover:text-frost transition-colors duration-200">
{{- $platform | upper -}} {{ partial "icon.html" "arrow-external" }} {{- $platform | upper -}}<span class="inline-block transition-transform duration-200 group-hover:translate-x-0.5 group-hover:-translate-y-0.5">{{ partial "icon.html" "arrow-external" }}</span>
</a> </a>
</li> </li>
{{- end -}} {{- end -}}
layouts/partials/nav.html
+5 -5
View File
@@ -23,14 +23,13 @@
{{- $href := .URL -}} {{- $href := .URL -}}
<a <a
href="{{ $href }}" href="{{ $href }}"
class="label relative transition-colors" class="group label relative transition-colors duration-200"
:class="($store.nav.path === '{{ $href }}' || ('{{ $href }}' !== '/' && $store.nav.path.startsWith('{{ $href }}'))) ? 'text-heat' : 'text-fog hover:text-chalk'" :class="($store.nav.path === '{{ $href }}' || ('{{ $href }}' !== '/' && $store.nav.path.startsWith('{{ $href }}'))) ? 'text-heat' : 'text-fog hover:text-chalk'"
> >
{{ .Name }} {{ .Name }}
<span <span
class="absolute -bottom-0.5 left-0 h-px bg-heat transition-all duration-300 ease-out" class="absolute -bottom-0.5 left-0 h-px w-full bg-heat origin-left transition-transform duration-300 ease-out"
:style="($store.nav.path === '{{ $href }}' || ('{{ $href }}' !== '/' && $store.nav.path.startsWith('{{ $href }}'))) ? 'width: 100%' : 'width: 0'" :class="($store.nav.path === '{{ $href }}' || ('{{ $href }}' !== '/' && $store.nav.path.startsWith('{{ $href }}'))) ? 'scale-x-100' : 'scale-x-0 group-hover:scale-x-100'"
style="width: 0"
></span> ></span>
</a> </a>
{{- end -}} {{- end -}}
@@ -92,7 +91,8 @@
<span class="absolute inset-y-0 left-0 w-0 group-hover:w-full transition-all duration-300 ease-out" <span class="absolute inset-y-0 left-0 w-0 group-hover:w-full transition-all duration-300 ease-out"
style="background: linear-gradient(90deg, rgba(255,26,140,0.07), transparent);"></span> style="background: linear-gradient(90deg, rgba(255,26,140,0.07), transparent);"></span>
<!-- Link text --> <!-- Link text -->
<span class="relative transition-colors duration-200 text-paper group-hover:text-heat uppercase" <span class="relative text-paper group-hover:text-heat group-hover:translate-x-2 uppercase"
style="transition: color 0.2s ease, transform 0.3s var(--ease-out-expo);"
:class="($store.nav.path === '{{ $href }}' || ('{{ $href }}' !== '/' && $store.nav.path.startsWith('{{ $href }}'))) ? 'text-gradient' : ''" :class="($store.nav.path === '{{ $href }}' || ('{{ $href }}' !== '/' && $store.nav.path.startsWith('{{ $href }}'))) ? 'text-gradient' : ''"
>{{ .Name }}</span> >{{ .Name }}</span>
<!-- Index number --> <!-- Index number -->