From 47be2b4662dfb88dc9b9407f51194c889ea0199f Mon Sep 17 00:00:00 2001 From: isUnknown Date: Fri, 6 Mar 2026 18:11:31 +0100 Subject: [PATCH 1/2] =?UTF-8?q?Refactor:=20styles=20GalleryAnimation=20mig?= =?UTF-8?q?r=C3=A9s=20dans=20le=20composant?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Claude Sonnet 4.6 --- src/components/ui/GalleryAnimation.svelte | 62 +++++++++++++++++++++ src/styles/gallery.css | 65 ----------------------- src/styles/index.css | 1 - 3 files changed, 62 insertions(+), 66 deletions(-) delete mode 100644 src/styles/gallery.css diff --git a/src/components/ui/GalleryAnimation.svelte b/src/components/ui/GalleryAnimation.svelte index de6faa1..6d86a83 100644 --- a/src/components/ui/GalleryAnimation.svelte +++ b/src/components/ui/GalleryAnimation.svelte @@ -59,3 +59,65 @@ {/each} + + diff --git a/src/styles/gallery.css b/src/styles/gallery.css deleted file mode 100644 index cef463b..0000000 --- a/src/styles/gallery.css +++ /dev/null @@ -1,65 +0,0 @@ -/* Gallery animation */ -:root { - --gallery-gap: 8px; - --gallery-duration: 24s; -} - -.gallery-animation { - width: 100%; - height: 100%; - overflow: hidden; -} - -/* Vertical mode (Portfolio) */ -.gallery-animation--vertical { - display: flex; - flex-direction: row; - gap: var(--gallery-gap); -} - -.gallery-animation--vertical .gallery-animation__column { - flex: 1; - display: flex; - flex-direction: column; - overflow: hidden; -} - -.gallery-animation--vertical .gallery-animation__track { - display: flex; - flex-direction: column; - animation-timing-function: linear; - animation-iteration-count: infinite; -} - -.gallery-animation--vertical .gallery-animation__column:nth-child(odd) .gallery-animation__track { - animation-name: galleryScrollDown; - animation-duration: var(--gallery-duration); -} - -.gallery-animation--vertical .gallery-animation__column:nth-child(even) .gallery-animation__track { - animation-name: galleryScrollUp; - animation-duration: var(--gallery-duration); -} - -.gallery-animation__image { - width: 100%; - height: auto; - display: block; - object-fit: contain; -} - -@keyframes galleryScrollDown { - from { transform: translateY(0); } - to { transform: translateY(-50%); } -} - -@keyframes galleryScrollUp { - from { transform: translateY(-50%); } - to { transform: translateY(0); } -} - -@media (prefers-reduced-motion: reduce) { - .gallery-animation__track { - animation: none; - } -} diff --git a/src/styles/index.css b/src/styles/index.css index c02597e..d437c36 100644 --- a/src/styles/index.css +++ b/src/styles/index.css @@ -6,4 +6,3 @@ @import './buttons.css'; @import './cursor.css'; @import './utils.css'; -@import './gallery.css'; From 802a3ed5bf403200341c84bdbfea28a6d823d59c Mon Sep 17 00:00:00 2001 From: isUnknown Date: Fri, 6 Mar 2026 18:22:50 +0100 Subject: [PATCH 2/2] =?UTF-8?q?Feat:=20couleur=20d'arri=C3=A8re-plan=20dyn?= =?UTF-8?q?amique=20sur=20GalleryAnimation=20(galleryBackgroundColor)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Claude Sonnet 4.6 --- site/blueprints/pages/project.yml | 4 ++++ site/templates/portfolio.json.php | 3 ++- src/components/ui/GalleryAnimation.svelte | 8 +++++--- src/views/Portfolio.svelte | 2 +- 4 files changed, 12 insertions(+), 5 deletions(-) diff --git a/site/blueprints/pages/project.yml b/site/blueprints/pages/project.yml index 64bf455..b359c2a 100644 --- a/site/blueprints/pages/project.yml +++ b/site/blueprints/pages/project.yml @@ -99,6 +99,10 @@ columns: uploads: template: image help: Petite image carrée représentant le jeu + galleryBackgroundColor: + label: Couleur d'arrière-plan de la galerie animée + type: color + alpha: false keywords: label: Mots clés type: structure diff --git a/site/templates/portfolio.json.php b/site/templates/portfolio.json.php index 22bb3c4..04e2213 100644 --- a/site/templates/portfolio.json.php +++ b/site/templates/portfolio.json.php @@ -13,7 +13,8 @@ $specificData = [ 'srcset' => $f->srcset('gallery'), 'webp' => $f->srcset('gallery-webp'), ])->values(), - 'mockup' => $project->mockup()->toFile()?->url(), + 'mockup' => $project->mockup()->toFile()?->url(), + 'gallery_background_color' => $project->galleryBackgroundColor()->value(), 'keywords' => $project->keywords()->toStructure()->map(fn($i) => [ 'label' => $i->label()->value(), 'text' => $i->text()->value(), diff --git a/src/components/ui/GalleryAnimation.svelte b/src/components/ui/GalleryAnimation.svelte index 6d86a83..d3a5aa2 100644 --- a/src/components/ui/GalleryAnimation.svelte +++ b/src/components/ui/GalleryAnimation.svelte @@ -4,7 +4,7 @@ * @prop {Array<{src: string, srcset: string, webp: string}>} images * @prop {number} secondsPerImage — durée par image (défaut: 8s) */ - let { images = [], secondsPerImage = 8 } = $props() + let { images = [], secondsPerImage = 8, backgroundColor = null } = $props() const columns = $derived.by(() => { const count = images.length @@ -29,7 +29,7 @@
{#each columns as col}
@@ -65,13 +65,14 @@ width: 100%; height: 100%; overflow: hidden; + background-color: var(--background-color, transparent); } /* Vertical mode (Portfolio) */ .gallery-animation--vertical { display: flex; flex-direction: row; - gap: 8px; + gap: 1rem; } .gallery-animation--vertical :global(.gallery-animation__column) { @@ -84,6 +85,7 @@ .gallery-animation--vertical :global(.gallery-animation__track) { display: flex; flex-direction: column; + row-gap: 1rem; animation-timing-function: linear; animation-iteration-count: infinite; } diff --git a/src/views/Portfolio.svelte b/src/views/Portfolio.svelte index 7308abb..4cfaeba 100644 --- a/src/views/Portfolio.svelte +++ b/src/views/Portfolio.svelte @@ -94,7 +94,7 @@ {#if currentProject}