identité 2 : un oiseau perché seulement où il y a du vide au-dessus, l'en-tête tient à 768 px
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>
This commit is contained in:
@@ -6,13 +6,15 @@
|
||||
<div class="i-lucide-shopping-bag h-12 w-12" />
|
||||
</div>
|
||||
|
||||
<p class="mb-2 font-mono text-sm tracking-widest text-primary uppercase text-center">
|
||||
<p class="relative mb-2 font-mono text-sm tracking-widest text-primary uppercase text-center">
|
||||
{{ content?.kicker }}
|
||||
<!-- Phone: the title fills the width; the bird stands at the end of this line -->
|
||||
<UiOiseauPose nom="lectrice" pose="perche" right="8px" bottom="0px" :w="84" retourne mobile-seul />
|
||||
</p>
|
||||
|
||||
<h1 class="relative font-display text-3xl font-bold mb-4 text-center" style="color: hsl(var(--color-text))">
|
||||
{{ content?.title }}
|
||||
<UiOiseauPose nom="lectrice" pose="marge-d" ecart="16px" bottom="-8px" :w="84" retourne />
|
||||
<UiOiseauPose nom="lectrice" pose="perche" right="8px" :w="84" retourne />
|
||||
</h1>
|
||||
|
||||
<p class="text-lg leading-relaxed mb-10 text-center" style="color: hsl(var(--color-text-muted))">
|
||||
@@ -47,7 +49,6 @@
|
||||
|
||||
<!-- Librairie -->
|
||||
<div class="cta-block mb-10">
|
||||
<UiOiseauPose nom="factrice" pose="perche" left="calc(80% - 43px)" :w="86" retourne mobile />
|
||||
<UiOiseauPose nom="libraire" pose="marge-d" ecart="40px" bottom="-60px" :w="122" retourne />
|
||||
<UiOiseauPose nom="empileur" pose="derriere" left="-120px" bottom="-30px" :w="200" />
|
||||
<div class="cta-icon cta-icon--accent">
|
||||
|
||||
@@ -51,7 +51,6 @@
|
||||
|
||||
<!-- Productions collectives -->
|
||||
<NuxtLink to="/economique/productions-collectives" class="item-card group">
|
||||
<UiOiseauPose nom="boulangere" pose="perche" left="calc(76% - 38px)" :w="76" />
|
||||
<UiOiseauPose nom="apicultrice" pose="marge-g" ecart="52px" :w="124" />
|
||||
<UiOiseauPose nom="maraichere" pose="marge-d" ecart="46px" bottom="-90px" :w="108" retourne />
|
||||
<div class="item-header">
|
||||
|
||||
@@ -10,7 +10,11 @@
|
||||
/>
|
||||
|
||||
<header class="mb-10 text-center">
|
||||
<p class="mb-2 font-mono text-sm tracking-widest text-primary uppercase">{{ content?.kicker }}</p>
|
||||
<p class="relative mb-2 font-mono text-sm tracking-widest text-primary uppercase">
|
||||
{{ content?.kicker }}
|
||||
<!-- Phone: the title fills the width; the bird stands at the end of this line -->
|
||||
<UiOiseauPose nom="relieur" pose="perche" right="4px" bottom="0px" :w="72" mobile-seul />
|
||||
</p>
|
||||
<h1 class="page-title relative font-display font-bold tracking-tight" style="color: hsl(var(--color-text))">
|
||||
{{ content?.title }}
|
||||
<UiOiseauPose nom="relieur" pose="perche" left="calc(24% - 54px)" bottom="-4px" :w="108" :seuil="1200" />
|
||||
@@ -68,12 +72,11 @@
|
||||
<script setup lang="ts">
|
||||
import type { OiseauPlace } from '~/utils/oiseauPose'
|
||||
|
||||
// Birds along the chapters, each by the one its trade tells (irregular intervals)
|
||||
// Birds along the chapters, each by the one its trade tells (irregular intervals). The cards
|
||||
// stand 12 px apart: no room above them for a perched bird (DA rule of 03/11)
|
||||
const OISEAUX_CHAPITRE: Record<string, OiseauPlace[]> = {
|
||||
'01-introduction': [{ nom: 'conteuse', pose: 'marge-g', ecart: '50px', bottom: '20%', w: 122 }],
|
||||
'02-don': [{ nom: 'penseur', pose: 'perche', right: '12%', w: 76 }],
|
||||
'03-mesure': [{ nom: 'la-balance', pose: 'marge-d', ecart: '40px', bottom: '25%', w: 112, retourne: true }],
|
||||
'05-trm': [{ nom: 'colporteur', pose: 'perche', right: '4px', w: 72, mobileSeul: true }],
|
||||
'07-echanger': [{ nom: 'colporteur', pose: 'marge-g', ecart: '44px', bottom: '-20px', w: 116 }],
|
||||
'11-annexes': [{ nom: 'illustratrice', pose: 'derriere', left: 'calc(100% - 90px)', bottom: '-40px', w: 220 }],
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="axis-scope axis-scope--eco section-padding">
|
||||
<div class="oiseaux-scene axis-scope axis-scope--eco section-padding">
|
||||
<div class="container-content">
|
||||
|
||||
<!-- Header -->
|
||||
@@ -62,8 +62,9 @@
|
||||
<div
|
||||
v-if="content?.content"
|
||||
id="section-content"
|
||||
class="prose-block mb-8 max-w-2xl mx-auto section-anchor"
|
||||
class="prose-block relative mb-8 max-w-2xl mx-auto section-anchor"
|
||||
>
|
||||
<UiOiseauPose nom="boulangere" pose="marge-g" ecart="56px" bottom="52%" :w="100" />
|
||||
<p class="leading-relaxed whitespace-pre-line" style="color: hsl(var(--color-text-muted))">
|
||||
{{ content.content }}
|
||||
</p>
|
||||
@@ -73,8 +74,9 @@
|
||||
<div
|
||||
v-if="content?.links"
|
||||
id="section-links"
|
||||
class="flex flex-col gap-3 mb-10 max-w-2xl mx-auto section-anchor"
|
||||
class="relative flex flex-col gap-3 mb-10 max-w-2xl mx-auto section-anchor"
|
||||
>
|
||||
<UiOiseauPose nom="vigneronne" pose="derriere" left="-140px" bottom="-24px" :w="210" />
|
||||
<a
|
||||
v-for="link in content.links"
|
||||
:key="link.href"
|
||||
|
||||
@@ -18,7 +18,6 @@
|
||||
|
||||
<p class="relative text-lg leading-relaxed mb-8 text-center" style="color: hsl(var(--color-text-muted))">
|
||||
{{ content?.description }}
|
||||
<UiOiseauPose nom="imprimeuse-3d" pose="marge-g" ecart="60px" :w="96" />
|
||||
</p>
|
||||
|
||||
<div class="mb-8 text-center">
|
||||
@@ -29,7 +28,6 @@
|
||||
<div v-if="content?.content" class="prose-block mb-10">
|
||||
<UiOiseauPose nom="menuisier" pose="perche" left="20px" :w="84" mobile />
|
||||
<UiOiseauPose nom="forgeron" pose="marge-g" ecart="70px" bottom="-30px" :w="140" />
|
||||
<UiOiseauPose nom="potier" pose="marge-d" ecart="40px" bottom="40%" :w="120" retourne />
|
||||
<UiOiseauPose nom="berger" pose="derriere" left="calc(100% - 110px)" bottom="-46px" :w="230" />
|
||||
<p class="leading-relaxed whitespace-pre-line" style="color: hsl(var(--color-text-muted))">
|
||||
{{ content.content }}
|
||||
@@ -37,8 +35,6 @@
|
||||
</div>
|
||||
|
||||
<div class="relative text-center">
|
||||
<UiOiseauPose nom="tisserand" pose="perche" left="calc(50% + 120px)" :w="84" retourne />
|
||||
<UiOiseauPose nom="vigneronne" pose="marge-g" ecart="40px" bottom="-40px" :w="100" />
|
||||
<UiBaseButton variant="ghost" to="/economique">
|
||||
<div class="i-lucide-arrow-left mr-2 h-4 w-4" />
|
||||
Autonomie économique
|
||||
|
||||
Reference in New Issue
Block a user