From ecdcd0fa8ecfd3e189e0be7d0b41e08f9635afc4 Mon Sep 17 00:00:00 2001
From: Nicolas Doby <nicolas.doby@itsonus.fr>
Date: Thu, 27 Oct 2022 14:19:40 +0200
Subject: [PATCH] feat: review the home page

---
 src/_components/postslist.njk | 10 ++++++----
 src/_pages/all_articles.njk   |  2 +-
 src/_pages/blog/exemple.md    |  2 +-
 src/_pages/blog/exemple_2.md  |  2 +-
 src/_pages/blog/exemple_3.md  |  2 +-
 src/assets/css/index.scss     | 31 +++++++++++++++++++++----------
 6 files changed, 31 insertions(+), 18 deletions(-)

diff --git a/src/_components/postslist.njk b/src/_components/postslist.njk
index c74fb1a..5d5148b 100644
--- a/src/_components/postslist.njk
+++ b/src/_components/postslist.njk
@@ -1,8 +1,9 @@
+<div class="post-list">
 {% for post in postslist | reverse %}
-  <article class="postlist-item">
-      <header class="postlist-header">
+  <article class="post-list-item">
+      <header class="post-list-header">
         <h2>
-          <a href="{{ post.url }}" class="postlist-link">{% if post.data.title %}{{ post.data.title }}{% else %}<code>{{ post.url }}</code>{% endif %}</a>
+          <a href="{{ post.url }}" class="post-list-link">{% if post.data.title %}{{ post.data.title }}{% else %}<code>{{ post.url }}</code>{% endif %}</a>
         </h2>
         <ul class="post-metadata">
           <li class="post-metadata__header">Le <time datetime="{{ post.data.date | htmlDateString }}">{{ post.data.date | readableDate }}</time> {{ post.data.authors | readableAuthors }}</li>
@@ -13,8 +14,9 @@
         </ul>
       </header>
       <p>{{ post.data.resume }}</p>
-    <footer  class="postlist-footer">
+    <footer  class="post-list-footer">
       <a href="{{ post.url }}">Lire la suite</a>
     </footer>
   </article>
 {% endfor %}
+</div>
diff --git a/src/_pages/all_articles.njk b/src/_pages/all_articles.njk
index 148444d..c251b76 100644
--- a/src/_pages/all_articles.njk
+++ b/src/_pages/all_articles.njk
@@ -4,7 +4,7 @@ eleventyNavigation:
   key: Tous les articles
   order: 3
 ---
-<ul class="post-list">
+<ul class="article-list">
   {%- for post in collections.posts | reverse %}
     <li>
       <div>
diff --git a/src/_pages/blog/exemple.md b/src/_pages/blog/exemple.md
index e368351..02a9a62 100644
--- a/src/_pages/blog/exemple.md
+++ b/src/_pages/blog/exemple.md
@@ -1,7 +1,7 @@
 ---
 title: Exemple d'article
 description: Article traitant d'ACV, d'EFC et d'écoconception
-resume: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Semper quis lectus nulla at volutpat. Est pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat. Duis tristique sollicitudin nibh sit amet commodo nulla facilisi. Enim diam vulputate ut pharetra sit amet. Placerat orci nulla pellentesque dignissim. Gravida rutrum quisque non tellus. Condimentum mattis pellentesque id nibh tortor id aliquet lectus proin. Diam sollicitudin tempor id eu nisl nunc mi ipsum faucibus. Tempor id eu nisl nunc mi. Cras pulvinar mattis nunc sed blandit libero volutpat sed cras. Eget magna fermentum iaculis eu non diam phasellus. Est lorem ipsum dolor sit amet consectetur adipiscing. Orci porta non pulvinar neque laoreet suspendisse interdum consectetur. Velit scelerisque in dictum non consectetur a. Lectus sit amet est placerat. Viverra aliquet eget sit amet tellus cras adipiscing enim eu. Ut tristique et egestas quis ipsum suspendisse ultrices. Bibendum est ultricies integer quis auctor elit. Aliquam sem et tortor consequat id porta nibh.
+resume: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Semper quis lectus nulla at volutpat. Est pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat. Duis tristique sollicitudin nibh sit amet commodo nulla facilisi. Enim diam vulputate ut pharetra sit amet. Placerat orci nulla pellentesque dignissim.
 date: 2022-10-14
 tags:
   - ACV
diff --git a/src/_pages/blog/exemple_2.md b/src/_pages/blog/exemple_2.md
index f22fbbe..081c085 100644
--- a/src/_pages/blog/exemple_2.md
+++ b/src/_pages/blog/exemple_2.md
@@ -1,7 +1,7 @@
 ---
 title: Second exemple d'article
 description: Article traitant d'accessibilité et d'écoconception
-resume: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Semper quis lectus nulla at volutpat. Est pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat. Duis tristique sollicitudin nibh sit amet commodo nulla facilisi. Enim diam vulputate ut pharetra sit amet. Placerat orci nulla pellentesque dignissim. Gravida rutrum quisque non tellus. Condimentum mattis pellentesque id nibh tortor id aliquet lectus proin. Diam sollicitudin tempor id eu nisl nunc mi ipsum faucibus. Tempor id eu nisl nunc mi. Cras pulvinar mattis nunc sed blandit libero volutpat sed cras. Eget magna fermentum iaculis eu non diam phasellus. Est lorem ipsum dolor sit amet consectetur adipiscing. Orci porta non pulvinar neque laoreet suspendisse interdum consectetur. Velit scelerisque in dictum non consectetur a. Lectus sit amet est placerat. Viverra aliquet eget sit amet tellus cras adipiscing enim eu. Ut tristique et egestas quis ipsum suspendisse ultrices. Bibendum est ultricies integer quis auctor elit. Aliquam sem et tortor consequat id porta nibh.
+resume: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Semper quis lectus nulla at volutpat. Est pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat. Duis tristique sollicitudin nibh sit amet commodo nulla facilisi. Enim diam vulputate ut pharetra sit amet.
 date: 2022-10-15
 tags:
   - cryptographie
diff --git a/src/_pages/blog/exemple_3.md b/src/_pages/blog/exemple_3.md
index c6930bb..bc19a53 100644
--- a/src/_pages/blog/exemple_3.md
+++ b/src/_pages/blog/exemple_3.md
@@ -1,7 +1,7 @@
 ---
 title: Troisième exemple d'article
 description: Article traitant d'accessibilité
-resume: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Semper quis lectus nulla at volutpat. Est pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat. Duis tristique sollicitudin nibh sit amet commodo nulla facilisi. Enim diam vulputate ut pharetra sit amet. Placerat orci nulla pellentesque dignissim. Gravida rutrum quisque non tellus. Condimentum mattis pellentesque id nibh tortor id aliquet lectus proin. Diam sollicitudin tempor id eu nisl nunc mi ipsum faucibus. Tempor id eu nisl nunc mi. Cras pulvinar mattis nunc sed blandit libero volutpat sed cras. Eget magna fermentum iaculis eu non diam phasellus. Est lorem ipsum dolor sit amet consectetur adipiscing. Orci porta non pulvinar neque laoreet suspendisse interdum consectetur. Velit scelerisque in dictum non consectetur a. Lectus sit amet est placerat. Viverra aliquet eget sit amet tellus cras adipiscing enim eu. Ut tristique et egestas quis ipsum suspendisse ultrices. Bibendum est ultricies integer quis auctor elit. Aliquam sem et tortor consequat id porta nibh.
+resume: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Semper quis lectus nulla at volutpat. Est pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat.
 date: 2022-10-17
 tags:
   - accessibilité
diff --git a/src/assets/css/index.scss b/src/assets/css/index.scss
index 26d546d..46a3903 100644
--- a/src/assets/css/index.scss
+++ b/src/assets/css/index.scss
@@ -214,34 +214,41 @@ figure figcaption {
 }
 
 /*!* Posts list *!*/
-.post-list {
+.article-list {
   list-style: none;
   padding: 0;
 }
-.post-list li {
+.article-list li {
   margin: 2px;
 }
-.post-list li p {
+.article-list li p {
   margin: 1.5rem  0 2.5rem;
 }
-.post-list li div {
+.article-list li div {
   display: flex;
 }
-.post-list li div a {
+.article-list li div a {
   flex-grow: 1;
 }
-.postlist-item {
-  margin-bottom: 5rem;
+.post-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 3rem;
 }
-.postlist-header h2 {
+.post-list-item {
+  max-width: 430px;
+  padding: 2rem;
+  box-shadow: 0 2px 12px 0 rgba(1,87,155,.1);
+}
+.post-list-header h2 {
   margin-bottom: .5rem;
 }
-.postlist-link {
+.post-list-link {
   flex-basis: calc(100% - 1.5rem);
   padding-right: .5em;
   text-decoration: none;
 }
-.postlist-footer {
+.post-list-footer {
   text-align: right;
 }
 
@@ -267,6 +274,10 @@ figure figcaption {
   margin: 0;
 }
 
+.post-list .post-metadata {
+  flex-direction: column;
+}
+
 h1 + .post-metadata {
   margin: 0 0 4rem;
 }