Shaz/Le-site-de-ma-mamounette
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

test
Build & Deploy / build-push-deploy (push) Failing after 4s
Details

Browse Source
This commit is contained in:
Clément Héritier
2026-06-21 23:17:47 +02:00
parent bffa738793
commit 9406cadb12
1 changed files with 21 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Gallery.astro
+20 -18
View File
@@ -10,19 +10,22 @@ import cecile from '../assets/images/cecile.jpg';
import hamac from '../assets/images/hamac.jpg'; import hamac from '../assets/images/hamac.jpg';
import terrasse from '../assets/images/terrasse.jpg'; import terrasse from '../assets/images/terrasse.jpg';
import jardin from '../assets/images/jardin.jpg'; import jardin from '../assets/images/jardin.jpg';
import riviere from '../assets/images/riviere.jpg';
import prairie from '../assets/images/prairie.jpg';
// Chaque photo a ses classes de span écrites en dur (Tailwind ne détecte pas les classes dynamiques) // Pour ajouter une photo : importer l'image et ajouter une ligne ici. C'est tout.
const photos = [ const photos = [
{ src: salon1, alt: 'Le salon', caption: 'Le salon', cls: 'col-span-1 h-44 md:col-span-2 md:row-span-2 md:h-auto' }, { src: salon1, alt: 'Le salon', caption: 'Le salon' },
{ src: salon2, alt: 'Le salon', caption: 'Le salon', cls: 'col-span-1 h-44 md:col-span-1 md:row-span-1 md:h-auto' }, { src: chambreRiviere1, alt: 'Chambre Rivière', caption: 'Chambre Rivière · 1 lit 140×190' },
{ src: chambreRiviere1, alt: 'Chambre Rivière', caption: 'Chambre Rivière · 1 lit 140×190', cls: 'col-span-1 h-44 md:col-span-1 md:row-span-1 md:h-auto' }, { src: terrasse, alt: 'La terrasse', caption: 'La terrasse' },
{ src: chambreTilleul, alt: 'Chambre Tilleul', caption: 'Chambre Tilleul · 1 lit 140×190', cls: 'col-span-1 h-44 md:col-span-1 md:row-span-1 md:h-auto' }, { src: salon2, alt: 'Le salon', caption: 'Le salon' },
{ src: petiteChambre, alt: 'La petite chambre', caption: 'La petite chambre · 1 lit 90×190', cls: 'col-span-2 h-44 md:col-span-2 md:row-span-1 md:h-auto' }, { src: grenier, alt: 'Le grenier', caption: 'Le grenier' },
{ src: grenier, alt: 'Le grenier', caption: 'Le grenier', cls: 'col-span-1 h-44 md:col-span-1 md:row-span-2 md:h-auto' }, { src: jardin, alt: 'Le jardin', caption: 'Le jardin' },
{ src: terrasse, alt: 'La terrasse', caption: 'La terrasse', cls: 'col-span-1 h-44 md:col-span-1 md:row-span-1 md:h-auto' }, { src: chambreTilleul, alt: 'Chambre Tilleul', caption: 'Chambre Tilleul · 1 lit 140×190' },
{ src: jardin, alt: 'Le jardin', caption: 'Le jardin', cls: 'col-span-1 h-44 md:col-span-1 md:row-span-1 md:h-auto' }, { src: riviere, alt: "L'Allier", caption: "L'Allier, à 100m" },
{ src: hamac, alt: 'Espace détente', caption: 'Espace détente · Hamac', cls: 'col-span-2 h-44 md:col-span-2 md:row-span-1 md:h-auto' }, { src: petiteChambre, alt: 'La petite chambre', caption: 'La petite chambre · 1 lit 90×190' },
{ src: cecile, alt: 'Cécile', caption: 'Cécile sur son fauteuil, scrutant la nature…', cls: 'col-span-2 h-48 md:col-span-3 md:row-span-1 md:h-auto' }, { src: hamac, alt: 'Espace détente', caption: 'Espace détente · Hamac' },
{ src: cecile, alt: 'Cécile', caption: 'Cécile sur son fauteuil, scrutant la nature…' },
]; ];
--- ---
@@ -34,13 +37,12 @@ const photos = [
<h2 class="font-serif text-5xl font-light">Découvrez le lieu</h2> <h2 class="font-serif text-5xl font-light">Découvrez le lieu</h2>
</div> </div>
<div class="grid grid-cols-2 md:grid-cols-3 gap-3 md:auto-rows-[200px] grid-flow-dense"> <!-- CSS columns : les photos gardent leurs proportions naturelles,
s'empilent automatiquement, aucun calcul de span nécessaire. -->
<div class="columns-2 md:columns-3 gap-3">
{photos.map((photo, i) => ( {photos.map((photo, i) => (
<div <div
class:list={[ class="break-inside-avoid mb-3 cursor-pointer group relative overflow-hidden"
"overflow-hidden cursor-pointer group relative",
photo.cls,
]}
data-lightbox={i} data-lightbox={i}
data-caption={photo.caption} data-caption={photo.caption}
role="button" role="button"
@@ -50,10 +52,10 @@ const photos = [
<Image <Image
src={photo.src} src={photo.src}
alt={photo.alt} alt={photo.alt}
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700 pointer-events-none" class="w-full h-auto block group-hover:scale-105 transition-transform duration-700 pointer-events-none"
/> />
<div class="absolute inset-0 bg-dark/0 group-hover:bg-dark/30 transition-colors duration-300 flex items-end"> <div class="absolute inset-0 bg-dark/0 group-hover:bg-dark/30 transition-colors duration-300 flex items-end">
<span class="text-white/0 group-hover:text-white/90 transition-colors duration-300 text-xs tracking-[0.15em] uppercase px-4 pb-4"> <span class="translate-y-2 opacity-0 group-hover:translate-y-0 group-hover:opacity-100 transition-all duration-300 text-white text-xs tracking-[0.15em] uppercase px-4 pb-4">
{photo.caption} {photo.caption}
</span> </span>
</div> </div>