From a573218bece738f1b34fa786a6b7c59ec4366739 Mon Sep 17 00:00:00 2001
From: Antonio De Lucreziis <antonio.delucreziis@gmail.com>
Date: Tue, 3 Sep 2024 22:32:58 +0200
Subject: [PATCH] minor tweaks, mobile friendly base layout

---
 src/components/Header.astro | 83 +++++++++++++++++--------------------
 src/style.css               | 73 ++++++++++++++++++++++++--------
 2 files changed, 92 insertions(+), 64 deletions(-)

diff --git a/src/components/Header.astro b/src/components/Header.astro
index 4fa2b7b..70c1c2d 100644
--- a/src/components/Header.astro
+++ b/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) => (
-                    <li class:list={{ active: year === selectedYear }}>
-                        <a href={`/archivio/${year}`}>{year}</a>
-                    </li>
-                ))
-            }
-            <li class:list={{ active: currentYear === selectedYear }}>
-                <a href={"/"}>{currentYear}</a>
-            </li>
-        </ul>
-        <ul>
-            {
-                coursesWithoutIndex.map((course) => (
-                    <li
-                        class:list={{
-                            active: selectedCourseLabel === course.file.split("/").at(-1),
-                        }}
-                    >
-                        <a
-                            href={
-                                isCurrentYear
-                                    ? "/" + course.url.split("/").at(-1)
-                                    : course.url
-                            }
-                        >
-                            {course.frontmatter.title}
-                        </a>
-                    </li>
-                ))
-            }
-        </ul>
-    </nav>
+    <ul>
+        {
+            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>
+        </li>
+    </ul>
+    <ul>
+        {
+            coursesWithoutIndex.map(course => (
+                <li
+                    class:list={{
+                        active: selectedCourseLabel === course.file.split('/').at(-1),
+                    }}
+                >
+                    <a href={isCurrentYear ? '/' + course.url.split('/').at(-1) : course.url}>
+                        {course.frontmatter.title}
+                    </a>
+                </li>
+            ))
+        }
+    </ul>
 </header>
diff --git a/src/style.css b/src/style.css
index 2d3eb26..f197d1b 100644
--- a/src/style.css
+++ b/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,19 +123,13 @@ body {
             font-family: 'Computer Modern Serif', sans-serif;
         }
 
-        nav {
+        ul {
             display: grid;
-            grid-template-columns: auto auto;
-            gap: 4rem;
-
-            ul {
-                display: grid;
-                grid-auto-flow: column;
+            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;
+        }
+    }
+}