footer: ajout de style responsive

src/components/footer/index.jsx

@@ -2,26 +2,30 @@ import React from "react";
 import { Link } from "gatsby";
 
 import "./index.scss";
+import Logo from "../../images/favicon.svg";
 
 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">
+						<div className="footer-about-title">
+							<img src={Logo} alt="Logo de la CLI" height="40px" width="40px" />
+							<h4>CLI</h4>
+						</div>
 						<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.
+							La CLI est une association à but non lucratif spécialisée dans le
+							numérique fournissant une large variété de prestations numériques.
 						</p>
 					</div>
 				</li>
+				<li>
+					<div className="footer-contact">
+						<Link to="/contact">Nous écrire</Link>
+						<p>notre@email.com</p>
+					</div>
+				</li>
 				<li>Mentions légales</li>
 			</ul>
 		</footer>

src/components/footer/index.scss

@@ -1,23 +1,30 @@
 @import "../../scss/main.scss";
 
 .footer {
-	margin-top: 50px;
+	margin-top: 30px;
 	margin-left: auto;
 	margin-right: auto;
-	height: 70px;
-	max-width: 1200px;
+	padding: 40px 0;
+	height: 100%;
+	width: 100%;
 	color: grey;
+	background: hsl(206, 47%, 95%);
 
 	a {
 		color: grey;
 	}
+}
 
+@media screen and (min-width: 992px) {
 	.footer-list {
+		margin: 0;
+		width: 100%;
 		list-style: none;
 		text-align: center;
 		display: flex;
 		flex-direction: row;
 		justify-content: space-evenly;
+		align-items: center;
 
 		li {
 			padding-left: 15px;
@@ -30,22 +37,121 @@
 			align-items: center;
 		}
 
+		.footer-contact::before {
+			content: "";
+			position: absolute;
+			background: black;
+			height: 2px;
+			width: 100%;
+			left: 0;
+			top: 0;
+		}
+
+		.footer-contact:after {
+			content: "";
+			position: absolute;
+			background: black;
+			height: 2px;
+			width: 100%;
+			left: 0;
+			bottom: 0;
+		}
+
 		.footer-about {
-			width: 40vw;
+			width: 500px;
+
+			> p {
+				line-height: 1.5rem;
+			}
+
+			.footer-about-title {
+				display: flex;
+				flex-direction: row;
+				width: 120px;
+				margin-left: auto;
+				margin-right: auto;
+				align-items: center;
+				height: 60px;
+
+				h4 {
+					font-size: 2rem;
+					font-family: "Cutive Mono";
+					padding: 0 15px;
+				}
+			}
 		}
 	}
 }
 
 @media screen and (max-width: 992px) {
 	.footer-list {
+		margin: 0;
+		padding: 30px 0;
+		list-style: none;
+		text-align: center;
 		display: flex;
 		flex-direction: column;
-	}
-}
+		justify-content: center;
+		width: 80vw;
+		margin-left: auto;
+		margin-right: auto;
 
-@media screen and (max-width: 600px) {
-	.footer-list {
-		display: flex;
-		flex-direction: column;
+		li {
+			padding-top: 50px;
+
+			&:first-of-type {
+				padding-top: 0;
+			}
+		}
+
+		hr {
+			width: 100%;
+			height: 1px;
+			border: 1px solid lightblue;
+			color: lightblue;
+		}
+
+		.footer-contact > * {
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+		}
+
+		.footer-contact::before {
+			content: "";
+			display: block;
+			position: absolute;
+			background: black;
+			height: 2px;
+			width: 100%;
+			left: 0;
+			top: 0;
+		}
+
+		.footer-about {
+			width: 40vw;
+			margin-left: auto;
+			margin-right: auto;
+
+			p {
+				line-height: 1.5rem;
+			}
+
+			.footer-about-title {
+				display: flex;
+				flex-direction: row;
+				width: 120px;
+				margin-left: auto;
+				margin-right: auto;
+				align-items: center;
+				height: 60px;
+
+				h4 {
+					font-size: 2rem;
+					font-family: "Cutive Mono";
+					padding: 0 15px;
+				}
+			}
+		}
 	}
 }

src/scss/main.scss

@@ -19,6 +19,10 @@ a {
 	box-sizing: border-box;
 }
 
+body {
+	margin: 0;
+}
+
 input:focus,
 textarea:focus,
 button:focus {