YvvandClaude Opus 5.5
d2bc0d9e46
Copie du kit kit-site (empreinte vérifiée) : logotype dans l'en-tête, signe §, favicons et icônes, og-default (?v=3), frise du pied de page, 61 oiseaux. Les shadoks positionnés à la main (HomeShadoks et les règles des 10 pages) cèdent la place à UiOiseauPose : chaque oiseau se pose sur une arête réelle (perché, marge gauche ou droite, derrière une carte, libre), currentColor, largeur 72 px au moins, opacité 0,18-0,28 près du texte et 0,10-0,14 derrière, jamais deux fois sur une page, calligraphe et typographe jamais en miroir. Sous 768 px, un oiseau par page au plus ; seuls ceux derrière une carte dérivent un peu, et plus du tout en mouvement réduit. Consignes d'Yvv du 03/11 inscrites dans docs/consignes-yvv.md. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
121 lines
3.2 KiB
Vue
121 lines
3.2 KiB
Vue
<template>
|
|
<header class="sticky top-0 z-40 border-b border-[hsl(var(--color-text)/0.08)] bg-[hsl(var(--color-bg)/0.85)] backdrop-blur-xl">
|
|
<div class="container-content flex h-[var(--header-height)] items-center justify-between px-4">
|
|
<!-- Logo -->
|
|
<NuxtLink to="/" class="logo-link flex items-center" :aria-label="site?.identity.name || 'Le librodrome'">
|
|
<UiLogotype class="logo-lockup" />
|
|
</NuxtLink>
|
|
|
|
<!-- Desktop navigation -->
|
|
<nav class="hidden md:flex items-center gap-1" aria-label="Navigation principale">
|
|
<!-- Autonomie : prefix + axis buttons -->
|
|
<span class="nav-prefix">Autonomie :</span>
|
|
<NuxtLink
|
|
v-for="(item, i) in axes"
|
|
:key="item.to"
|
|
:to="item.to"
|
|
class="btn-ghost text-sm nav-axis"
|
|
:style="{ '--hue': `var(${AXIS_HUES[i] ?? '--color-primary'})` }"
|
|
active-class="!text-[hsl(var(--color-text))] bg-[hsl(var(--color-text)/0.06)]"
|
|
>
|
|
{{ item.label }}
|
|
</NuxtLink>
|
|
|
|
<!-- Separator + extra nav -->
|
|
<span class="nav-sep" />
|
|
<NuxtLink
|
|
v-for="item in extra"
|
|
:key="item.to"
|
|
:to="item.to"
|
|
class="btn-ghost btn-ghost--muted text-sm"
|
|
active-class="!text-[hsl(var(--color-text))] bg-[hsl(var(--color-text)/0.06)]"
|
|
>
|
|
{{ item.label }}
|
|
</NuxtLink>
|
|
|
|
<UiPaletteSelector />
|
|
</nav>
|
|
|
|
<!-- Mobile menu button -->
|
|
<button
|
|
class="btn-ghost md:hidden !p-2"
|
|
aria-label="Menu"
|
|
@click="isMobileMenuOpen = true"
|
|
>
|
|
<div class="i-lucide-menu h-5 w-5" />
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Mobile menu -->
|
|
<LayoutNavMobile v-model:open="isMobileMenuOpen" :nav="allNav" />
|
|
</header>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const { data: site } = await useSiteContent()
|
|
const isMobileMenuOpen = ref(false)
|
|
|
|
const axes = computed(() => (site.value as any)?.navigation?.axes ?? [])
|
|
const extra = computed(() => (site.value as any)?.navigation?.extra ?? [])
|
|
const allNav = computed(() => [...axes.value, ...extra.value])
|
|
|
|
// Same order as navigation.axes in site.yml: numérique, économique, citoyenne
|
|
const AXIS_HUES = ['--axis-num', '--axis-eco', '--axis-cit']
|
|
</script>
|
|
|
|
<style scoped>
|
|
.logo-link {
|
|
transition: opacity 0.2s;
|
|
}
|
|
.logo-link:hover {
|
|
opacity: 0.8;
|
|
}
|
|
|
|
/* The validated lockup (studio DA, 27/10): the Geste already leans 25°, no rotation on hover */
|
|
.logo-lockup {
|
|
height: 2.3rem;
|
|
width: auto;
|
|
flex-shrink: 0;
|
|
transition: transform 0.2s ease;
|
|
}
|
|
|
|
.logo-link:hover .logo-lockup {
|
|
transform: scale(1.04);
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.logo-lockup { transition: none; }
|
|
}
|
|
|
|
.nav-prefix {
|
|
font-family: var(--font-display);
|
|
font-size: 0.92rem;
|
|
font-weight: 500;
|
|
font-style: italic;
|
|
letter-spacing: 0.03em;
|
|
color: hsl(var(--color-text) / 0.4);
|
|
margin-right: 0.125rem;
|
|
}
|
|
|
|
.nav-axis::before {
|
|
content: '';
|
|
width: 0.45rem;
|
|
height: 0.45rem;
|
|
margin-right: 0.45rem;
|
|
border-radius: 50%;
|
|
background: hsl(var(--hue));
|
|
}
|
|
|
|
.nav-sep {
|
|
display: block;
|
|
width: 1px;
|
|
height: 1.25rem;
|
|
background: hsl(var(--color-text) / 0.12);
|
|
margin: 0 0.375rem;
|
|
}
|
|
|
|
.btn-ghost--muted {
|
|
color: hsl(var(--color-text) / 0.45);
|
|
}
|
|
</style>
|