97 lines
No EOL
2.2 KiB
Text
97 lines
No EOL
2.2 KiB
Text
---
|
|
import Layout from '../layouts/Layout.astro';
|
|
import { fetchEvenementsPassés } from "../lib/contentful";
|
|
import GrilleSpectaclesPassés from "../components/GrilleSpectaclesPassés.astro";
|
|
|
|
export const prerender = false
|
|
|
|
const evenementsPassés = await fetchEvenementsPassés()
|
|
---
|
|
|
|
<Layout title="Nos spectacles passés - Les Particules">
|
|
<main>
|
|
<a href="../" style="text-decoration: none; color: black; display: inline">
|
|
<img alt="Logo" src="/les-particules-bleu-sur-noir-pastille.svg" style="width:80px; vertical-align: middle; display: inline" />
|
|
</a>
|
|
<h1 style="display: inline; margin-left: 0.2em">
|
|
Nos spectacles passés
|
|
</h1>
|
|
|
|
{evenementsPassés.length > 0 ? (
|
|
<div class="dates">
|
|
<p class="intro">
|
|
Découvrez les spectacles que nous avons eu le plaisir de jouer !
|
|
</p>
|
|
<GrilleSpectaclesPassés evenements={evenementsPassés} afficherLienVoirTout={false} limite={999} />
|
|
</div>
|
|
) : (
|
|
<div class="dates">
|
|
<p class="intro">
|
|
Aucun spectacle passé pour le moment. Revenez bientôt !
|
|
</p>
|
|
</div>
|
|
)}
|
|
|
|
<div class="albums-link">
|
|
<a href="https://www.flickr.com/photos/les-particules/albums/" target="_blank" class="voir-tous-albums">
|
|
Voir tous nos albums photos →
|
|
</a>
|
|
</div>
|
|
</main>
|
|
</Layout>
|
|
|
|
<style>
|
|
main {
|
|
margin: auto;
|
|
padding: 1.5rem;
|
|
max-width: none;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 2rem;
|
|
font-weight: 700;
|
|
margin: 0.5em 0;
|
|
}
|
|
|
|
.dates {
|
|
line-height: 1.6;
|
|
margin: 1rem 0;
|
|
border: 1px solid rgba(var(--accent), 25%);
|
|
background-color: white;
|
|
padding: 1rem;
|
|
border-radius: 0.4rem;
|
|
box-shadow: 0.2em 0.2em 1em black;
|
|
}
|
|
|
|
.intro {
|
|
font-size: 1.1em;
|
|
margin-bottom: 1.5em;
|
|
color: rgb(68,68,68);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.albums-link {
|
|
text-align: center;
|
|
margin: 3rem 0 2rem;
|
|
}
|
|
|
|
.voir-tous-albums {
|
|
display: inline-block;
|
|
padding: 0.75rem 1.5rem;
|
|
background-color: orange;
|
|
color: white;
|
|
text-decoration: none;
|
|
border: black solid 2px;
|
|
border-radius: 0.4rem;
|
|
font-weight: bold;
|
|
box-shadow: 0.2em 0.2em 0.5em rgba(0,0,0,0.3);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.voir-tous-albums:hover {
|
|
background-color: darkorange;
|
|
transform: translateY(-2px);
|
|
box-shadow: 0.3em 0.3em 0.7em rgba(0,0,0,0.4);
|
|
}
|
|
|
|
</style> |