add contacts and social media links in footer

la_chariotte/static/css/app.css

@@ -10484,4 +10484,9 @@ p.mobile-content-title {
 
 footer > .columns {
   margin-bottom: 1rem !important;
+  margin-top: 0;
+}
+
+footer .margin-auto {
+  margin: auto;
 }

la_chariotte/static/sass/base/_footer.sass

@@ -1,2 +1,6 @@
 footer > .columns
     margin-bottom: 1rem !important
+    margin-top: 0
+
+footer .margin-auto
+    margin: auto

la_chariotte/templates/base.html

@@ -118,14 +118,31 @@
     </div>
   </main>
   <footer class="footer">
-    <div class="content has-text-centered columns">
+    <div class="content columns has-text-centered">
-      <div class="column">
+      <div class="column margin-auto">
         <p>
           <strong>La Chariotte</strong> | version {{ version }}
         </p>
+        <p>
+          <a href="{% url 'legal_notice' %}">Mentions légales</a>
+        </p>
+      </div>
+      <div class="column is-size-6 columns">
+        <div class="column margin-auto">
+          <p>Contact : <a href="mailto:laetitia@chariotte.fr">laetitia@chariotte.fr</a>
+          <p>Suivez <strong>la Chariotte</strong> sur :</p>
         </div>
         <div class="column">
-        <a href="{% url 'legal_notice' %}">Mentions légales</a>
+          <a href="https://www.facebook.com/profile.php?id=100091984176981" target="_blank" rel="noopener">
+            <i class="fa fa-facebook-square mr-2" aria-hidden="true"></i>Facebook
+          </a><br>
+          <a href="https://www.linkedin.com/company/la-chariotte-commandes-groupees/" target="_blank" rel="noopener">
+            <i class="fa fa-linkedin-square mr-3" aria-hidden="true"></i>Linkedin
+          </a><br>
+          <a href="https://mastodon.scop.coop/@la_chariotte" target="_blank" rel="noopener">
+            <i class="fa fa-mastodon-square mr-3" aria-hidden="true"></i>Mastodon
+          </a>
+        </div>
       </div>
     </div>
   </footer>