YvvandClaude Opus 5.5
fb8c71fc59
Avis du studio DA du 03/11 (07h00) et relecture de 8ccdda3 :
- règle du perché : il faut au-dessus de l'arête un vide au moins égal à la hauteur
de l'oiseau, sinon il va en marge ou derrière la carte. Les perchés entre cartes
rapprochées (numérique, logiciel-libre, économique, sommaire du livre, commande,
citoyenne, événement) passent en marge, derrière, ou partent ;
- productions-collectives : 8 oiseaux ramenés à 4, sans colonne ni chevauchement.
Les oiseaux retirés vont sur des pages qui en avaient peu : monnaie-libre
(boulangère, vigneronne), tarifs-eau (potier), décision (tisserand),
cloud-libre (imprimeuse 3D). Les 61 restent rendus ;
- pas trois oiseaux sur la même verticale (commande, numérique) ;
- au téléphone, l'oiseau de la page se tient au bout de la ligne de l'intitulé ;
- seuil 1024 pour un perché dont le bloc n'a de vide au-dessus qu'en deux colonnes
(accordéoniste et factrice de l'accueil) ;
- numerique/[slug] : les oiseaux des sections larges tiennent dans 152 px de marge
à 1200 px ;
- en-tête : de 768 à 1023 px, boutons resserrés au lieu d'un débordement ; le
logotype du kit ne change pas.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
139 lines
3.6 KiB
Vue
139 lines
3.6 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="nav-main 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);
|
|
}
|
|
|
|
/* From 768 to 1023 px the kit's logotype (166 px) and the whole navigation share the bar:
|
|
tighter buttons instead of an overflow; the logotype of the studio DA kit stays as it is */
|
|
@media (max-width: 1023px) {
|
|
.nav-main {
|
|
gap: 0.125rem;
|
|
}
|
|
|
|
.nav-axis,
|
|
.btn-ghost--muted {
|
|
padding-left: 0.5rem;
|
|
padding-right: 0.5rem;
|
|
}
|
|
|
|
.nav-sep {
|
|
margin: 0 0.25rem;
|
|
}
|
|
}
|
|
</style>
|