LPK/librodrome
18
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

identité 6 : la règle f mesurée au-dessus du dessin, les chapitres posés sur leurs filets, les coins arrondis dégagés

Browse Source 
Règle f, selon la précision de DA du 03/11 après 17h35 : au-dessus d'un oiseau perché, le vide
se mesure du haut de son dessin jusqu'à la plus basse ligne de texte ou au plus bas bloc qui
passe au-dessus de sa largeur peinte. Les lignes de son propre titre comptent, et l'en-tête
collant aussi en haut de page. Quinze perchés en défaut sur bb8fad9 changent de pose, sans
sortir de la liste fermée :
- accueil :
  - le DJ se tient derrière le pupitre de la console, seule sa tête dépasse ;
  - l'accordéoniste passe en S, visible à partir de 1200 px ;
  - la factrice passe à 76 px ;
  - la lectrice sort 20 px plus bas ;
- au téléphone, l'oiseau de l'intitulé est un oiseau plat : codeuse, maraîchère, potier, et le
  cycliste livreur sur productions collectives ;
- authentification, tarifs de l'eau, commande : en marge droite, sur l'arête haute de la carte ;
- en musique : le danseur passe en S ;
- évènement :
  - l'acrobate se tient avant la devise ;
  - le régisseur passe en S, posé sur l'arête des cartes ;
  - le clown passe en M ;
  - le marionnettiste se tient sur le filet du pied de page (option 1 d'orch). Son décalage
    est tiré de --seal-block, le bloc du sceau défini dans le layout ;
- chapitres : le calligraphe se tient sur le filet du titre, le typographe sur celui de la
  navigation, le cartonnier en marge des boutons. Plus aucune hauteur en %.

Règle g, rectangle du bloc (décision d'orch) : le porteur de serveur et l'administrateur réseau
sortent de la découpe des coins arrondis.

La liste fermée (docs/da-oiseaux.md) reçoit les précisions d'orch :
- e vaut pour un oiseau « libre » dont le centre sort de son bloc ;
- g se mesure sur le rectangle du bloc ;
- un oiseau derrière une carte reste « derrière ».

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Yvv
2026-11-03 19:24:44 +01:00
co-authored by Claude Opus 5.5
parent bb8fad9ff3
commit 28a6daf382
16 changed files with 158 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/book/ChapterHeader.vue
+7 -3
View File
@@ -8,15 +8,19 @@
· {{ readingTime }} · {{ readingTime }}
</span> </span>
</div> </div>
<h1 class="chapter-title font-display font-bold leading-tight tracking-tight text-white"> <h1 class="chapter-title relative font-display font-bold leading-tight tracking-tight text-white">
{{ title }} {{ title }}
<!-- The calligrapher in the left margin, feet on the title's rule (rule e) -->
<UiOiseauPose nom="calligraphe" pose="marge-g" ecart="40px" :w="112" />
</h1> </h1>
<p v-if="description" class="mt-3 text-lg text-white/60"> <p v-if="description" class="mt-3 text-lg text-white/60">
{{ description }} {{ description }}
</p> </p>
<!-- Songs + PDF actions row --> <!-- Songs + PDF actions row. The box maker in the right margin, feet at the bottom of the
<div class="mt-4 flex flex-wrap items-center gap-2"> buttons (every chapter has its PDF page) -->
<div class="relative mt-4 flex flex-wrap items-center gap-2">
<UiOiseauPose nom="cartonnier" pose="marge-d" ecart="40px" :w="76" retourne />
<!-- Associated songs badges --> <!-- Associated songs badges -->
<button <button
v-for="song in songs" v-for="song in songs"
app/components/home/HomeFormat.vue
+7 -4
View File
@@ -2,16 +2,19 @@
<div class="format"> <div class="format">
<header v-if="format && showHeader" class="format-head"> <header v-if="format && showHeader" class="format-head">
<!-- The accordion player at the end of the title, on its baseline: on the event card it stood <!-- The accordion player at the end of the title, on its baseline: on the event card it stood
at the height of the reader, and its ground line touched the card's link (rules c, h) --> at the height of the reader, and its ground line touched the card's link (rules c, h).
<h2 class="format-title">{{ format.title }}<UiOiseauPose nom="accordeoniste" pose="perche" bout left="16px" :w="84" retourne ton="accent" :seuil="1024" /></h2> S and from 1200 px: the band above leaves 125 px, and a perched bird keeps a void of its
own height above it (rule f); 8 px under the baseline, within the 12 px of rule e -->
<h2 class="format-title">{{ format.title }}<UiOiseauPose nom="accordeoniste" pose="perche" bout left="16px" bottom="-8px" :w="72" retourne ton="accent" :seuil="1200" /></h2>
<p class="format-text">{{ format.text }}</p> <p class="format-text">{{ format.text }}</p>
</header> </header>
<div class="format-grid"> <div class="format-grid">
<!-- Éditorial : le livre et les chansons --> <!-- Éditorial : le livre et les chansons -->
<article v-if="book" class="format-card format-card--book"> <article v-if="book" class="format-card format-card--book">
<!-- The reader peeks over the book card: only her head and book show --> <!-- The reader peeks over the book card: only her head and book show, clear of the end of
<UiOiseauPose nom="lectrice" pose="derriere" left="76%" bottom="calc(100% - 48px)" :w="104" /> the header's first line (DA, 03/11) -->
<UiOiseauPose nom="lectrice" pose="derriere" left="76%" bottom="calc(100% - 68px)" :w="104" />
<div <div
class="format-cover" class="format-cover"
role="img" role="img"
app/components/home/HomeLanding.vue
+23 -12
View File
@@ -21,19 +21,25 @@
<div class="va-console"> <div class="va-console">
<p class="va-console-title"> <p class="va-console-title">
{{ heading[2] }} {{ heading[2] }}
<!-- The DJ stands on the console board, looking at the faders -->
<UiOiseauPose nom="dj" pose="perche" right="2rem" bottom="-0.75rem" :w="80" retourne ton="accent" mobile />
</p> </p>
<HomeConsole <!-- The DJ stands behind the console board, like behind its decks: only its head, with
v-model="active" its headphones, shows over the board. Perched on the board, under the sticky header,
:axes="axes" it had no void of its own height above it (rule f, DA 03/11 after 17h35). The scene
:prefix="consoleLabels?.prefix" keeps it under the board without touching the console -->
:top-label="consoleLabels?.top" <div class="va-console-scene">
:bottom-label="consoleLabels?.bottom" <UiOiseauPose nom="dj" pose="derriere" right="24px" top="-95px" :w="150" retourne ton="accent" />
:stacks="bouquet?.inService" <UiOiseauPose nom="dj" pose="derriere" right="24px" top="-95px" :w="150" retourne ton="accent" mobile-seul :seuil="768" />
:stacks-to="lpk?.to" <HomeConsole
:stacks-label="lpk ? `En service chez ${lpk.name} :` : 'En service :'" v-model="active"
/> :axes="axes"
:prefix="consoleLabels?.prefix"
:top-label="consoleLabels?.top"
:bottom-label="consoleLabels?.bottom"
:stacks="bouquet?.inService"
:stacks-to="lpk?.to"
:stacks-label="lpk ? `En service chez ${lpk.name} :` : 'En service :'"
/>
</div>
</div> </div>
</div> </div>
</section> </section>
@@ -196,6 +202,11 @@ const toolboxOiseaux: Partial<Record<AxisKey, OiseauPlace[]>> = {
.va-approach::after { content: ' →'; } .va-approach::after { content: ' →'; }
} }
.va-console-scene {
position: relative;
isolation: isolate;
}
.va-console-title { .va-console-title {
position: relative; position: relative;
margin: 0 0 0.75rem; margin: 0 0 0.75rem;
app/components/home/HomeMessages.vue
+1 -1
View File
@@ -6,7 +6,7 @@
<UiScrollReveal> <UiScrollReveal>
<div class="message-form-card"> <div class="message-form-card">
<!-- The postwoman stands on the message form --> <!-- The postwoman stands on the message form -->
<UiOiseauPose nom="factrice" pose="perche" right="30px" :w="88" retourne :seuil="1200" /> <UiOiseauPose nom="factrice" pose="perche" right="30px" :w="76" retourne :seuil="1200" />
<h3 class="font-display text-lg font-bold form-title mb-4">Laisser un message</h3> <h3 class="font-display text-lg font-bold form-title mb-4">Laisser un message</h3>
<form v-if="!submitted" class="space-y-3" @submit.prevent="send"> <form v-if="!submitted" class="space-y-3" @submit.prevent="send">
app/layouts/default.vue
+12 -2
View File
@@ -36,11 +36,21 @@ useScrollTracking()
grid-template-rows: auto 1fr auto; grid-template-rows: auto 1fr auto;
} }
/* The seal's block, between the page and the footer: a bird of a page that stands on the footer's
top rule takes its offset from here (evenement, the puppeteer) */
.app-main {
--seal-w: 44px;
--seal-mt: 2rem;
--seal-mb: 1rem;
--seal-block: calc(var(--seal-mt) + var(--seal-w) * 105 / 112 + var(--seal-mb));
}
/* === Seal — 益 Yì (Increase) === */ /* === Seal — 益 Yì (Increase) === */
.app-seal { .app-seal {
display: block; display: block;
width: 44px; width: var(--seal-w);
margin: 2rem 1.5rem 1rem auto; /* its height follows the viewBox: width × 105 / 112 (in --seal-block) */
margin: var(--seal-mt) 1.5rem var(--seal-mb) auto;
color: hsl(var(--color-accent)); color: hsl(var(--color-accent));
opacity: 0.28; opacity: 0.28;
filter: drop-shadow(1px 1px 0.5px rgba(0,0,0,0.25)) filter: drop-shadow(1px 1px 0.5px rgba(0,0,0,0.25))
app/pages/citoyenne/[slug].vue
+3 -3
View File
@@ -140,9 +140,9 @@ const OISEAUX_PAGE: Record<string, OiseauxPage> = {
], ],
}, },
'tarifs-eau': { 'tarifs-eau': {
// the summary stands right of the project card: the actor stands on the card, where the // the actor in the right margin, feet on the card's top edge: perched on the card, it stood
// links row above leaves the page empty // 11 px under the introduction (rule f, DA 03/11 after 17h35); the summary starts lower
projet: [{ nom: 'comedien', pose: 'perche', right: '24px', w: 100, retourne: true }], projet: [{ nom: 'comedien', pose: 'marge-d', ecart: '24px', bottom: '100%', w: 100, retourne: true }],
texte: [{ nom: 'potier', pose: 'marge-g', ecart: '52px', w: 112 }], texte: [{ nom: 'potier', pose: 'marge-g', ecart: '52px', w: 112 }],
}, },
} }
app/pages/citoyenne/index.vue
+4 -2
View File
@@ -3,8 +3,10 @@
<div class="container-content"> <div class="container-content">
<header class="mb-12 text-center"> <header class="mb-12 text-center">
<p class="relative mb-2 font-mono text-sm tracking-widest text-primary uppercase"> <p class="relative mb-2 font-mono text-sm tracking-widest text-primary uppercase">
<!-- Phone: the title fills the width; the bird stands at the end of this line, on its baseline --> <!-- Phone: the title fills the width; the bird stands at the end of this line, on its baseline.
{{ content?.kicker }}<UiOiseauPose nom="vigie" pose="perche" bout :w="72" retourne mobile-seul /> A flat bird (37-44 px tall at 72 px wide): 93 px separate this baseline from the sticky
header, and a perched bird keeps a void of its own height above it (rule f) -->
{{ content?.kicker }}<UiOiseauPose nom="potier" pose="perche" bout :w="72" mobile-seul />
</p> </p>
<h1 class="page-title relative font-display font-bold tracking-tight" style="color: hsl(var(--color-text))"> <h1 class="page-title relative font-display font-bold tracking-tight" style="color: hsl(var(--color-text))">
<!-- At the end of the title, on its baseline (rule e, docs/da-oiseaux.md) --> <!-- At the end of the title, on its baseline (rule e, docs/da-oiseaux.md) -->
app/pages/economique/commande.vue
+3 -2
View File
@@ -3,8 +3,6 @@
<div class="container-content"> <div class="container-content">
<div class="mx-auto max-w-2xl"> <div class="mx-auto max-w-2xl">
<div class="section-icon relative mx-auto mb-6"> <div class="section-icon relative mx-auto mb-6">
<!-- The reader stands on the bag: a real edge, with the page's top margin above -->
<UiOiseauPose nom="lectrice" pose="perche" left="14px" :w="84" retourne :seuil="1024" />
<div class="i-lucide-shopping-bag h-12 w-12" /> <div class="i-lucide-shopping-bag h-12 w-12" />
</div> </div>
@@ -24,6 +22,9 @@
<!-- Bookelis CTA --> <!-- Bookelis CTA -->
<div class="cta-block mb-8"> <div class="cta-block mb-8">
<UiOiseauPose nom="cycliste-livreur" pose="marge-g" ecart="54px" :w="150" /> <UiOiseauPose nom="cycliste-livreur" pose="marge-g" ecart="54px" :w="150" />
<!-- The reader in the right margin, feet on the card's top edge: on the bag, under the
sticky header, she had 22 px of void above her (rule f, DA 03/11 after 17h35) -->
<UiOiseauPose nom="lectrice" pose="marge-d" ecart="24px" bottom="100%" :w="84" retourne />
<div class="cta-icon"> <div class="cta-icon">
<div class="i-lucide-globe h-5 w-5" /> <div class="i-lucide-globe h-5 w-5" />
</div> </div>
app/pages/economique/index.vue
+4 -2
View File
@@ -4,8 +4,10 @@
<!-- Header --> <!-- Header -->
<header class="mb-12 text-center"> <header class="mb-12 text-center">
<p class="relative mb-2 font-mono text-sm tracking-widest text-primary uppercase"> <p class="relative mb-2 font-mono text-sm tracking-widest text-primary uppercase">
<!-- Phone: the title fills the width; the bird stands at the end of this line, on its baseline --> <!-- Phone: the title fills the width; the bird stands at the end of this line, on its baseline.
{{ content?.kicker }}<UiOiseauPose nom="pompeur-de-g1" pose="perche" bout :w="72" retourne mobile-seul /> A flat bird (37-44 px tall at 72 px wide): 93 px separate this baseline from the sticky
header, and a perched bird keeps a void of its own height above it (rule f) -->
{{ content?.kicker }}<UiOiseauPose nom="maraichere" pose="perche" bout :w="72" retourne mobile-seul />
</p> </p>
<h1 class="page-title font-display font-bold tracking-tight" style="color: hsl(var(--color-text))"> <h1 class="page-title font-display font-bold tracking-tight" style="color: hsl(var(--color-text))">
{{ content?.title }} {{ content?.title }}
app/pages/economique/modele-eco/[slug].vue
+8 -5
View File
@@ -1,8 +1,10 @@
<template> <template>
<div v-if="chapter" class="relative"> <div v-if="chapter" class="relative">
<!-- The book's trades in the margins: the two who write keep their way, on the left --> <!-- The book's trades in the margins, each on a line of the chapter (rule e): the two who
<UiOiseauPose nom="calligraphe" pose="libre" right="calc(100% + 40px)" top="40px" :w="112" /> write keep their way, on the left, the calligrapher on the title's rule (in the chapter
<UiOiseauPose nom="typographe" pose="libre" right="calc(100% + 64px)" top="46%" :w="100" /> header), the typographer on the navigation's rule; the box maker in the right margin, by
the PDF and songs buttons (in the header); the proofreader on the right, by the last
paragraph -->
<UiOiseauPose nom="correcteur" pose="libre" left="calc(100% + 40px)" bottom="140px" :w="108" retourne /> <UiOiseauPose nom="correcteur" pose="libre" left="calc(100% + 40px)" bottom="140px" :w="108" retourne />
<BookChapterHeader <BookChapterHeader
:title="chapter.title" :title="chapter.title"
@@ -15,9 +17,10 @@
<BookChapterContent :content="chapter" /> <BookChapterContent :content="chapter" />
<!-- Prev / Next navigation. The rule above it is drawn (border-t alone sets no style here): <!-- Prev / Next navigation. The rule above it is drawn (border-t alone sets no style here):
the box maker stands on it --> the typographer stands on it, in the left margin. Perched in the column, the box maker had
20 to 27 px of void under the last paragraph (rule f) -->
<nav class="relative mt-16 flex items-center justify-between border-t border-t-solid border-white/8 pt-8"> <nav class="relative mt-16 flex items-center justify-between border-t border-t-solid border-white/8 pt-8">
<UiOiseauPose nom="cartonnier" pose="perche" left="calc(50% - 38px)" :w="76" /> <UiOiseauPose nom="typographe" pose="marge-g" ecart="64px" bottom="100%" :w="100" />
<NuxtLink <NuxtLink
v-if="prevChapter" v-if="prevChapter"
:to="`/economique/modele-eco/${prevChapter.stem?.split('/').pop()}`" :to="`/economique/modele-eco/${prevChapter.stem?.split('/').pop()}`"
app/pages/economique/productions-collectives.vue
+3 -1
View File
@@ -27,7 +27,9 @@
<!-- Content --> <!-- Content -->
<div v-if="content?.content" class="prose-block mb-10"> <div v-if="content?.content" class="prose-block mb-10">
<UiOiseauPose nom="menuisier" pose="perche" left="20px" :w="84" mobile /> <UiOiseauPose nom="menuisier" pose="perche" left="20px" :w="84" />
<!-- Phone: a flatter bird at the same place, the text above leaves 89 px (rule f) -->
<UiOiseauPose nom="cycliste-livreur" pose="perche" left="20px" :w="72" mobile-seul />
<UiOiseauPose nom="forgeron" pose="marge-g" ecart="70px" :w="140" /> <UiOiseauPose nom="forgeron" pose="marge-g" ecart="70px" :w="140" />
<UiOiseauPose nom="berger" pose="derriere" left="calc(100% - 110px)" bottom="-46px" :w="230" /> <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))"> <p class="leading-relaxed whitespace-pre-line" style="color: hsl(var(--color-text-muted))">
app/pages/en-musique/index.vue
+3 -1
View File
@@ -72,7 +72,9 @@
<!-- Song list --> <!-- Song list -->
<div v-if="viewMode === 'list'" class="relative flex flex-col gap-2"> <div v-if="viewMode === 'list'" class="relative flex flex-col gap-2">
<UiOiseauPose nom="danseur" pose="perche" left="calc(64% - 60px)" :w="120" :seuil="1200" /> <!-- S, not M: above it the buttons leave 150 px, and a perched bird keeps a void of its own
height above its head (rule f, DA 03/11 after 17h35) -->
<UiOiseauPose nom="danseur" pose="perche" left="calc(64% - 60px)" :w="80" :seuil="1200" />
<SongItem <SongItem
v-for="song in filteredSongs" v-for="song in filteredSongs"
:key="song.id" :key="song.id"
app/pages/evenement.vue
+21 -10
View File
@@ -26,14 +26,15 @@
<!-- Leitmotiv --> <!-- Leitmotiv -->
<div v-if="evtContent?.leitmotiv" class="mt-8 flex flex-col items-center gap-3"> <div v-if="evtContent?.leitmotiv" class="mt-8 flex flex-col items-center gap-3">
<p class="relative font-display text-xl font-bold" style="color: hsl(var(--color-text))"> <p class="font-display text-xl font-bold" style="color: hsl(var(--color-text))">
« {{ evtContent.leitmotiv }} » « {{ evtContent.leitmotiv }} »
<!-- The acrobat on the line of the leitmotiv, before it: by « Format & lieu », the stage
manager stands alone (two birds there would stand at the same height) -->
<UiOiseauPose nom="acrobate" pose="perche" right="calc(100% + 14px)" bottom="0px" :w="72" />
</p> </p>
<p v-if="evtContent?.tagline" class="font-mono text-sm tracking-widest uppercase" style="color: hsl(var(--color-primary))"> <!-- The acrobat before the tagline, on its line: the tagline is narrower than the leitmotiv,
28 px keep it out from under the leitmotiv, and above it the description ends higher
(rule f, DA 03/11 after 17h35). By « Format & lieu », the stage manager stands alone -->
<p v-if="evtContent?.tagline" class="relative font-mono text-sm tracking-widest uppercase" style="color: hsl(var(--color-primary))">
{{ evtContent.tagline }} {{ evtContent.tagline }}
<UiOiseauPose nom="acrobate" pose="perche" right="calc(100% + 28px)" bottom="0px" :w="72" />
</p> </p>
<span v-if="evtContent?.gestation" class="evt-gestation-badge"> <span v-if="evtContent?.gestation" class="evt-gestation-badge">
<div class="i-lucide-flask-conical h-3.5 w-3.5" /> <div class="i-lucide-flask-conical h-3.5 w-3.5" />
@@ -44,14 +45,21 @@
</div> </div>
<!-- ══ Contenu événement ══ --> <!-- ══ Contenu événement ══ -->
<section v-if="evtContent?.axes || evtContent?.espaces || evtContent?.config" class="evt-content section-padding"> <section v-if="evtContent?.axes || evtContent?.espaces || evtContent?.config" class="evt-content relative section-padding">
<!-- The puppeteer stands on the footer's top rule, from 1200 px: under « Espaces & programme »
the axes cards leave 100 px, half what it needs (rule f), and each row of cards holds one
bird (rule c). The only bird of the page out of its block (orch, 03/11, option 1). Its
offset is the seal's block of the layout (--seal-block), between this section and the
footer; the bird check verifies it stands on the rule -->
<UiOiseauPose nom="marionnettiste" pose="perche" left="18%" bottom="calc(-1 * var(--seal-block))" :w="112" retourne :seuil="1200" />
<div class="container-content flex flex-col gap-14"> <div class="container-content flex flex-col gap-14">
<!-- 3 axes --> <!-- 3 axes -->
<div v-if="evtContent?.axes"> <div v-if="evtContent?.axes">
<h2 class="evt-section-title relative"> <h2 class="evt-section-title relative">
<!-- The section birds stand at the end of their title, on its baseline (rule e) --> <!-- The clown at the end of its title, on its baseline (rule e). M: between 768 and
Trois axes d'émancipation<UiOiseauPose nom="clown" pose="perche" bout left="14px" :w="84" retourne ton="accent" /> 1199 px the four birds shown would all be S otherwise (rule a) -->
Trois axes d'émancipation<UiOiseauPose nom="clown" pose="perche" bout left="14px" :w="108" retourne ton="accent" />
</h2> </h2>
<p class="evt-section-sub">« je subis — ou je m'affranchis »</p> <p class="evt-section-sub">« je subis — ou je m'affranchis »</p>
<div class="axes-grid"> <div class="axes-grid">
@@ -76,7 +84,7 @@
<!-- Espaces permanents --> <!-- Espaces permanents -->
<div v-if="evtContent?.espaces"> <div v-if="evtContent?.espaces">
<h2 class="evt-section-title relative"> <h2 class="evt-section-title relative">
Espaces & programme<UiOiseauPose nom="marionnettiste" pose="perche" bout left="14px" :w="112" retourne /> Espaces & programme
</h2> </h2>
<p class="evt-section-sub">Chorégraphie séquencée de plénières, ateliers et espaces permanents</p> <p class="evt-section-sub">Chorégraphie séquencée de plénières, ateliers et espaces permanents</p>
<div class="espaces-grid"> <div class="espaces-grid">
@@ -97,7 +105,10 @@
<div v-if="evtContent?.config"> <div v-if="evtContent?.config">
<h2 class="evt-section-title relative"> <h2 class="evt-section-title relative">
Format & lieu Format & lieu
<UiOiseauPose nom="regisseur" pose="perche" right="24%" bottom="0px" :w="92" retourne /> <!-- S at 72 px, feet on the cards' top edge (the title's 0.25rem margin under it): the
espaces cards above leave 106 px at 768 px, and a perched bird keeps a void of its own
height above it (rule f) -->
<UiOiseauPose nom="regisseur" pose="perche" right="24%" bottom="-0.25rem" :w="72" retourne />
</h2> </h2>
<div class="config-grid"> <div class="config-grid">
<div v-for="(cfg, i) in evtContent.config" :key="i" class="config-card"> <div v-for="(cfg, i) in evtContent.config" :key="i" class="config-card">
app/pages/numerique/[slug].vue
+10 -6
View File
@@ -448,10 +448,13 @@ const OISEAUX_PAGE: Record<string, OiseauxPage> = {
}, },
'authentification-wot': { 'authentification-wot': {
projet: [ projet: [
{ nom: 'porteur-de-serveur', pose: 'derriere', left: '-130px', bottom: '-30px', w: 210 }, // behind the card, out of its bottom-left corner: no painted pixel in the cut of the rounded
// the Ğ1 pump (Duniter) perched on the project card: 74 px of void above it at every width, // corner, inside the card's rectangle (rule g, orch 03/11 after 17h58)
// and the left margin keeps no column of three (rule d) { nom: 'porteur-de-serveur', pose: 'derriere', left: '-142px', bottom: '-24px', w: 210 },
{ nom: 'pompeur-de-g1', pose: 'perche', right: '14px', w: 96 }, // the Ğ1 pump (Duniter) in the right margin, feet on the card's top edge: perched on the
// card it stood 11 px under the third line of the introduction (rule f). The summary starts
// under the card, and the left margin keeps no column of three (rule d)
{ nom: 'pompeur-de-g1', pose: 'marge-d', ecart: '24px', bottom: '100%', w: 96 },
], ],
sections: { sections: {
// the steps have no background: in the margin, on their last line, small and close to the // the steps have no background: in the margin, on their last line, small and close to the
@@ -462,9 +465,10 @@ const OISEAUX_PAGE: Record<string, OiseauxPage> = {
}, },
}, },
'cloud-libre': { 'cloud-libre': {
projet: [{ nom: 'porteur-de-serveur', pose: 'derriere', left: '-130px', bottom: '-30px', w: 210 }], // both out of the cut of their card's rounded corner (rule g, as on the web of trust)
projet: [{ nom: 'porteur-de-serveur', pose: 'derriere', left: '-142px', bottom: '-24px', w: 210 }],
sections: { sections: {
1: [{ nom: 'admin-reseau', pose: 'derriere', left: '-110px', bottom: '-20px', w: 220 }], 1: [{ nom: 'admin-reseau', pose: 'derriere', left: '-110px', bottom: '-32px', w: 220 }],
5: [{ nom: 'imprimeuse-3d', pose: 'marge-g', ecart: '48px', w: 84 }], 5: [{ nom: 'imprimeuse-3d', pose: 'marge-g', ecart: '48px', w: 84 }],
}, },
}, },
app/pages/numerique/index.vue
+4 -2
View File
@@ -3,8 +3,10 @@
<div class="container-content"> <div class="container-content">
<header class="mb-12 text-center"> <header class="mb-12 text-center">
<p class="relative mb-2 font-mono text-sm tracking-widest text-primary uppercase"> <p class="relative mb-2 font-mono text-sm tracking-widest text-primary uppercase">
<!-- Phone: the title fills the width; the bird stands at the end of this line, on its baseline --> <!-- Phone: the title fills the width; the bird stands at the end of this line, on its baseline.
{{ content?.kicker }}<UiOiseauPose nom="droneuse" pose="perche" bout :w="72" mobile-seul /> A flat bird (37-44 px tall at 72 px wide): 93 px separate this baseline from the sticky
header, and a perched bird keeps a void of its own height above it (rule f) -->
{{ content?.kicker }}<UiOiseauPose nom="codeuse" pose="perche" bout :w="72" mobile-seul />
</p> </p>
<h1 class="page-title relative font-display font-bold tracking-tight" style="color: hsl(var(--color-text))"> <h1 class="page-title relative font-display font-bold tracking-tight" style="color: hsl(var(--color-text))">
<!-- At the end of the title, on its baseline (rule e, docs/da-oiseaux.md) --> <!-- At the end of the title, on its baseline (rule e, docs/da-oiseaux.md) -->
docs/da-oiseaux.md
+45 -5
View File
@@ -98,7 +98,10 @@ Comment on mesure :
oiseau derrière une carte qui en cache les pieds, le bas de ce qui se voit de lui. oiseau derrière une carte qui en cache les pieds, le bas de ce qui se voit de lui.
- Une ligne de texte se mesure à sa ligne de base, d'après les métriques de sa police. - Une ligne de texte se mesure à sa ligne de base, d'après les métriques de sa police.
- Côté : gauche ou droite du milieu de la fenêtre, selon le centre de l'oiseau. - Côté : gauche ou droite du milieu de la fenêtre, selon le centre de l'oiseau.
- Oiseau de marge : posé en marge, ou dont le centre est hors de son bloc. - Oiseau de marge : posé en marge, ou dont le centre est hors de son bloc. Un oiseau « libre »
dont le centre sort de son bloc est donc un oiseau de marge. Un oiseau derrière une carte reste
« derrière », même si son centre sort de la carte : son sol est le bas de ce qui se voit de lui
(décisions d'orch, 03/11 après 17h58).
Les règles : Les règles :
- a. Tailles : S sous 100 px de large, M de 100 à 179 px, L à partir de 180 px. Dès que trois - a. Tailles : S sous 100 px de large, M de 100 à 179 px, L à partir de 180 px. Dès que trois
@@ -109,7 +112,8 @@ Les règles :
de l'autre. Où qu'ils soient, deux sols ne sont jamais à moins de 12 px. de l'autre. Où qu'ils soient, deux sols ne sont jamais à moins de 12 px.
- d. Colonne : trois oiseaux de marge du même côté ne partagent aucune bande verticale de plus de - d. Colonne : trois oiseaux de marge du même côté ne partagent aucune bande verticale de plus de
12 px, mesurée sur leurs dessins. 12 px, mesurée sur leurs dessins.
- e. Sol : un oiseau de marge ou perché a son sol à 12 px au plus d'une ligne visible. - e. Sol : un oiseau de marge ou perché a son sol à 12 px au plus d'une ligne visible. Cela vaut
pour un oiseau « libre » dont le centre sort de son bloc (orch, 03/11 après 17h58).
- Ligne visible : une bordure non nulle, un fond différent de celui du dessous (le bas d'une - Ligne visible : une bordure non nulle, un fond différent de celui du dessous (le bas d'une
carte qui a un fond, le haut du bloc sur lequel il se tient, une image), ou une ligne de texte carte qui a un fond, le haut du bloc sur lequel il se tient, une image), ou une ligne de texte
de son bloc. de son bloc.
@@ -117,10 +121,16 @@ Les règles :
son début s'il se tient avant), et son sol à 12 px au plus de la ligne de base du titre. son début s'il se tient avant), et son sol à 12 px au plus de la ligne de base du titre.
- Au-delà, il relève d'une autre règle : la marge ; perché sur le bloc d'en dessous, le sol à - Au-delà, il relève d'une autre règle : la marge ; perché sur le bloc d'en dessous, le sol à
12 px au plus de son arête haute ; ou derrière une carte. 12 px au plus de son arête haute ; ou derrière une carte.
- f. Perché : jamais sur la moitié haute d'un titre ou d'un paragraphe. Au-dessus de son sol, un - f. Perché : jamais sur la moitié haute d'un titre ou d'un paragraphe. Au-dessus de l'oiseau, un
vide au moins égal à sa hauteur. vide au moins égal à sa hauteur. Il se mesure du haut de son dessin à la plus basse des lignes de
texte ou des blocs dont la boîte passe au-dessus de sa largeur peinte (précision de DA, 03/11
après 17h35 : l'oiseau ne tient pas seulement dans le vide, il en garde autant au-dessus de lui).
Les lignes du titre où il se tient comptent aussi, celles au-dessus de sa ligne. En haut de page,
l'en-tête collant compte parmi ces blocs.
- g. Derrière : la part de l'oiseau qui est dans son bloc est couverte par un fond opaque (opacité - g. Derrière : la part de l'oiseau qui est dans son bloc est couverte par un fond opaque (opacité
du fond ≥ 0,9). du fond ≥ 0,9). « Dans son bloc » s'entend du rectangle du bloc : aucun pixel peint ne reste à
découvert dans ce rectangle, découpe d'un coin arrondi comprise (décision d'orch, 03/11 après
17h58).
- h. Aucun pixel peint sur un texte ou un lien, trait de sol compris. - h. Aucun pixel peint sur un texte ou un lien, trait de sol compris.
- i. Sous 768 px, au plus un oiseau par page. Les 61 oiseaux visibles au moins une fois à 1440 px. - i. Sous 768 px, au plus un oiseau par page. Les 61 oiseaux visibles au moins une fois à 1440 px.
Jamais deux fois le même sur une page. Aucun sous 72 px de large. Jamais deux fois le même sur une page. Aucun sous 72 px de large.
@@ -156,3 +166,33 @@ Ce que la liste a changé (03/11, après b6143c5) :
- /numerique et /citoyenne : l'administrateur réseau et le cartographe sortent par le côté de leur - /numerique et /citoyenne : l'administrateur réseau et le cartographe sortent par le côté de leur
carte, plus par un coin (la carte est un lien). carte, plus par un coin (la carte est un lien).
Ce que la liste a changé (03/11, après bb8fad9 ; la règle f mesurée au-dessus du dessin) :
- Accueil :
- le DJ se tient derrière le pupitre de la console, comme derrière ses platines : seule sa tête
dépasse. Perché sur le pupitre, sous l'en-tête, il n'avait pas sa hauteur de vide au-dessus ;
- l'accordéoniste passe en S (72 px), à partir de 1200 px, 8 px sous la ligne de base ;
- la factrice passe à 76 px ;
- la lectrice sort 20 px plus bas de derrière la carte du livre, loin de la fin de la première
ligne du chapeau (DA, 03/11).
- Au téléphone, l'oiseau de l'intitulé est un oiseau plat, l'en-tête collant laissant 93 px :
codeuse (/numerique), maraîchère (/economique), potier (/citoyenne). Sur productions
collectives, le cycliste livreur remplace le menuisier sous 768 px.
- Authentification : le pompeur de Ğ1 passe en marge droite, les pieds sur l'arête haute de la
carte du projet. Perché sur la carte, il n'avait que 11 px de vide au-dessus de sa tête (DA).
- Tarifs de l'eau : le comédien, de même, en marge droite sur l'arête haute de la carte.
- Commande : la lectrice quitte le sac, sous l'en-tête, pour la marge droite, sur l'arête haute de
la première carte.
- /en-musique : le danseur passe en S (80 px).
- /evenement :
- l'acrobate se tient avant la devise, plus étroite que le leitmotiv ;
- le régisseur passe en S, les pieds sur l'arête des cartes ;
- le clown passe en M (108 px), pour deux tailles entre 768 et 1199 px ;
- le marionnettiste se perche sur le filet du pied de page, à partir de 1200 px : sous
« Espaces & programme », il n'y a pas la place, et chaque rangée de cartes ne porte qu'un
oiseau. C'est le seul oiseau de la page hors de son bloc (orch, option 1, 03/11). Son décalage
vient du bloc du sceau du layout (`--seal-block`), et le contrôle vérifie qu'il est sur le filet.
- Chapitres : le calligraphe se tient sur le filet du titre, le typographe sur le filet de la
navigation, tous deux dans la marge gauche ; le cartonnier, en marge droite, au pied des boutons
PDF et chansons. Ils n'ont plus de hauteur en %.
- Porteur de serveur (authentification, cloud libre) et administrateur réseau (cloud libre) :
décalés hors de la découpe du coin arrondi de leur carte.