a.delucreziis/tutorato
1
0
Fork 0
forked from phc/tutorato
Code Pull Requests Activity

new: better header bar layout

Browse Source
This commit is contained in:
aziis98
2024-10-02 00:31:44 +02:00
parent 7ea4885a57
commit b275567a8d
13 changed files with 220 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Header.astro
+76 -46
View File
@@ -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'))
---
<header>
<h1>
<a href="/"> Tutorato Matematica</a>
<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>
<a href="/">Tutorato Matematica</a>
</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> -->
<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>
)
}
<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>
)
}
</div>
</div>
<div class="course-navigation">
{
coursesWithoutIndex.map(course => (
<a
class:list={{
active: selectedCourseLabel === course.file.split('/').at(-1),
last: course.frontmatter['header-position'] === 'last',
}}
href={isCurrentYear ? '/' + course.url.split('/').at(-1) : course.url}
>
{course.frontmatter.title}
</a>
))
}
</div>
</nav>
</header>
src/pages/archivio/23-24/algebra-1.md → src/pages/archivio/2023-2024/algebra-1.md
View File
src/pages/archivio/23-24/alla-pari.md → src/pages/archivio/2023-2024/alla-pari.md
+1
View File
@@ -1,5 +1,6 @@
---
layout: ../../../layouts/MarkdownPage.astro
header-position: last
title: Tutorato Alla Pari
---
src/pages/archivio/23-24/analisi-1.md → src/pages/archivio/2023-2024/analisi-1.md
View File
src/pages/archivio/23-24/aritmetica.md → src/pages/archivio/2023-2024/aritmetica.md
View File
src/pages/archivio/23-24/geometria-1.md → src/pages/archivio/2023-2024/geometria-1.md
View File
src/pages/archivio/23-24/index.md → src/pages/archivio/2023-2024/index.md
View File
src/pages/archivio/24-25/analisi-1.md → src/pages/archivio/2024-2025/analisi-1.md
View File
src/pages/archivio/24-25/index.md → src/pages/archivio/2024-2025/index.md
View File
src/style.css
+73 -34
View File
@@ -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 {
nav {
display: flex;
justify-content: space-between;
width: 100%;
max-width: 64rem;
.row {
display: grid;
grid-auto-flow: column;
gap: 1rem;
}
> .course-navigation {
display: flex;
flex-wrap: wrap;
gap: 1rem;
> .last {
order: 1;
}
}
}
a,
.link {
display: grid;
grid-auto-flow: column;
place-content: center;
list-style: none;
gap: 1rem;
}
a {
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;
src/styles/calendar.css
+24
View File
@@ -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;
}
src/styles/chevron-left.css
+23
View File
@@ -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;
}
src/styles/chevron-right.css
+23
View File
@@ -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;
}