feat: add link to mastodon

assets/sass/footer.scss

@@ -12,3 +12,28 @@ body {
     flex-grow: 1;
 }
 
+.footer__socials {
+  .social-icon {
+    width: 2rem;
+    transition: 0.2s all;
+  }
+  .social-icon.mastodon {
+    fill: #563CCF;
+  }
+  .social-icon:hover {
+    opacity: 0.8;
+  }
+}
+
+@media (max-width: $md-breakpoint) {
+  .footer__socials {
+    display: flex;
+    justify-content: center;
+    margin-top: 1rem;
+    margin-bottom: 0 !important;
+    li {
+      margin-left: 0 !important;
+    }
+  }
+}
+

content/association/contact.md

@@ -10,6 +10,12 @@ L'association Vélo et mobilités en Eure-Madrie-Seine est toujours tout ouverte
 
 Envoyez nous vos questions, remarques et contributions à l'adresse électronique [contact@vmems.fr](mailto:contact@vmems.fr).
 
+### Par mastodon
+
+[Mastodon](https://joinmastodon.org/fr) est un réseau social décentralisé et libre. Sur [notre profil](https://masto.bike/@vmems), nous essayons de publier des brèves et mise à jours sur les activités de l'association et l'actualité des mobilités locales.
+
+[Nous rejoindre sur Mastodon.](https://masto.bike/@vmems)
+
 ### Par voie postale
 
 Par courrier :

hugo.toml

@@ -13,14 +13,7 @@ ISO8601 = "2006-01-02T15:04:05-07:00"
 [params.contact]
 email = "contact@vmems.fr"
 website = "https://vmems.fr"
-# helloasso = ""
-# helloasso_adhesion = ""
-# paper_adhesion = "https://static.vmems.fr/"
-# [params.socials]
-# facebook = "https://www.facebook.com/groups/bethleemaubevoye"
-# youtube = "https://www.youtube.com/@letoiledebethleem9895"
-
-
+mastodon = "https://masto.bike/@vmems"
 
 [markup.goldmark.renderer]
 unsafe = true

layouts/partials/footer.html

@@ -32,15 +32,16 @@
 
     <div class="d-flex flex-column flex-sm-row justify-content-between py-4 my-4 border-top">
       <p>VMEMS – Contenu en <a href="https://creativecommons.org/licenses/by-sa/4.0/deed.fr">licence Creative Commons CC-BY-SA</a> sauf si mentioné autrement</p>
-      <ul class="list-unstyled d-flex">
-        <li class="ms-3"><a class="link-body-emphasis" href="#">
-            <svg class="bi" width="24" height="24"><use xlink:href="#twitter"/></svg>
-        </a></li>
-        <li class="ms-3"><a class="link-body-emphasis" href="#">
-            <svg class="bi" width="24" height="24"><use xlink:href="#instagram"/></svg>
-        </a></li>
-        <li class="ms-3"><a class="link-body-emphasis" href="#">
-            <svg class="bi" width="24" height="24"><use xlink:href="#facebook"/></svg></a>
+      <ul class="list-unstyled d-flex footer__socials">
+        <li class="ms-3">
+            <a
+                class="link-body-emphasis"
+                rel="me"
+                href="{{ .Site.Params.contact.mastodon }}"
+                title="Nous retrouver sur Mastodon"
+            >
+            {{ partial "helpers/svg" (dict "path" "icons/mastodon" "class" "social-icon mastodon") }}
+            </a>
         </li>
       </ul>
     </div>