style: Fixed mobile, enhanced homepage

src/client/lib/util.ts

@@ -60,6 +60,11 @@ export const isMobile = () => {
 
     useEffect(() => {
         setWindowWidth(window.innerWidth)
+
+        const handleResize = () => setWindowWidth(window.innerWidth)
+        window.addEventListener('resize', handleResize)
+
+        return () => window.removeEventListener('resize', handleResize)
     }, [])
 
     return windowWidth < 1024

src/components/Header.astro

@@ -12,14 +12,14 @@
         <!-- <a class="primary" role="button" href="/login">Login</a> -->
     </div>
     <div class="mobile-only">
-        <label role="button" class="flat icon" for="header-menu-toggle">
+        <label id="header-menu-toggle-menu" role="button" class="flat icon" for="header-menu-toggle">
             <span class="material-symbols-outlined">menu</span>
         </label>
-    </div>
+        <label id="header-menu-toggle-close" role="button" class="flat icon" for="header-menu-toggle">
-    <div class="side-menu mobile-only">
-        <label role="button" class="flat icon" for="header-menu-toggle">
             <span class="material-symbols-outlined">close</span>
         </label>
+    </div>
+    <div class="side-menu">
         <div class="links">
             <a role="button" href="/utenti">Utenti</a>
             <!-- <a role="button" href="/appunti">Appunti</a> -->

src/pages/index.astro

@@ -5,6 +5,9 @@ import { Content as WhatPhcContent, frontmatter as whatsPhcFrontmatter } from '.
 
 const news = await getCollection('news')
 
+const galleryCollage = (await Astro.glob('@/assets/gallery/*')).map(({ default: { src } }) => src)
+
+console.log(galleryCollage)
 ---
 
 <PageLayout pageTags="homepage">
@@ -17,10 +20,19 @@ const news = await getCollection('news')
             <img src="/images/logo-circuit-board.svg" alt="phc logo" />
         </div>
         <div class="whats-phc card large">
+            <input type="checkbox" class="hide" id="mobile-whats-phc-read-more" checked />
             <div class="title">{whatsPhcFrontmatter.title}</div>
             <div class="text">
                 <WhatPhcContent />
             </div>
+            <div class="mobile-only">
+                <label for="mobile-whats-phc-read-more">
+                    <div class="button">
+                        <span>Mostra di più</span>
+                        <span>Mostra meno</span>
+                    </div>
+                </label>
+            </div>
         </div>
     </section>
     <section class="news">
@@ -100,8 +112,8 @@ const news = await getCollection('news')
                             Gitea è un servizio di hosting per progetti software, come GitHub ma autogestito.
                         </p>
                         <p>
-                            Qui troverai i progetti del PHC, ma non solo: può accedervi chiunque con un
+                            Qui puoi trovare i progetti del PHC, e accedendo con un account di Ateneo potrai
-                            account di Ateneo.
+                            crearne di nuovi.
                         </p>
                     </div>
                 </div>
@@ -119,8 +131,8 @@ const news = await getCollection('news')
         </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">
+                    <div class="image auto">
-                        <div class="box"></div>
+                        <img src="https://lab.phc.dm.unipi.it/orario/icon.png" alt="Logo Orario" />
                     </div>
                     <div class="title">Orario</div>
                     <div class="description">
@@ -139,16 +151,18 @@ const news = await getCollection('news')
                     </div>
                     <div class="title">Problemi</div>
                     <div class="description">
-                        <p>Bacheca con problemi di Matematica da risolvere inviando soluzioni in LaTeX.</p>
+                        <p>
+                            Bacheca di problemi di Matematica da risolvere, inviandone le soluzioni in LaTeX.
+                        </p>
 
-                        <p>La sera i problemi compaiono sullo schermo in atrio.</p>
+                        <p>La sera i problemi compaiono sullo schermo nell'atrio del Dipartimento.</p>
                     </div>
                 </div>
             </a>
             <a href="http://steffe.cs.dm.unipi.it/" style="--masonry-height: 2;">
                 <div class="project">
-                    <div class="image">
+                    <div class="image cover">
-                        <div class="box"></div>
+                        <img src="https://steffe.lb.cs.dm.unipi.it/assets/img/logo.png" alt="Logo Cluster" />
                     </div>
                     <div class="title">Cluster "Steffè"</div>
                     <div class="description">
@@ -160,7 +174,7 @@ const news = await getCollection('news')
             <a target="_blank" href="https://seminarietti.phc.dm.unipi.it/" style="--masonry-height: 2;">
                 <div class="project" style="--card-bg: #bd9fec;">
                     <div class="image">
-                        <div class="box"></div>
+                        <img src="https://seminarietti.phc.dm.unipi.it/favicon.png" alt="Logo Seminarietti" />
                     </div>
                     <div class="title">Seminarietti</div>
                     <div class="description">
@@ -171,7 +185,7 @@ const news = await getCollection('news')
             <a target="_blank" href="https://tutorato.phc.dm.unipi.it/" style="--masonry-height: 2;">
                 <div class="project" style="--card-bg: #c55;">
                     <div class="image">
-                        <div class="box"></div>
+                        <img src="https://tutorato.phc.dm.unipi.it/favicon.svg" alt="Logo Tutorato" />
                     </div>
                     <div class="title">Tutorato</div>
                     <div class="description">
@@ -199,15 +213,28 @@ const news = await getCollection('news')
                 <rect fill="url(#zig-zag-3)" x="0" y="0" width="1000" height="1"></rect>
             </svg>
         </div>
-
+        <span></span>
+        <span></span>
+        <div class="card large" style="--card-base: #ddd;">
             <div class="title">Vuoi diventare macchinista?</div>
-
+            <div class="text">
-        <div class="content">
                 <p>
-                Se sei uno studente del Dipartimento di Matematica e vuoi diventare un macchinista del PHC,
+                    Se sei uno studente del Dipartimento di Matematica e vuoi diventare un macchinista del
-                vieni a trovarci in Dipartimento o scrivici a <a href="mailto:macchinisti@lists.dm.unipi.it">
+                    PHC, vieni a trovarci in Dipartimento o scrivici a <a
+                        href="mailto:macchinisti@lists.dm.unipi.it"
+                    >
                     </a>
                 </p>
             </div>
-    </section></PageLayout
+        </div>
->
+        <div class="gallery-collage">
+            {
+                galleryCollage.map((src, i) => (
+                    <div class="card">
+                        <img src={src} alt={`gallery image ${i}`} />
+                    </div>
+                ))
+            }
+        </div>
+    </section>
+</PageLayout>

src/styles/components.scss

@@ -731,7 +731,50 @@
 
         @media screen and (max-width: $screen-desktop-min) {
             .dropdown {
-                top: calc(100% + 1rem);
+                left: 3px;
+                right: 3px;
+
+                top: calc(100% + 9px);
+            }
+        }
+    }
+
+    .gallery-collage {
+        display: flex;
+
+        place-content: center;
+        align-items: center;
+        gap: 1rem;
+
+        flex-wrap: wrap;
+
+        width: 100%;
+
+        max-width: 64rem;
+
+        & > .card {
+            padding: 3px;
+
+            overflow: hidden;
+
+            @media screen and (max-width: $screen-desktop-min) {
+                max-width: 100%;
+            }
+
+            img {
+                display: grid;
+
+                max-width: 25rem;
+                max-height: 25rem;
+
+                border-radius: 3px;
+
+                @media screen and (max-width: $screen-desktop-min) {
+                    max-height: none;
+
+                    width: 25rem;
+                    max-width: 100%;
+                }
             }
         }
     }

src/styles/main.scss

@@ -44,10 +44,10 @@ $screen-desktop-min: 1024px;
         color: #222;
     }
 
-    // html {
+    html {
-    //    scroll-snap-type: y proximity;
+        scroll-snap-type: y mandatory;
-    //    scroll-padding-top: 4rem;
+        scroll-padding-top: 4rem;
-    // }
+    }
 
     img {
         display: block;
@@ -125,25 +125,30 @@ body {
         .side-menu {
             position: fixed;
 
-            top: 0;
+            // top: 0;
+            // right: 0;
+            // bottom: 0;
+            // left: 3rem;
+
+            top: 5rem;
             right: 0;
             bottom: 0;
-            left: 3rem;
+            left: 0;
 
             background: #f0f0f0;
 
-            border-left: $border-large;
-
             display: grid;
-            grid-template-rows: auto 1fr;
+            // grid-template-rows: auto 1fr;
+            grid-template-rows: 1fr;
 
             gap: 1.5rem;
-
             padding: 1.5rem;
 
-            & > :first-child {
+            justify-content: center;
-                justify-self: end;
+
-            }
+            // & > :first-child {
+            //     justify-self: end;
+            // }
 
             .links {
                 display: grid;
@@ -151,6 +156,9 @@ body {
 
                 align-content: start;
 
+                width: 20rem;
+                max-width: 100%;
+
                 gap: 1.5rem;
 
                 padding: 0;
@@ -165,6 +173,14 @@ body {
             }
         }
 
+        &:has(#header-menu-toggle:checked) #header-menu-toggle-menu {
+            display: none;
+        }
+
+        &:has(#header-menu-toggle:not(:checked)) #header-menu-toggle-close {
+            display: none;
+        }
+
         @media screen and (max-width: $screen-desktop-min) {
             height: 5rem;
             padding: 0 0.5rem;
@@ -255,6 +271,10 @@ body {
     background: #0002;
 }
 
+body:has(#header-menu-toggle:checked) {
+    overflow: hidden;
+}
+
 //
 // Utility Classes
 //

src/styles/pages.scss

@@ -14,22 +14,28 @@
 
 @layer page {
     .homepage {
-        header .logo {
+        header:has(#header-menu-toggle:not(:checked)) .logo {
             visibility: hidden;
         }
 
         section {
             position: relative;
 
+            width: 100%;
             min-height: calc(100vh - 6rem);
 
             &:last-of-type {
                 min-height: calc(100vh - 10rem);
             }
 
-            display: flex;
+            // display: flex;
-            flex-direction: column;
+            // flex-direction: column;
-            align-items: center;
+            // align-items: center;
+
+            display: grid;
+            grid-auto-flow: row;
+            justify-items: center;
+            align-content: start;
 
             gap: 2rem;
 
@@ -38,6 +44,10 @@
             & > .title {
                 font-size: 48px;
                 padding-top: 4rem;
+
+                @media screen and (max-width: $screen-desktop-min) {
+                    padding-top: 2rem;
+                }
             }
         }
 
@@ -59,6 +69,7 @@
 
             min-height: calc(100vh - 7rem);
 
+            display: flex;
             flex-direction: row;
             align-items: center;
             justify-content: center;
@@ -73,6 +84,8 @@
             position: relative;
 
             .circuit-layer {
+                pointer-events: none;
+
                 z-index: 1;
                 position: absolute;
                 left: 0;
@@ -161,6 +174,8 @@
             padding-bottom: 6rem;
 
             .project-list {
+                width: 100%;
+
                 display: grid;
                 grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
                 grid-auto-flow: dense;
@@ -174,6 +189,7 @@
                 padding: 0 6rem;
 
                 .project {
+                    width: 100%;
                     height: 100%;
 
                     // background: #fcddff;
@@ -211,6 +227,19 @@
                             width: 5rem;
                             height: 5rem;
                         }
+
+                        &.cover {
+                            img {
+                                object-fit: cover;
+                            }
+                        }
+
+                        &.auto {
+                            img {
+                                width: auto;
+                                height: auto;
+                            }
+                        }
                     }
 
                     .description {
@@ -225,6 +254,12 @@
                         box-shadow: 9px 13px 0 0 #222;
                     }
                 }
+
+                @media screen and (max-width: $screen-desktop-min) {
+                    padding: 0 1rem;
+
+                    grid-template-columns: 1fr;
+                }
             }
         }
 
@@ -232,10 +267,77 @@
             background: $homepage-macchinisti-bg;
             color: #fdfdfd;
 
+            padding-bottom: 6rem;
+
             .content {
                 @extend .text;
             }
         }
+
+        @media screen and (max-width: $screen-desktop-min) {
+            & > main {
+                padding: 0 !important;
+            }
+
+            section.principal {
+                padding: 3rem 0 6rem;
+
+                .whats-phc {
+                    padding: 1.5rem;
+
+                    margin: 0 1rem;
+                }
+
+                #mobile-whats-phc-read-more {
+                    &:checked ~ .text {
+                        max-height: 7lh;
+                        overflow: hidden;
+
+                        position: relative;
+
+                        &::after {
+                            content: '';
+                            position: absolute;
+                            bottom: 0;
+                            left: 0;
+                            right: 0;
+                            height: 3lh;
+
+                            background: linear-gradient(to bottom, transparent, #e4c5ff);
+                        }
+                    }
+
+                    &:not(:checked) ~ * .button span:nth-child(1) {
+                        display: none;
+                    }
+                    &:checked ~ * .button span:nth-child(2) {
+                        display: none;
+                    }
+                }
+            }
+
+            section.news {
+                & > .news-list {
+                    padding: 0 1rem;
+                }
+            }
+
+            section.projects {
+                .project-list {
+                    padding: 0 1rem;
+                }
+            }
+
+            section.wanna-be-macchinista {
+                .content {
+                    padding: 0 1rem;
+                }
+            }
+
+            section {
+                padding: 1rem 1rem 4rem;
+            }
+        }
     }
 
     .utenti {