Merge branch 'ramswaroop-post-navigation'

tandell · May 27, 2015 · 2d5ec82 · 2d5ec82
2 parents fac4fd9 + e591c1e
commit 2d5ec82
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 0 deletions.
diff --git a/_config.yml b/_config.yml
@@ -57,6 +57,9 @@ theme:
   # Colours, typography and padding
   # Open the "_sass > base" folder, and open "_variables.scss"
   google_fonts: "Source+Sans+Pro:400,700,700italic,400italic"
+
+  # Post navigation
+  post_navigation: true
 
 # PAGINATION
 paginate: 5

diff --git a/_layouts/post.html b/_layouts/post.html
@@ -12,6 +12,24 @@ <h1 class="title">{{ page.title }}</h1>
   <section class="post-content">{{ content }}</section>
 </article>
 
+<!-- Post navigation -->
+{% if site.theme.post_navigation %}
+<div id="post-nav">
+    {% if page.previous.url %}
+    <a id="prev-post" href="{{ page.previous.url }}">
+      <span class="page-title">{{ page.previous.title }}</span>
+      <i class="fa fa-chevron-left"></i> {{ site.theme.str_prev }}
+    </a>
+    {% endif %}
+    {% if page.next.url %}
+    <a id="next-post" href="{{ page.next.url }}">
+      <span class="page-title">{{ page.next.title }}</span>
+       {{ site.theme.str_next }} <i class="fa fa-chevron-right"></i>
+     </a>
+    {% endif %}
+</div>
+{% endif %}
+
 <!-- Disqus -->
 {% if site.theme.disqus_shortname %}
 <div class="comments">

diff --git a/_sass/layouts/_posts.scss b/_sass/layouts/_posts.scss
@@ -47,3 +47,41 @@ header {
     @extend %padding-regular;
   }
 }
+// Post navigation
+#post-nav {
+  width:100%;
+  border-bottom: 1px solid $border-color;
+  display: inline-block;
+
+  a, .page-title {
+    display: inline-block;
+  }
+
+  .page-title {
+    font-size: 1.2em;
+    margin-bottom: 1em;
+    width: 100%;
+  }
+
+  a {
+    @extend %padding-small;
+    border: 1px solid rgba(255, 255, 255, 0);
+    text-align: center;
+    width: 50%;
+  }
+  a:hover {
+    @extend a.button:hover;
+  }
+
+  #prev-post {
+      float: left;
+  }
+  #next-post {
+      float: right;
+  }
+
+  i {
+    vertical-align: middle;
+  }
+}
+