YvvandClaude Opus 5.5
e9fce4be8f
- typo : Bricolage Grotesque (titres) + Atkinson Hyperlegible (texte), Syne gardée pour le logo seul ; une seule source de polices (Bunny) - palettes : teinte propre à chaque axe dans les 4 ambiances ; pages d'axe en axis-scope, cartes sans bordure (canon design) - accueil : console des trois curseurs (tablist clavier), boîte à outils, bloc format éditorial + événement + reproduction ; ?v=a|b|c|0 - numérique : carte LPK ; bouquet rendu avec statut et légende - messages : sans bordure, deux colonnes en grand écran Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
138 lines
3.9 KiB
Vue
138 lines
3.9 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 gap-2.5">
|
|
<svg class="logo-icon" viewBox="0 0 46 78" fill="none" aria-hidden="true">
|
|
<defs>
|
|
<linearGradient id="sect-grad" x1="0" y1="0" x2="0" y2="1">
|
|
<stop offset="0%" stop-color="hsl(var(--color-primary))"/>
|
|
<stop offset="100%" stop-color="hsl(var(--color-accent))"/>
|
|
</linearGradient>
|
|
</defs>
|
|
<path
|
|
d="M 33 10 C 26 7 18 7 14 11 C 8 15 7 24 10 31 C 13 38 21 40 27 44 C 33 48 38 55 35 62 C 32 69 24 72 17 70 C 10 68 8 72 10 75 C 12 78 20 79 28 76"
|
|
stroke="url(#sect-grad)"
|
|
stroke-width="5"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
fill="none"
|
|
/>
|
|
</svg>
|
|
<span class="logo-text">{{ site?.identity.name }}</span>
|
|
</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;
|
|
}
|
|
|
|
.logo-icon {
|
|
width: 1.6rem;
|
|
height: 2rem;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.logo-text {
|
|
font-family: var(--font-logo);
|
|
font-weight: 400;
|
|
font-size: 1.25rem;
|
|
letter-spacing: 0.04em;
|
|
background-image: linear-gradient(to right, hsl(var(--color-primary)), hsl(var(--color-accent)));
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
|
|
.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>
|