forked from LPK/librodrome
YvvandClaude Opus 5.5
201cfbbb50
- accueil : la console devient l'accueil unique (variantes B/C, sélecteur et ancien accueil retirés) ; curseurs qui montent de l'asservissement et dérivent seuls, un axe mis en avant à tour de rôle, arrêt au clic, immobiles en prefers-reduced-motion ; « AUTONOMIE » devant chaque axe, leviers mis en valeur, ligne des trois autonomies en couleurs - logo : § de Playfair Display (SIL OFL) vectorisé, composant partagé UiSectionSign (en-tête, page événement) + favicon.svg - UiStatusBadge (production / développement / gestation) sur l'accueil, les pages d'axe et les pages projet - liens libreDecision / SejeteralO fixés sur la prod (plus de repli localhost) - logiciel libre : bouton v1 dans la carte projet en tête de page - couverture du livre : recadrage corrigé (BookSection) - texte courant en Public Sans (zéros non barrés) - lecteur : la pastille persistante ne masque plus la navigation du BookPlayer ; lecture directe du MP3 (les .ogg n'existent pas : 404) Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
133 lines
3.5 KiB
Vue
133 lines
3.5 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">
|
|
<UiSectionSign class="logo-icon" />
|
|
<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: auto;
|
|
height: 2.1rem;
|
|
flex-shrink: 0;
|
|
transform: rotate(-8deg);
|
|
transition: transform 0.2s ease;
|
|
}
|
|
|
|
.logo-link:hover .logo-icon {
|
|
transform: rotate(0deg) scale(1.08);
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.logo-icon { transition: none; }
|
|
}
|
|
|
|
.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>
|