From 6c226173952bc042c04144b5f64bd14ebcb30b39 Mon Sep 17 00:00:00 2001
From: Yves Gatesoupe <yves@ygat.es>
Date: Wed, 10 Nov 2021 18:04:29 +0100
Subject: [PATCH] Team : 4 profiles per row Made image clickable as part of the
 link

---
 .../components/member-list-simple.njk         |  6 ++--
 .../partials/components/member-list.njk       | 10 +++---
 src/members/yves-gatesoupe.md                 |  4 +--
 src/scss/components/_member-list.scss         | 32 ++++++++++++++-----
 4 files changed, 33 insertions(+), 19 deletions(-)

diff --git a/src/_includes/partials/components/member-list-simple.njk b/src/_includes/partials/components/member-list-simple.njk
index b1e6995..32e332f 100644
--- a/src/_includes/partials/components/member-list-simple.njk
+++ b/src/_includes/partials/components/member-list-simple.njk
@@ -4,9 +4,9 @@
       <ol class="[ member-list__items ]" reversed>
         {% for item in teamListItems %}
             <li class="member-list__item">
-              <img src=" {{ item.data.profile }}" alt="photo de {{ item.data.name }}">
-              <a role="button" href="{{ item.data.url }}" class="btn btn-primary">{{ item.data.name }}&nbsp;
-                <svg width="18" height="14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M17.602 5.823L12.05.376a1.357 1.357 0 00-1.875 0 1.295 1.295 0 000 1.84l3.278 3.235H1.326C.587 5.451 0 6.027 0 6.752s.587 1.302 1.326 1.302h12.127l-3.278 3.215a1.295 1.295 0 000 1.84 1.349 1.349 0 001.894 0l5.533-5.427c.246-.242.398-.576.398-.93 0-.353-.133-.687-.398-.93z" fill="#111"></path></svg>
+              <a href="{{ item.data.url }}" class="">
+                <img src=" {{ item.data.profile }}" alt="photo de {{ item.data.name }}">
+                <span class="member-name btn btn-primary">{{ item.data.name }}</span>
               </a>
               <p>{{ item.data.position }}</p>
               {% if item.data.positionInternal %}
diff --git a/src/_includes/partials/components/member-list.njk b/src/_includes/partials/components/member-list.njk
index 61b9739..ccb52de 100644
--- a/src/_includes/partials/components/member-list.njk
+++ b/src/_includes/partials/components/member-list.njk
@@ -4,9 +4,9 @@
       <ol class="[ member-list__items ]" reversed>
         {% for item in teamListItems %}
             <li class="member-list__item">
-              <img src=" {{ item.data.profile }}" alt="photo de {{ item.data.name }}">
-              <a role="button" href="{{ item.data.url }}" class="btn btn-primary">{{ item.data.name }}&nbsp;
-                <svg width="18" height="14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M17.602 5.823L12.05.376a1.357 1.357 0 00-1.875 0 1.295 1.295 0 000 1.84l3.278 3.235H1.326C.587 5.451 0 6.027 0 6.752s.587 1.302 1.326 1.302h12.127l-3.278 3.215a1.295 1.295 0 000 1.84 1.349 1.349 0 001.894 0l5.533-5.427c.246-.242.398-.576.398-.93 0-.353-.133-.687-.398-.93z" fill="#111"></path></svg>
+              <a href="{{ item.data.url }}" class="">
+                <img src=" {{ item.data.profile }}" alt="photo de {{ item.data.name }}">
+                <span class="member-name btn btn-primary">{{ item.data.name }}</span>
               </a>
               <p>{{ item.data.position }}</p>
               {% if item.data.positionInternal %}
@@ -16,9 +16,7 @@
         {% endfor %}
         <li class="member-list__item info">
           <p>Vous êtes porteur d’un projet entrepreneurial en numérique et nouvelles technologies ?</p>
-          <a role="button" href="/nous-rejoindre" class="btn btn-secondary">Rejoignez-nous
-            <svg width="18" height="14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M17.602 5.823L12.05.376a1.357 1.357 0 00-1.875 0 1.295 1.295 0 000 1.84l3.278 3.235H1.326C.587 5.451 0 6.027 0 6.752s.587 1.302 1.326 1.302h12.127l-3.278 3.215a1.295 1.295 0 000 1.84 1.349 1.349 0 001.894 0l5.533-5.427c.246-.242.398-.576.398-.93 0-.353-.133-.687-.398-.93z" fill="#fff"/></svg>
-          </a>
+          <a role="button" href="/nous-rejoindre" class="btn btn-secondary">Rejoignez-nous</a>
         </li>
       </ol>
     {% endif %}
diff --git a/src/members/yves-gatesoupe.md b/src/members/yves-gatesoupe.md
index 2128681..78e67fe 100644
--- a/src/members/yves-gatesoupe.md
+++ b/src/members/yves-gatesoupe.md
@@ -1,6 +1,6 @@
 ---
 name: 'Yves Gatesoupe'
-position: 'Designer Web'
+position: 'Développeur Web'
 positionInternal: 'Membre'
 date: '2020-06-01'
 profile: '/images/profiles/yg-profile.jpg'
@@ -14,7 +14,7 @@ tags:
  - dev
 ---
 
-Je suis designer web indépendant depuis janvier 2020. 
+Je suis développeur web indépendant depuis janvier 2020. 
 
 J’ai construit mon expérience en tant que développeur web front end pour Orange Business Services en contribuant notamment à la mise en place du Bootstrap Orange [Boosted](https://boosted.orange.com) qui est un framework aux couleurs de la marque avec un focus sur l’accessibilité numérique. 
 
diff --git a/src/scss/components/_member-list.scss b/src/scss/components/_member-list.scss
index f46e881..1475553 100644
--- a/src/scss/components/_member-list.scss
+++ b/src/scss/components/_member-list.scss
@@ -6,10 +6,10 @@
   &__items {
     margin-top: 4rem;
     display: grid;
-    grid-template-columns: repeat(3, 1fr);
+    grid-template-columns: repeat(4, 1fr);
     grid-template-rows: auto;
-    grid-column-gap: 1.5rem;
-    grid-row-gap: 6rem;
+    grid-column-gap: 2rem;
+    grid-row-gap: 4rem;
   }
 
   &__item {
@@ -17,15 +17,32 @@
     flex-direction: column;
     align-items: center;
     color: var(--color-dark);
+
+    > p {
+      text-align: center;
+    }
+
+    > .btn {
+      text-align: center;
+    }
+
+    > a {
+      display: flex;
+      flex-direction: column;
+      text-decoration: none;
+    }
     
     img {
       border-radius: 50%;
-      height: 17rem;
-      width: auto;
+      height: auto;
+      width: 100%;
+      padding: 0 1rem;
 
       + .btn {
         margin-top: -1.5rem;
         margin-bottom: .5rem;
+        text-align: center;
+        align-self: center;
 
         + p {
           font-size: 1.125rem;
@@ -38,13 +55,12 @@
       flex-direction: column;
       background-color: var(--color-white);
       color: var(--color-dark);
-      padding: 2rem;
-      font-size: 1.5rem;
       font-weight: 600;
 
       p {
+        font-size: 1.2rem;
         text-align: center;
-        margin: 1rem 0 3.125rem;
+        margin: 2rem 0 3.125rem;
       }
     }
   }