Merge branch 'feature-thumbnails' into dev

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" rel="bookmark">{{ item.data.title }}</a>
-          </h3>
+          <a href="{{ item.url | url }}" class="news-list__link" style="background-image: url({{ item.data.illustration }});">
+            {% if item.data.type == 'event' %}
+              <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/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;
-      padding: 4.5rem 1.5rem 4rem;
+      font-weight: 400;
+      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,9 +84,11 @@
     }
 
     &:hover {
+      h3 {
         text-decoration: underline;
       }
     }
+  }
 }
 
 main.home .news-list {