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

Revert "polish: smooth hover transitions on nav and footer links"

Browse Source 
This reverts commit d967dd261a.
This commit is contained in:
Sebastian Krüger
2026-04-10 18:44:15 +02:00
parent d967dd261a
commit 00ee9e15ed
2 changed files with 8 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
layouts/partials/footer.html
+3 -6
View File
@@ -23,17 +23,14 @@
<ul class="flex flex-wrap gap-x-8 gap-y-4">
{{- range .Site.Menus.footer -}}
<li>
<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>
<a href="{{ .URL }}" class="label text-fog hover:text-heat transition-colors">{{ .Name }}</a>
</li>
{{- end -}}
{{- with .Site.Params.social -}}
{{- range $platform, $url := . -}}
<li>
<a href="{{ $url }}" target="_blank" rel="noopener noreferrer" class="group label text-fog hover:text-frost transition-colors duration-200">
{{- $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 href="{{ $url }}" target="_blank" rel="noopener noreferrer" class="label text-fog hover:text-frost transition-colors">
{{- $platform | upper -}} {{ partial "icon.html" "arrow-external" }}
</a>
</li>
{{- end -}}
layouts/partials/nav.html
+5 -5
View File
@@ -23,13 +23,14 @@
{{- $href := .URL -}}
<a
href="{{ $href }}"
class="group label relative transition-colors duration-200"
class="label relative transition-colors"
:class="($store.nav.path === '{{ $href }}' || ('{{ $href }}' !== '/' && $store.nav.path.startsWith('{{ $href }}'))) ? 'text-heat' : 'text-fog hover:text-chalk'"
>
{{ .Name }}
<span
class="absolute -bottom-0.5 left-0 h-px w-full bg-heat origin-left transition-transform duration-300 ease-out"
:class="($store.nav.path === '{{ $href }}' || ('{{ $href }}' !== '/' && $store.nav.path.startsWith('{{ $href }}'))) ? 'scale-x-100' : 'scale-x-0 group-hover:scale-x-100'"
class="absolute -bottom-0.5 left-0 h-px bg-heat transition-all duration-300 ease-out"
:style="($store.nav.path === '{{ $href }}' || ('{{ $href }}' !== '/' && $store.nav.path.startsWith('{{ $href }}'))) ? 'width: 100%' : 'width: 0'"
style="width: 0"
></span>
</a>
{{- end -}}
@@ -91,8 +92,7 @@
<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>
<!-- Link text -->
<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);"
<span class="relative transition-colors duration-200 text-paper group-hover:text-heat uppercase"
:class="($store.nav.path === '{{ $href }}' || ('{{ $href }}' !== '/' && $store.nav.path.startsWith('{{ $href }}'))) ? 'text-gradient' : ''"
>{{ .Name }}</span>
<!-- Index number -->