feat: met une page contact à part

src/components/Card.astro

@@ -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}

src/pages/contact.astro

@@ -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>

src/pages/index.astro

@@ -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="/contact"
-				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"
 				title="Contact"
 			>
-				Écrivez-nous
+				Écrivez-nous ou suivez-nous sur les réseaux
-			</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>