Team : 4 profiles per row

Made image clickable as part of the link

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">
+              <a href="{{ item.data.url }}" class="">
                 <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;
+                <span class="member-name btn btn-primary">{{ item.data.name }}</span>
-                <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>
               <p>{{ item.data.position }}</p>
               {% if item.data.positionInternal %}

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">
+              <a href="{{ item.data.url }}" class="">
                 <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;
+                <span class="member-name btn btn-primary">{{ item.data.name }}</span>
-                <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>
               <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
+          <a role="button" href="/nous-rejoindre" class="btn btn-secondary">Rejoignez-nous</a>
-            <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>
         </li>
       </ol>
     {% endif %}

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. 
 

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-column-gap: 2rem;
-    grid-row-gap: 6rem;
+    grid-row-gap: 4rem;
   }
 
   &__item {
@@ -18,14 +18,31 @@
     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;
+      height: auto;
-      width: 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;
       }
     }
   }