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

blabla
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:11:14 +02:00
parent 05dc9cd5b2
commit bffa738793
23 changed files with 70 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Gallery.astro
+27 -10
View File
@@ -5,19 +5,28 @@ 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 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';
// Chaque photo a ses classes de span écrites en dur (Tailwind ne détecte pas les classes dynamiques)
const photos = [
{ src: salon1, alt: 'Le salon', caption: 'Le salon' },
{ src: salon2, alt: 'Le salon', caption: 'Le salon' },
{ src: chambreRiviere1, alt: 'Chambre Rivière', caption: 'Chambre Rivière · 1 lit 140×190' },
{ src: chambreTilleul, alt: 'Chambre Tilleul', caption: 'Chambre Tilleul · 1 lit 140×190' },
{ src: petiteChambre, alt: 'La petite chambre', caption: 'La petite chambre · 1 lit 90×190' },
{ src: jardin, alt: "Le jardin", caption: "Le jardin" },
{ 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' },
];
---
<section id="gallery" class="py-32 scroll-mt-20">
<section id="gallery" class="py-32 scroll-mt-20 bg-gradient-to-b from-[#f7f3e8] via-[#f2efdf] to-[#e4ecd2] border-y border-[#d9d2c3]/70">
<div class="max-w-6xl mx-auto px-6">
<div class="mb-14 text-center">
@@ -25,10 +34,13 @@ 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-4">
<div class="grid grid-cols-2 md:grid-cols-3 gap-3 md:auto-rows-[200px] grid-flow-dense">
{photos.map((photo, i) => (
<div
class:list={["overflow-hidden rounded-sm cursor-pointer", i === 6 ? "col-span-2 md:col-span-1" : ""]}
class:list={[
"overflow-hidden cursor-pointer group relative",
photo.cls,
]}
data-lightbox={i}
data-caption={photo.caption}
role="button"
@@ -38,8 +50,13 @@ const photos = [
<Image
src={photo.src}
alt={photo.alt}
class="w-full h-64 object-cover hover:scale-105 transition-transform duration-500 pointer-events-none"
class="w-full h-full object-cover 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">
{photo.caption}
</span>
</div>
</div>
))}
</div>