From ce1ab75a8815a15d788d56885c30c4864109070e Mon Sep 17 00:00:00 2001
From: Yves Gatesoupe <yves@ygat.es>
Date: Mon, 29 Nov 2021 18:23:18 +0100
Subject: [PATCH] fix member info display margin since bootstrap addition

---
 src/_includes/layouts/member.njk          | 29 +++++++++++------------
 src/_includes/partials/components/map.njk |  2 +-
 src/scss/components/_member.scss          | 16 +++++++++----
 3 files changed, 26 insertions(+), 21 deletions(-)

diff --git a/src/_includes/layouts/member.njk b/src/_includes/layouts/member.njk
index d8c7d97..6693240 100644
--- a/src/_includes/layouts/member.njk
+++ b/src/_includes/layouts/member.njk
@@ -15,29 +15,28 @@
           <div class="member__info">
             <img src="{{ profile }}" alt="photo de {{ name }}">
             {% if personalSite %}
-              <p>
+              <p class="member-url">
                 <strong>site web :</strong>
                 <a href="{{ personalSite }}">{{ personalSite }}</a>
               </p>
             {% endif %}
-            {% if socialMastodon %}
-              <a href="{{ socialMastodon }}" class="social" title="mastodon"><svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M16.956 18.293c3.007-.36 5.625-2.212 5.954-3.905.519-2.667.476-6.508.476-6.508 0-5.207-3.411-6.733-3.411-6.733C18.255.357 15.302.025 12.233 0h-.075c-3.068.025-6.02.357-7.74 1.147 0 0-3.41 1.526-3.41 6.733 0 .315-.003.647-.004.993-.005.96-.01 2.024.018 3.136.123 5.091.933 10.11 5.64 11.355 2.171.575 4.035.695 5.535.613 2.722-.151 4.25-.972 4.25-.972l-.09-1.974s-1.945.613-4.13.538c-2.163-.074-4.448-.233-4.798-2.89a5.448 5.448 0 01-.048-.745s2.124.519 4.816.642c1.647.076 3.19-.096 4.759-.283zm2.406-3.705V8.283c0-1.288-.328-2.312-.987-3.07-.68-.757-1.57-1.145-2.674-1.145-1.278 0-2.246.491-2.885 1.474l-.623 1.043-.622-1.043c-.64-.983-1.608-1.474-2.886-1.474-1.104 0-1.994.388-2.674 1.146-.659.757-.987 1.781-.987 3.07v6.303h2.498V8.47c0-1.29.543-1.945 1.628-1.945 1.2 0 1.802.777 1.802 2.312v3.35h2.483v-3.35c0-1.535.601-2.312 1.801-2.312 1.086 0 1.629.655 1.629 1.945v6.119h2.497z" fill="#282156"/></svg></a>
-            {% endif %}
-            {% if socialTwitter %}
-              <a href="{{ socialTwitter }}" class="social" title="twitter"><svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M24 4.309a9.83 9.83 0 01-2.828.775 4.932 4.932 0 002.165-2.724 9.864 9.864 0 01-3.127 1.195A4.916 4.916 0 0016.616 2c-3.179 0-5.515 2.966-4.797 6.045A13.978 13.978 0 011.671 2.901a4.93 4.93 0 001.523 6.574 4.903 4.903 0 01-2.229-.616c-.054 2.281 1.581 4.415 3.949 4.89a4.935 4.935 0 01-2.224.084 4.928 4.928 0 004.6 3.419A9.9 9.9 0 010 19.292a13.94 13.94 0 007.548 2.212c9.142 0 14.307-7.721 13.995-14.646A10.025 10.025 0 0024 4.309z" fill="#282156"/></svg></a>
-            {% endif %}
-            {% if socialLinkedin %}
-              <a href="{{ socialLinkedin }}" class="social" title="linkedin"><svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.98 2.5A2.49 2.49 0 012.5 5 2.49 2.49 0 01.02 2.5C.02 1.12 1.13 0 2.5 0a2.49 2.49 0 012.48 2.5zM5 7H0v16h5V7zm7.982 0H8.014v16h4.969v-8.399c0-4.67 6.029-5.052 6.029 0V23H24V12.869c0-7.88-8.922-7.593-11.018-3.714V7z" fill="#282156"/></svg></a>
-            {% endif %}
-            <div class="[ nav ] [ box-flex align-center ]">
-              
-            </div>
+            <ul class="social-links">
+              {% if socialMastodon %}
+                <li><a href="{{ socialMastodon }}" title="mastodon"><svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M16.956 18.293c3.007-.36 5.625-2.212 5.954-3.905.519-2.667.476-6.508.476-6.508 0-5.207-3.411-6.733-3.411-6.733C18.255.357 15.302.025 12.233 0h-.075c-3.068.025-6.02.357-7.74 1.147 0 0-3.41 1.526-3.41 6.733 0 .315-.003.647-.004.993-.005.96-.01 2.024.018 3.136.123 5.091.933 10.11 5.64 11.355 2.171.575 4.035.695 5.535.613 2.722-.151 4.25-.972 4.25-.972l-.09-1.974s-1.945.613-4.13.538c-2.163-.074-4.448-.233-4.798-2.89a5.448 5.448 0 01-.048-.745s2.124.519 4.816.642c1.647.076 3.19-.096 4.759-.283zm2.406-3.705V8.283c0-1.288-.328-2.312-.987-3.07-.68-.757-1.57-1.145-2.674-1.145-1.278 0-2.246.491-2.885 1.474l-.623 1.043-.622-1.043c-.64-.983-1.608-1.474-2.886-1.474-1.104 0-1.994.388-2.674 1.146-.659.757-.987 1.781-.987 3.07v6.303h2.498V8.47c0-1.29.543-1.945 1.628-1.945 1.2 0 1.802.777 1.802 2.312v3.35h2.483v-3.35c0-1.535.601-2.312 1.801-2.312 1.086 0 1.629.655 1.629 1.945v6.119h2.497z" fill="#282156"/></svg></a></li>
+              {% endif %}
+              {% if socialTwitter %}
+                <li><a href="{{ socialTwitter }}" title="twitter"><svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M24 4.309a9.83 9.83 0 01-2.828.775 4.932 4.932 0 002.165-2.724 9.864 9.864 0 01-3.127 1.195A4.916 4.916 0 0016.616 2c-3.179 0-5.515 2.966-4.797 6.045A13.978 13.978 0 011.671 2.901a4.93 4.93 0 001.523 6.574 4.903 4.903 0 01-2.229-.616c-.054 2.281 1.581 4.415 3.949 4.89a4.935 4.935 0 01-2.224.084 4.928 4.928 0 004.6 3.419A9.9 9.9 0 010 19.292a13.94 13.94 0 007.548 2.212c9.142 0 14.307-7.721 13.995-14.646A10.025 10.025 0 0024 4.309z" fill="#282156"/></svg></a></li>
+              {% endif %}
+              {% if socialLinkedin %}
+                <li><a href="{{ socialLinkedin }}" title="linkedin"><svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.98 2.5A2.49 2.49 0 012.5 5 2.49 2.49 0 01.02 2.5C.02 1.12 1.13 0 2.5 0a2.49 2.49 0 012.48 2.5zM5 7H0v16h5V7zm7.982 0H8.014v16h4.969v-8.399c0-4.67 6.029-5.052 6.029 0V23H24V12.869c0-7.88-8.922-7.593-11.018-3.714V7z" fill="#282156"/></svg></a></li>
+              {% endif %}
+            </ul>
           </div>
           <div class="member__bio">
             {{ content | safe }}
             {% if tags %}
-              <h2 class="font-base weight-mid mt-2">Mots-clés</h2>
-              <ul class="tag-list mt-1">
+              <h2 class="font-base weight-mid mt-5">Mots-clés</h2>
+              <ul class="tag-list mt-3">
                 {% for item in tags %}
                   <li class="tag-item">
                     <a href="/equipe/{{ item }}">{{ item }}</a>
diff --git a/src/_includes/partials/components/map.njk b/src/_includes/partials/components/map.njk
index 1f4ebf8..82c138c 100644
--- a/src/_includes/partials/components/map.njk
+++ b/src/_includes/partials/components/map.njk
@@ -1,5 +1,5 @@
 <div class="[ wrapper ]">
-  <h2 class="mt-4">Où sommes-nous ?</h2>
+  <h2 class="mt-5 mb-2">Où sommes-nous ?</h2>
 </div>
 <div id = "map" style = "width: 100%; height: 500px; margin-bottom: 8rem;"></div>
 <script type="text/javascript" src="/vendor/js/leaflet.js"></script>
diff --git a/src/scss/components/_member.scss b/src/scss/components/_member.scss
index c73693e..3c6efcb 100644
--- a/src/scss/components/_member.scss
+++ b/src/scss/components/_member.scss
@@ -22,17 +22,23 @@
   }
 
   &__info {
+    display: flex;
+    flex-direction: column;
+
     img {
       border-radius: 50%;
       width: 16rem;
       margin-bottom: 2rem;
     }
 
-    .social {
-      display: inline-block;
-      margin-top: 1.5rem;
-      
-      + .social {
+    .member-url {
+      margin-bottom: 1.5rem;
+    }
+
+    .social-links {
+      display: flex;
+
+      li + li {
         margin-left: 1rem;
       }
     }