feat: aggiunto prototipo di stile
parent
adda01cf86
commit
a12f97e8d2
@ -1,23 +1,22 @@
|
|||||||
---
|
---
|
||||||
import Base from "./Base.astro";
|
import Base from './Base.astro'
|
||||||
|
|
||||||
const years = await Astro.glob("../pages/archivio/*/index.md");
|
const years = await Astro.glob('../pages/archivio/*/index.md')
|
||||||
const currentYear = years
|
const currentYear = years
|
||||||
.map((module) => module.file.split("/").at(-2))
|
.map(module => module.file.split('/').at(-2))
|
||||||
.toSorted()
|
.toSorted()
|
||||||
.at(-1);
|
.at(-1)
|
||||||
const {
|
const {
|
||||||
file,
|
file,
|
||||||
frontmatter: { title },
|
frontmatter: { title },
|
||||||
} = Astro.props;
|
} = Astro.props
|
||||||
const selectedCourseLabel = file.split("/").at(-1);
|
const selectedCourseLabel = file.split('/').at(-1)
|
||||||
|
|
||||||
const allCourses = await Astro.glob(`../pages/archivio/*/*`);
|
const allCourses = await Astro.glob(`../pages/archivio/*/*`)
|
||||||
const courses = allCourses.filter((module) =>
|
const courses = allCourses.filter(module => module.file.includes(file.split('/').at(-2)))
|
||||||
module.file.includes(file.split("/").at(-2)),
|
|
||||||
);
|
|
||||||
---
|
---
|
||||||
|
|
||||||
<Base title={title} courses={courses} selectedCourseLabel={selectedCourseLabel}>
|
<Base title={title} courses={courses} selectedCourseLabel={selectedCourseLabel}>
|
||||||
|
<h1>{title}</h1>
|
||||||
<slot />
|
<slot />
|
||||||
</Base>
|
</Base>
|
||||||
|
|||||||
@ -0,0 +1,188 @@
|
|||||||
|
@import url('https://cdn.jsdelivr.net/gh/vsalvino/computer-modern@main/fonts/sans.css');
|
||||||
|
@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');
|
||||||
|
|
||||||
|
*,
|
||||||
|
*::before,
|
||||||
|
*::after {
|
||||||
|
font-family: inherit;
|
||||||
|
color: inherit;
|
||||||
|
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
min-height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
button,
|
||||||
|
.button {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
color: #a00;
|
||||||
|
|
||||||
|
padding: 0.125rem 2px;
|
||||||
|
border-radius: 4px;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: #a00;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4 {
|
||||||
|
font-weight: 400;
|
||||||
|
font-family: 'Computer Modern Bright', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
table {
|
||||||
|
margin: 0 auto;
|
||||||
|
|
||||||
|
width: 30rem;
|
||||||
|
max-width: 100%;
|
||||||
|
border-collapse: collapse;
|
||||||
|
|
||||||
|
th,
|
||||||
|
td {
|
||||||
|
border: 1px solid #333;
|
||||||
|
padding: 0.25rem;
|
||||||
|
min-width: 6rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
th {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Components */
|
||||||
|
|
||||||
|
/* Layout */
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: 'Computer Modern Serif', sans-serif;
|
||||||
|
text-rendering: optimizeLegibility;
|
||||||
|
|
||||||
|
font-size: 18px;
|
||||||
|
line-height: 1;
|
||||||
|
color: #333;
|
||||||
|
background-color: #fffafa;
|
||||||
|
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
grid-template-rows: auto 1fr;
|
||||||
|
|
||||||
|
gap: 8rem;
|
||||||
|
padding-bottom: 8rem;
|
||||||
|
|
||||||
|
header {
|
||||||
|
height: 8rem;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
background-color: #a00;
|
||||||
|
color: #fff;
|
||||||
|
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: auto auto;
|
||||||
|
place-content: center;
|
||||||
|
|
||||||
|
gap: 1rem;
|
||||||
|
|
||||||
|
align-content: end;
|
||||||
|
align-items: end;
|
||||||
|
|
||||||
|
padding-bottom: 1.25rem;
|
||||||
|
|
||||||
|
box-shadow: 0 0 2rem rgba(0, 0, 0, 0.125);
|
||||||
|
|
||||||
|
> h1 {
|
||||||
|
line-height: 0.775;
|
||||||
|
font-family: 'Computer Modern Serif', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: auto auto;
|
||||||
|
gap: 4rem;
|
||||||
|
|
||||||
|
ul {
|
||||||
|
display: grid;
|
||||||
|
grid-auto-flow: column;
|
||||||
|
|
||||||
|
list-style: none;
|
||||||
|
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: #fff;
|
||||||
|
|
||||||
|
padding: 0.5rem;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: #fff;
|
||||||
|
color: #a00;
|
||||||
|
}
|
||||||
|
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 22px;
|
||||||
|
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 > a {
|
||||||
|
font-size: 42px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
width: 50rem;
|
||||||
|
max-width: 100%;
|
||||||
|
|
||||||
|
background-color: #fff;
|
||||||
|
border: 4px solid #a00;
|
||||||
|
border-radius: 2px;
|
||||||
|
|
||||||
|
padding: 2rem;
|
||||||
|
|
||||||
|
place-self: center;
|
||||||
|
|
||||||
|
box-shadow: 0 0 2rem rgba(0, 0, 0, 0.1);
|
||||||
|
|
||||||
|
text-align: justify;
|
||||||
|
hyphens: auto;
|
||||||
|
|
||||||
|
line-height: 1.65;
|
||||||
|
|
||||||
|
> * + * {
|
||||||
|
margin-top: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul {
|
||||||
|
list-style: disc;
|
||||||
|
padding-left: 2rem;
|
||||||
|
|
||||||
|
li {
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
li + li {
|
||||||
|
margin-top: 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue