forked from LPK/librodrome
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>
72 lines
1.5 KiB
Vue
72 lines
1.5 KiB
Vue
<template>
|
|
<nav class="vswitch" aria-label="Variantes de l'accueil">
|
|
<span class="vswitch-label">Variante</span>
|
|
<NuxtLink
|
|
v-for="v in variants"
|
|
:key="v.id"
|
|
:to="{ path: '/', query: { v: v.id } }"
|
|
class="vswitch-item"
|
|
:class="{ 'vswitch-item--on': current === v.id }"
|
|
:aria-current="current === v.id ? 'page' : undefined"
|
|
>
|
|
{{ v.label }}
|
|
</NuxtLink>
|
|
</nav>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
defineProps<{
|
|
current: string
|
|
}>()
|
|
|
|
const variants = [
|
|
{ id: 'a', label: 'A · Console' },
|
|
{ id: 'b', label: 'B · Parcours' },
|
|
{ id: 'c', label: 'C · Établi' },
|
|
{ id: '0', label: 'Actuelle' },
|
|
]
|
|
</script>
|
|
|
|
<style scoped>
|
|
.vswitch {
|
|
position: fixed;
|
|
left: 50%;
|
|
bottom: 1rem;
|
|
z-index: 60;
|
|
transform: translateX(-50%);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.25rem;
|
|
padding: 0.3rem;
|
|
border-radius: 20px;
|
|
background: hsl(var(--color-text));
|
|
box-shadow: 0 10px 30px -10px hsl(0 0% 0% / 0.5);
|
|
font-size: 0.78rem;
|
|
max-width: calc(100vw - 1rem);
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.vswitch-label {
|
|
padding: 0 0.5rem;
|
|
font-family: var(--font-mono);
|
|
font-size: 0.68rem;
|
|
color: hsl(var(--color-bg) / 0.6);
|
|
}
|
|
|
|
.vswitch-item {
|
|
padding: 0.35rem 0.75rem;
|
|
border-radius: 20px;
|
|
white-space: nowrap;
|
|
color: hsl(var(--color-bg) / 0.85);
|
|
}
|
|
|
|
.vswitch-item:hover {
|
|
background: hsl(var(--color-bg) / 0.12);
|
|
}
|
|
|
|
.vswitch-item--on {
|
|
color: hsl(var(--color-text));
|
|
background: hsl(var(--color-bg));
|
|
}
|
|
</style>
|