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>
70 lines
1.9 KiB
Vue
70 lines
1.9 KiB
Vue
<template>
|
|
<span v-if="label" class="status" :class="`status--${tone}`">
|
|
<span class="status-dot" aria-hidden="true" />
|
|
<span>{{ label }}</span>
|
|
<span v-if="since" class="status-since">· {{ since }}</span>
|
|
</span>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
// Project maturity, as written in YAML: `status: En production` (+ `since`),
|
|
// `status: En développement`, or the legacy `gestation: true`.
|
|
const props = defineProps<{
|
|
status?: string
|
|
gestation?: boolean
|
|
since?: string
|
|
}>()
|
|
|
|
const label = computed(() => props.status || (props.gestation ? 'En gestation' : ''))
|
|
|
|
const tone = computed(() => {
|
|
const s = label.value.toLowerCase()
|
|
if (s.includes('production')) return 'prod'
|
|
if (s.includes('développement') || s.includes('developpement')) return 'dev'
|
|
return 'gest'
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.status {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.35rem;
|
|
padding: 0.15rem 0.6rem;
|
|
border-radius: 20px;
|
|
font-family: var(--font-mono);
|
|
font-size: 0.68rem;
|
|
font-weight: 500;
|
|
line-height: 1.5;
|
|
white-space: nowrap;
|
|
vertical-align: middle;
|
|
color: hsl(var(--color-text) / 0.75);
|
|
background: hsl(var(--color-text) / 0.06);
|
|
}
|
|
|
|
.status-dot {
|
|
width: 0.5rem;
|
|
height: 0.5rem;
|
|
border-radius: 50%;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* En production : plein */
|
|
.status--prod .status-dot { background: hsl(var(--axis-cit)); }
|
|
.status--prod { color: hsl(var(--axis-cit)); background: hsl(var(--axis-cit) / 0.1); }
|
|
|
|
/* En développement : demi-plein */
|
|
.status--dev .status-dot {
|
|
background: linear-gradient(to top, hsl(var(--axis-eco)) 50%, transparent 50%);
|
|
box-shadow: inset 0 0 0 1.5px hsl(var(--axis-eco));
|
|
}
|
|
.status--dev { color: hsl(var(--axis-eco)); background: hsl(var(--axis-eco) / 0.1); }
|
|
|
|
/* En gestation : cercle */
|
|
.status--gest .status-dot { box-shadow: inset 0 0 0 1.5px hsl(var(--color-text) / 0.45); }
|
|
|
|
.status-since {
|
|
opacity: 0.75;
|
|
}
|
|
</style>
|