YvvandClaude Opus 5.5
d2bc0d9e46
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>
28 lines
830 B
Vue
28 lines
830 B
Vue
<script setup lang="ts">
|
|
// One of the 61 birds (studio DA, validated 2026-10-28), drawn from /images/oiseaux/<nom>.svg as a
|
|
// mask filled with currentColor : it takes the colour the page gives it, like the shadoks did.
|
|
// The classes of the figure it replaces keep its place, size, opacity and animation.
|
|
import { OISEAUX } from '~/utils/oiseaux'
|
|
|
|
const props = defineProps<{ nom: string }>()
|
|
const o = computed(() => OISEAUX[props.nom])
|
|
</script>
|
|
|
|
<template>
|
|
<span
|
|
v-if="o"
|
|
class="oiseau"
|
|
aria-hidden="true"
|
|
:style="{ aspectRatio: o.ratio, '--oiseau': `url(/images/oiseaux/${props.nom}.svg)` }"
|
|
/>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.oiseau {
|
|
display: block;
|
|
background-color: currentColor;
|
|
-webkit-mask: var(--oiseau) center / contain no-repeat;
|
|
mask: var(--oiseau) center / contain no-repeat;
|
|
}
|
|
</style>
|