From 77bbe8e8791d8dfe6bcf410c28a434dd9fd3b4be Mon Sep 17 00:00:00 2001
From: Evan Sosenko <razorx@evansosenko.com>
Date: Sun, 16 Feb 2014 14:51:34 -0800
Subject: [PATCH] Use flexbox to center things on homepage.

---
 _assets/stylesheets/_style.sass     | 24 +++++++++++++++++++-----
 _assets/stylesheets/_variables.sass |  1 -
 index.html                          | 14 ++++++++------
 3 files changed, 27 insertions(+), 12 deletions(-)

diff --git a/_assets/stylesheets/_style.sass b/_assets/stylesheets/_style.sass
index c267407..b8fb18e 100644
--- a/_assets/stylesheets/_style.sass
+++ b/_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
diff --git a/_assets/stylesheets/_variables.sass b/_assets/stylesheets/_variables.sass
index 0c63899..418113f 100644
--- a/_assets/stylesheets/_variables.sass
+++ b/_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
diff --git a/index.html b/index.html
index e670f68..40e7ff3 100644
--- a/index.html
+++ b/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 %}