feat: add Prettier with go-template and toml plugins, format all files
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
+88
-53
@@ -10,7 +10,11 @@
|
||||
:class="$store.nav.open || scrolled ? 'bg-ink/95 backdrop-blur-md shadow-[0_1px_0_var(--color-zinc)]' : ''"
|
||||
>
|
||||
<!-- Logotype -->
|
||||
<a href="/" class="flex items-center gap-3 hover:opacity-90 transition-opacity" aria-label="{{ .Site.Params.logoText }} Home">
|
||||
<a
|
||||
href="/"
|
||||
class="flex items-center gap-3 hover:opacity-90 transition-opacity"
|
||||
aria-label="{{ .Site.Params.logoText }} Home"
|
||||
>
|
||||
{{- partial "logo.html" (dict "id" "nav" "class" "h-12 w-auto flex-shrink-0") -}}
|
||||
<span class="logo-glitch font-display text-2xl md:text-3xl leading-none tracking-wide">
|
||||
{{- .Site.Params.logoText -}}
|
||||
@@ -20,19 +24,19 @@
|
||||
<!-- Desktop navigation -->
|
||||
<nav class="hidden md:flex items-center gap-8" aria-label="Primary navigation">
|
||||
{{- range .Site.Menus.main -}}
|
||||
{{- $href := .URL -}}
|
||||
<a
|
||||
href="{{ $href }}"
|
||||
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 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>
|
||||
{{- $href := .URL -}}
|
||||
<a
|
||||
href="{{ $href }}"
|
||||
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 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 -}}
|
||||
</nav>
|
||||
|
||||
@@ -45,12 +49,18 @@
|
||||
aria-controls="mobile-menu"
|
||||
aria-label="Toggle navigation"
|
||||
>
|
||||
<span class="block h-px w-6 bg-current transition-all duration-300 origin-center"
|
||||
:class="$store.nav.open ? 'rotate-45 translate-y-[7px]' : ''"></span>
|
||||
<span class="block h-px w-4 bg-current transition-all duration-200"
|
||||
:class="$store.nav.open ? 'opacity-0' : 'opacity-100'"></span>
|
||||
<span class="block h-px w-6 bg-current transition-all duration-300 origin-center"
|
||||
:class="$store.nav.open ? '-rotate-45 -translate-y-[7px]' : ''"></span>
|
||||
<span
|
||||
class="block h-px w-6 bg-current transition-all duration-300 origin-center"
|
||||
:class="$store.nav.open ? 'rotate-45 translate-y-[7px]' : ''"
|
||||
></span>
|
||||
<span
|
||||
class="block h-px w-4 bg-current transition-all duration-200"
|
||||
:class="$store.nav.open ? 'opacity-0' : 'opacity-100'"
|
||||
></span>
|
||||
<span
|
||||
class="block h-px w-6 bg-current transition-all duration-300 origin-center"
|
||||
:class="$store.nav.open ? '-rotate-45 -translate-y-[7px]' : ''"
|
||||
></span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -73,51 +83,70 @@
|
||||
<div class="gradient-line flex-none"></div>
|
||||
|
||||
<!-- Decorative background text -->
|
||||
<div class="graffiti-tag absolute -bottom-4 -right-4 select-none pointer-events-none"
|
||||
style="-webkit-text-stroke-color: rgba(155,0,255,0.07);" aria-hidden="true">MENU</div>
|
||||
<div
|
||||
class="graffiti-tag absolute -bottom-4 -right-4 select-none pointer-events-none"
|
||||
style="-webkit-text-stroke-color: rgba(155,0,255,0.07);"
|
||||
aria-hidden="true"
|
||||
>
|
||||
MENU
|
||||
</div>
|
||||
|
||||
<!-- Main nav links -->
|
||||
<nav class="flex-1 flex flex-col justify-center gutter-x py-10" aria-label="Mobile navigation">
|
||||
<div class="flex flex-col gap-0">
|
||||
{{- $i := 0 -}}
|
||||
{{- range .Site.Menus.main -}}
|
||||
{{- $href := .URL -}}
|
||||
<a
|
||||
href="{{ $href }}"
|
||||
class="group relative leading-none py-3 overflow-hidden"
|
||||
style="font-family: var(--font-display); font-size: clamp(2.8rem, 11vw, 6.5rem); animation: mob-link-in 0.5s var(--ease-out-expo) {{ mul $i 70 }}ms both"
|
||||
@click="$store.nav.open = false"
|
||||
>
|
||||
<!-- Hover sweep -->
|
||||
<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 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 -->
|
||||
<span class="absolute right-0 top-1/2 -translate-y-1/2 label text-smoke group-hover:text-heat transition-colors duration-200"
|
||||
style="animation: mob-link-in 0.4s var(--ease-out-expo) {{ add (mul $i 70) 100 }}ms both"
|
||||
>0{{ add $i 1 }}</span>
|
||||
</a>
|
||||
{{- $i = add $i 1 -}}
|
||||
{{- $href := .URL -}}
|
||||
<a
|
||||
href="{{ $href }}"
|
||||
class="group relative leading-none py-3 overflow-hidden"
|
||||
style="font-family: var(--font-display); font-size: clamp(2.8rem, 11vw, 6.5rem); animation: mob-link-in 0.5s var(--ease-out-expo) {{ mul $i 70 }}ms both"
|
||||
@click="$store.nav.open = false"
|
||||
>
|
||||
<!-- Hover sweep -->
|
||||
<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 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 -->
|
||||
<span
|
||||
class="absolute right-0 top-1/2 -translate-y-1/2 label text-smoke group-hover:text-heat transition-colors duration-200"
|
||||
style="animation: mob-link-in 0.4s var(--ease-out-expo) {{ add (mul $i 70) 100 }}ms both"
|
||||
>0{{ add $i 1 }}</span
|
||||
>
|
||||
</a>
|
||||
{{- $i = add $i 1 -}}
|
||||
{{- end -}}
|
||||
</div>
|
||||
|
||||
<div class="gradient-line my-8"
|
||||
style="animation: mob-link-in 0.4s ease {{ mul $i 70 }}ms both"></div>
|
||||
<div class="gradient-line my-8" style="animation: mob-link-in 0.4s ease {{ mul $i 70 }}ms both"></div>
|
||||
|
||||
<div class="flex flex-wrap gap-x-8 gap-y-3"
|
||||
style="animation: mob-link-in 0.4s ease {{ add (mul $i 70) 40 }}ms both">
|
||||
<div
|
||||
class="flex flex-wrap gap-x-8 gap-y-3"
|
||||
style="animation: mob-link-in 0.4s ease {{ add (mul $i 70) 40 }}ms both"
|
||||
>
|
||||
{{- range .Site.Menus.footer -}}
|
||||
<a href="{{ .URL }}" class="label text-fog hover:text-heat transition-colors" @click="$store.nav.open = false">{{ .Name }}</a>
|
||||
<a
|
||||
href="{{ .URL }}"
|
||||
class="label text-fog hover:text-heat transition-colors"
|
||||
@click="$store.nav.open = false"
|
||||
>{{ .Name }}</a
|
||||
>
|
||||
{{- end -}}
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Bottom bar -->
|
||||
<div class="flex-none gutter-x pb-8 pt-4 border-t border-zinc"
|
||||
style="animation: mob-link-in 0.4s ease 420ms both">
|
||||
<div
|
||||
class="flex-none gutter-x pb-8 pt-4 border-t border-zinc"
|
||||
style="animation: mob-link-in 0.4s ease 420ms both"
|
||||
>
|
||||
<p class="label text-smoke">{{ .Site.Params.tagline }}</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -125,8 +154,14 @@
|
||||
</header>
|
||||
|
||||
<style>
|
||||
@keyframes mob-link-in {
|
||||
from { opacity: 0; transform: translateY(14px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
@keyframes mob-link-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(14px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user