From b275567a8d5c811af0ca4f100d66d9cbf7a69534 Mon Sep 17 00:00:00 2001 From: Antonio De Lucreziis Date: Wed, 2 Oct 2024 00:31:44 +0200 Subject: [PATCH] new: better header bar layout --- src/components/Header.astro | 116 +++++++++++------- .../{23-24 => 2023-2024}/algebra-1.md | 0 .../{23-24 => 2023-2024}/alla-pari.md | 1 + .../{23-24 => 2023-2024}/analisi-1.md | 0 .../{23-24 => 2023-2024}/aritmetica.md | 0 .../{23-24 => 2023-2024}/geometria-1.md | 0 .../archivio/{23-24 => 2023-2024}/index.md | 0 .../{24-25 => 2024-2025}/analisi-1.md | 0 .../archivio/{24-25 => 2024-2025}/index.md | 0 src/style.css | 103 +++++++++++----- src/styles/calendar.css | 24 ++++ src/styles/chevron-left.css | 23 ++++ src/styles/chevron-right.css | 23 ++++ 13 files changed, 215 insertions(+), 75 deletions(-) rename src/pages/archivio/{23-24 => 2023-2024}/algebra-1.md (100%) rename src/pages/archivio/{23-24 => 2023-2024}/alla-pari.md (87%) rename src/pages/archivio/{23-24 => 2023-2024}/analisi-1.md (100%) rename src/pages/archivio/{23-24 => 2023-2024}/aritmetica.md (100%) rename src/pages/archivio/{23-24 => 2023-2024}/geometria-1.md (100%) rename src/pages/archivio/{23-24 => 2023-2024}/index.md (100%) rename src/pages/archivio/{24-25 => 2024-2025}/analisi-1.md (100%) rename src/pages/archivio/{24-25 => 2024-2025}/index.md (100%) create mode 100644 src/styles/calendar.css create mode 100644 src/styles/chevron-left.css create mode 100644 src/styles/chevron-right.css diff --git a/src/components/Header.astro b/src/components/Header.astro index 4920a5b..28824e6 100644 --- a/src/components/Header.astro +++ b/src/components/Header.astro @@ -1,55 +1,85 @@ --- -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 { selectedCourseLabel, courses } = Astro.props; +const years = await Astro.glob('../pages/archivio/*/index.md') +const yearLabels = years.map(module => module.file.split('/').at(-2)).toSorted() + +/** Get the current year using the latest year label */ +const currentYear = yearLabels.at(-1) + +/** Get the selected year using the courses array */ 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 selectedYearIndex = yearLabels.indexOf(selectedYear) +const previousYear = selectedYearIndex > 0 ? yearLabels[selectedYearIndex - 1] : null +const nextYear = selectedYearIndex < yearLabels.length - 1 ? yearLabels[selectedYearIndex + 1] : null + +const isCurrentYear = currentYear == selectedYear +const coursesWithoutIndex = courses.filter(m => !m.file.includes('index.md')) ---

- Tutorato Matematica -

+ - + + +
+ { + coursesWithoutIndex.map(course => ( + + {course.frontmatter.title} + + )) + } +
+
diff --git a/src/pages/archivio/23-24/algebra-1.md b/src/pages/archivio/2023-2024/algebra-1.md similarity index 100% rename from src/pages/archivio/23-24/algebra-1.md rename to src/pages/archivio/2023-2024/algebra-1.md diff --git a/src/pages/archivio/23-24/alla-pari.md b/src/pages/archivio/2023-2024/alla-pari.md similarity index 87% rename from src/pages/archivio/23-24/alla-pari.md rename to src/pages/archivio/2023-2024/alla-pari.md index 110041a..8c5bde8 100644 --- a/src/pages/archivio/23-24/alla-pari.md +++ b/src/pages/archivio/2023-2024/alla-pari.md @@ -1,5 +1,6 @@ --- layout: ../../../layouts/MarkdownPage.astro +header-position: last title: Tutorato Alla Pari --- diff --git a/src/pages/archivio/23-24/analisi-1.md b/src/pages/archivio/2023-2024/analisi-1.md similarity index 100% rename from src/pages/archivio/23-24/analisi-1.md rename to src/pages/archivio/2023-2024/analisi-1.md diff --git a/src/pages/archivio/23-24/aritmetica.md b/src/pages/archivio/2023-2024/aritmetica.md similarity index 100% rename from src/pages/archivio/23-24/aritmetica.md rename to src/pages/archivio/2023-2024/aritmetica.md diff --git a/src/pages/archivio/23-24/geometria-1.md b/src/pages/archivio/2023-2024/geometria-1.md similarity index 100% rename from src/pages/archivio/23-24/geometria-1.md rename to src/pages/archivio/2023-2024/geometria-1.md diff --git a/src/pages/archivio/23-24/index.md b/src/pages/archivio/2023-2024/index.md similarity index 100% rename from src/pages/archivio/23-24/index.md rename to src/pages/archivio/2023-2024/index.md diff --git a/src/pages/archivio/24-25/analisi-1.md b/src/pages/archivio/2024-2025/analisi-1.md similarity index 100% rename from src/pages/archivio/24-25/analisi-1.md rename to src/pages/archivio/2024-2025/analisi-1.md diff --git a/src/pages/archivio/24-25/index.md b/src/pages/archivio/2024-2025/index.md similarity index 100% rename from src/pages/archivio/24-25/index.md rename to src/pages/archivio/2024-2025/index.md diff --git a/src/style.css b/src/style.css index f197d1b..04187a4 100644 --- a/src/style.css +++ b/src/style.css @@ -2,6 +2,10 @@ @import url('https://cdn.jsdelivr.net/gh/vsalvino/computer-modern@main/fonts/serif.css'); @import url('https://cdn.jsdelivr.net/gh/vsalvino/computer-modern@main/fonts/bright.css'); +@import url('./styles/chevron-left.css'); +@import url('./styles/chevron-right.css'); +@import url('./styles/calendar.css'); + *, *::before, *::after { @@ -28,7 +32,8 @@ button, cursor: pointer; } -a { +a, +.link { text-decoration: none; color: #a00; @@ -89,7 +94,7 @@ body { font-size: 20px; line-height: 1; color: #333; - background-color: #fffafa; + background-color: #f3f0f0; display: grid; grid-template-columns: 1fr; @@ -99,40 +104,59 @@ body { padding-bottom: 8rem; header { + user-select: none; + width: 100%; background-color: #a00; color: #fff; - display: flex; - flex-wrap: wrap; + display: grid; + grid-template-rows: auto auto; - place-content: center; - column-gap: 1rem; - row-gap: 1.5rem; + place-items: center; - align-content: end; - align-items: end; + gap: 2rem; padding: 6rem 1rem 1.25rem; box-shadow: 0 0 2rem rgba(0, 0, 0, 0.125); > h1 { - line-height: 0.775; + line-height: 1.125; font-family: 'Computer Modern Serif', sans-serif; + text-align: center; } - ul { - display: grid; - grid-auto-flow: column; + nav { + display: flex; + justify-content: space-between; - list-style: none; + width: 100%; + max-width: 64rem; - gap: 1rem; + .row { + display: grid; + grid-auto-flow: column; + gap: 1rem; + } + + > .course-navigation { + display: flex; + flex-wrap: wrap; + gap: 1rem; + + > .last { + order: 1; + } + } } - a { + a, + .link { + display: grid; + place-content: center; + color: #fff; padding: 0.5rem; @@ -146,18 +170,38 @@ body { font-size: 22px; border-radius: 2px; + + &.disabled { + color: #420000; + + &:hover { + background: none; + } + } } h1 > a { font-size: 42px; } - @media screen and (min-width: 50rem) { - > :nth-child(1) { - padding-left: 2rem; - } - > :nth-child(2) { - padding-right: 2rem; + @media screen and (max-width: 64rem) { + gap: 1rem; + padding: 2rem 0 1rem; + + nav { + flex-direction: column; + align-items: center; + gap: 1rem; + + > .course-navigation { + justify-content: center; + } + + a, + .link { + font-size: 18px; + padding: 0.25rem; + } } } } @@ -203,20 +247,15 @@ body { /* Mobile */ @media screen and (max-width: 50rem) { + table { + min-width: 50ch; + overflow-x: scroll; + } + 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; diff --git a/src/styles/calendar.css b/src/styles/calendar.css new file mode 100644 index 0000000..4e934cf --- /dev/null +++ b/src/styles/calendar.css @@ -0,0 +1,24 @@ +.gg-calendar, +.gg-calendar::before { + display: block; + box-sizing: border-box; +} +.gg-calendar { + position: relative; + transform: scale(var(--ggs, 1)); + width: 18px; + height: 18px; + border: 2px solid; + border-top: 4px solid; + border-radius: 3px; +} +.gg-calendar::before { + content: ""; + position: absolute; + width: 10px; + border-radius: 3px; + left: 2px; + background: currentColor; + height: 2px; + top: 2px; +} diff --git a/src/styles/chevron-left.css b/src/styles/chevron-left.css new file mode 100644 index 0000000..7028904 --- /dev/null +++ b/src/styles/chevron-left.css @@ -0,0 +1,23 @@ +.gg-chevron-left { + box-sizing: border-box; + position: relative; + display: inline-block; + transform: scale(var(--ggs, 1)); + width: 22px; + height: 22px; + border: 2px solid transparent; + border-radius: 100px; +} +.gg-chevron-left::after { + content: ''; + display: inline-block; + box-sizing: border-box; + position: absolute; + width: 10px; + height: 10px; + border-bottom: 2px solid; + border-left: 2px solid; + transform: rotate(45deg); + left: 6px; + top: 4px; +} diff --git a/src/styles/chevron-right.css b/src/styles/chevron-right.css new file mode 100644 index 0000000..0072644 --- /dev/null +++ b/src/styles/chevron-right.css @@ -0,0 +1,23 @@ +.gg-chevron-right { + box-sizing: border-box; + position: relative; + display: inline-block; + transform: scale(var(--ggs, 1)); + width: 22px; + height: 22px; + border: 2px solid transparent; + border-radius: 100px; +} +.gg-chevron-right::after { + content: ''; + display: inline-block; + box-sizing: border-box; + position: absolute; + width: 10px; + height: 10px; + border-bottom: 2px solid; + border-right: 2px solid; + transform: rotate(-45deg); + right: 6px; + top: 4px; +}