chore: more stylistic changes

src/pages/index.astro

@@ -5,7 +5,7 @@ import { Content as WhatPhcContent, frontmatter as whatsPhcFrontmatter } from '.
 
 const news = await getCollection('news')
 
-const galleryCollage = (await Astro.glob('@/assets/gallery/*')).map(({ default: { src } }) => src)
+const galleryCollage = (await Astro.glob('@/assets/gallery/*.jpg')).map(({ default: { src } }) => src)
 ---
 
 <PageLayout pageTags="homepage">

src/pages/storia.astro

@@ -9,16 +9,19 @@ import Timeline from '../components/Timeline.astro'
 <BaseLayout {...Astro.props} pageTags={'storia'}>
     <Header />
     <main>
-        <h1>Storia</h1>
-        <div class="text">
-            <p>
-                Qui annoverariamo la storia del PHC in una timeline con gli eventi più salienti del progetto.
-            </p>
-            <p>
-                Per delle note storiche un po' più dettagliate, si legga l'ottima pagine sul <a
-                    href="http://betti.dm.unipi.it/servizi/PHC.html">sito del dipartimento</a
-                >.
-            </p>
+        <div class="card large" style={{ '--card-base': '#ffd3a0' }}>
+            <div class="title">Storia</div>
+            <div class="text">
+                <p>
+                    Qui annoverariamo la storia del PHC in una timeline con gli eventi più salienti del
+                    progetto.
+                </p>
+                <p>
+                    Per delle note storiche un po' più dettagliate, si legga l'ottima pagine sul <a
+                        href="http://betti.dm.unipi.it/servizi/PHC.html">sito del dipartimento</a
+                    >.
+                </p>
+            </div>
         </div>
         <div class="timeline">
             <Timeline title="Tanti Francesco" year="2022">
@@ -52,8 +55,10 @@ import Timeline from '../components/Timeline.astro'
                         href="https://web.archive.org/web/20060609003904im_/http://poisson.phc.unipi.it/logo_studenti.orig.png"
                         >logo</a
                     > creato da <strong>Michele Cerulli</strong>.
-                </p><img
-                    class="dropdown"
+                </p>
+                <!-- TODO: Pensare a come mostrare questa immagine su mobile -->
+                <img
+                    class="dropdown desktop-only"
                     src="https://web.archive.org/web/20060609003904im_/http://poisson.phc.unipi.it/logo_studenti.orig.png"
                     alt="Logo"
                 />

src/scripts/circuits-art.ts

@@ -1,5 +1,9 @@
 const $canvas: HTMLCanvasElement = document.querySelector('#circuits-art')!
 
+const isMobile = window.matchMedia('(max-width: 1024px)').matches
+
+const CELL_SIZE = !isMobile ? 27 : 19
+
 interface Grid<T> extends Iterable<[number, number, T]> {
     has(point: [number, number]): boolean
     get(point: [number, number]): T
@@ -124,8 +128,6 @@ function update(state: State, width: number, height: number, time: number) {
     }
 }
 
-const CELL_SIZE = 27
-
 const BACKGROUND_COLOR = '#ecffe3'
 const WIRE_COLOR = '#a6ce94'
 

src/styles/components.scss

@@ -588,7 +588,7 @@
         }
 
         @media screen and (max-width: $screen-desktop-min) {
-            padding: 0.8rem;
+            padding: 0.9rem;
 
             &.large {
                 padding: 1.25rem;
@@ -596,6 +596,10 @@
                 & > .title {
                     font-size: 32px;
                 }
+
+                & > .text {
+                    font-size: 16px;
+                }
             }
         }
     }