94 lines
2 KiB
Text
94 lines
2 KiB
Text
---
|
||
import Layout from '../layouts/Layout.astro';
|
||
import Card from '../components/Card.astro';
|
||
import { fetchEvenements } from "../lib/contentful";
|
||
import Evenement from "../components/Evenement.astro";
|
||
|
||
export const prerender = false
|
||
|
||
const evenements = await fetchEvenements()
|
||
|
||
---
|
||
|
||
<Layout title="Les Particules">
|
||
<p class="instructions">
|
||
La troupe d'improvisation théâtrale chatouilleuse, curieuse, créative et autogérée<br/>
|
||
📌 Albi, Occitanie
|
||
</p>
|
||
<div class="dates">
|
||
<div class="prochainement">Retrouvez-nous prochainement <span>→</span></div>
|
||
<div class="evenements">
|
||
{evenements.map(evenement => (
|
||
<Evenement evenement={evenement} />
|
||
))}
|
||
</div>
|
||
</div>
|
||
<ul role="list" class="link-card-grid">
|
||
<Card
|
||
title="Les Particules Fines"
|
||
href="/fines"
|
||
>
|
||
Cours d’impro adultes débutant·e·s
|
||
</Card>
|
||
<Card
|
||
href="./inscription-newsletter"
|
||
title="Newsletter"
|
||
>
|
||
Tous nos évènements directement dans votre boite aux lettres !
|
||
</Card>
|
||
<Card
|
||
href="/contact"
|
||
title="Contact"
|
||
>
|
||
Écrivez-nous ou suivez-nous sur les réseaux
|
||
</Card>
|
||
</ul>
|
||
</Layout>
|
||
|
||
<style>
|
||
h1 {
|
||
font-size: 3rem;
|
||
font-weight: 800;
|
||
margin: 0;
|
||
}
|
||
.text-gradient {
|
||
background-image: var(--accent-gradient);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
background-size: 400%;
|
||
background-position: 0;
|
||
}
|
||
.instructions, .dates {
|
||
line-height: 1.6;
|
||
margin: 1rem 0;
|
||
border: 1px solid rgba(var(--accent), 25%);
|
||
background-color: white;
|
||
padding: 1rem;
|
||
border-radius: 0.4rem;
|
||
}
|
||
.instructions strong {
|
||
color: rgb(var(--accent));
|
||
}
|
||
.link-card-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(24ch, 1fr));
|
||
gap: 1rem;
|
||
padding: 0;
|
||
}
|
||
.evenements {
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
.dates {
|
||
box-shadow: 0.2em 0.2em 1em black;
|
||
|
||
.prochainement {
|
||
font-size: 1.2em;
|
||
font-weight: 700;
|
||
margin-bottom: 1em;
|
||
}
|
||
}
|
||
.dates ul {
|
||
list-style: none;
|
||
}
|
||
</style>
|