Use flexbox to center things on homepage.

_assets/stylesheets/_style.sass

@@ -39,13 +39,9 @@ h2.tagline
   background-color: $clr_blue_green
 
 #banner
-  width: 100%
   height: $banner_height
-  margin: 0.2 * $banner_height auto
-  padding-top: 0.3 * $banner_height
 
 #title
-  margin-bottom: $title_margin-bottom
   color: $site_title_clr
   font-size: 3rem
   font-family: $site_title_font
@@ -78,8 +74,26 @@ h2.tagline
 #email_modal
   text-align: center
 
+html.flexbox body
+  display: flex
+  min-height: 100vh
+  flex-direction: column
+  section.posts
+    display: flex
+    align-items: center
+    justify-content: center
+    flex: 1
+
+html.no-flexbox
+  #banner
+    width: 100%
+    margin: 0 auto
+
+  section.posts
+    width: 100%
+    margin-top: 3rem
+
 section.posts
-  width: 100%
   text-align: center
   h2
     font-size: 1.3rem

_assets/stylesheets/_variables.sass

@@ -30,7 +30,6 @@ $top_margin-bottom: rem-calc(10)
 
 // Banner
 $banner_height: rem-calc(80)
-$title_margin-bottom: rem-calc(5)
 $site_title_font: "Roboto", $font-family-base
 $site_title_clr: $clr_white
 $site_title_font_weight: 300

index.html

@@ -12,12 +12,14 @@
 <h2 class="tagline">{{ site.data.text.tagline }}</h2>
 
 <section class="posts">
-  <h2>{{ site.data.text.post_list_title }}</h2>
-  <ul class="posts">
-  {% for post in posts %}
-    <li><a href="{{ site.baseurl }}{{ post.url }}">{{ post.title }}</a></li>
-  {% endfor %}
-  </ul>
+  <div>
+    <h2>{{ site.data.text.post_list_title }}</h2>
+    <ul class="posts">
+    {% for post in posts %}
+      <li><a href="{{ site.baseurl }}{{ post.url }}">{{ post.title }}</a></li>
+    {% endfor %}
+    </ul>
+  </div>
 </section>
 
 {% include pagination.html %}