JulesandClaude Opus 5.5
d9f934a8b2
- utils/echelles.ts : texte des slides 15 à 18, mot pour mot, source unique (la future nav S / M / XL lira ce fichier). - EchelleTete.vue : badge d'échelle, titre, sept mots, phrase, ligne « Chaque section est ouverte aux contributions » vers /proposer. - Placée en tête du texte existant, sans le remplacer : Outils (S), popup Écosystème Entraide (M), page Codev (M), popup média (XL). Réseaux AEP et Jobs attendent les arbitrages n° 1 et 2 (table R §6). - /proposer?categorie=<id> présélectionne l'onglet. - Menu mobile : « recherche-média » pointait sur /rag (301), pointe sur /media, état actif comme les autres liens. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
122 lines
3.1 KiB
Vue
122 lines
3.1 KiB
Vue
<template>
|
||
<section class="echelle-tete" :class="{ 'echelle-tete--compact': compact }" :aria-label="`Échelle ${e.id} : ${e.titre}`">
|
||
<p class="echelle-tete__kicker">
|
||
<span class="echelle-tete__badge" aria-hidden="true">{{ e.id }}</span>
|
||
<span class="echelle-tete__titre">{{ e.titre }}<span v-if="e.sousTitre" class="echelle-tete__sous-titre">{{ ' ' + e.sousTitre }}</span></span>
|
||
</p>
|
||
<ul class="echelle-tete__mots">
|
||
<li v-for="m in e.mots" :key="m">{{ m }}</li>
|
||
</ul>
|
||
<p class="echelle-tete__phrase">{{ e.phrase }}</p>
|
||
<slot />
|
||
<p v-if="contribuer" class="echelle-tete__contribuer">
|
||
<span>{{ ECHELLES_CADRE_COURT }}</span>
|
||
<NuxtLink :to="`/proposer?categorie=${e.categorieProposer}`" @click="$emit('navigate')">Proposer une ressource →</NuxtLink>
|
||
</p>
|
||
</section>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ECHELLES, type EchelleId } from '~/utils/echelles'
|
||
|
||
const props = withDefaults(defineProps<{
|
||
echelle: EchelleId
|
||
/** Variante resserrée, pour une popup ou un en-tête centré. */
|
||
compact?: boolean
|
||
/** Affiche la ligne « on pose l'infrastructure, le collectif nourrit ». */
|
||
contribuer?: boolean
|
||
}>(), { compact: false, contribuer: true })
|
||
|
||
defineEmits<{ navigate: [] }>()
|
||
|
||
const e = computed(() => ECHELLES[props.echelle])
|
||
const ECHELLES_CADRE_COURT = 'Chaque section est ouverte aux contributions.'
|
||
</script>
|
||
|
||
<style scoped>
|
||
.echelle-tete {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--space-sm);
|
||
margin: 0 0 var(--space-md);
|
||
}
|
||
|
||
.echelle-tete__kicker {
|
||
display: flex;
|
||
align-items: baseline;
|
||
gap: var(--space-sm);
|
||
margin: 0;
|
||
}
|
||
|
||
.echelle-tete__badge {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
min-width: 2rem;
|
||
padding: 0.1rem 0.5rem;
|
||
border-radius: var(--radius-sm);
|
||
background: var(--accent);
|
||
color: var(--on-accent);
|
||
font-weight: var(--fw-bold);
|
||
font-size: var(--fs-sm);
|
||
letter-spacing: 0.04em;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
.echelle-tete__titre {
|
||
font-size: var(--fs-lg);
|
||
font-weight: var(--fw-bold);
|
||
color: var(--text);
|
||
line-height: var(--lh-tight);
|
||
}
|
||
|
||
.echelle-tete__sous-titre {
|
||
font-weight: var(--fw-regular);
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
.echelle-tete__mots {
|
||
list-style: none;
|
||
margin: 0;
|
||
padding: 0;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 0.15rem 0;
|
||
font-size: var(--fs-sm);
|
||
color: var(--text);
|
||
line-height: var(--lh-base);
|
||
}
|
||
.echelle-tete__mots li:not(:last-child)::after {
|
||
content: '·';
|
||
margin: 0 0.5rem;
|
||
color: var(--accent);
|
||
font-weight: var(--fw-bold);
|
||
}
|
||
|
||
.echelle-tete__phrase {
|
||
margin: 0;
|
||
font-size: var(--fs-sm);
|
||
font-style: italic;
|
||
color: var(--text-muted);
|
||
line-height: var(--lh-base);
|
||
}
|
||
|
||
.echelle-tete__contribuer {
|
||
margin: 0;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 0.25rem 0.75rem;
|
||
font-size: var(--fs-xs);
|
||
color: var(--text-muted);
|
||
}
|
||
.echelle-tete__contribuer a {
|
||
color: var(--link);
|
||
text-decoration: underline;
|
||
text-underline-offset: 2px;
|
||
}
|
||
.echelle-tete__contribuer a:hover { color: var(--link-hover); }
|
||
|
||
.echelle-tete--compact { text-align: left; }
|
||
.echelle-tete--compact .echelle-tete__titre { font-size: var(--fs-base); }
|
||
</style>
|