Ajout du footer responsive

Co-authored-by: journeau <romainjourneau@gmail.com>

assets/css/footer.css

@@ -0,0 +1,132 @@
+footer {
+    background: #616A6B;
+    color: white;
+    display: grid;
+    align-items: center;
+}
+
+footer div p {
+    font-size: 25pt;
+    text-align: center;
+}
+
+#social ul {
+    display: inline-block;
+}
+
+#social li {
+    display: inline;
+}
+
+#copyright {
+    text-align: center;
+    padding-top: 25px;
+    padding-bottom: 25px;
+    height: 100%;
+    background-color: #45a1ff;
+    margin: 0;
+}
+
+#social, #sitemap, #contact {
+    height: max-content;
+}
+
+#contact a, #sitemap a {
+    color: white;
+    text-decoration: none;
+}
+
+#contact a:hover, #sitemap a:hover {
+    text-decoration: underline;
+}
+
+#social ul {
+    display: flex;
+    justify-content: center;
+    padding: 0;
+}
+
+#social li {
+    padding: 20px;
+}
+
+#sitemap ul {
+    list-style: none;
+}
+
+#sitemap li, #contact li {
+    padding-bottom: 15px;
+}
+
+footer ul {
+    font-weight: 600;
+}
+
+#contact ul {
+    list-style: none;
+    text-align: center;
+    padding: 0;
+}
+
+#contact a[href^="tel:"]::before {
+    content: "☎️ ";
+}
+
+#contact a[href^="mailto:"]::before {
+    content: "✉️ ";
+}
+
+@media screen and (min-width: 800px) {
+    footer {
+        grid-template-columns: 1fr 1fr 1fr;
+        grid-template-rows: 85% 15%;
+    }
+
+    #social, #sitemap, #contact {
+        grid-row: 1;
+    }
+
+    #social {
+        grid-column: 1;
+    }
+    
+    #sitemap {
+        grid-column: 2;
+    }
+
+    #contact {
+        grid-column: 3;
+    }
+
+    #copyright {
+        grid-column: 1/4;
+        grid-row: 2;
+    }
+}
+
+@media screen and (max-width: 800px) {
+    footer {
+        grid-template-columns: 100%;
+        grid-auto-rows: auto;
+    }
+
+    #social, #sitemap, #contact, #copyright {
+        grid-column: 1;
+    }
+
+    #social {
+        grid-row: 1;
+    }
+    
+    #sitemap {
+        grid-row: 2;
+    }
+
+    #contact {
+        grid-row: 3;
+    }
+
+    #copyright {
+        grid-row: 4;
+    }
+}

assets/css/style.css

@@ -1,3 +1,18 @@
+html {
+    height: 100%;
+    box-sizing: border-box;
+}
+
 body {
+    height: 100%;
+    padding: 0;
     margin: 0;
+    min-height: 100%;
+    display: grid;
+    grid-template-rows: auto 1fr auto;
+}
+
+* {
+    box-sizing: inherit;
+    font-family: system-ui;
 }

assets/img/facebook.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1365.12" height="1365.12" viewBox="0 0 14222 14222"><circle cx="7111" cy="7112" r="7111" fill="#1977f3"/><path d="M9879 9168l315-2056H8222V5778c0-562 275-1111 1159-1111h897V2917s-814-139-1592-139c-1624 0-2686 984-2686 2767v1567H4194v2056h1806v4969c362 57 733 86 1111 86s749-30 1111-86V9168z" fill="#fff"/></svg>

assets/img/twitter.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 248 204">
+  <path fill="#1d9bf0" d="M221.95 51.29c.15 2.17.15 4.34.15 6.53 0 66.73-50.8 143.69-143.69 143.69v-.04c-27.44.04-54.31-7.82-77.41-22.64 3.99.48 8 .72 12.02.73 22.74.02 44.83-7.61 62.72-21.66-21.61-.41-40.56-14.5-47.18-35.07 7.57 1.46 15.37 1.16 22.8-.87-23.56-4.76-40.51-25.46-40.51-49.5v-.64c7.02 3.91 14.88 6.08 22.92 6.32C11.58 63.31 4.74 33.79 18.14 10.71c25.64 31.55 63.47 50.73 104.08 52.76-4.07-17.54 1.49-35.92 14.61-48.25 20.34-19.12 52.33-18.14 71.45 2.19 11.31-2.23 22.15-6.38 32.07-12.26-3.77 11.69-11.66 21.62-22.2 27.93 10.01-1.18 19.79-3.86 29-7.95-6.78 10.16-15.32 19.01-25.2 26.16z"/>
+</svg>