miglioramenti stilistici

package.json

@@ -19,6 +19,7 @@
         "@fontsource/open-sans": "^5.0.24",
         "@fontsource/source-code-pro": "^5.0.16",
         "@fontsource/source-sans-pro": "^5.0.8",
+        "@fontsource/space-mono": "^5.0.20",
         "astro": "^4.4.6",
         "better-sqlite3": "^9.4.3",
         "drizzle-orm": "^0.29.4",

src/components/NewsCard.astro

@@ -1,22 +1,25 @@
 ---
-const { title, tags, description, image, date, author } = Astro.props
+const { id, title, tags, description, image, date, author } = Astro.props
 ---
 
 <div class="news-item">
-    <div class="title">
+    <a href={`/notizie/${id}`} class="title">
         {title}
+    </a>
+    <div class="content">
+        <div class="date">
+            {
+                new Date(date).toLocaleDateString('it-IT', {
+                    year: 'numeric',
+                    month: 'long',
+                    day: 'numeric',
+                })
+            }
+        </div>
+        <div class="description">{description}</div>
+        <div class="tags">
+            {tags.map(tag => <a href={`/notizie/tags/${tag}`}>#{tag}</a>)}
+        </div>
+        {image && <img src={image} alt={title} />}
     </div>
-    <div class="description">{description}</div>
-    <div class="tags">
-        {tags.map(tag => <a href={`/notizie/tags/${tag}`}>#{tag}</a>)}
-    </div>
-    {image && <img src={image} alt={title} />}
-    <div class="date">{
-        new Date(date).toLocaleDateString('it-IT', {
-            year: 'numeric',
-            month: 'long',
-            day: 'numeric'
-        })
-        }</div>
-    <div class="author">{author}</div>
 </div>

src/content/guides/2024-02-29-git-101.md

@@ -3,8 +3,7 @@ id: git-101-example
 title: Git 101 (Esempio)
 description: Una guida introduttiva alle basi di Git (Esempio)
 author: Copilot
-tags:
-    - git
+tags: [git]
 ---
 
 Benvenuto alla guida introduttiva alle basi di Git. In questa guida imparerai come iniziare a usare Git per il controllo di versione dei tuoi progetti.

src/content/posts/2024-07-28-nuovo-sito.md

@@ -8,7 +8,7 @@ tags: [astro, web, appunti]
 
 # Il Nuovo Sito del PHC
 
-Benvenuti nel nuovo sito web, realizzato con la tecnologia web Astro! In questo articolo, ne vedremo le feature principali e cosa serba il futuro.
+Benvenuti nel nuovo sito web, realizzato con la tecnologia web [Astro](https://astro.build/)! In questo articolo, ne vedremo le feature principali e cosa serba il futuro.
 
 ## Astro: Un Potente Framework Statico
 
@@ -28,11 +28,11 @@ Il nuovo sito web realizzato in Astro offre diverse caratteristiche interessanti
 
 Il nostro obiettivo è continuare a migliorare il sito web e offrire un'esperienza sempre più completa agli utenti. Alcune delle prossime caratteristiche che stiamo sviluppando includono:
 
-- **Integrazione con Social Media**: Vogliamo consentire agli utenti di condividere facilmente il contenuto del sito web sui social media, ampliando così la visibilità e l'accessibilità del nostro materiale.
+-   **Integrazione con Social Media**: Vogliamo consentire agli utenti di condividere facilmente il contenuto del sito web sui social media, ampliando così la visibilità e l'accessibilità del nostro materiale.
 
-- **Miglioramenti dell'Interfaccia Utente**: Stiamo lavorando per migliorare l'aspetto e la sensazione del sito web, rendendolo più intuitivo e piacevole da navigare.
+-   **Miglioramenti dell'Interfaccia Utente**: Stiamo lavorando per migliorare l'aspetto e la sensazione del sito web, rendendolo più intuitivo e piacevole da navigare.
 
-- **Espansione dei Contenuti**: Continueremo ad aggiungere nuovi articoli, tutorial e risorse per fornire agli utenti un'ampia gamma di contenuti di qualità.
+-   **Espansione dei Contenuti**: Continueremo ad aggiungere nuovi articoli, tutorial e risorse per fornire agli utenti un'ampia gamma di contenuti di qualità.
 
 ## Conclusioni
 

src/layouts/BaseLayout.astro

@@ -4,6 +4,7 @@ import 'katex/dist/katex.min.css'
 import '@fontsource/open-sans/latin.css'
 import '@fontsource/source-sans-pro/latin.css'
 import '@fontsource/source-code-pro/latin.css'
+import '@fontsource/space-mono/latin.css'
 
 import '../styles/main.scss'
 

src/pages/index.astro

@@ -1,5 +1,14 @@
 ---
+import { getCollection } from 'astro:content'
+
 import PageLayout from '../layouts/PageLayout.astro'
+import NewsCard from '@/components/NewsCard.astro'
+
+const posts = await getCollection('posts')
+
+// posts.push(...posts)
+// posts.push(...posts)
+// posts.push(...posts)
 ---
 
 <PageLayout pageName="homepage">
@@ -62,8 +71,22 @@ import PageLayout from '../layouts/PageLayout.astro'
         <div class="title">Ultime Notizie</div>
 
         <div class="news-list">
+            {
+                posts.map(post => (
+                    <NewsCard
+                        id={post.slug}
+                        title={post.data.title}
+                        description={post.data.description}
+                        tags={post.data.tags}
+                        image={post.data.image}
+                        date={post.data.publishDate}
+                        author={post.data.author}
+                    />
+                ))
+            }
+            <!-- 
             <div class="news-item">
-                <div class="title">Nuovo Sito!</div>
+                <a href="#" class="title">Nuovo Sito!</a>
                 <div class="abstract">
                     <p>Questo è il nuovo sito del PHC, realizzato con Astro e</p>
                     <p>
@@ -122,7 +145,7 @@ import PageLayout from '../layouts/PageLayout.astro'
                         cumque. Nemo obcaecati eaque recusandae fugit sed!
                     </p>
                 </div>
-            </div>
+            </div> -->
         </div>
 
         <a class="primary" href="#" role="button">Vai all'Archivio</a>
@@ -179,19 +202,19 @@ import PageLayout from '../layouts/PageLayout.astro'
                     </div>
                 </div>
             </a> -->
-            <a target="_blank" href="https://lab.phc.dm.unipi.it/orario/" style="--masonry-height: 2;">
+            <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="box"></div>
                     </div>
                     <div class="title">Orario</div>
                     <div class="description">
-                        Questo sito permette di visualizzare il proprio orario delle lezioni, 
-                        con informazioni sui docenti e le aule.
+                        Questo sito permette di visualizzare il proprio orario delle lezioni, con informazioni
+                        sui docenti e le aule.
                     </div>
                 </div>
             </a>
-            <a target="_blank" href="https://lab.phc.dm.unipi.it/problemi/" style="--masonry-height: 1;">
+            <a target="_blank" href="https://lab.phc.dm.unipi.it/problemi/" style="--masonry-height: 2;">
                 <div class="project" style="--card-bg: #aa88c0;">
                     <div class="image">
                         <img
@@ -201,26 +224,21 @@ import PageLayout from '../layouts/PageLayout.astro'
                     </div>
                     <div class="title">Problemi</div>
                     <div class="description">
-                        <p>
-                            Bacheca con problemi di Matematica da risolvere
-                            inviando soluzioni in LaTeX.
-                        </p>
+                        <p>Bacheca con problemi di Matematica da risolvere inviando soluzioni in LaTeX.</p>
 
-                        <p>
-                            La sera  i problemi compaiono sullo schermo in atrio.
-                        </p>
+                        <p>La sera i problemi compaiono sullo schermo in atrio.</p>
                     </div>
                 </div>
             </a>
-            <a href="#" style="--masonry-height: 3;">
+            <a href="http://steffe.cs.dm.unipi.it/" style="--masonry-height: 2;">
                 <div class="project">
                     <div class="image">
                         <div class="box"></div>
                     </div>
                     <div class="title">Cluster "Steffè"</div>
                     <div class="description">
-                        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptatibus quam iure
-                        dolor. Excepturi facere, ipsa accusantium labore explicabo quaerat incidunt.
+                        Cluster progettato ed assemblato durante il progetto speciale per la didattica
+                        "Calcolo Parallelo dall'Infrastruttura alla Matematica".
                     </div>
                 </div>
             </a>
@@ -261,7 +279,8 @@ import PageLayout from '../layouts/PageLayout.astro'
             <p>
                 Se sei uno studente del Dipartimento di Matematica e vuoi diventare un macchinista del PHC,
                 vieni a trovarci in Dipartimento o scrivici a <a href="mailto:macchinisti@lists.dm.unipi.it">
-                
+                </a>
+            </p>
         </div>
-    </section>
-</PageLayout>
+    </section></PageLayout
+>

src/pages/notizie/[id].astro

@@ -3,6 +3,14 @@ import { getCollection } from 'astro:content'
 
 import ArticleLayout from '../../layouts/ArticleLayout.astro'
 
+export async function getStaticPaths() {
+    const guides = await getCollection('posts')
+    return guides.map(entry => ({
+        params: { id: entry.slug },
+        props: { entry },
+    }))
+}
+
 const { entry } = Astro.props
 const { Content } = await entry.render()
 ---
@@ -14,6 +22,8 @@ const { Content } = await entry.render()
     image={entry.data.image}
     date={entry.data.publishDate}
     author={entry.data.author}
+
+    pageName={['notizia']}
 >
     <Content />
 </ArticleLayout>

src/pages/notizie/index.astro

@@ -12,6 +12,7 @@ const posts = await getCollection('posts')
         {
             posts.map(post => (
                 <NewsCard
+                    id={post.slug}
                     title={post.data.title}
                     description={post.data.description}
                     tags={post.data.tags}

src/pages/storia.astro

@@ -0,0 +1,16 @@
+---
+import BaseLayout from '../layouts/BaseLayout.astro'
+
+import Header from '../components/Header.astro'
+import Footer from '../components/Footer.astro'
+---
+
+<BaseLayout {...Astro.props}>
+    <Header />
+    <main class="text-content center">
+        <p>
+            Bla bla bla la storia del PHC con tutti i macchinisti che ci sono mai stati su una timeline carina
+        </p>
+    </main>
+    <Footer />
+</BaseLayout>

src/styles/components.scss

@@ -15,6 +15,12 @@ $news-accent-bg: #f8e8b1;
     font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
 }
 
+.title {
+    font-family: 'Space Mono', monospace;
+    font-weight: 700;
+    font-size: 28px;
+}
+
 .search {
     width: 100%;
     height: 2.5rem;
@@ -185,11 +191,6 @@ $news-accent-bg: #f8e8b1;
 
         row-gap: 0.5rem;
         padding: 1rem;
-        .title {
-            font-family: 'Source Sans Pro', sans-serif;
-            font-weight: 700;
-            font-size: 32px;
-        }
 
         .description {
             font-size: 16px;
@@ -200,6 +201,7 @@ $news-accent-bg: #f8e8b1;
             gap: 0.5rem;
             flex-wrap: wrap;
             font-size: 14px;
+            font-weight: 600;
             color: #555;
         }
     }
@@ -211,66 +213,105 @@ $news-accent-bg: #f8e8b1;
 
     .news-item {
         background: $news-bg;
-    
+        color: #111;
+
         @include neo-brutalist-card($size: 3px, $offset: 9px);
-    
+
         display: flex;
         flex-direction: column;
-    
+
         width: 22rem;
         max-height: 27rem;
-    
+
+        overflow: hidden;
+
         ::-webkit-scrollbar {
             width: 10px;
         }
-    
+
         ::-webkit-scrollbar-thumb {
             background-color: #c67e14;
             border: 2px solid #222;
-    
+
             &:hover {
                 background-color: #e69419;
             }
         }
-    
+
         a {
             font-weight: 600;
             text-decoration: none;
             color: #c67e14;
-    
+
             &:hover {
                 text-decoration: underline solid 2px;
             }
         }
-    
+
         & > .title {
-            // border-bottom: 2px solid #222;
-    
-            border-top-left-radius: 9px;
-            border-top-right-radius: 9px;
-    
             padding: 1rem;
             background: $news-accent-bg;
-    
-            font-family: 'Source Sans Pro', sans-serif;
-            font-weight: 700;
-            font-size: 32px;
+            line-height: 1;
+            font-size: 26px;
         }
+
+        a.title {
+            color: #83530c;
+        }
+
         & > .abstract {
             flex-grow: 1;
-    
+
             padding: 1rem;
-    
+
             overflow-y: auto;
-    
+
             @extend .text;
         }
-        & > .continue {
+
+        & > .content {
+            display: flex;
             padding: 1rem;
-    
-            display: grid;
-            align-items: end;
-            justify-content: end;
+            flex-direction: column;
+            gap: 0.5rem;
+
+            background: #fff8da;
+
+            & > .continue {
+                padding: 1rem;
+
+                display: grid;
+                align-items: end;
+                justify-content: end;
+            }
+
+            & > .description {
+                font-size: 16px;
+                line-height: 1.5;
+
+                flex-grow: 1;
+            }
+
+            & > .tags {
+                display: flex;
+                gap: 0.5rem;
+                flex-wrap: wrap;
+                font-size: 14px;
+                color: #555;
+            }
+
+            & > .date {
+                font-size: 14px;
+                font-style: italic;
+                font-weight: 600;
+                color: #0008;
+            }
+
+            & > .author {
+                font-weight: 600;
+                font-size: 15px;
+                color: #555;
+            }
         }
     }
-}
+}

src/styles/main.scss

@@ -79,7 +79,7 @@ a {
         font-weight: 600;
 
         &:hover {
-            text-decoration: underline;
+            text-decoration: underline 2px solid;
         }
     }
 }
@@ -129,8 +129,11 @@ body {
             padding: 0 1.5rem;
 
             a {
-                font-size: 22px;
-                font-weight: 600;
+                font-family: 'Space Mono', monospace;
+                font-size: 18px;
+                font-weight: 700;
+                letter-spacing: 1px;
+                color: #333;
             }
         }
     }
@@ -176,11 +179,7 @@ body {
         scroll-snap-align: start;
 
         & > .title {
-            font-weight: 700;
-            font-size: 60px;
-
-            font-family: 'Source Sans Pro', sans-serif;
-
+            font-size: 48px;
             padding-top: 4rem;
         }
     }
@@ -261,8 +260,6 @@ body {
             gap: 1rem;
 
             .title {
-                font-family: 'Source Sans Pro', sans-serif;
-                font-weight: 700;
                 font-size: 40px;
             }
 
@@ -285,6 +282,8 @@ body {
             flex-direction: row;
             gap: 3rem;
 
+            align-items: flex-start;
+
             padding: 0 3rem;
 
             justify-content: center;
@@ -344,8 +343,6 @@ body {
                 gap: 0.25rem 1rem;
 
                 .title {
-                    font-family: 'Source Sans Pro', sans-serif;
-                    font-weight: 700;
                     font-size: 32px;
                 }
 
@@ -387,8 +384,8 @@ body {
         color: #fdfdfd;
 
         .content {
-                @extend .text;
-            }
+            @extend .text;
+        }
     }
 }
 
@@ -493,6 +490,31 @@ body {
     }
 }
 
+.notizia {
+    background: #fffced;
+    --zone-color: #ac8919;
+
+    main {
+        margin-top: 3rem;
+        margin-bottom: 6rem;
+
+        background: #fff2c9;
+        max-width: calc(46rem + 2rem * 2);
+        justify-self: center;
+        padding: 3rem 2rem 2rem;
+    }
+
+    @media screen and (min-width: $screen-desktop-min) {
+        main {
+            @include neo-brutalist-card($size: 3px, $offset: 9px);
+        }
+    }
+}
+
+.notizie {
+    background: #fffced;
+}
+
 .guide {
     main {
         justify-self: center;
@@ -574,3 +596,7 @@ body {
 ::-webkit-scrollbar {
     width: 15px;
 }
+
+::selection {
+    background: #0002;
+}

src/styles/typography.scss

@@ -12,20 +12,20 @@
 
 @mixin geometric-headings {
     $base-font-size: 16px;
-    $heading-scale: 1.33;
+    $heading-scale: 1.25;
 
     @for $i from 1 through 5 {
         $factor: pow($heading-scale, 5 - $i);
 
         h#{$i} {
             font-size: $base-font-size * $factor;
-            font-family: 'Source Sans Pro', monospace;
-            font-weight: 400;
+            font-family: 'Space Mono', monospace;
+            font-weight: 700;
             margin-bottom: 0.25rem;
         }
 
         p + h#{$i} {
-            margin-top: 0.5rem * $factor;
+            margin-top: 0.75rem * $factor;
         }
     }
 }
@@ -52,18 +52,21 @@
     }
 
     pre {
-        margin: 1rem auto;
+        margin: 2rem auto;
 
-        padding: 0.5rem;
+        padding: 0.5rem 1rem;
 
-        width: 100%;
+        // width: 100%;
         max-width: 80ch;
 
+        width: fit-content;
+
         line-height: 1.5;
 
-        border-radius: 0.5rem;
+        border-radius: 0.25rem;
 
-        box-shadow: 0.25rem 0.25rem 0 0 #777;
+        box-shadow: 0.25rem 0.25rem 0 0 #333;
+        border: 2px solid #333;
 
         code {
             padding: 0;
@@ -71,7 +74,7 @@
     }
 
     p {
-        line-height: 1.65;
+        line-height: 1.75;
         margin: 0.5rem auto;
     }
 
@@ -82,6 +85,34 @@
         text-align: center;
     }
 
+    h1,
+    h2,
+    h3,
+    h4 {
+        font-weight: 700;
+        color: #333;
+    }
+
+    h1,
+    h2,
+    h3,
+    h4,
+    ol,
+    ul {
+        margin-left: auto;
+        margin-right: auto;
+    }
+
+    a,
+    a:visited {
+        color: var(--zone-color, #1e6733);
+        font-weight: 600;
+
+        &:hover {
+            text-decoration: underline 2px solid;
+        }
+    }
+
     padding: 2rem 0 3rem;
 
     @media screen and (max-width: 1024px) {