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
+21 -19
View File
@@ -3,26 +3,29 @@ import { Image } from 'astro:assets';
import salon1 from '../assets/images/salon_1.jpg';
import salon2 from '../assets/images/salon_2.jpg';
import chambreRiviere1 from '../assets/images/chambre_riviere_1.jpg';
import chambreTilleul from '../assets/images/chambre_tilleul.jpg';
import chambreTilleul from '../assets/images/chambre_tilleul.jpg';
import petiteChambre from '../assets/images/petite_chambre.jpg';
import grenier from '../assets/images/grenier.jpg';
import cecile from '../assets/images/cecile.jpg';
import hamac from '../assets/images/hamac.jpg';
import terrasse from '../assets/images/terrasse.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 = [
{ 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: 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', 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', cls: 'col-span-1 h-44 md:col-span-1 md:row-span-1 md:h-auto' },
{ 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', cls: 'col-span-1 h-44 md:col-span-1 md:row-span-2 md:h-auto' },
{ 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: 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: 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: 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: salon1, alt: 'Le salon', caption: 'Le salon' },
{ src: chambreRiviere1, alt: 'Chambre Rivière', caption: 'Chambre Rivière · 1 lit 140×190' },
{ src: terrasse, alt: 'La terrasse', caption: 'La terrasse' },
{ src: salon2, alt: 'Le salon', caption: 'Le salon' },
{ src: grenier, alt: 'Le grenier', caption: 'Le grenier' },
{ src: jardin, alt: 'Le jardin', caption: 'Le jardin' },
{ src: chambreTilleul, alt: 'Chambre Tilleul', caption: 'Chambre Tilleul · 1 lit 140×190' },
{ src: riviere, alt: "L'Allier", caption: "L'Allier, à 100m" },
{ src: petiteChambre, alt: 'La petite chambre', caption: 'La petite chambre · 1 lit 90×190' },
{ 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>
</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) => (
<div
class:list={[
"overflow-hidden cursor-pointer group relative",
photo.cls,
]}
class="break-inside-avoid mb-3 cursor-pointer group relative overflow-hidden"
data-lightbox={i}
data-caption={photo.caption}
role="button"
@@ -50,10 +52,10 @@ const photos = [
<Image
src={photo.src}
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">
<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}
</span>
</div>