chore: minor fixes

public/tutors/placeholder-person.svg

@@ -1,12 +1,12 @@
 <svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g clip-path="url(#clip0_1_2)">
-<circle cx="255.5" cy="256.5" r="256.5" fill="#D9D9D9"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M60.0142 422.573C107.063 367.246 177.182 332.146 255.5 332.146C333.818 332.146 403.937 367.246 450.986 422.573C403.937 477.9 333.818 513 255.5 513C177.182 513 107.063 477.9 60.0142 422.573Z" fill="#AEAEAE"/>
-<circle cx="255.5" cy="183.5" r="101.5" fill="#AEAEAE"/>
+<circle cx="255.5" cy="256.5" r="256.5" fill="#FFD9D9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M60.0142 422.573C107.063 367.246 177.182 332.146 255.5 332.146C333.818 332.146 403.937 367.246 450.986 422.573C403.937 477.9 333.818 513 255.5 513C177.182 513 107.063 477.9 60.0142 422.573Z" fill="#ddAEAE"/>
+<circle cx="255.5" cy="183.5" r="101.5" fill="#ddAEAE"/>
 </g>
 <defs>
 <clipPath id="clip0_1_2">
-<rect width="512" height="512" fill="white"/>
+<rect width="512" height="512" fill="#FFFFFF"/>
 </clipPath>
 </defs>
 </svg>

src/components/Header.astro

@@ -19,6 +19,10 @@ const nextYear = selectedYearIndex < yearLabels.length - 1 ? yearLabels[selected
 
 const isCurrentYear = currentYear == selectedYear
 const coursesWithoutIndex = courses.filter(m => !m.file.includes('index.md'))
+
+function yearLink(year: string) {
+    return year === currentYear ? '/' : `/archivio/${year}`
+}
 ---
 
 <header>
@@ -41,29 +45,13 @@ const coursesWithoutIndex = courses.filter(m => !m.file.includes('index.md'))
         <div class="year-navigation">
             <!-- <div class="mobile-only"></div> -->
             <div class="row desktop-only">
-                {
-                    previousYear === null ? (
-                        <span class="link disabled">
-                            <div class="gg-chevron-left" />
-                        </span>
-                    ) : (
-                        <a href={`/archivio/${previousYear}`}>
-                            <div class="gg-chevron-left" />
+                <a class:list={['link', { disabled: previousYear === null }]} href={yearLink(previousYear)}>
+                    <div class="gg-chevron-left"></div>
                 </a>
-                    )
-                }
-                <a href={`/archivio/${selectedYear}`}>{selectedYear}</a>
-                {
-                    nextYear === null ? (
-                        <span class="link disabled">
-                            <div class="gg-chevron-right" />
-                        </span>
-                    ) : (
-                        <a href={`/archivio/${nextYear}`}>
-                            <div class="gg-chevron-right" />
+                <a href={currentYear === selectedYear ? '/' : `/archivio/${selectedYear}`}>{selectedYear}</a>
+                <a class:list={['link', { disabled: nextYear === null }]} href={yearLink(nextYear)}>
+                    <div class="gg-chevron-right"></div>
                 </a>
-                    )
-                }
             </div>
         </div>
         <div class="course-navigation">

src/pages/archivio/2024-2025/esempio.md

@@ -13,8 +13,8 @@ tutors:
 # image: /tutors/nome-cognome@square.jpg # altrimenti viene mostrato il placeholder
   contacts:
   - type: email
-    value: n.cognome@studenti.unipi.it
-- name: Nome Cognome 2
+    value: n.cognome2@studenti.unipi.it
+- name: Nome Cognome 3
 # image: /tutors/nome-cognome@square.jpg # altrimenti viene mostrato il placeholder
 ---
 

src/style.css

@@ -32,8 +32,7 @@ button,
     cursor: pointer;
 }
 
-a,
-.link {
+a {
     text-decoration: none;
     color: #a00;
 
@@ -119,8 +118,12 @@ code {
 
     column-gap: 2rem;
 
+    hyphens: none;
+    word-break: break-all;
+
     > .name {
         grid-area: name;
+        font-size: 1.5rem;
         padding-top: 0.5rem;
     }
 
@@ -142,6 +145,24 @@ code {
             margin: 0;
         }
     }
+
+    @media screen and (max-width: 50rem) {
+        column-gap: 1rem;
+
+        > .name {
+            font-size: 1.25rem;
+            padding-top: 0;
+        }
+
+        > .image {
+            width: 5rem;
+            height: 5rem;
+        }
+
+        > .contacts {
+            font-size: 16px;
+        }
+    }
 }
 
 /* Layout */
@@ -151,6 +172,7 @@ body {
     text-rendering: optimizeLegibility;
 
     font-size: 20px;
+
     line-height: 1;
     color: #333;
     background-color: #f3f0f0;
@@ -211,8 +233,7 @@ body {
             }
         }
 
-        a,
-        .link {
+        a {
             display: grid;
             place-content: center;
 
@@ -231,11 +252,8 @@ body {
             border-radius: 2px;
 
             &.disabled {
+                pointer-events: none;
                 color: #420000;
-
-                &:hover {
-                    background: none;
-                }
             }
         }
 
@@ -256,8 +274,7 @@ body {
                     justify-content: center;
                 }
 
-                a,
-                .link {
+                a {
                     font-size: 20px;
                     padding: 0.25rem;
                 }
@@ -305,8 +322,7 @@ body {
     footer {
         place-self: center;
 
-        a:has(img),
-        .link:has(img) {
+        a:has(img) {
             display: inline-block;
             background: none;
 
@@ -339,6 +355,8 @@ body {
         gap: 0;
         padding-bottom: 3rem;
 
+        font-size: 18px;
+
         > main {
             width: 100%;
             padding: 2rem 1rem 1rem 1rem;