footer: travail en cours

src/components/footer/index.jsx

@@ -0,0 +1,31 @@
+import React from "react";
+import { Link } from "gatsby";
+
+import "./index.scss";
+
+const Footer = () => {
+	return (
+		<footer className="footer">
+			<ul className="footer-list">
+				<li>
+					<div className="footer-contact">
+						<Link to="/contact">Nous écrire</Link>
+						<p>notre@email.com</p>
+					</div>
+				</li>
+				<li>
+					<div className="footer-about">
+						<p>
+							CLI est une association à but non lucratif spécialisée dans le
+							numérique. <br /> Nous fournissons une large variété de
+							prestations numériques.
+						</p>
+					</div>
+				</li>
+				<li>Mentions légales</li>
+			</ul>
+		</footer>
+	);
+};
+
+export default Footer;

src/components/footer/index.scss

@@ -0,0 +1,51 @@
+@import "../../scss/main.scss";
+
+.footer {
+	margin-top: 50px;
+	margin-left: auto;
+	margin-right: auto;
+	height: 70px;
+	max-width: 1200px;
+	color: grey;
+
+	a {
+		color: grey;
+	}
+
+	.footer-list {
+		list-style: none;
+		text-align: center;
+		display: flex;
+		flex-direction: row;
+		justify-content: space-evenly;
+
+		li {
+			padding-left: 15px;
+			padding-right: 15px;
+		}
+
+		.footer-contact > * {
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+		}
+
+		.footer-about {
+			width: 40vw;
+		}
+	}
+}
+
+@media screen and (max-width: 992px) {
+	.footer-list {
+		display: flex;
+		flex-direction: column;
+	}
+}
+
+@media screen and (max-width: 600px) {
+	.footer-list {
+		display: flex;
+		flex-direction: column;
+	}
+}

src/components/header/index.jsx

@@ -5,11 +5,11 @@ import "./index.scss";
 
 const Header = () => {
 	return (
-		<div className="headers">
-			<h1 className="headers-title">
+		<div className="header">
+			<h1 className="header-title">
 				<Link to="/">CLI</Link>
 			</h1>
-			<h2 className="headers-subtitle">
+			<h2 className="header-subtitle">
 				Coopérative Strasbourgeoise du numérique
 			</h2>
 			<div className="container">

src/components/header/index.scss

@@ -1,4 +1,6 @@
-.headers {
+@import "../../scss/main.scss";
+
+.header {
 	display: flex;
 	flex-direction: column;
 	text-align: center;
@@ -6,13 +8,13 @@
 	margin-bottom: 30px;
 	font-family: "Cutive Mono";
 
-	.headers-title {
+	.header-title {
 		margin: 0;
 		font-size: 3rem;
 		font-weight: normal;
 	}
 
-	.headers-subtitle {
+	.header-subtitle {
 		margin-top: 15px;
 		margin-bottom: 70px;
 		font-size: 1.7rem;

src/pages/contact.jsx

@@ -2,13 +2,17 @@ import * as React from "react";
 
 import Header from "../components/header";
 import ContactForm from "../components/contactForm";
+import Footer from "../components/footer";
 
 const Contact = () => {
 	return (
 		<main>
 			<title>Nous contacter</title>
 			<Header />
-			<ContactForm />
+			<div className="pages-content">
+				<ContactForm />
+			</div>
+			<Footer />
 		</main>
 	);
 };

src/pages/index.jsx

@@ -3,8 +3,8 @@ import { Link } from "gatsby";
 
 import Header from "../components/header";
 import RealisationCard from "../components/realisationCard";
-
 import "../scss/index.scss";
+import Footer from "../components/footer";
 
 const IndexPage = () => {
 	return (
@@ -53,6 +53,7 @@ const IndexPage = () => {
 					</div>
 				</section>
 			</div>
+			<Footer />
 		</main>
 	);
 };

src/pages/services.jsx

@@ -1,15 +1,17 @@
 import * as React from "react";
 
 import Header from "../components/header";
+import Footer from "../components/footer";
 
 const Service = () => {
 	return (
 		<main>
 			<title>Nos prestations</title>
 			<Header />
-			<div>
-				<p>Nos prestations</p>
+			<div className="pages-content">
+				<h3>Nos prestations</h3>
 			</div>
+			<Footer />
 		</main>
 	);
 };

src/pages/status.jsx

@@ -1,6 +1,7 @@
 import * as React from "react";
 import "../scss/index.scss";
 import Header from "../components/header";
+import Footer from "../components/footer";
 
 const Status = () => {
 	return (
@@ -248,6 +249,7 @@ const Status = () => {
 					</p>
 				</section>
 			</div>
+			<Footer />
 		</main>
 	);
 };

src/scss/index.scss

@@ -1,42 +1,5 @@
 @import "./main.scss";
 
-.pages-content {
-	padding-left: 40px;
-	padding-right: 40px;
-	> section {
-		margin-top: 40px;
-		width: 100%;
-		margin-left: auto;
-		margin-right: auto;
-
-		&:first-child {
-			margin-top: 0;
-		}
-	}
-}
-.pages-sections {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	max-width: 1200px;
-
-	.section-title {
-		font-size: 1.5rem;
-		font-weight: bold;
-		text-align: center;
-	}
-
-	.sections-paragraphs {
-		line-height: 1.7rem;
-		text-align: center;
-
-		.paragraph-highlight {
-			color: $primary;
-			font-weight: bold;
-		}
-	}
-}
-
 .index-made-by-us {
 	.list-card {
 		display: flex;

src/scss/main.scss

@@ -19,10 +19,6 @@ a {
 	box-sizing: border-box;
 }
 
-body {
-	margin: 0;
-}
-
 input:focus,
 textarea:focus,
 button:focus {
@@ -39,3 +35,41 @@ button:focus {
 		border: 1px solid darkgrey;
 	}
 }
+
+.pages-content {
+	padding-left: 40px;
+	padding-right: 40px;
+	> section {
+		margin-top: 40px;
+		width: 100%;
+		margin-left: auto;
+		margin-right: auto;
+
+		&:first-child {
+			margin-top: 0;
+		}
+	}
+}
+
+.pages-sections {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	max-width: 1200px;
+
+	.section-title {
+		font-size: 1.5rem;
+		font-weight: bold;
+		text-align: center;
+	}
+
+	.sections-paragraphs {
+		line-height: 1.7rem;
+		text-align: center;
+
+		.paragraph-highlight {
+			color: $primary;
+			font-weight: bold;
+		}
+	}
+}