Change to flexbox to support longer titles in post navigation

jeromeglacken · Jun 24, 2015 · 32a97bb · 32a97bb
1 parent 9e96db3
commit 32a97bb
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 12 deletions.
diff --git a/_layouts/post.html b/_layouts/post.html
@@ -18,13 +18,17 @@ <h1 class="title">{{ page.title }}</h1>
     {% if page.previous.url %}
     <a id="prev-post" href="{{ site.baseurl }}{{ page.previous.url }}">
       <span class="page-title">{{ page.previous.title }}</span>
-      <i class="fa fa-chevron-left"></i> {{ site.theme.str_prev }}
+      <span class="nav-label">
+        <i class="fa fa-chevron-left"></i> {{ site.theme.str_prev }}
+      </span>
     </a>
     {% endif %}
     {% if page.next.url %}
     <a id="next-post" href="{{ site.baseurl }}{{ page.next.url }}">
-      <span class="page-title">{{ page.next.title }}</span>
-       {{ site.theme.str_next }} <i class="fa fa-chevron-right"></i>
+       <span class="page-title">{{ page.next.title }}</span>
+       <span class="nav-label">
+        {{ site.theme.str_next }} <i class="fa fa-chevron-right"></i>
+       </span>
      </a>
     {% endif %}
 </div>

diff --git a/_sass/layouts/_posts.scss b/_sass/layouts/_posts.scss
@@ -51,7 +51,8 @@ header {
 #post-nav {
   width:100%;
   border-bottom: 1px solid $border-color;
-  display: inline-block;
+  display: flex;
+  float: left;
 
   a, .page-title {
     display: inline-block;
@@ -64,7 +65,7 @@ header {
   }
 
   a {
-    @extend %padding-small;
+    padding: 2em 3em;
     border: 1px solid rgba(255, 255, 255, 0);
     text-align: center;
     width: 50%;
@@ -73,13 +74,6 @@ header {
     @extend a.button:hover;
   }
 
-  #prev-post {
-      float: left;
-  }
-  #next-post {
-      float: right;
-  }
-
   i {
     vertical-align: middle;
   }