team members page

src/_data/navigation.json

@@ -12,7 +12,7 @@
     },
     {
       "text": "L'équipe",
-      "url": "/l-equipe",
+      "url": "/equipe",
       "external": false
     },
     {

src/_includes/layouts/team.njk

@@ -0,0 +1,9 @@
+{% extends 'layouts/base.njk' %}
+
+{% set teamListItems = collections.members %}
+
+{% block content %}
+  <main id="main-content" tabindex="-1">
+    {% include "partials/components/member-list.njk" %}
+  </main>
+{% endblock %}

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

@@ -0,0 +1,27 @@
+<section class="[ member-list ]">
+  <div class="[ wrapper ]">
+    <h1 class="[ member-list__heading ]">{{ teamListHeading }}</h1>
+    {{ content | safe }}
+    {% if teamListItems.length %}
+      <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>
+              </a>
+            </li>
+        {% 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-primary">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="#111"/></svg>
+          </a>
+        </li>
+      </ol>
+    {% endif %}
+  </div>
+</section>

src/_includes/partials/components/member.njk

@@ -0,0 +1,11 @@
+{% extends 'layouts/base.njk' %}
+
+{% set title = name %}
+
+{% block content %}
+  <main id="main-content" tabindex="-1">
+    <article class="[ wrapper ]">
+      <p>{{ content | safe }}</p>
+    </article>
+  </main>
+{% endblock %}

src/images/default-profile.svg

@@ -0,0 +1,4 @@
+<svg width="364" height="375" viewBox="0 0 364 375" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="364" height="375" fill="#F1F0F6"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M122 190C122 156.333 149.11 129 182.499 129C215.891 129 243 156.333 243 190C243 223.667 215.891 251 182.499 251C149.11 251 122 223.667 122 190ZM198.624 198.101L207.71 218C208.225 219.15 209.188 220.05 210.367 220.487C211.546 220.926 212.859 220.87 213.996 220.336C215.137 219.817 216.029 218.847 216.464 217.658C216.898 216.469 216.844 215.146 216.314 213.998L206.055 191.519L198.624 198.101ZM192.019 183.635L182.817 163.487L173.528 183.641L162.592 184.662L176.576 154.323C180.043 146.802 185.651 146.812 189.09 154.347L202.923 184.654L192.019 183.635ZM166.895 198.029L157.45 218.519C156.921 219.669 155.959 220.569 154.781 220.992C153.602 221.431 152.286 221.377 151.149 220.841C150.01 220.309 149.13 219.341 148.696 218.152C148.263 216.963 148.317 215.639 148.845 214.489L159.465 191.448L166.895 198.029Z" fill="white"/>
+</svg>

src/members/florent-le-saout.md

@@ -0,0 +1,11 @@
+---
+name: 'Florent Le Saout'
+position: 'Développeur systèmes embarqués'
+positionInternal: 'Co-fondateur'
+date: '2019-01-01'
+profile: '/images/fls-profile.jpg'
+url: '/members/florent-le-saout'
+layout: 'partials/components/member.njk'
+---
+
+Florent

src/members/francois-bonningues.md

@@ -0,0 +1,10 @@
+---
+name: 'François Bonningues'
+position: 'Développeur systèmes embarqués'
+date: '2020-06-01'
+profile: '/images/default-profile.svg'
+url: '/members/francois-bonningues'
+layout: 'partials/components/member.njk'
+---
+
+François

src/members/vincent-genieux.md

@@ -0,0 +1,11 @@
+---
+name: 'Vincent Génieux'
+position: 'Développeur senior'
+positionInternal: 'Co-fondateur'
+date: '2019-01-01'
+profile: '/images/vg-profile.jpg'
+url: '/members/vincent-genieux'
+layout: 'partials/components/member.njk'
+---
+
+Vincent

src/members/yves-gatesoupe.md

@@ -0,0 +1,10 @@
+---
+name: 'Yves Gatesoupe'
+position: 'Designer Web'
+date: '2020-06-01'
+profile: '/images/yg-profile.jpg'
+url: '/members/yves-gatesoupe'
+layout: 'partials/components/member.njk'
+---
+
+Yves

src/pages/equipe.md

@@ -0,0 +1,9 @@
+---
+title: 'L''équipe Astrolabe'
+permalink: '/equipe/index.html'
+layout: 'layouts/team.njk'
+teamListHeading: 'L''équipe Astrolabe'
+---
+
+Astrolabe CAE est confondée par Florent Le Saout et Vincent Génieux en 2019. 
+Ils mettent le fruit de ce travail commun à disposition des membres de la coopérative.

src/scss/components/_button.scss

@@ -52,6 +52,10 @@
     margin-left: 2rem;
   }
 
+  svg {
+    margin-left: .5rem;
+  }
+
   &.btn-primary {
     color: var(--color-dark);
     background-color: var(--color-primary);

src/scss/components/_member-list.scss

@@ -0,0 +1,56 @@
+.member-list {
+  margin-bottom: 8rem;
+
+  &__heading {
+    margin: 8rem 0 2rem;
+  }
+  &__items {
+    margin-top: 4rem;
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-template-rows: auto;
+    grid-column-gap: 1.5rem;
+    grid-row-gap: 6rem;
+  }
+
+  &__item {
+    color: var(--color-dark);
+    
+    a,
+    a:visited {
+      text-decoration: none;
+      color: var(--color-dark);
+    }
+
+    .img-wrapper {
+      overflow: hidden;
+      max-height: 22rem;
+    }
+
+    h3 {
+      margin-top: 1rem;
+      font-size: 1.375rem;
+
+      + p {
+        font-size: 1.125rem;
+      }
+    }
+
+    &.info {
+      display: flex;
+      flex-direction: column;
+      background-color: var(--color-secondary);
+      color: var(--color-white);
+      padding: 2rem;
+      font-size: 1.75rem;
+      font-weight: 600;
+
+      .btn {
+        align-self: flex-start;
+        margin-top: auto;
+
+        
+      }
+    }
+  }
+}

src/scss/global.scss

@@ -70,6 +70,8 @@ img {
 @import 'components/pagination';
 @import 'components/post';
 @import 'components/post-list';
+@import 'components/member';
+@import 'components/member-list';
 @import 'components/news-list';
 @import 'components/presentation';
 @import 'components/site-head';