chore: better gallery layout and astro image tags

src/pages/index.astro

@@ -2,10 +2,11 @@
 import { getCollection } from 'astro:content'
 import PageLayout from '../layouts/PageLayout.astro'
 import { Content as WhatPhcContent, frontmatter as whatsPhcFrontmatter } from '../content/meta/whats-phc.md'
+import { Image } from 'astro:assets'
 
 const news = await getCollection('news')
 
-const galleryCollage = (await Astro.glob('@/assets/gallery/*.jpg')).map(({ default: { src } }) => src)
+const galleryCollage = await Astro.glob('@/assets/gallery/*.jpg')
 ---
 
 <PageLayout pageTags="homepage">
@@ -117,19 +118,19 @@ const galleryCollage = (await Astro.glob('@/assets/gallery/*.jpg')).map(({ defau
                 </div>
             </a>
             <!-- <a href="#" style="--masonry-height: 2;">
-            <div class="project">
-                <div class="image">
-                    <div class="box"></div>
-                </div>
-                <div class="title">PHC-Bot</div>
-                <div class="description">
-                    Un bot con cui chattare per chiedere informazioni o supporto tecnico.
+                <div class="project">
+                    <div class="image">
+                        <div class="box"></div>
+                    </div>
+                    <div class="title">PHC-Bot</div>
+                    <div class="description">
+                        Un bot con cui chattare per chiedere informazioni o supporto tecnico.
+                    </div>
                 </div>
-            </div>
-        </a> -->
+            </a> -->
             <a target="_blank" href="https://lab.phc.dm.unipi.it/orario/" style="--masonry-height: 1;">
                 <div class="project" style="--card-bg: #75ca75;">
-                    <div class="image auto">
+                    <div class="image">
                         <img src="https://lab.phc.dm.unipi.it/orario/icon.png" alt="Logo Orario" />
                     </div>
                     <div class="title">Orario</div>
@@ -234,11 +235,24 @@ const galleryCollage = (await Astro.glob('@/assets/gallery/*.jpg')).map(({ defau
         </div>
         <div class="gallery-collage">
             {
-                galleryCollage.map((src, i) => (
-                    <div class="card">
-                        <img src={src} alt={`gallery image ${i}`} />
-                    </div>
-                ))
+                galleryCollage.map((module, i) => {
+                    const src = module.default.src
+                    const filename = src.split('/').at(-1).split('?').at(0).split('.').at(0)
+
+                    const [rows, cols] = filename.includes('@')
+                        ? filename
+                              .split('@')
+                              .at(-1)
+                              .split('x')
+                              .map(s => parseInt(s))
+                        : [1, 1]
+
+                    return (
+                        <div class="card" style={`--rows: ${rows}; --cols: ${cols};`}>
+                            <Image src={module.default} alt={`gallery image ${i}`} />
+                        </div>
+                    )
+                })
             }
         </div>
         <div class="card large" style="--card-base: #ddd;">

src/styles/components.scss

@@ -753,35 +753,60 @@
     }
 
     .gallery-collage {
-        display: flex;
+        // display: flex;
+        // flex-wrap: wrap;
 
-        place-content: center;
-        align-items: center;
-        gap: 1rem;
+        // width: 64rem;
+        max-width: 100%;
 
-        flex-wrap: wrap;
+        --cell-size: 6rem;
 
-        width: 100%;
+        display: grid;
+        grid-template-columns: repeat(auto-fit, calc(var(--cell-size)));
+        grid-auto-rows: calc(var(--cell-size));
+
+        grid-auto-flow: dense;
+        gap: 1rem;
 
-        max-width: 64rem;
+        // place-content: center;
+        // align-items: center;
+
+        @media screen and (max-width: $screen-desktop-min) {
+            grid-template-columns: auto;
+            grid-template-rows: auto;
+            grid-auto-rows: auto;
+        }
 
         & > .card {
             padding: 3px;
 
             overflow: hidden;
 
+            width: 100%;
+            height: 100%;
+
+            grid-column: span var(--cols, 1);
+            grid-row: span var(--rows, 1);
+
             @media screen and (max-width: $screen-desktop-min) {
                 max-width: 100%;
+
+                grid-column: span 1;
+                grid-row: span 1;
             }
 
             img {
                 display: grid;
 
-                max-width: 25rem;
-                max-height: 25rem;
+                width: 100%;
+                height: 100%;
+
+                overflow: hidden;
 
                 border-radius: 3px;
 
+                object-fit: cover;
+
                 @media screen and (max-width: $screen-desktop-min) {
                     max-height: none;
 

src/styles/pages.scss

@@ -79,7 +79,7 @@
 
             gap: 4rem;
 
-            padding: 3rem 0 6rem;
+            padding: 3rem 2rem 6rem;
 
             background: var(--homepage-principal-bg);
 
@@ -103,7 +103,9 @@
 
             & > .logo {
                 z-index: 2;
-                max-width: 640px;
+
+                width: 32rem;
+
                 position: relative;
 
                 user-select: none;
@@ -114,6 +116,10 @@
                     //     drop-shadow(4px 0 0 var(--palette-black)) drop-shadow(0 4px 0 var(--palette-black))
                     //     drop-shadow(-4px 0 0 var(--palette-black)) drop-shadow(0 -4px 0 var(--palette-black));
                 }
+
+                max-width: calc(100vw - 3rem);
+                @media screen and (max-width: $screen-desktop-min) {
+                }
             }
 
             & > .whats-phc {
@@ -177,8 +183,10 @@
             padding-bottom: 6rem;
 
             .project-list {
-                width: calc(20rem * 3 + 1.5rem * 2 + 6rem * 2);
-                max-width: calc(100vw - 2rem); // HACK: capire come si propagano le width per bene
+                // width: calc(20rem * 3 + 1.5rem * 2 + 6rem * 2);
+                // max-width: calc(100vw - 2rem); // HACK: capire come si propagano le width per bene
+
+                max-width: calc(20rem * 3 + 1.5rem * 2 + 6rem * 2);
 
                 display: grid;
                 grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
@@ -228,13 +236,13 @@
                             background: #0003;
                             border: 3px solid #0006;
                             border-radius: 6px;
-                            width: 5rem;
-                            height: 5rem;
+                            width: 4rem;
+                            height: 4rem;
                         }
 
                         img {
-                            width: 5rem;
-                            height: 5rem;
+                            width: 4rem;
+                            height: 4rem;
                         }
 
                         &.cover {
@@ -243,12 +251,12 @@
                             }
                         }
 
-                        &.auto {
-                            img {
-                                width: auto;
-                                height: auto;
-                            }
-                        }
+                        // &.auto {
+                        //     img {
+                        //         width: auto;
+                        //         height: auto;
+                        //     }
+                        // }
                     }
 
                     .description {