design : accueil en trois variantes (console, parcours, établi) + couleur par axe
- 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>
This commit is contained in:
Yvv
@@ -0,0 +1,241 @@
|
||||
<template>
|
||||
<div class="toolbox-wrap">
|
||||
<div class="toolbox" :class="{ 'toolbox--single': axes.length === 1 }">
|
||||
<section
|
||||
v-for="axis in axes"
|
||||
:id="anchors ? axis.to.slice(1) : undefined"
|
||||
:key="axis.key"
|
||||
class="toolbox-axis"
|
||||
:style="{ '--hue': `var(${axis.hue})` }"
|
||||
:aria-labelledby="`tb-${uid}-${axis.key}`"
|
||||
>
|
||||
<header class="toolbox-head">
|
||||
<p class="toolbox-lever">{{ axis.lever }}</p>
|
||||
<h3 :id="`tb-${uid}-${axis.key}`" class="toolbox-title">
|
||||
<NuxtLink :to="axis.to">{{ axis.title }}</NuxtLink>
|
||||
</h3>
|
||||
<p v-if="showPromise && axis.promise" class="toolbox-promise">{{ axis.promise }}</p>
|
||||
</header>
|
||||
|
||||
<ul class="toolbox-tools">
|
||||
<li v-for="tool in axis.items" :key="tool.label">
|
||||
<HomeToolItem :tool="tool" @action="onAction" />
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<!-- Numérique : the stacks LPK serves -->
|
||||
<NuxtLink
|
||||
v-if="axis.key === 'numerique' && lpk && bouquet"
|
||||
:to="lpk.to"
|
||||
class="toolbox-lpk"
|
||||
>
|
||||
<span class="toolbox-lpk-head">
|
||||
<strong>{{ lpk.name }}</strong> <span>{{ lpk.fullName }} — {{ lpk.text }}</span>
|
||||
</span>
|
||||
<span class="toolbox-lpk-stacks">
|
||||
<span v-for="s in bouquet.inService" :key="s.name" class="toolbox-lpk-stack">{{ s.name }}</span>
|
||||
</span>
|
||||
<span class="toolbox-lpk-more">
|
||||
{{ bouquet.title }} · {{ bouquet.stacks.length }}
|
||||
<span class="i-lucide-arrow-right h-3.5 w-3.5" aria-hidden="true" />
|
||||
</span>
|
||||
</NuxtLink>
|
||||
|
||||
<!-- Économique : grateWizard -->
|
||||
<button
|
||||
v-if="axis.key === 'economie' && gratewizard"
|
||||
type="button"
|
||||
class="toolbox-gw"
|
||||
@click="launch()"
|
||||
>
|
||||
<span class="i-lucide-sparkles h-4 w-4" aria-hidden="true" />
|
||||
<span class="toolbox-gw-text">
|
||||
<strong>{{ gratewizard.title }}</strong>
|
||||
<span>{{ gratewizard.subtitle }}</span>
|
||||
</span>
|
||||
<span class="i-lucide-arrow-up-right h-4 w-4" aria-hidden="true" />
|
||||
</button>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { HomeAxis } from '~/composables/useHomeData'
|
||||
|
||||
withDefaults(defineProps<{
|
||||
axes: HomeAxis[]
|
||||
lpk?: { name: string, fullName: string, text: string, to: string }
|
||||
bouquet?: { title: string, inService: { name?: string }[], stacks: unknown[] } | null
|
||||
gratewizard?: { title: string, subtitle: string }
|
||||
showPromise?: boolean
|
||||
anchors?: boolean
|
||||
}>(), {
|
||||
showPromise: true,
|
||||
anchors: false,
|
||||
})
|
||||
|
||||
const emit = defineEmits<{
|
||||
'open-player': []
|
||||
'open-pdf': []
|
||||
}>()
|
||||
|
||||
const uid = useId()
|
||||
const { launch } = useGrateWizard()
|
||||
|
||||
function onAction(id: string) {
|
||||
if (id === 'open-player') emit('open-player')
|
||||
else if (id === 'open-pdf') emit('open-pdf')
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.toolbox-wrap {
|
||||
container-type: inline-size;
|
||||
}
|
||||
|
||||
.toolbox {
|
||||
display: grid;
|
||||
gap: 1.25rem;
|
||||
}
|
||||
|
||||
@container (min-width: 60rem) {
|
||||
.toolbox:not(.toolbox--single) {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
align-items: start;
|
||||
}
|
||||
}
|
||||
|
||||
.toolbox-axis {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
padding: 1.25rem;
|
||||
border-radius: 16px;
|
||||
background: hsl(var(--color-surface));
|
||||
box-shadow: inset 0 3px 0 hsl(var(--hue));
|
||||
scroll-margin-top: calc(var(--header-height) + 1rem);
|
||||
}
|
||||
|
||||
.toolbox-lever {
|
||||
margin: 0;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.7rem;
|
||||
color: hsl(var(--hue));
|
||||
}
|
||||
|
||||
.toolbox-title {
|
||||
margin: 0.15rem 0 0;
|
||||
font-family: var(--font-display);
|
||||
font-weight: 800;
|
||||
font-size: 1.3rem;
|
||||
letter-spacing: -0.02em;
|
||||
color: hsl(var(--color-text));
|
||||
}
|
||||
|
||||
.toolbox-title a:hover {
|
||||
color: hsl(var(--hue));
|
||||
}
|
||||
|
||||
.toolbox-promise {
|
||||
margin: 0.35rem 0 0;
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.45;
|
||||
color: hsl(var(--color-text) / 0.7);
|
||||
}
|
||||
|
||||
.toolbox-tools {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
/* LPK */
|
||||
.toolbox-lpk {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
padding: 0.9rem;
|
||||
border-radius: 12px;
|
||||
background: hsl(var(--hue) / 0.1);
|
||||
color: hsl(var(--color-text));
|
||||
transition: transform 0.12s ease;
|
||||
}
|
||||
|
||||
.toolbox-lpk:hover {
|
||||
transform: translateY(-3px);
|
||||
}
|
||||
|
||||
.toolbox-lpk-head {
|
||||
font-size: 0.82rem;
|
||||
line-height: 1.4;
|
||||
color: hsl(var(--color-text) / 0.7);
|
||||
}
|
||||
|
||||
.toolbox-lpk-head strong {
|
||||
font-family: var(--font-display);
|
||||
font-size: 1rem;
|
||||
color: hsl(var(--hue));
|
||||
}
|
||||
|
||||
.toolbox-lpk-stacks {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.3rem;
|
||||
}
|
||||
|
||||
.toolbox-lpk-stack {
|
||||
padding: 0.15rem 0.55rem;
|
||||
border-radius: 20px;
|
||||
font-size: 0.75rem;
|
||||
background: hsl(var(--color-bg) / 0.75);
|
||||
}
|
||||
|
||||
.toolbox-lpk-more {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.3rem;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.7rem;
|
||||
color: hsl(var(--hue));
|
||||
}
|
||||
|
||||
/* grateWizard */
|
||||
.toolbox-gw {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
width: 100%;
|
||||
padding: 0.85rem 0.9rem;
|
||||
border-radius: 12px;
|
||||
text-align: left;
|
||||
color: hsl(var(--hue));
|
||||
background: hsl(var(--hue) / 0.1);
|
||||
transition: transform 0.12s ease;
|
||||
}
|
||||
|
||||
.toolbox-gw:hover {
|
||||
transform: translateY(-3px);
|
||||
}
|
||||
|
||||
.toolbox-gw-text {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: 0.8rem;
|
||||
color: hsl(var(--color-text) / 0.7);
|
||||
}
|
||||
|
||||
.toolbox-gw-text strong {
|
||||
font-family: var(--font-display);
|
||||
font-size: 1rem;
|
||||
color: hsl(var(--color-text));
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.toolbox-lpk, .toolbox-gw { transition: none; }
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user