posts + members pages responsive mobile

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 %}

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 %}

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;
+    }
+  }
+}

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;
+    }
+  }
+}

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;
+      }
     }
   }
 }

src/scss/components/_posts-list.scss

@@ -88,15 +88,11 @@
     }
 
     &__items {
-      display: flex;
+      display: block;
-      overflow-y: auto;
-      padding-bottom: 1rem;
-      padding-left: 1.25rem;
     }
 
-    &__item {
+    &__item + &__item {
-      flex-shrink: 0;
+      margin-top: 1.5rem;
-      flex-basis: 16rem;
     }
   }
 
@@ -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;
     }

src/scss/components/_posts.scss

@@ -12,7 +12,10 @@
 
     li {
       display: inline-block;
+      
+      + 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;
+    }
+  }
+}