identité : le kit du studio DA intégré, les 61 oiseaux posés sur la page
Copie du kit kit-site (empreinte vérifiée) : logotype dans l'en-tête, signe §, favicons et icônes, og-default (?v=3), frise du pied de page, 61 oiseaux. Les shadoks positionnés à la main (HomeShadoks et les règles des 10 pages) cèdent la place à UiOiseauPose : chaque oiseau se pose sur une arête réelle (perché, marge gauche ou droite, derrière une carte, libre), currentColor, largeur 72 px au moins, opacité 0,18-0,28 près du texte et 0,10-0,14 derrière, jamais deux fois sur une page, calligraphe et typographe jamais en miroir. Sous 768 px, un oiseau par page au plus ; seuls ceux derrière une carte dérivent un peu, et plus du tout en mouvement réduit. Consignes d'Yvv du 03/11 inscrites dans docs/consignes-yvv.md. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Yvv
+36
-308
@@ -1,222 +1,5 @@
|
||||
<template>
|
||||
<div class="axis-scope axis-scope--num page-outer section-padding">
|
||||
|
||||
<!-- Shadok pinguin — tenant une clé USB, petit Tux à ses pieds -->
|
||||
<svg class="shadok-dl shadok-dl-pinguin" viewBox="0 0 170 210" fill="none" aria-hidden="true">
|
||||
<!-- Small Tux at bottom -->
|
||||
<ellipse cx="30" cy="175" rx="12" ry="16" fill="currentColor" opacity="0.2"/>
|
||||
<circle cx="30" cy="158" r="9" fill="currentColor" opacity="0.22"/>
|
||||
<ellipse cx="30" cy="173" rx="6" ry="9" fill="currentColor" opacity="0.1"/>
|
||||
<polygon points="30,157 25,154 30,161" fill="currentColor" opacity="0.3"/>
|
||||
<ellipse cx="25" cy="192" rx="6" ry="2.5" fill="currentColor" opacity="0.2"/>
|
||||
<ellipse cx="35" cy="192" rx="6" ry="2.5" fill="currentColor" opacity="0.2"/>
|
||||
<!-- Shadok body — upright -->
|
||||
<ellipse cx="105" cy="110" rx="20" ry="26" fill="currentColor" opacity="0.25"/>
|
||||
<!-- Head — looking at USB key -->
|
||||
<circle cx="100" cy="70" r="15" fill="currentColor" opacity="0.3"/>
|
||||
<circle cx="95" cy="68" r="1.8" fill="currentColor" opacity="0.5"/>
|
||||
<circle cx="104" cy="67" r="1.8" fill="currentColor" opacity="0.45"/>
|
||||
<polygon points="88,72 80,69 88,76" fill="currentColor" opacity="0.35"/>
|
||||
<!-- Left arm holding USB key -->
|
||||
<line x1="88" y1="100" x2="68" y2="90" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
|
||||
<rect x="42" y="82" width="26" height="14" rx="3" fill="currentColor" opacity="0.28"/>
|
||||
<rect x="32" y="86" width="10" height="6" rx="1" fill="currentColor" opacity="0.22"/>
|
||||
<line x1="50" y1="85" x2="60" y2="85" stroke="currentColor" stroke-width="1" opacity="0.2"/>
|
||||
<line x1="50" y1="89" x2="60" y2="89" stroke="currentColor" stroke-width="1" opacity="0.2"/>
|
||||
<!-- Right arm relaxed -->
|
||||
<line x1="122" y1="105" x2="140" y2="125" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.35"/>
|
||||
<!-- Legs -->
|
||||
<line x1="97" y1="133" x2="87" y2="192" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
|
||||
<line x1="113" y1="133" x2="123" y2="192" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
|
||||
<ellipse cx="85" cy="195" rx="9" ry="3" fill="currentColor" opacity="0.3"/>
|
||||
<ellipse cx="125" cy="195" rx="9" ry="3" fill="currentColor" opacity="0.3"/>
|
||||
</svg>
|
||||
|
||||
<!-- Shadok toile — au centre d'une web of trust, bras ouverts -->
|
||||
<svg class="shadok-dl shadok-dl-toile" viewBox="0 0 180 210" fill="none" aria-hidden="true">
|
||||
<!-- Nodes web -->
|
||||
<circle cx="30" cy="50" r="3" fill="currentColor" opacity="0.18"/>
|
||||
<circle cx="155" cy="55" r="3" fill="currentColor" opacity="0.16"/>
|
||||
<circle cx="18" cy="140" r="3" fill="currentColor" opacity="0.14"/>
|
||||
<circle cx="162" cy="142" r="3" fill="currentColor" opacity="0.16"/>
|
||||
<circle cx="80" cy="18" r="3" fill="currentColor" opacity="0.18"/>
|
||||
<circle cx="148" cy="185" r="2.5" fill="currentColor" opacity="0.14"/>
|
||||
<circle cx="15" cy="92" r="2.5" fill="currentColor" opacity="0.12"/>
|
||||
<!-- Connections from center -->
|
||||
<line x1="90" y1="105" x2="30" y2="50" stroke="currentColor" stroke-width="1" opacity="0.12"/>
|
||||
<line x1="90" y1="105" x2="155" y2="55" stroke="currentColor" stroke-width="1" opacity="0.12"/>
|
||||
<line x1="90" y1="105" x2="18" y2="140" stroke="currentColor" stroke-width="1" opacity="0.1"/>
|
||||
<line x1="90" y1="105" x2="162" y2="142" stroke="currentColor" stroke-width="1" opacity="0.1"/>
|
||||
<line x1="90" y1="105" x2="80" y2="18" stroke="currentColor" stroke-width="1" opacity="0.12"/>
|
||||
<line x1="90" y1="105" x2="15" y2="92" stroke="currentColor" stroke-width="0.8" opacity="0.1"/>
|
||||
<line x1="30" y1="50" x2="80" y2="18" stroke="currentColor" stroke-width="0.8" opacity="0.08"/>
|
||||
<line x1="155" y1="55" x2="162" y2="142" stroke="currentColor" stroke-width="0.8" opacity="0.08"/>
|
||||
<!-- Body — bras ouverts -->
|
||||
<ellipse cx="90" cy="118" rx="20" ry="26" fill="currentColor" opacity="0.25"/>
|
||||
<circle cx="90" cy="76" r="15" fill="currentColor" opacity="0.3"/>
|
||||
<circle cx="84" cy="74" r="1.8" fill="currentColor" opacity="0.5"/>
|
||||
<circle cx="95" cy="73" r="1.8" fill="currentColor" opacity="0.45"/>
|
||||
<!-- Beak front-facing proud -->
|
||||
<polygon points="90,83 85,87 95,87" fill="currentColor" opacity="0.35"/>
|
||||
<!-- Arms spread wide -->
|
||||
<line x1="72" y1="108" x2="32" y2="88" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
|
||||
<line x1="108" y1="108" x2="150" y2="90" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
|
||||
<circle cx="31" cy="88" r="2.5" fill="currentColor" opacity="0.3"/>
|
||||
<circle cx="151" cy="90" r="2.5" fill="currentColor" opacity="0.3"/>
|
||||
<!-- Legs -->
|
||||
<line x1="82" y1="141" x2="72" y2="196" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
|
||||
<line x1="98" y1="141" x2="110" y2="196" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
|
||||
<ellipse cx="70" cy="199" rx="9" ry="3" fill="currentColor" opacity="0.3"/>
|
||||
<ellipse cx="112" cy="199" rx="9" ry="3" fill="currentColor" opacity="0.3"/>
|
||||
</svg>
|
||||
|
||||
<!-- Shadok nas — ployant sous le poids d'un rack serveur -->
|
||||
<svg class="shadok-dl shadok-dl-nas" viewBox="0 0 170 210" fill="none" aria-hidden="true">
|
||||
<!-- Server rack on head, slightly tilted -->
|
||||
<rect x="32" y="10" width="82" height="52" rx="4" fill="currentColor" opacity="0.2" transform="rotate(-2 73 36)"/>
|
||||
<!-- Server units -->
|
||||
<rect x="38" y="15" width="68" height="7" rx="2" fill="currentColor" opacity="0.15" transform="rotate(-2 72 19)"/>
|
||||
<rect x="38" y="25" width="68" height="7" rx="2" fill="currentColor" opacity="0.15" transform="rotate(-2 72 29)"/>
|
||||
<rect x="38" y="35" width="68" height="7" rx="2" fill="currentColor" opacity="0.15" transform="rotate(-2 72 39)"/>
|
||||
<rect x="38" y="45" width="68" height="7" rx="2" fill="currentColor" opacity="0.15" transform="rotate(-2 72 49)"/>
|
||||
<!-- LED indicators -->
|
||||
<circle cx="46" cy="19" r="1.5" fill="currentColor" opacity="0.3"/>
|
||||
<circle cx="46" cy="29" r="1.5" fill="currentColor" opacity="0.28"/>
|
||||
<circle cx="46" cy="39" r="1.5" fill="currentColor" opacity="0.32"/>
|
||||
<circle cx="46" cy="49" r="1.5" fill="currentColor" opacity="0.25"/>
|
||||
<!-- Body — bent forward under weight -->
|
||||
<ellipse cx="85" cy="120" rx="22" ry="25" fill="currentColor" opacity="0.25" transform="rotate(8 85 120)"/>
|
||||
<!-- Head — strained under rack -->
|
||||
<circle cx="78" cy="82" r="15" fill="currentColor" opacity="0.3"/>
|
||||
<circle cx="73" cy="80" r="1.8" fill="currentColor" opacity="0.5"/>
|
||||
<circle cx="83" cy="79" r="1.8" fill="currentColor" opacity="0.45"/>
|
||||
<!-- Beak grimacing left -->
|
||||
<polygon points="65,84 57,81 65,88" fill="currentColor" opacity="0.35"/>
|
||||
<!-- Arms up holding rack -->
|
||||
<line x1="68" y1="110" x2="50" y2="70" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
|
||||
<line x1="104" y1="109" x2="112" y2="67" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
|
||||
<!-- Legs — pliant sous l'effort -->
|
||||
<line x1="75" y1="142" x2="58" y2="193" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" opacity="0.4"/>
|
||||
<line x1="97" y1="142" x2="114" y2="193" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" opacity="0.4"/>
|
||||
<ellipse cx="56" cy="196" rx="11" ry="3.5" fill="currentColor" opacity="0.3"/>
|
||||
<ellipse cx="116" cy="196" rx="11" ry="3.5" fill="currentColor" opacity="0.3"/>
|
||||
<!-- Sweat drops -->
|
||||
<ellipse cx="48" cy="90" rx="2" ry="3" fill="currentColor" opacity="0.2"/>
|
||||
<ellipse cx="44" cy="102" rx="1.5" ry="2.5" fill="currentColor" opacity="0.15"/>
|
||||
</svg>
|
||||
|
||||
<!-- Shadok debugger — loupe géante sur un minuscule bug, yeux écarquillés -->
|
||||
<svg class="shadok-dl shadok-dl-debugger" viewBox="0 0 180 215" fill="none" aria-hidden="true">
|
||||
<!-- Loupe — grande, tenue à bout de bras -->
|
||||
<circle cx="38" cy="55" r="30" stroke="currentColor" stroke-width="3.5" fill="none" opacity="0.28"/>
|
||||
<circle cx="38" cy="55" r="23" fill="currentColor" opacity="0.06"/>
|
||||
<!-- Manche loupe -->
|
||||
<line x1="62" y1="78" x2="80" y2="98" stroke="currentColor" stroke-width="4" stroke-linecap="round" opacity="0.3"/>
|
||||
<!-- Minuscule bug dans la loupe -->
|
||||
<ellipse cx="36" cy="53" rx="5" ry="4" fill="currentColor" opacity="0.35"/>
|
||||
<line x1="32" y1="50" x2="28" y2="46" stroke="currentColor" stroke-width="1" stroke-linecap="round" opacity="0.3"/>
|
||||
<line x1="36" y1="49" x2="36" y2="44" stroke="currentColor" stroke-width="1" stroke-linecap="round" opacity="0.3"/>
|
||||
<line x1="40" y1="50" x2="44" y2="46" stroke="currentColor" stroke-width="1" stroke-linecap="round" opacity="0.3"/>
|
||||
<line x1="32" y1="57" x2="28" y2="61" stroke="currentColor" stroke-width="1" stroke-linecap="round" opacity="0.3"/>
|
||||
<line x1="40" y1="57" x2="44" y2="61" stroke="currentColor" stroke-width="1" stroke-linecap="round" opacity="0.3"/>
|
||||
<!-- Exclamation dans la loupe -->
|
||||
<text x="50" y="45" font-size="10" fill="currentColor" opacity="0.4" font-family="monospace">!</text>
|
||||
<!-- Body — légèrement penché -->
|
||||
<ellipse cx="125" cy="118" rx="20" ry="26" fill="currentColor" opacity="0.25" transform="rotate(-5 125 118)"/>
|
||||
<!-- Head — très proche de la loupe, yeux écarquillés -->
|
||||
<circle cx="118" cy="75" r="16" fill="currentColor" opacity="0.3"/>
|
||||
<!-- Cercles sous les yeux (nuits blanches) -->
|
||||
<ellipse cx="112" cy="76" rx="5" ry="4" stroke="currentColor" stroke-width="1" fill="none" opacity="0.2"/>
|
||||
<ellipse cx="124" cy="75" rx="5" ry="4" stroke="currentColor" stroke-width="1" fill="none" opacity="0.2"/>
|
||||
<!-- Yeux très grands -->
|
||||
<circle cx="113" cy="75" r="2.5" fill="currentColor" opacity="0.55"/>
|
||||
<circle cx="123" cy="74" r="2.5" fill="currentColor" opacity="0.55"/>
|
||||
<!-- Beak — pointant vers la loupe -->
|
||||
<polygon points="104,78 96,75 104,83" fill="currentColor" opacity="0.35"/>
|
||||
<!-- Bras gauche tenant loupe -->
|
||||
<line x1="108" y1="108" x2="82" y2="95" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
|
||||
<!-- Bras droit -->
|
||||
<line x1="140" y1="110" x2="158" y2="130" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.35"/>
|
||||
<!-- Jambes -->
|
||||
<line x1="117" y1="141" x2="107" y2="198" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
|
||||
<line x1="133" y1="141" x2="143" y2="198" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
|
||||
<ellipse cx="105" cy="201" rx="9" ry="3" fill="currentColor" opacity="0.3"/>
|
||||
<ellipse cx="145" cy="201" rx="9" ry="3" fill="currentColor" opacity="0.3"/>
|
||||
</svg>
|
||||
|
||||
<!-- Shadok rubber duck — assis par terre, canard en caoutchouc face à lui, bras croisés, explication intense -->
|
||||
<svg class="shadok-dl shadok-dl-duck" viewBox="0 0 180 210" fill="none" aria-hidden="true">
|
||||
<!-- Rubber duck — stylisé, face au shadok -->
|
||||
<ellipse cx="145" cy="165" rx="18" ry="14" fill="currentColor" opacity="0.22"/>
|
||||
<circle cx="145" cy="148" r="11" fill="currentColor" opacity="0.25"/>
|
||||
<!-- Duck beak -->
|
||||
<path d="M155 148 L165 146 L155 152 Z" fill="currentColor" opacity="0.3"/>
|
||||
<!-- Duck eye -->
|
||||
<circle cx="150" cy="145" r="2" fill="currentColor" opacity="0.4"/>
|
||||
<!-- Duck wing -->
|
||||
<path d="M128 162 Q135 158 130 170" stroke="currentColor" stroke-width="1.5" fill="none" opacity="0.2"/>
|
||||
<!-- Shadok — assis, jambes en avant -->
|
||||
<ellipse cx="82" cy="130" rx="22" ry="20" fill="currentColor" opacity="0.25" transform="rotate(20 82 130)"/>
|
||||
<!-- Head — très expressif, se penche vers le canard -->
|
||||
<circle cx="95" cy="90" r="16" fill="currentColor" opacity="0.3"/>
|
||||
<circle cx="89" cy="88" r="2" fill="currentColor" opacity="0.5"/>
|
||||
<circle cx="100" cy="87" r="2" fill="currentColor" opacity="0.45"/>
|
||||
<!-- Beak pointing right at duck -->
|
||||
<polygon points="108,92 116,89 108,96" fill="currentColor" opacity="0.35"/>
|
||||
<!-- Bulle de dialogue -->
|
||||
<path d="M115 72 Q140 60 148 72 Q155 82 145 88 Q135 94 118 88 L115 94 L113 86 Q108 80 115 72Z" fill="currentColor" opacity="0.1"/>
|
||||
<text x="120" y="82" font-size="7" fill="currentColor" opacity="0.35" font-family="monospace">WTF?</text>
|
||||
<!-- Bras pointant vers duck -->
|
||||
<line x1="105" y1="118" x2="130" y2="140" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
|
||||
<!-- Bras gauche appuyé au sol -->
|
||||
<line x1="62" y1="122" x2="42" y2="148" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.35"/>
|
||||
<!-- Jambes en avant (assis) -->
|
||||
<line x1="72" y1="148" x2="42" y2="185" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
|
||||
<line x1="92" y1="152" x2="115" y2="185" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
|
||||
<ellipse cx="40" cy="188" rx="10" ry="3.5" fill="currentColor" opacity="0.3"/>
|
||||
<ellipse cx="117" cy="188" rx="10" ry="3.5" fill="currentColor" opacity="0.3"/>
|
||||
</svg>
|
||||
|
||||
<!-- Shadok caféine — énorme tasse, cernes, jambes qui tremblent -->
|
||||
<svg class="shadok-dl shadok-dl-cafeine" viewBox="0 0 170 215" fill="none" aria-hidden="true">
|
||||
<!-- Tasses vides au sol -->
|
||||
<ellipse cx="25" cy="195" rx="8" ry="4" fill="currentColor" opacity="0.18"/>
|
||||
<rect x="17" y="183" width="16" height="12" rx="2" fill="currentColor" opacity="0.15"/>
|
||||
<ellipse cx="52" cy="198" rx="6" ry="3" fill="currentColor" opacity="0.14"/>
|
||||
<rect x="46" y="188" width="12" height="10" rx="2" fill="currentColor" opacity="0.12"/>
|
||||
<!-- Énorme tasse à 2 mains -->
|
||||
<rect x="48" y="68" width="52" height="45" rx="5" fill="currentColor" opacity="0.25"/>
|
||||
<ellipse cx="74" cy="68" rx="26" ry="6" fill="currentColor" opacity="0.2"/>
|
||||
<!-- Vapeur -->
|
||||
<path d="M62 62 Q65 52 62 44" stroke="currentColor" stroke-width="1.5" fill="none" opacity="0.25" stroke-linecap="round"/>
|
||||
<path d="M74 58 Q78 47 74 38" stroke="currentColor" stroke-width="1.5" fill="none" opacity="0.22" stroke-linecap="round"/>
|
||||
<path d="M86 62 Q89 52 86 44" stroke="currentColor" stroke-width="1.5" fill="none" opacity="0.2" stroke-linecap="round"/>
|
||||
<!-- Anse tasse -->
|
||||
<path d="M100 78 Q118 78 118 90 Q118 102 100 102" stroke="currentColor" stroke-width="2.5" fill="none" opacity="0.22"/>
|
||||
<!-- Logo tasse (skull) -->
|
||||
<text x="62" y="95" font-size="14" fill="currentColor" opacity="0.18" font-family="monospace">☕</text>
|
||||
<!-- Body — tassé, fatigué -->
|
||||
<ellipse cx="90" cy="130" rx="20" ry="24" fill="currentColor" opacity="0.25" transform="rotate(5 90 130)"/>
|
||||
<!-- Head — yeux mi-clos, cernes -->
|
||||
<circle cx="88" cy="92" r="15" fill="currentColor" opacity="0.28"/>
|
||||
<!-- Cernes (demi-cercles sous yeux) -->
|
||||
<path d="M80 93 Q83 97 86 93" stroke="currentColor" stroke-width="1.2" fill="none" opacity="0.3"/>
|
||||
<path d="M90 92 Q93 96 96 92" stroke="currentColor" stroke-width="1.2" fill="none" opacity="0.3"/>
|
||||
<!-- Yeux mi-clos -->
|
||||
<line x1="79" y1="90" x2="85" y2="90" stroke="currentColor" stroke-width="2" stroke-linecap="round" opacity="0.5"/>
|
||||
<line x1="90" y1="89" x2="96" y2="89" stroke="currentColor" stroke-width="2" stroke-linecap="round" opacity="0.45"/>
|
||||
<!-- Beak -->
|
||||
<polygon points="78,97 70,94 78,101" fill="currentColor" opacity="0.35"/>
|
||||
<!-- Les deux bras tenant la tasse -->
|
||||
<line x1="72" y1="116" x2="56" y2="100" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
|
||||
<line x1="108" y1="118" x2="108" y2="100" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
|
||||
<!-- Jambes qui tremblent (légèrement en zigzag) -->
|
||||
<path d="M80 152 Q76 165 80 175 Q84 185 78 196" stroke="currentColor" stroke-width="3" stroke-linecap="round" fill="none" opacity="0.4"/>
|
||||
<path d="M100 152 Q104 165 100 175 Q96 185 102 196" stroke="currentColor" stroke-width="3" stroke-linecap="round" fill="none" opacity="0.4"/>
|
||||
<ellipse cx="76" cy="199" rx="10" ry="3.5" fill="currentColor" opacity="0.3"/>
|
||||
<ellipse cx="104" cy="199" rx="10" ry="3.5" fill="currentColor" opacity="0.3"/>
|
||||
</svg>
|
||||
|
||||
<div class="axis-scope axis-scope--num oiseaux-scene page-outer section-padding">
|
||||
<div class="container-content">
|
||||
|
||||
<!-- Header — centré, max-2xl -->
|
||||
@@ -238,6 +21,7 @@
|
||||
<!-- Project card (legacy pages) -->
|
||||
<div v-if="content?.project" class="mx-auto max-w-2xl mb-8">
|
||||
<div class="project-card">
|
||||
<UiOiseauPose v-for="o in oiseaux.projet ?? []" :key="`${o.nom}-${o.pose}`" v-bind="o" />
|
||||
<div class="project-icon">
|
||||
<div class="i-lucide-rocket h-5 w-5" />
|
||||
</div>
|
||||
@@ -316,10 +100,11 @@
|
||||
v-for="(section, si) in content.sections"
|
||||
:key="si"
|
||||
:id="`s${si}`"
|
||||
class="mb-12 section-anchor"
|
||||
class="relative mb-12 section-anchor"
|
||||
:class="['equivalents', 'tiers', 'territoire'].includes(section.type) ? 'max-w-4xl mx-auto' : 'max-w-2xl mx-auto'"
|
||||
>
|
||||
|
||||
<UiOiseauPose v-for="o in oiseaux.sections?.[si] ?? []" :key="`${o.nom}-${o.pose}`" v-bind="o" />
|
||||
<!-- ── ARGUMENTS ── -->
|
||||
<template v-if="section.type === 'arguments'">
|
||||
<h2 class="section-title">{{ section.title }}</h2>
|
||||
@@ -642,9 +427,40 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { OiseauPlace } from '~/utils/oiseauPose'
|
||||
|
||||
const route = useRoute()
|
||||
const slug = route.params.slug as string
|
||||
|
||||
// Birds of each page, by block: the project card and the sections (by index). Left side
|
||||
// only: the right margin holds the sticky summary on wide screens.
|
||||
interface OiseauxPage { projet?: OiseauPlace[], sections?: Record<number, OiseauPlace[]> }
|
||||
const OISEAUX_PAGE: Record<string, OiseauxPage> = {
|
||||
'logiciel-libre': {
|
||||
projet: [{ nom: 'cafeine', pose: 'derriere', left: '-130px', bottom: '-30px', w: 200 }],
|
||||
sections: {
|
||||
1: [{ nom: 'debogueur', pose: 'marge-g', ecart: '48px', bottom: '62%', w: 120 }],
|
||||
2: [{ nom: 'le-manchot', pose: 'marge-g', ecart: '40px', bottom: '18%', w: 132 }],
|
||||
3: [{ nom: 'canard-en-plastique', pose: 'perche', right: '8%', w: 80 }],
|
||||
},
|
||||
},
|
||||
'authentification-wot': {
|
||||
projet: [{ nom: 'porteur-de-serveur', pose: 'derriere', left: '-130px', bottom: '-30px', w: 210 }],
|
||||
sections: {
|
||||
0: [{ nom: 'cryptographe', pose: 'marge-g', ecart: '48px', bottom: '45%', w: 104 }],
|
||||
1: [{ nom: 'toile-de-confiance', pose: 'marge-g', ecart: '44px', bottom: '30%', w: 150 }],
|
||||
4: [{ nom: 'pompeur-de-g1', pose: 'marge-g', ecart: '40px', bottom: '22%', w: 108 }],
|
||||
},
|
||||
},
|
||||
'cloud-libre': {
|
||||
projet: [{ nom: 'porteur-de-serveur', pose: 'derriere', left: '-130px', bottom: '-30px', w: 210 }],
|
||||
sections: {
|
||||
1: [{ nom: 'admin-reseau', pose: 'marge-g', ecart: '44px', bottom: '40%', w: 124 }],
|
||||
},
|
||||
},
|
||||
}
|
||||
const oiseaux = computed<OiseauxPage>(() => OISEAUX_PAGE[slug] ?? {})
|
||||
|
||||
const [{ data: content }, { data: homeData }] = await Promise.all([
|
||||
usePageContent(`numerique/${slug}`),
|
||||
usePageContent('home'),
|
||||
@@ -691,6 +507,7 @@ useSeoPage({
|
||||
}
|
||||
|
||||
.project-card {
|
||||
position: relative;
|
||||
padding: 1.5rem;
|
||||
border-radius: 0.75rem;
|
||||
border: 1px solid hsl(var(--color-primary) / 0.15);
|
||||
@@ -1913,95 +1730,6 @@ details[open] .territoire-chevron {
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
/* ── Shadoks décoratifs ── */
|
||||
.shadok-dl {
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
color: hsl(var(--color-primary));
|
||||
}
|
||||
|
||||
.shadok-dl-pinguin {
|
||||
left: 1%;
|
||||
top: 18%;
|
||||
width: clamp(65px, 9vw, 130px);
|
||||
opacity: 0.22;
|
||||
animation: shadokfloat-a 11s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.shadok-dl-toile {
|
||||
right: 1%;
|
||||
top: 22%;
|
||||
width: clamp(65px, 9vw, 140px);
|
||||
opacity: 0.2;
|
||||
color: hsl(var(--color-accent));
|
||||
animation: shadokfloat-b 13s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.shadok-dl-nas {
|
||||
left: 2%;
|
||||
bottom: 6%;
|
||||
width: clamp(65px, 9vw, 135px);
|
||||
opacity: 0.22;
|
||||
color: hsl(var(--color-accent));
|
||||
animation: shadokfloat-c 10s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes shadokfloat-a {
|
||||
0%, 100% { transform: translateY(0) rotate(-2deg); }
|
||||
50% { transform: translateY(-8px) rotate(2deg); }
|
||||
}
|
||||
@keyframes shadokfloat-b {
|
||||
0%, 100% { transform: translateY(0) rotate(3deg); }
|
||||
50% { transform: translateY(-10px) rotate(-2deg); }
|
||||
}
|
||||
@keyframes shadokfloat-c {
|
||||
0%, 100% { transform: translateY(0) rotate(-1deg); }
|
||||
50% { transform: translateY(-7px) rotate(3deg); }
|
||||
}
|
||||
@keyframes shadokfloat-d {
|
||||
0%, 100% { transform: translateY(0) rotate(2deg); }
|
||||
50% { transform: translateY(-9px) rotate(-3deg); }
|
||||
}
|
||||
@keyframes shadokfloat-e {
|
||||
0%, 100% { transform: translateY(0) rotate(-3deg); }
|
||||
50% { transform: translateY(-6px) rotate(1deg); }
|
||||
}
|
||||
@keyframes shadokfloat-f {
|
||||
0%, 100% { transform: translateY(0) rotate(1deg); }
|
||||
50% { transform: translateY(-11px) rotate(-2deg); }
|
||||
}
|
||||
|
||||
.shadok-dl-debugger {
|
||||
right: 1%;
|
||||
bottom: 14%;
|
||||
width: clamp(65px, 9vw, 140px);
|
||||
opacity: 0.2;
|
||||
color: hsl(var(--color-primary));
|
||||
animation: shadokfloat-d 12s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.shadok-dl-duck {
|
||||
left: 38%;
|
||||
top: 6%;
|
||||
width: clamp(65px, 9vw, 145px);
|
||||
opacity: 0.2;
|
||||
color: hsl(var(--color-accent));
|
||||
animation: shadokfloat-e 14s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.shadok-dl-cafeine {
|
||||
right: 2%;
|
||||
top: 52%;
|
||||
width: clamp(65px, 9vw, 132px);
|
||||
opacity: 0.22;
|
||||
color: hsl(var(--color-primary));
|
||||
animation: shadokfloat-f 9s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.shadok-dl { display: none; }
|
||||
}
|
||||
|
||||
/* equiv-row without link */
|
||||
.equiv-row--no-link {
|
||||
cursor: default;
|
||||
|
||||
Reference in New Issue
Block a user