From 6da83b2d895ef07a99934dd3d7edbda249110485 Mon Sep 17 00:00:00 2001
From: Yves Gatesoupe <yves@ygat.es>
Date: Fri, 17 Jul 2020 16:17:11 +0200
Subject: [PATCH] posts + members pages responsive mobile

---
 src/_includes/layouts/posts-events.njk |  4 +++-
 src/_includes/layouts/posts-news.njk   |  4 +++-
 src/scss/components/_member-list.scss  | 16 ++++++++++++++++
 src/scss/components/_member.scss       | 15 +++++++++++++++
 src/scss/components/_post.scss         |  5 ++++-
 src/scss/components/_posts-list.scss   | 18 +++++++++++-------
 src/scss/components/_posts.scss        | 17 ++++++++++++++++-
 7 files changed, 68 insertions(+), 11 deletions(-)

diff --git a/src/_includes/layouts/posts-events.njk b/src/_includes/layouts/posts-events.njk
index d2d9855..987ec5e 100644
--- a/src/_includes/layouts/posts-events.njk
+++ b/src/_includes/layouts/posts-events.njk
@@ -18,7 +18,9 @@
         </li>
       </ul>
     </div>
-    {% include "partials/components//posts-list.njk" %}
+    <section class="[ news-list wrapper ]">
+      {% include "partials/components/posts-list.njk" %}
+    </section>
     {% include "partials/components/contact-form.njk" %}
   </main>
 {% endblock %}
diff --git a/src/_includes/layouts/posts-news.njk b/src/_includes/layouts/posts-news.njk
index 7cdad84..58073e3 100644
--- a/src/_includes/layouts/posts-news.njk
+++ b/src/_includes/layouts/posts-news.njk
@@ -18,7 +18,9 @@
         </li>
       </ul>
     </div>
-    {% include "partials/components//posts-list.njk" %}
+    <section class="[ news-list wrapper ]">
+      {% include "partials/components/posts-list.njk" %}
+    </section>
     {% include "partials/components/contact-form.njk" %}
   </main>
 {% endblock %}
diff --git a/src/scss/components/_member-list.scss b/src/scss/components/_member-list.scss
index c272074..addcf5f 100644
--- a/src/scss/components/_member-list.scss
+++ b/src/scss/components/_member-list.scss
@@ -51,3 +51,19 @@
     }
   }
 }
+
+@media (max-width: 575.98px) {
+  .member-list {
+    &__heading {
+      margin: 4rem 0;
+    }
+
+    &__items {
+      display: block;
+    }
+
+    &__item + &__item {
+      margin-top: 3rem;
+    }
+  }
+}
diff --git a/src/scss/components/_member.scss b/src/scss/components/_member.scss
index 7af1878..4d0284e 100644
--- a/src/scss/components/_member.scss
+++ b/src/scss/components/_member.scss
@@ -63,3 +63,18 @@
     }
   }
 }
+
+@media (max-width: 575.98px) {
+  .member {
+    margin-top: 3rem;
+    margin-bottom: 8rem;
+    
+    &__wrapper {
+      display: block;
+    }
+
+    &__bio {
+      margin-top: 8rem;
+    }
+  }
+}
diff --git a/src/scss/components/_post.scss b/src/scss/components/_post.scss
index 921c785..264baa5 100644
--- a/src/scss/components/_post.scss
+++ b/src/scss/components/_post.scss
@@ -338,7 +338,6 @@
         font-size: 1.75rem;
       }
 
-
       .split-content {
         display: block;
       }
@@ -368,6 +367,10 @@
           }
         }
       }
+
+      .post-info {
+        align-self: flex-start;
+      }
     }
   }
 }
diff --git a/src/scss/components/_posts-list.scss b/src/scss/components/_posts-list.scss
index 981f240..65f89e0 100644
--- a/src/scss/components/_posts-list.scss
+++ b/src/scss/components/_posts-list.scss
@@ -88,15 +88,11 @@
     }
 
     &__items {
-      display: flex;
-      overflow-y: auto;
-      padding-bottom: 1rem;
-      padding-left: 1.25rem;
+      display: block;
     }
 
-    &__item {
-      flex-shrink: 0;
-      flex-basis: 16rem;
+    &__item + &__item {
+      margin-top: 1.5rem;
     }
   }
 
@@ -120,9 +116,17 @@
     }
 
     &__items {
+      display: flex;
+      overflow-y: auto;
+      padding-bottom: 1rem;
       padding-left: 1.25rem;
     }
 
+    &__item {
+      flex-shrink: 0;
+      flex-basis: 16rem;
+    }
+
     .return-link {
       margin-right: 1.25rem;
     }
diff --git a/src/scss/components/_posts.scss b/src/scss/components/_posts.scss
index 3fb1a0b..06f803d 100644
--- a/src/scss/components/_posts.scss
+++ b/src/scss/components/_posts.scss
@@ -12,7 +12,10 @@
 
     li {
       display: inline-block;
-      margin-left: 1.5rem;
+      
+      + li {
+        margin-left: 1.5rem;
+      }
 
       a {
         font-weight: 600;
@@ -26,3 +29,15 @@
     }
   }
 }
+
+@media (max-width: 575.98px) {
+  .posts {
+    h1 {
+      font-size: 1.75rem;
+    }
+
+    .post-filter {
+      align-self: flex-start;
+    }
+  }
+}