minor tweaks, mobile friendly base layout

src/components/Header.astro

@@ -1,17 +1,16 @@
 ---
-const years = await Astro.glob("../pages/archivio/*/index.md");
+const years = await Astro.glob('../pages/archivio/*/index.md')
-const yearLabels = years.map((module) => module.file.split("/").at(-2)).toSorted();
+const yearLabels = years.map(module => module.file.split('/').at(-2)).toSorted()
-const currentYear = yearLabels.at(-1);
+const currentYear = yearLabels.at(-1)
 
-const { selectedCourseLabel, courses } = Astro.props;
+const { selectedCourseLabel, courses } = Astro.props
-const title = courses.find((module) => module.file.includes("index.md")).frontmatter
+const title = courses.find(module => module.file.includes('index.md')).frontmatter.title
-    .title;
 const selectedYear = courses
-    .find((module) => module.file.includes("index.md"))
+    .find(module => module.file.includes('index.md'))
-    .file.split("/")
+    .file.split('/')
-    .at(-2);
+    .at(-2)
-const isCurrentYear = currentYear == selectedYear;
+const isCurrentYear = currentYear == selectedYear
-const coursesWithoutIndex = courses.filter((m) => !m.file.includes("index.md"));
+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>
-        <ul>
+        {
-            {
+            yearLabels.slice(0, -1).map(year => (
-                yearLabels.slice(0, -1).map((year) => (
+                <li class:list={{ active: year === selectedYear }}>
-                    <li class:list={{ active: year === selectedYear }}>
+                    <a href={`/archivio/${year}`}>{year}</a>
-                        <a href={`/archivio/${year}`}>{year}</a>
+                </li>
-                    </li>
+            ))
-                ))
+        }
-            }
+        <li class:list={{ active: currentYear === selectedYear }}>
-            <li class:list={{ active: currentYear === selectedYear }}>
+            <a href={'/'}>{currentYear}</a>
-                <a href={"/"}>{currentYear}</a>
+        </li>
-            </li>
+    </ul>
-        </ul>
+    <ul>
-        <ul>
+        {
-            {
+            coursesWithoutIndex.map(course => (
-                coursesWithoutIndex.map((course) => (
+                <li
-                    <li
+                    class:list={{
-                        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
+                        {course.frontmatter.title}
-                            href={
+                    </a>
-                                isCurrentYear
+                </li>
-                                    ? "/" + course.url.split("/").at(-1)
+            ))
-                                    : course.url
+        }
-                            }
+    </ul>
-                        >
-                            {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;
+        display: flex;
-        grid-template-columns: auto auto;
+        flex-wrap: wrap;
-        place-content: center;
 
-        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,19 +123,13 @@ body {
             font-family: 'Computer Modern Serif', sans-serif;
         }
 
-        nav {
+        ul {
             display: grid;
-            grid-template-columns: auto auto;
+            grid-auto-flow: column;
-            gap: 4rem;
-
-            ul {
-                display: grid;
-                grid-auto-flow: column;
 
-                list-style: none;
+            list-style: none;
 
-                gap: 1rem;
+            gap: 1rem;
-            }
         }
 
         a {
@@ -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;
+        }
+    }
+}