site/blueprints/pages/project.yml

@@ -99,10 +99,6 @@ 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

site/templates/portfolio.json.php

@@ -13,8 +13,7 @@ $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(),

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, backgroundColor = null } = $props()
+  let { images = [], secondsPerImage = 8 } = $props()
 
   const columns = $derived.by(() => {
     const count    = images.length
@@ -29,7 +29,7 @@
 
 <div
   class="gallery-animation gallery-animation--vertical"
-  style="--gallery-duration: {columns[0]?.duration ?? 24}s{backgroundColor ? `; --background-color: ${backgroundColor}` : ''}"
+  style="--gallery-duration: {columns[0]?.duration ?? 24}s"
 >
   {#each columns as col}
     <div class="gallery-animation__column">
@@ -59,67 +59,3 @@
     </div>
   {/each}
 </div>
-
-<style>
-  .gallery-animation {
-    width: 100%;
-    height: 100%;
-    overflow: hidden;
-    background-color: var(--background-color, transparent);
-  }
-
-  /* Vertical mode (Portfolio) */
-  .gallery-animation--vertical {
-    display: flex;
-    flex-direction: row;
-    gap: 1rem;
-  }
-
-  .gallery-animation--vertical :global(.gallery-animation__column) {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-  }
-
-  .gallery-animation--vertical :global(.gallery-animation__track) {
-    display: flex;
-    flex-direction: column;
-    row-gap: 1rem;
-    animation-timing-function: linear;
-    animation-iteration-count: infinite;
-  }
-
-  .gallery-animation--vertical :global(.gallery-animation__column:nth-child(odd) .gallery-animation__track) {
-    animation-name: galleryScrollDown;
-    animation-duration: var(--gallery-duration);
-  }
-
-  .gallery-animation--vertical :global(.gallery-animation__column:nth-child(even) .gallery-animation__track) {
-    animation-name: galleryScrollUp;
-    animation-duration: var(--gallery-duration);
-  }
-
-  :global(.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) {
-    :global(.gallery-animation__track) {
-      animation: none;
-    }
-  }
-</style>

src/styles/gallery.css

@@ -0,0 +1,65 @@
+/* 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;
+  }
+}

src/styles/index.css

@@ -6,3 +6,4 @@
 @import './buttons.css';
 @import './cursor.css';
 @import './utils.css';
+@import './gallery.css';

src/views/Portfolio.svelte

@@ -94,7 +94,7 @@
   {#if currentProject}
     <!-- Galerie animation (gauche) -->
     <div class="portfolio-gallery" aria-hidden="true">
-      <GalleryAnimation images={currentProject.images_gallery} backgroundColor={currentProject.gallery_background_color} />
+      <GalleryAnimation images={currentProject.images_gallery} />
     </div>
 
     <!-- Mockup device (centre) -->