les-particules
/
les-particules-org
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: met une page contact à part

main
Jalil Arfaoui 2023-09-27 16:56:51 +02:00
parent c77a9ccdc9
commit bec9828f68
3 changed files with 73 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/Card.astro
View File

@ -3,12 +3,13 @@ export interface Props {
title: string;
href: string;
target: string;
span?: boolean
}
const { href, target, title} = Astro.props;
const { href, target, title, span} = Astro.props;
---
<li class="link-card">
<li class="link-card" style={span ? "grid-column: 1/-1" : ""}>
<a href={href} target={target}>
<h2>
{title}

58
src/pages/contact.astro Normal file
View File

@ -0,0 +1,58 @@
---
import Layout from '../layouts/Layout.astro'
import Card from "../components/Card.astro";
---
<Layout title="Contact">
<main>
<a href="../" style="text-decoration: none; color: black; display: inline">
<img alt="Logo" src="/logo_les-particules_noir.jpg" style="width:80px; vertical-align: middle; display: inline" />
</a>
<h1 style="display: inline; margin-left: 0.2em">
Contact
</h1>
<ul role="list" class="link-card-grid">
<Card
target="_blank"
href="mailto:contact@les-particules.org"
title="Contact"
>
Écrivez-nous
</Card>
<Card
href="https://www.facebook.com/LesParticules"
target="_blank"
title="Facebook"
>
Retrouvez-nous sur Facebook
</Card>
<Card
href="https://www.instagram.com/les_particules/"
target="_blank"
title="Instagram"
>
Retrouvez-nous sur Instagram
</Card>
</ul>
</main>
</Layout>
<style>
main {
margin: auto;
padding: 1.5rem;
max-width: 60ch;
}
h1 {
font-size: 3rem;
font-weight: 800;
margin: 0;
}
.link-card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(12ch, 1fr));
gap: 1rem;
padding: 0;
}
</style>

37
src/pages/index.astro
View File

@ -6,7 +6,7 @@ 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" />
<img alt="Logo" src="/logo_les-particules_noir.jpg" style="width:80px; vertical-align: middle" />
Les particules
</h1>
<p class="instructions">
@ -20,6 +20,15 @@ import Card from '../components/Card.astro';
</ul>
</div>
<ul role="list" class="link-card-grid">
<Card
title="Les Particules Fines"
href="/docs/flyer_cours_impro_adultes_debutant.e.s.pdf"
target="_blank"
span={true}
>
Cours d’impro adultes débutant·e·s<br/>
<strong>Début des cours d’essai en octobre !</strong>
</Card>
<Card
href="./inscription-newsletter"
title="Newsletter"
@ -27,32 +36,10 @@ import Card from '../components/Card.astro';
Tous nos évènements directement dans votre boite aux lettres !
</Card>
<Card
title="Les Particules Fines"
href="/docs/flyer_cours_impro_adultes_debutant.e.s.pdf"
target="_blank"
>
Cours d’impro adultes débutant·e·s<br/>
<strong>Début des cours d’essai en octobre !</strong>
</Card>
<Card
href="mailto:contact@les-particules.org"
href="/contact"
title="Contact"
>
Écrivez-nous
</Card>
<Card
href="https://www.facebook.com/LesParticules"
target="_blank"
title="Facebook"
>
Retrouvez-nous sur Facebook
</Card>
<Card
href="https://www.instagram.com/les_particules/"
target="_blank"
title="Instagram"
>
Retrouvez-nous sur Instagram
Écrivez-nous ou suivez-nous sur les réseaux
</Card>
</ul>
</main>