minor tweaks, mobile friendly base layout

src/components/Header.astro

@@ -1,17 +1,16 @@
 ---
-const years = await Astro.glob("../pages/archivio/*/index.md");
-const yearLabels = years.map((module) => module.file.split("/").at(-2)).toSorted();
-const currentYear = yearLabels.at(-1);
+const years = await Astro.glob('../pages/archivio/*/index.md')
+const yearLabels = years.map(module => module.file.split('/').at(-2)).toSorted()
+const currentYear = yearLabels.at(-1)
 
-const { selectedCourseLabel, courses } = Astro.props;
-const title = courses.find((module) => module.file.includes("index.md")).frontmatter
-    .title;
+const { selectedCourseLabel, courses } = Astro.props
+const title = courses.find(module => module.file.includes('index.md')).frontmatter.title
 const selectedYear = courses
-    .find((module) => module.file.includes("index.md"))
-    .file.split("/")
-    .at(-2);
-const isCurrentYear = currentYear == selectedYear;
-const coursesWithoutIndex = courses.filter((m) => !m.file.includes("index.md"));
+    .find(module => module.file.includes('index.md'))
+    .file.split('/')
+    .at(-2)
+const isCurrentYear = currentYear == selectedYear
+const coursesWithoutIndex = courses.filter(m => !m.file.includes('index.md'))
 ---
 
 <header>
@@ -24,39 +23,31 @@ const coursesWithoutIndex = courses.filter((m) => !m.file.includes("index.md"));
             )
         }
     </h1>
-    <nav>
     <ul>
         {
-                yearLabels.slice(0, -1).map((year) => (
+            yearLabels.slice(0, -1).map(year => (
                 <li class:list={{ active: year === selectedYear }}>
                     <a href={`/archivio/${year}`}>{year}</a>
                 </li>
             ))
         }
         <li class:list={{ active: currentYear === selectedYear }}>
-                <a href={"/"}>{currentYear}</a>
+            <a href={'/'}>{currentYear}</a>
         </li>
     </ul>
     <ul>
         {
-                coursesWithoutIndex.map((course) => (
+            coursesWithoutIndex.map(course => (
                 <li
                     class:list={{
-                            active: selectedCourseLabel === course.file.split("/").at(-1),
+                        active: selectedCourseLabel === course.file.split('/').at(-1),
                     }}
                 >
-                        <a
-                            href={
-                                isCurrentYear
-                                    ? "/" + course.url.split("/").at(-1)
-                                    : course.url
-                            }
-                        >
+                    <a href={isCurrentYear ? '/' + course.url.split('/').at(-1) : course.url}>
                         {course.frontmatter.title}
                     </a>
                 </li>
             ))
         }
     </ul>
-    </nav>
 </header>

src/style.css

@@ -66,6 +66,16 @@ table {
     th {
         font-weight: bold;
     }
+
+    @media screen and (max-width: 50rem) {
+        width: 100%;
+        max-width: auto;
+
+        th,
+        td {
+            min-width: auto;
+        }
+    }
 }
 
 /* Components */
@@ -76,7 +86,7 @@ body {
     font-family: 'Computer Modern Serif', sans-serif;
     text-rendering: optimizeLegibility;
 
-    font-size: 18px;
+    font-size: 20px;
     line-height: 1;
     color: #333;
     background-color: #fffafa;
@@ -89,22 +99,22 @@ body {
     padding-bottom: 8rem;
 
     header {
-        height: 8rem;
         width: 100%;
 
         background-color: #a00;
         color: #fff;
 
-        display: grid;
-        grid-template-columns: auto auto;
-        place-content: center;
+        display: flex;
+        flex-wrap: wrap;
 
-        gap: 1rem;
+        place-content: center;
+        column-gap: 1rem;
+        row-gap: 1.5rem;
 
         align-content: end;
         align-items: end;
 
-        padding-bottom: 1.25rem;
+        padding: 6rem 1rem 1.25rem;
 
         box-shadow: 0 0 2rem rgba(0, 0, 0, 0.125);
 
@@ -113,11 +123,6 @@ body {
             font-family: 'Computer Modern Serif', sans-serif;
         }
 
-        nav {
-            display: grid;
-            grid-template-columns: auto auto;
-            gap: 4rem;
-
         ul {
             display: grid;
             grid-auto-flow: column;
@@ -126,7 +131,6 @@ body {
 
             gap: 1rem;
         }
-        }
 
         a {
             color: #fff;
@@ -147,6 +151,15 @@ body {
         h1 > a {
             font-size: 42px;
         }
+
+        @media screen and (min-width: 50rem) {
+            > :nth-child(1) {
+                padding-left: 2rem;
+            }
+            > :nth-child(2) {
+                padding-right: 2rem;
+            }
+        }
     }
 
     main {
@@ -163,7 +176,7 @@ body {
 
         box-shadow: 0 0 2rem rgba(0, 0, 0, 0.1);
 
-        text-align: justify;
+        /* text-align: justify; */
         hyphens: auto;
 
         line-height: 1.65;
@@ -186,3 +199,27 @@ body {
         }
     }
 }
+
+/* Mobile */
+
+@media screen and (max-width: 50rem) {
+    body {
+        gap: 3rem;
+        padding-bottom: 3rem;
+
+        > header {
+            padding: 3rem 1rem 1.25rem;
+
+            > ul {
+                display: flex;
+                flex-wrap: wrap;
+                justify-content: center;
+            }
+        }
+
+        > main {
+            width: calc(100vw - 2rem);
+            padding: 1rem;
+        }
+    }
+}