vertical blog layout

Author: Brandon Green

_config.yml

@@ -67,7 +67,7 @@ collections:
 
 pagination:
   enabled: true
-  per_page: 3
+  per_page: 8
   permalink: '/:num/'
   title: ':title | :num of :max'
   limit: 0

_layouts/blog.html

@@ -32,41 +32,22 @@ <h1 class="blog-index-title">
   <div class="main-content-wrapper">
     <div class="main-content">
       <div class="container">
-<!-- Temporarily hidden sub menu until there are more blog posts and categories -->
-<!--         <nav class="navbar navbar-expand-lg navbar-light main-content-menu">
-          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#blogPostFilter" aria-controls="navbarNavDropdown"
-            aria-expanded="false" aria-label="Toggle navigation">
-            <span class="navbar-toggler-icon"></span>
-          </button>
+        <div class="row blog-vertical">
 
-          <div class="collapse navbar-collapse" id="blogPostFilter">
-            <ul class="navbar-nav">
-              <li class="nav-item">
-                <a class="nav-link {% if current_page[3] == null %} selected {% endif %}" data-category="all" href="{{ site.baseurl }}/blog">All</a>
-              </li>
-              {% for category in display_post_categories %}
-              <li class="nav-item">
-                <a class="nav-link {% if current_page[3] == post_categories[forloop.index0] %} selected {% endif %}" data-category="{{ category | slugify }}" href="{{ site.baseurl }}/blog/categories/{{ category | slugify }}">{{ category }}</a>
-              </li>
-              {% endfor %}
-              <li class="nav-item">
-                  <a class="nav-link">Search</a>
-                </li>
-            </ul>
-          </div>
-        </nav> -->
-<!-- End submenu -->
-
-        <div class="row blog-index">
           {% for post in posts %}
-          <div class="col-md-4">
-            <p class="blog-date">{{ post.date | date: '%B %d, %Y' }}</p>
-            <h4>
-              <a href="{{ site.baseurl }}{{ post.url }}">{{ post.title }}</a>
-            </h4>
-            <p>{{ post.excerpt | remove: '<p>' | remove: '</p>' | truncate: 500}}</p>
-            <img src="{{ post.image }}" class="img-fluid">
-          </div>
+            <div class="vertical-blog-container">
+              <div class="col-md-4">
+                <p class="blog-date">{{ post.date | date: '%B %d, %Y' }}</p>
+                <h4>
+                  <a href="{{ site.baseurl }}{{ post.url }}">{{ post.title }}</a>
+                </h4>
+                <p>{{ post.excerpt | remove: '<p>' | remove: '</p>' | truncate: 500}}</p>
+                <img src="{{ post.image }}" class="img-fluid">
+              </div>
+              <a href="{{ site.baseurl }}{{ post.url }}" class="btn btn-lg with-right-arrow">
+                Read More
+              </a>
+            </div>
           {% endfor %}
         </div>
 

_sass/blog.scss

@@ -77,6 +77,24 @@
         color: $dark_grey;
       }
     }
+    .row.blog-vertical {
+      display: block;
+      max-width: 100%;
+      margin: auto;
+      .col-md-4 {
+        display: initial;
+      }
+      .btn {
+        float: left;
+      }
+    }
+    .vertical-blog-container {
+      border-bottom: 1px solid #E2E2E2;
+      padding-bottom: 3rem;
+      &:last-of-type {
+        margin-bottom: 2rem;
+      }
+    }
     @include desktop {
       margin-top: 380px + $desktop_header_height;
       .row.blog-index