Team page design update

src/_includes/partials/components/member-list.njk

@@ -6,13 +6,16 @@
       <ol class="[ member-list__items ]" reversed>
         {% for item in teamListItems %}
             <li class="member-list__item">
-              <a href="{{ item.data.url }}">
+              {# <div class="img-wrapper"> #}
-                <div class="img-wrapper">
+                <img src=" {{ item.data.profile }}" alt="photo de {{ item.data.name }}">
-                  <img src=" {{ item.data.profile }}" alt="profil de {{ item.data.title}}">
+              {# </div> #}
-                </div>
+              <a role="button" href="{{ item.data.url }}" class="btn btn-primary">{{ item.data.name }}&nbsp;
-                <h3 class="">{{ item.data.name }}</h3>
+                <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>
-                <p>{{ item.data.position }}</p>
               </a>
+              <p>{{ item.data.position }}</p>
+              {% if item.data.positionInternal %}
+                <p>{{ item.data.positionInternal }}</p>
+              {% endif %}
             </li>
         {% endfor %}
         <li class="member-list__item info">

src/_includes/partials/components/presentation.njk

@@ -12,7 +12,7 @@
       </div>
       <div class="side-info">
         {# <figure> #}
-          <img src="/images/crew.svg" alt="équipage astrolabe" loading="lazy" style="width: 80%">
+          <img src="/images/crew-join.svg" alt="équipage astrolabe" loading="lazy" style="width: 70%">
         {# </figure> #}
         <a role="button" href="/nous-rejoindre" class="btn btn-primary">Nous rejoindre 
           <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>
@@ -57,7 +57,7 @@
           </li>
           {% endfor %}
         </ul>
-        <a role="button" href="/equipe" class="btn btn-secondary">Voir l'équipe</a>
+        <a role="button" href="/equipe" class="btn btn-primary">Voir l'équipe</a>
       </div>
     </article>
   </div>

src/pages/equipe.md

@@ -5,5 +5,5 @@ layout: 'layouts/team.njk'
 teamListHeading: 'L''équipe Astrolabe'
 ---
 
-Astrolabe CAE est confondée par Florent Le Saout et Vincent Génieux en 2019. 
+Astrolabe CAE est confondée par Florent Le Saout et Vincent Génieux en 2019.<br>
 Ils mettent le fruit de ce travail commun à disposition des membres de la coopérative.

src/scss/components/_member-list.scss

@@ -15,6 +15,9 @@
   }
 
   &__item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
     color: var(--color-dark);
     
     a,
@@ -23,34 +26,33 @@
       color: var(--color-dark);
     }
 
-    .img-wrapper {
+    img {
-      overflow: hidden;
+      border-radius: 50%;
-      max-height: 22rem;
+      height: 17rem;
-    }
+      width: auto;
 
-    h3 {
+      + .btn {
-      margin-top: 1rem;
+        margin-top: -1.5rem;
-      font-size: 1.375rem;
+        margin-bottom: .5rem;
 
-      + p {
+        + p {
-        font-size: 1.125rem;
+          font-size: 1.125rem;
+        }
       }
     }
 
     &.info {
       display: flex;
       flex-direction: column;
-      background-color: var(--color-secondary);
+      background-color: var(--color-white);
-      color: var(--color-white);
+      color: var(--color-dark);
       padding: 2rem;
-      font-size: 1.75rem;
+      font-size: 1.5rem;
       font-weight: 600;
 
-      .btn {
+      p {
-        align-self: flex-start;
+        text-align: center;
-        margin-top: auto;
+        margin: 1rem 0 3.125rem;
-
-        
       }
     }
   }

src/scss/components/_presentation.scss

@@ -5,7 +5,7 @@
     grid-template-rows: auto;
     grid-column-gap: 2.125rem;
     grid-row-gap: 2.125rem;
-    margin-bottom: 10rem;
+    margin-bottom: 16rem;
 
     &:nth-child(2n + 1) {
       .content {
@@ -22,11 +22,6 @@
         grid-column: 2;
         grid-row: 1;
       }
-  
-      figure {
-        grid-column: 1;
-        grid-row: 1;
-      }
     }
   }