From 9b865e1711c30b60c0e937a8d8a1e259d7cdeec6 Mon Sep 17 00:00:00 2001
From: Yves Gatesoupe <yves@ygat.es>
Date: Tue, 14 Jul 2020 20:10:42 +0200
Subject: [PATCH] Team page design update

---
 .../partials/components/member-list.njk       | 15 ++++----
 .../partials/components/presentation.njk      |  4 +--
 src/pages/equipe.md                           |  2 +-
 src/scss/components/_member-list.scss         | 36 ++++++++++---------
 src/scss/components/_presentation.scss        |  7 +---
 5 files changed, 32 insertions(+), 32 deletions(-)

diff --git a/src/_includes/partials/components/member-list.njk b/src/_includes/partials/components/member-list.njk
index 65937c5..aa1038c 100644
--- a/src/_includes/partials/components/member-list.njk
+++ b/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">
-                  <img src=" {{ item.data.profile }}" alt="profil de {{ item.data.title}}">
-                </div>
-                <h3 class="">{{ item.data.name }}</h3>
-                <p>{{ item.data.position }}</p>
+              {# <div class="img-wrapper"> #}
+                <img src=" {{ item.data.profile }}" alt="photo de {{ item.data.name }}">
+              {# </div> #}
+              <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>
+              <p>{{ item.data.position }}</p>
+              {% if item.data.positionInternal %}
+                <p>{{ item.data.positionInternal }}</p>
+              {% endif %}
             </li>
         {% endfor %}
         <li class="member-list__item info">
diff --git a/src/_includes/partials/components/presentation.njk b/src/_includes/partials/components/presentation.njk
index f68fcf4..d9831ad 100644
--- a/src/_includes/partials/components/presentation.njk
+++ b/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>
diff --git a/src/pages/equipe.md b/src/pages/equipe.md
index 36efd21..10967eb 100644
--- a/src/pages/equipe.md
+++ b/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.
diff --git a/src/scss/components/_member-list.scss b/src/scss/components/_member-list.scss
index 0c78e72..7aea974 100644
--- a/src/scss/components/_member-list.scss
+++ b/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 {
-      overflow: hidden;
-      max-height: 22rem;
-    }
+    img {
+      border-radius: 50%;
+      height: 17rem;
+      width: auto;
 
-    h3 {
-      margin-top: 1rem;
-      font-size: 1.375rem;
+      + .btn {
+        margin-top: -1.5rem;
+        margin-bottom: .5rem;
 
-      + p {
-        font-size: 1.125rem;
+        + p {
+          font-size: 1.125rem;
+        }
       }
     }
 
     &.info {
       display: flex;
       flex-direction: column;
-      background-color: var(--color-secondary);
-      color: var(--color-white);
+      background-color: var(--color-white);
+      color: var(--color-dark);
       padding: 2rem;
-      font-size: 1.75rem;
+      font-size: 1.5rem;
       font-weight: 600;
 
-      .btn {
-        align-self: flex-start;
-        margin-top: auto;
-
-        
+      p {
+        text-align: center;
+        margin: 1rem 0 3.125rem;
       }
     }
   }
diff --git a/src/scss/components/_presentation.scss b/src/scss/components/_presentation.scss
index 34d1557..e0f27c0 100644
--- a/src/scss/components/_presentation.scss
+++ b/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;
-      }
     }
   }