forked from phc/tutorato
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
|
||||
.map((module) => module.file.split("/").at(-2))
|
||||
.map(module => module.file.split('/').at(-2))
|
||||
.toSorted()
|
||||
.at(-1);
|
||||
.at(-1)
|
||||
const {
|
||||
file,
|
||||
frontmatter: { title },
|
||||
} = Astro.props;
|
||||
const selectedCourseLabel = file.split("/").at(-1);
|
||||
} = Astro.props
|
||||
const selectedCourseLabel = file.split('/').at(-1)
|
||||
|
||||
const allCourses = await Astro.glob(`../pages/archivio/*/*`);
|
||||
const courses = allCourses.filter((module) =>
|
||||
module.file.includes(file.split("/").at(-2)),
|
||||
);
|
||||
const allCourses = await Astro.glob(`../pages/archivio/*/*`)
|
||||
const courses = allCourses.filter(module => module.file.includes(file.split('/').at(-2)))
|
||||
---
|
||||
|
||||
<Base title={title} courses={courses} selectedCourseLabel={selectedCourseLabel}>
|
||||
<h1>{title}</h1>
|
||||
<slot />
|
||||
</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