- Phase exiting (300ms) : featured + game-preview glissent/fondent dans slideDir
- Phase entering (350ms) : nouvel contenu entre depuis la direction opposée
- Swap currentIndex à 300ms : carousel grossit + bg crossfade simultanés
- Ajout game-preview (image preview côté droit, grid-area 3/13)
- Ajout preview dans le template JSON PHP
- Masqué sur mobile
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- Renommage dossier content 3_play → 3_jouer (slug /jouer)
- Champ backgroundColor (code-editor) dans game.yml + exposé en API
- playLinks simplifié en champ url simple → playLink dans l'API
- Variable CSS --background-color sur la section .play
- Bouton "Jouer" avec icône play-icon (SVG data URI dans buttons.css)
- Plugin sylvainjule/code-editor ajouté via composer
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- Blueprints : renommage des champs (member_name, related_articles,
background_video, play_links, images_gallery, external_links) et
des noms de sections
- Templates JSON PHP : clés de sortie et appels ->method() en camelCase
- Vues Svelte (Play, Portfolio) : accès aux données alignés
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Mise à jour de Svelte vers 5.53.7 pour supporter la syntaxe tableau/objet sur l'attribut class
- Cursor.svelte : class={[...]} avec états onTarget et onClick
- blueprints : catchphrase → catchPhrase
- buttons.css : suppression cursor: pointer
- Portfolio.svelte : scale hover nav item
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Renommage jouer → play (blueprint, template, txt, vue)
API play.json.php : title, lettering, description, thumbnail,
background_image, play_links par jeu enfant listed()
Vue Play.svelte :
- Fond image avec crossfade (transition opacity sur .play-bg)
- Section principale (.play-featured) : glissé/fondu au changement de jeu
via --slide-dir CSS var + classes is-out
- Carrousel nav (ul > li > button) : thumbnail + titre, active bordure verte
- Jeu sans play_links → bouton "Coming soon" désactivé
- Layout golden-grid, mobile adapté
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- nav > ul[role=list] > li > button
- aria-current sur l'item actif
- aria-label={project.title} sur le button (le texte visible est le numéro)
- alt="" sur la vignette (décorative, le titre est porté par aria-label)
- aria-hidden sur le numéro (redondant avec aria-label)
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- Catchphrase en gradient-blue + Danzza Medium
- Titre en font-size-title-main + uppercase
- Description en font-size-subtitle
- Numéro nav après la vignette, align-items flex-start
- Vignette active scale(1.5) translateX(-20%)
- padding-right nav sidebar augmenté
- grid-area portfolio-text réduit d'une colonne
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- Déplacement de assets/css/fonts/ → assets/fonts/
- Mise à jour des URLs dans fonts.css et le plugin Vite
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- Chemins mis à jour vers /assets/css/fonts/
- Suppression des fichiers .woff inexistants
- Suppression de Danzza Light (fichier absent) → font-face-danzza-light pointe vers Regular
- Noms de fichiers avec espaces encodés en %20 dans le CSS source
- Plugin keepFontsInPlace : restaure les noms décodés dans le CSS buildé
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
is-animated : double rAF garantit un paint avec le bon translateX
avant d'activer la transition (évite l'animation parasite au load).
Ancre : capture du hash synchrone à la création du composant +
flag wasActive pour que clearAnchor() ne s'exécute pas au montage
quand isActive est encore false (slides non initialisées).
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- Navigation scroll/clavier → history.replaceState('#slug')
- Clic sidebar → idem
- Chargement avec #slug dans l'URL → affiche le bon projet directement
- Quitter la slide Portfolio → efface le hash
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
La transition n'est activée qu'après le premier paint à la bonne position
(requestAnimationFrame une fois slides.all initialisé).
Remplace is-resizing par is-animated pour unifier les deux cas.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Classe is-resizing ajoutée sur resize, retirée 150ms après le dernier
événement — évite le glissement animé lors du resize de fenêtre.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Plugin Vite keepFontsInPlace : supprime les fonts que Vite copie dans dist/
et réécrit leurs URLs dans le CSS pour pointer vers /assets/fonts/.
Reverts base: '/assets/dist/' — inutile avec cette approche.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Vite copiait les fonts dans assets/dist/ mais générait url(/NomFont.woff)
(chemin racine) au lieu de url(/assets/dist/NomFont.woff).
Correction : base = '/assets/dist/' en mode build, '/' en dev.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Remplace ci-php + installation runtime de Node par l'image ci-node
qui embarque tout le nécessaire — build plus rapide et plus propre.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Installe Node 22 via NodeSource, npm ci + vite build.
Le résultat (assets/dist) est inclus dans le mirror FTP existant.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- Renomme N → itemCount et fwdPosition → currentFwdTime
- Extrait stopActiveVideo, playForward, playReverse depuis navigate()
- Extrait initPlayback et resetPlayback depuis $effect
- Nomme les magic numbers en constantes (SCROLL_LOCK_MS, etc.)
- Ajoute navigation clavier ArrowUp / ArrowDown
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
- Expertise: items en <div> au lieu de <p> (évite les <p> imbriqués)
- Expertise: espacement entre les paragraphes internes via :global
- fonts.css: classe utilitaire .green
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
- variables.css : --breakpoint-mobile (700px) et --breakpoint-tablet (912px)
- Header : .navbar-item { display: none } en dessous de 700px
- Header/Menu : annotation des media queries avec les variables de référence
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
scale() dans le transform plutôt qu'en propriété CSS séparée.
La propriété scale CSS calcule son transform-origin sur la position
layout (avant translate), pas la position visuelle — d'où le décalage.
Avec transform: translate(-50%, -50%) scale(0.5), le centre reste en (0,0).
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
- Un seul wrapper positionné par transform, les deux éléments à l'intérieur
- translate(-50%, -50%) sur chaque enfant : centre exact = origine du wrapper
- upon-target sur le wrapper → scale(0.5) sur cursor-outline sans décalage
- Suppression du lerp JS (plus nécessaire avec le centrage CSS)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
- Détection de survol via mouseover sur a, button, [role="button"], [tabindex]
- Classe upon-target appliquée au curseur et à son outline
- cursor-outline scale(0.5) au survol d'un élément interactif
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
- style.css : plage z-index (--z-base, --z-content, --z-menu, --z-header, --z-cursor)
- Menu : show() au lieu de showModal() pour sortir du top-layer natif,
Escape géré manuellement via keydown, z-index: var(--z-menu), position: fixed
- Header : z-index: var(--z-header) sur navbar, logo et toggle (toujours au-dessus du menu)
- Cursor/cursor.css : z-index: var(--z-cursor)
- Home : z-index: var(--z-content) sur home-text
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
- App.svelte : suppression du wrapper .app redondant, montage direct sur #app, <section> pour les slides
- Header.svelte : <nav>, <ul><li><a> pour le menu, <button> pour le hamburger, animation hamburger en CSS pur (plus de style inline sur les cercles SVG)
- Home.svelte : fusion div[grid-area]+.olly en .home-bg, suppression de tous les style="" statiques
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
- Nouveau store slides.svelte.js : gestion de l'état des slides (activeIndex, pendingPath, chargement progressif)
- Réécriture du router : remplace navaid par une logique custom avec chargement de la slide initiale puis des autres en arrière-plan
- App.svelte : layout slides-wrapper avec translateX, transition 1000ms
- Header.svelte : menu 100% dynamique depuis slides.all (ordre et titres multilingues depuis Kirby)
- site/controllers/site.php : navigation exposée via site->pages()->listed() avec titres par langue, home prependue
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
- Renommage des champs blueprint : cta_text → ctaText, cta_link → ctaLink
- Template home.json.php : expose ctaText et ctaPath (id de page Kirby)
- Home.svelte : suppression des traductions en dur, lecture de data.hero
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
