les-particules-org/src/pages/index.astro

99 lines
2.2 KiB
Text
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

---
import Layout from '../layouts/Layout.astro';
import Card from '../components/Card.astro';
---
<Layout title="Les Particules">
<main>
<h1>
<img alt="Logo" src="/logo_les-particules_noir.jpg" style="width:80px; vertical-align: middle" />
Les particules
</h1>
<p class="instructions">
La troupe d'improvisation théâtrale chatouilleuse, curieuse, créative et autogérée<br/>
📌 Albi, Occitanie
</p>
<div class="dates">
<span class="title">Retrouvez-nous prochainement <span>&rarr;</span></span>
<ul>
<li>28 octobre 2023 à 19h30 au <a target="_blank" href="https://cartessurtable.wixsite.com/cartes-sur-table">Cartes sur Table</a> à Gaillac</li>
<li>12 novembre 2023 à 18h30 au <a target="_blank" href="https://lescenophage.org/">Scénophage</a> à Gaillac</li>
</ul>
</div>
<ul role="list" class="link-card-grid">
<Card
title="Les Particules Fines"
href="/fines"
span={true}
>
Cours dimpro adultes débutant·e·s<br/>
<strong>Cest complet !</strong>
</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>
</main>
</Layout>
<style>
main {
margin: auto;
padding: 1.5rem;
max-width: 60ch;
}
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;
}
.dates {
color:#111;
font-size: 1.25rem;
line-height: 1.4;
}
.dates .title {
font-weight: bold;
opacity: 0.8;
}
.dates ul {
list-style: none;
}
.dates li {
color:#444;
}
</style>