Fix conflict with package-lock

Merge branch 'dev'

.eleventy.js

@@ -1,6 +1,7 @@
 const rssPlugin = require('@11ty/eleventy-plugin-rss');
 const syntaxHighlight = require('@11ty/eleventy-plugin-syntaxhighlight');
 const fs = require('fs');
+const util = require('util')
 
 // Import filters
 const dateFilter = require('./src/filters/date-filter.js');
@@ -19,6 +20,9 @@ module.exports = function(config) {
   config.addFilter('dateFilter', dateFilter);
   config.addFilter('markdownFilter', markdownFilter);
   config.addFilter('w3DateFilter', w3DateFilter);
+  config.addFilter('dump', obj => {
+    return util.inspect(obj)
+  });
 
   // Layout aliases
   config.addLayoutAlias('home', 'layouts/home.njk');
@@ -74,6 +78,39 @@ module.exports = function(config) {
     .slice(0, site.maxProfilePreview)
     ;
   });
+  config.addCollection("tagsList", function(collectionApi) {
+    const tagsList = new Set();
+    collectionApi.getAll().map( item => {
+        if (item.data.tags) { // handle pages that don't have tags
+            item.data.tags.map( tag => tagsList.add(tag))
+        }
+    });
+    return tagsList;
+  });
+  config.addCollection("skillsList", function(collectionApi) {
+    const skillsList = new Set();
+    collectionApi.getFilteredByGlob("./src/members/*.md").map( item => {
+        if (item.data.tags) { // handle pages that don't have skills
+          item.data.tags.map( skill => { // exclude non related tags
+            if (['post', 'news', 'event'].indexOf(skill) == -1) {
+              skillsList.add(skill)
+            }
+          })
+        }
+    });
+    return skillsList;
+  });
+  config.addCollection("membersLocations", function(collectionApi) {
+    return collectionApi.getFilteredByGlob("./src/members/*.md")
+      .filter(item => typeof item.data.location !== 'undefined')
+      .map( member => {
+        return {
+          name: member.data.name,
+          url: member.data.url,
+          location: member.data.location,
+        };
+    });
+  });
   config.addCollection('customers', collection => {
     return [...collection.getFilteredByGlob("./src/customers/*.md")]
     .reverse()

package.json

@@ -8,10 +8,13 @@
     "@11ty/eleventy-plugin-rss": "^1.0.7",
     "@11ty/eleventy-plugin-syntaxhighlight": "^2.0.3",
     "@tbranyen/jsdom": "^13.0.0",
+    "bootstrap": "^5.1.3",
     "concurrently": "^4.1.2",
+    "copyfiles": "^2.4.1",
     "html-minifier": "^4.0.0",
     "image-size": "^0.8.3",
     "json-to-scss": "^1.5.0",
+    "leaflet": "^1.7.1",
     "sass": "^1.26.3",
     "semver": "^6.3.0",
     "slugify": "^1.4.0",
@@ -36,9 +39,12 @@
     "sass:tokens": "npx json-to-scss src/_data/tokens.json src/scss/_tokens.scss",
     "sass:lint": "npx stylelint src/scss/**/*.scss",
     "sass:process": "npm run sass:tokens && npm run sass:lint && sass src/scss/global.scss src/_includes/assets/css/global.css --style=compressed",
-    "start": "concurrently \"npm run sass:process -- --watch\" \"npm run serve\"",
+    "vendor:css": "copyfiles node_modules/leaflet/dist/leaflet.css node_modules/bootstrap/dist/css/bootstrap.min.css -f dist/vendor/css",
+    "vendor:js": "copyfiles node_modules/leaflet/dist/leaflet.js node_modules/bootstrap/dist/js/bootstrap.min.js -f dist/vendor/js",
+    "vendor": "npm run vendor:css && npm run vendor:js",
+    "start": "concurrently \"npm run vendor\" \"npm run sass:process -- --watch\" \"npm run serve\"",
     "serve": "cross-env ELEVENTY_ENV=development npx eleventy --serve",
-    "prod": "cross-env ELEVENTY_ENV=prod npm run sass:process && npx eleventy",
+    "prod": "cross-env ELEVENTY_ENV=prod npm run vendor && npm run sass:process && npx eleventy",
     "deploy-preprod": "npm run prod && node deploy-preprod",
     "deploy-prod": "npm run prod && node deploy-prod"
   },

src/_includes/layouts/base.njk

@@ -7,6 +7,8 @@
   <link rel="icon" href="{{ site.faviconPath }}" type="image/png" />
   {% include "partials/global/meta-info.njk" %}
   <script>document.documentElement.classList.remove('no-js');</script>
+  <link rel = "stylesheet" href="/vendor/css/leaflet.css"/>
+  <link rel = "stylesheet" href="/vendor/css/bootstrap.min.css"/>
   <style>{% include "assets/css/global.css" %}</style>
   {% block head %}
   {% endblock %}
@@ -19,6 +21,7 @@
   {% block foot %}
   {% endblock %}
   <script type="text/javascript" src="/js/components/menu-toggle.js" async defer></script>
+  <script type="text/javascript" src="/vendor/js/bootstrap.min.js" async defer></script>
   <script>
     if ('serviceWorker' in navigator) {
       window.addEventListener('load', () => {

src/_includes/layouts/member.njk

@@ -29,9 +29,22 @@
             {% if socialLinkedin %}
               <a href="{{ socialLinkedin }}" class="social" title="linkedin"><svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.98 2.5A2.49 2.49 0 012.5 5 2.49 2.49 0 01.02 2.5C.02 1.12 1.13 0 2.5 0a2.49 2.49 0 012.48 2.5zM5 7H0v16h5V7zm7.982 0H8.014v16h4.969v-8.399c0-4.67 6.029-5.052 6.029 0V23H24V12.869c0-7.88-8.922-7.593-11.018-3.714V7z" fill="#282156"/></svg></a>
             {% endif %}
+            <div class="[ nav ] [ box-flex align-center ]">
+              
+            </div>
           </div>
           <div class="member__bio">
             {{ content | safe }}
+            {% if tags %}
+              <h2 class="font-base weight-mid mt-2">Mots-clés</h2>
+              <ul class="tag-list mt-1">
+                {% for item in tags %}
+                  <li class="tag-item">
+                    <a href="/equipe/{{ item }}">{{ item }}</a>
+                  </li>
+                {% endfor %}
+              </ul>
+            {% endif %}
           </div>
         </div>
       </article>

src/_includes/layouts/team.njk

@@ -7,8 +7,16 @@
     <div class="[ wrapper ]">
       <h1 class="[ member-list__heading ]">{{ teamListHeading }}</h1>
       {{ content | safe }}
+      <h2 class="[ gap-top-700 ]">{{ tagSearchHeading }}</h2>
+      <ul class="tag-list mt-3">
+        {% for skill in collections.skillsList %}
+          <li class="tag-item"><a href="/equipe/{{ skill }}">{{ skill }}</a></li>
+        {% endfor %}
+      </ul>
     </div>
     {% include "partials/components/member-list.njk" %}
+    {% include "partials/components/map.njk" %}
     {% include "partials/components/contact-form.njk" %}
   </main>
+  
 {% endblock %}

src/_includes/partials/components/map.njk

@@ -0,0 +1,50 @@
+<div class="[ wrapper ]">
+  <h2 class="mt-4">Où sommes-nous ?</h2>
+</div>
+<div id = "map" style = "width: 100%; height: 500px"></div>
+<script type="text/javascript" src="/vendor/js/leaflet.js"></script>
+<script>
+  // Creating map options
+  var mapOptions = {
+    center: [48.10494125597395, -1.6795760019626425],
+    zoom: 15
+  }
+  
+  // Creating a map object
+  var map = new L.map('map', mapOptions);
+
+  var iconMarker = L.icon({
+    iconUrl: '/images/marker-stroke.svg',
+    iconSize: [28, 40],
+    iconAnchor: [14, 40],
+    popupAnchor: [0, -40]
+  });
+
+  var iconMarkerAlt = L.icon({
+    iconUrl: '/images/marker-logo-alt.svg',
+    iconSize: [40, 40],
+    iconAnchor: [20, 40],
+    popupAnchor: [0, -40]
+  });
+
+  var members = {{ collections.membersLocations | dump | safe }};
+
+  var markerGroup = members.map( member => {
+    return new L.marker(member.location, {icon: iconMarker}).bindPopup('<a href="'+member.url+'">'+member.name+'</a>');
+  });
+
+  var markerSiege = L.marker([48.10494125597395, -1.6795760019626425], {icon: iconMarkerAlt}).bindPopup('Siège Astrolabe CAE')
+  .openPopup();
+
+  markerGroup.push(markerSiege)
+
+  var featureGroup = L.featureGroup(markerGroup).addTo(map);
+
+  map.fitBounds(featureGroup.getBounds());
+
+  // Creating a Layer object
+  var layer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
+  
+  // Adding layer to the map
+  map.addLayer(layer);
+</script>

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

@@ -0,0 +1,20 @@
+<section class="[ member-list ]">
+  <div class="[ wrapper ]">
+    {% if teamListItems.length %}
+      <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 }}">
+                <span class="member-name btn btn-primary">{{ item.data.name }}</span>
+              </a>
+              <p>{{ item.data.position }}</p>
+              {% if item.data.positionInternal %}
+                <p>{{ item.data.positionInternal }}</p>
+              {% endif %}
+            </li>
+        {% endfor %}
+      </ol>
+    {% endif %}
+  </div>
+</section>

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

@@ -4,11 +4,9 @@
       <ol class="[ member-list__items ]" reversed>
         {% for item in teamListItems %}
             <li class="member-list__item">
-              {# <div class="img-wrapper"> #}
+              <a href="{{ item.data.url }}" class="">
                 <img src=" {{ item.data.profile }}" alt="photo de {{ item.data.name }}">
-              {# </div> #}
+                <span class="member-name btn btn-primary">{{ item.data.name }}</span>
-              <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 %}
@@ -18,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/_includes/partials/components/posts-list.njk

@@ -3,9 +3,13 @@
     {% for item in newsListItems %}
       {% if item.date.getTime() <= global.now %}
         <li class="news-list__item {{ item.data.type }}">
-          <h3 class="news-list__item-heading">
+          <a href="{{ item.url | url }}" class="news-list__link" style="background-image: url({{ item.data.illustration }});">
-            <a href="{{ item.url | url }}" class="news-list__link" rel="bookmark">{{ item.data.title }}</a>
+            {% if item.data.type == 'event' %}
-          </h3>
+              <p class="news-list__item-type">Évènement</p>
+            {% else %}
+              <p class="news-list__item-type">Actualité</p>
+            {% endif %}
+            <h3 class="news-list__item-heading">{{ item.data.title }}</h3>
             <p class="news-list__item-date">
               {% if item.data.eventDate %}
               <time datetime="{{ item.data.eventDate | w3DateFilter }}">{{ item.data.eventDate | dateFilter }}</time>
@@ -16,6 +20,7 @@
               <time datetime="{{ item.data.eventTime }}">{{ item.data.eventTime }}</time>
               {% endif %}
             </p>
+          </a>
         </li>
       {% endif %}
     {% endfor %}

src/images/marker-alt.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="20" viewBox="0 0 14 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.0392 19.7082C7.09406 20.2815 5.8626 19.9809 5.28869 19.0368C1.76195 13.2353 0 9.28709 0 6.99256C0 3.13068 3.13401 0 7 0C10.866 0 14 3.13068 14 6.99256C14 9.28709 12.238 13.2353 8.71131 19.0368C8.54447 19.3112 8.31394 19.5415 8.0392 19.7082ZM7.00745 10C8.66606 10 10.0106 8.65685 10.0106 7C10.0106 5.34315 8.66606 4 7.00745 4C5.34883 4 4.00426 5.34315 4.00426 7C4.00426 8.65685 5.34883 10 7.00745 10Z" fill="#282156"/>
+</svg>

src/images/marker-logo-alt.svg

@@ -0,0 +1,3 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 20C0 8.96178 8.96183 0 20 0C31.0387 0 40 8.96178 40 20C40 31.0382 31.0387 40 20 40C8.96183 40 0 31.0382 0 20ZM25.3303 22.6563L28.3342 29.1806C28.5043 29.5573 28.8225 29.8524 29.2122 29.9957C29.602 30.1398 30.036 30.1215 30.4123 29.9462C30.789 29.776 31.0842 29.4584 31.2279 29.0686C31.3715 28.6788 31.3533 28.2448 31.1784 27.8681L27.7869 20.4983L25.3303 22.6563ZM23.1467 17.9132L20.105 11.3073L17.0339 17.9149L13.4188 18.25L18.0417 8.30295C19.1879 5.83678 21.0417 5.84032 22.1784 8.31076L26.7513 18.2474L23.1467 17.9132ZM14.8411 22.6328L11.7192 29.3507C11.5442 29.7274 11.2261 30.0226 10.8368 30.1615C10.447 30.3056 10.0121 30.2873 9.63585 30.112C9.25952 29.9375 8.96831 29.6198 8.82509 29.23C8.68186 28.8403 8.69963 28.4062 8.87413 28.0295L12.385 20.4748L14.8411 22.6328Z" fill="#282156"/>
+</svg>

src/images/marker-stroke.svg

@@ -0,0 +1,3 @@
+<svg width="28" height="40" viewBox="0 0 28 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.8191 38.9909C14.1645 39.9946 12.009 39.4681 11.0046 37.8158L10.5774 38.0755L11.0046 37.8158C7.48332 32.0229 4.85137 27.1687 3.10115 23.1986C1.34537 19.2159 0.5 16.1729 0.5 13.9858C0.5 6.53829 6.54368 0.5 14 0.5C21.4563 0.5 27.5 6.53829 27.5 13.9858C27.5 16.1729 26.6546 19.2159 24.8989 23.1986C23.1486 27.1687 20.5167 32.0229 16.9954 37.8158C16.7034 38.2961 16.3 38.6991 15.8191 38.9909ZM14.0149 20.501C17.6078 20.501 20.5213 17.5912 20.5213 14.0007C20.5213 10.4102 17.6078 7.5004 14.0149 7.5004C10.422 7.5004 7.50851 10.4102 7.50851 14.0007C7.50851 17.5912 10.422 20.501 14.0149 20.501Z" fill="#D6F253" stroke="#282156"/>
+</svg>

src/members/florent-le-saout.md

@@ -9,6 +9,7 @@ socialTwitter: 'https://twitter.com/AstrolabeCae'
 socialLinkedin: 'https://www.linkedin.com/company/astrolabe-cae'
 socialMastodon: 'https://framapiaf.org/@AstrolabeCAE'
 url: '/members/florent-le-saout'
+tags: [ linux, dev ]
 ---
 
 Je suis co-fondateur et co-gérant de la SCOP CAE Astrolabe.

src/members/jean-christophe-piriou.md

@@ -6,6 +6,7 @@ date: '2020-12-01'
 profile: '/images/profiles/jcp-profile.jpg'
 socialLinkedin: 'https://www.linkedin.com/in/piriou-jean-christophe-9bb4bb3b/'
 url: '/members/jean-christophe-piriou'
+location: [43.610632310943636, 3.873482372219893]
 ---
 
 Je suis ingénieur conseil auprès des collectivités dans le domaine de l’eau et l’aménagement du territoire ainsi que Product Owner de la solution informatique NAEGA que je co-développe avec mes collègues des CAE.

src/members/vincent-genieux.md

@@ -9,6 +9,7 @@ socialTwitter: 'https://twitter.com/AstrolabeCae'
 socialLinkedin: 'https://www.linkedin.com/in/vincent-g%C3%A9nieux-4223982/'
 socialMastodon: 'https://framapiaf.org/@AstrolabeCAE'
 url: '/members/vincent-genieux'
+tags: [ linux, dev ]
 ---
 ### Co-fondateur et co-gérant d'Astrolabe
 

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'
@@ -8,9 +8,11 @@ personalSite: 'https://www.behance.net/ygates'
 socialTwitter: 'https://twitter.com/YGdsgn'
 socialLinkedin: 'https://www.linkedin.com/in/yves-gatesoupe-05990b17a/'
 url: '/members/yves-gatesoupe'
+tags: [ web, dev, design, front-end ]
+location: [48.1047728782418, -1.6795127572657111]
 ---
 
-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/pages/comprendre-la-cae.md

@@ -1,6 +1,7 @@
 ---
 title: 'Comprendre la CAE'
 permalink: '/comprendre-la-cae/index.html'
+eleventyExcludeFromCollections: true
 ---
 
 # Une entreprise partagée

src/pages/contact.md

@@ -2,6 +2,7 @@
 title: 'Contact'
 permalink: '/contact/index.html'
 layout: 'layouts/contact.njk'
+eleventyExcludeFromCollections: true
 ---
 
 You can have a contact page which uses a basic form. The [code with the form fields lives here](https://github.com/hankchizljaw/hylia/blob/master/src/_includes/layouts/contact.njk). 

src/pages/equipe.md

@@ -3,6 +3,8 @@ title: 'L''équipe Astrolabe'
 permalink: '/equipe/index.html'
 layout: 'layouts/team.njk'
 teamListHeading: 'L''équipe Astrolabe'
+tagSearchHeading: 'Filtrer par mots-clés :'
+eleventyExcludeFromCollections: true
 ---
 
 Astrolabe CAE est confondée par Florent Le Saout et Vincent Génieux en 2019.<br>

src/pages/nous-rejoindre.md

@@ -1,6 +1,7 @@
 ---
 title: 'Nous rejoindre'
 permalink: '/nous-rejoindre/index.html'
+eleventyExcludeFromCollections: true
 ---
 
 # Comment rejoindre Astrolabe
@@ -29,7 +30,8 @@ permalink: '/nous-rejoindre/index.html'
   - Ouverture des droits allocation chômage si rémunération
   - Attention, ce n’est pas un contrat de travail
   
-  [Voir le contrat CAPE en détail]()
+  <!-- [Voir le contrat CAPE en détail]() -->
+  <a type=button data-bs-toggle="modal" data-bs-target="#modalCAPE">Voir le contrat CAPE en détail</a>
   </div>
   </article>
   <article class="process-cae__block">
@@ -56,7 +58,8 @@ permalink: '/nous-rejoindre/index.html'
   - Ouverture des droits allocation chômage
   - Mutuelle santé
   
-  [Voir le contrat CESA en détail]()
+  <!-- [Voir le contrat CESA en détail]() -->
+  <a type=button data-bs-toggle="modal" data-bs-target="#modalCESA">Voir le contrat CESA en détail</a>
   </div>
 
   <img src="/images/crew.svg" alt="Equipage Astrolabe" style="width: 32rem; margin-bottom: 2rem;">
@@ -77,3 +80,39 @@ permalink: '/nous-rejoindre/index.html'
   <img id="small-boat" src="/images/small-boat.svg" alt="Petit bateau à voile">
   </article>
 </section>
+
+<!-- Modal for CAPE -->
+<div class="modal fade" id="modalCAPE" tabindex="-1" aria-hidden="true">
+  <div class="modal-dialog modal-lg modal-dialog-centered">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title">Le CAPE en détails</h5>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+      </div>
+      <div class="modal-body">
+        Contenu
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fermer</button>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- Modal for CESA -->
+<div class="modal fade" id="modalCESA" tabindex="-1" aria-hidden="true">
+  <div class="modal-dialog modal-lg modal-dialog-centered">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title">Le CESA en détails</h5>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+      </div>
+      <div class="modal-body">
+        Contenu
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fermer</button>
+      </div>
+    </div>
+  </div>
+</div>

src/pages/posts-events.md

@@ -3,6 +3,7 @@ title: 'Actualité & Évènements'
 permalink: '/posts-events/index.html'
 layout: 'layouts/posts-events.njk'
 pageHeading: 'Actualité & Évènements'
+eleventyExcludeFromCollections: true
 ---
 
 

src/pages/posts-news.md

@@ -3,6 +3,7 @@ title: 'Actualité & Évènements'
 permalink: '/posts-news/index.html'
 layout: 'layouts/posts-news.njk'
 pageHeading: 'Actualité & Évènements'
+eleventyExcludeFromCollections: true
 ---
 
 

src/pages/posts.md

@@ -3,6 +3,7 @@ title: 'Actualité & Évènements'
 permalink: '/posts/index.html'
 layout: 'layouts/posts.njk'
 pageHeading: 'Actualité & Évènements'
+eleventyExcludeFromCollections: true
 ---
 
 

src/pages/thank-you.md

@@ -1,6 +1,7 @@
 ---
 title: 'Thank you'
 permalink: '/thank-you/index.html'
+eleventyExcludeFromCollections: true
 ---
 
 # Merci !

src/posts/laboess-cae.md

@@ -1,7 +1,7 @@
 ---
 title: On parle des CAE au Labo de L'ESS
 date: '2021-06-16'
-type: 'new'
+type: 'news'
 illustration: '/images/posts/Podcast-LaboESS-Logo.jpg'
 ---
 

src/scss/_theme.scss

@@ -49,6 +49,15 @@ a:not([class]):visited {
   }
 }
 
+.link {
+  font-weight: 400;
+  color: var(--color-dark);
+
+  &:visited {
+    color: inherit;
+  }
+}
+
 .return-link {
   align-self: flex-end;
   font-size: 1.125rem;
@@ -60,3 +69,27 @@ a:not([class]):visited {
     color: inherit;
   }
 }
+
+.justify-end {
+  justify-content: flex-end;
+}
+
+.ml-1 {
+  margin-left: 1rem;
+}
+
+.align-center {
+  align-items: center;
+}
+
+.fw-400 {
+  font-weight: 400;
+}
+
+.fs-h2 {
+  font-size: 1.5rem;
+}
+
+.fs-h3 {
+  font-size: 1.25rem;
+}

src/scss/components/_form.scss

@@ -5,6 +5,7 @@
 }
 
 .form-container {
+  margin-top: 8rem;
   padding: 0 0 6rem;
   background-color: var(--color-primary);
   color: var(--color-dark);

src/scss/components/_member-list.scss

@@ -1,6 +1,4 @@
 .member-list {
-  margin-bottom: 8rem;
-
   &__heading {
     margin: 8rem 0 4rem;
   }
@@ -8,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 {
@@ -20,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;
@@ -40,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;
       }
     }
   }

src/scss/components/_posts-list.scss

@@ -25,20 +25,32 @@
   }
 
   &__item {
-    display: flex;
+    
-    flex-direction: column;
     background-color: var(--color-primary);
     color: var(--color-dark);
     border-radius: 1rem;
 
-    &.event {
+    &.event,
+    &.event &-type {
       background-color: var(--color-light-blue);
     }
 
+    &-type {
+      margin-bottom: auto;
+      align-self: flex-start;
+      border-radius: 1rem 0;
+      padding: .125rem 1rem;
+      font-size: .875rem;
+      font-weight: 600;
+      background-color: var(--color-primary);
+    }
+
     &-heading {
       font-size: 1.125rem;
-      font-weight: 600;
+      font-weight: 400;
-      padding: 4.5rem 1.5rem 4rem;
+      padding: 1rem 1.5rem;
+      background-color: rgba(0, 0, 0, .65);
+      color: #fff;
     }
 
     &-date {
@@ -47,7 +59,6 @@
       background-color: var(--color-light-gray);
       border-radius: 0 0 1rem 1rem;
       padding: 1rem 1.5rem;
-      margin-top: auto;
       display: flex;
 
       time + time {
@@ -57,6 +68,15 @@
   }
 
   &__link {
+    border-radius: 1rem;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    height: 16rem;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: cover;
+
     &,
     &:visited {
       color: var(--color-dark);
@@ -64,10 +84,12 @@
     }
 
     &:hover {
+      h3 {
         text-decoration: underline;
       }
     }
   }
+}
 
 main.home .news-list {
   margin-top: 8rem;

src/scss/components/_tags.scss

@@ -0,0 +1,21 @@
+.tag-list {
+  list-style: none;
+  display: flex;
+
+  .tag-item + .tag-item {
+    margin-left: 1rem;
+  }
+}
+
+.tag-item {
+  padding: .5rem 1rem;
+  background-color: var(--color-light-gray);
+
+  a {
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}

src/scss/global.scss

@@ -75,4 +75,5 @@ img {
 @import 'components/partner';
 @import 'components/skip-link';
 @import 'components/video-player';
+@import 'components/tags';
 @import 'utilities/responsive';

src/team-skills.njk

@@ -0,0 +1,38 @@
+---
+title: 'L''équipe Astrolabe'
+pagination:
+  data: collections
+  size: 1
+  alias: tag
+  filter:
+    - post
+    - news
+    - event
+    - customer
+    - partner
+permalink: /equipe/{{ tag }}/
+---
+
+{% extends 'layouts/base.njk' %}
+
+{% set teamListItems = collections[tag] %}
+
+{% block content %}
+  <main id="main-content" tabindex="-1">
+    <div class="[ wrapper ]">
+      <h1 class="[ member-list__heading ]">{{ teamListHeading }}</h1>
+      {{ content | safe }}
+      <div class="[ box-flex align-center fw-400 ]">
+        <h2>Profils par mot-clé : </h2>
+        <span class="tag-item ml-1 fs-h2">{{ tag }}</span>
+        <a class="ml-1 link fw-400 fs-h3" href="/equipe">tout</a></h2>
+      </div>
+    </div>
+    {% include "partials/components/member-list-simple.njk" %}
+    <div class="wrapper box-flex justify-end">
+      <a class="return-link" href="/equipe">Voir tous les membres</a>
+    </div>
+    {% include "partials/components/map.njk" %}
+    {% include "partials/components/contact-form.njk" %}
+  </main>
+{% endblock %}