valknar
d967dd261a
- 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>
50 lines
2.1 KiB
HTML
50 lines
2.1 KiB
HTML
<footer class="relative overflow-hidden border-t border-zinc gutter-x py-14 mt-auto bg-ink speed-lines">
|
|
|
|
<!-- Decorative background text -->
|
|
<div
|
|
class="graffiti-tag absolute -bottom-6 -right-4 select-none pointer-events-none"
|
|
style="-webkit-text-stroke-color: rgba(255,26,140,0.07); opacity: 1;"
|
|
aria-hidden="true"
|
|
>PIVOINE</div>
|
|
|
|
<div class="gradient-line mb-10 relative z-10"></div>
|
|
<div class="relative z-10 flex flex-col md:flex-row md:items-start justify-between gap-10">
|
|
|
|
<!-- Brand -->
|
|
<div>
|
|
<a href="/" class="logo-glitch block mb-4 hover:opacity-90 transition-opacity w-fit" aria-label="{{ .Site.Title }} Home">
|
|
{{- partial "logo.html" (dict "id" "footer" "class" "h-10 w-auto") -}}
|
|
</a>
|
|
<p class="label text-fog max-w-xs leading-loose">{{ .Site.Params.description }}</p>
|
|
</div>
|
|
|
|
<!-- Links -->
|
|
<nav aria-label="Footer navigation">
|
|
<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>
|
|
</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>
|
|
</li>
|
|
{{- end -}}
|
|
{{- end -}}
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
|
|
<div class="relative z-10 gradient-line mt-10 mb-6"></div>
|
|
<p class="relative z-10 label text-smoke">
|
|
© {{ .Site.Params.copyrightYear }} {{ .Site.Params.author }}. All rights reserved.
|
|
</p>
|
|
</footer>
|