post navigation added

jeromeglacken · May 27, 2015 · 8b35eaa · 8b35eaa
1 parent fac4fd9
commit 8b35eaa
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 0 deletions.
diff --git a/_config.yml b/_config.yml
@@ -62,6 +62,9 @@ theme:
 paginate: 5
 paginate_path: "blog/page:num"
 
+# POST NAVIGATION
+post_navigation: true
+
 # BUILD SETTINGS
 markdown: kramdown
 highlighter: pygments

diff --git a/_layouts/post.html b/_layouts/post.html
@@ -12,6 +12,18 @@ <h1 class="title">{{ page.title }}</h1>
   <section class="post-content">{{ content }}</section>
 </article>
 
+<!-- Post navigation -->
+{% if site.post_navigation %}
+<div id="post_nav">
+    {% if page.previous.url %}
+        <a class="prev" href="{{ page.previous.url }}" {% if page.next.url == null %} style="border-right:1px solid rgba(0, 0, 0, 0.1)" {% endif %}><h4>{{ page.previous.title }}</h4> &laquo; {{ site.theme.str_prev }}</a>
+    {% endif %}
+    {% if page.next.url %}
+        <a class="next" href="{{ page.next.url }}" {% if page.previous.url == null %} style="margin-left:50%;border-left:1px solid rgba(0, 0, 0, 0.1)" {% else %} style="border-left:1px solid rgba(0, 0, 0, 0.1)" {% endif %}><h4>{{ page.next.title }}</h4> {{ site.theme.str_next }} &raquo;</a>
+    {% endif %}
+</div>
+{% endif %}
+
 <!-- Disqus -->
 {% if site.theme.disqus_shortname %}
 <div class="comments">

diff --git a/_sass/base/_utility.scss b/_sass/base/_utility.scss
@@ -11,6 +11,18 @@
     padding: $padding-small * 1.5 $padding-large / 1.6;
   }
 }
+%padding-left-regular {
+  padding: $padding-x-small $padding-large /2 $padding-x-small $padding-large;
+  @media (max-width: 1000px) {
+    padding: $padding-x-small * 1.5 $padding-large / 1.6;
+  }
+}
+%padding-right-regular {
+  padding: $padding-x-small $padding-large $padding-x-small $padding-large /2;
+  @media (max-width: 1000px) {
+    padding: $padding-x-small * 1.5 $padding-large / 1.6;
+  }
+}
 %link-hover {
   text-decoration: underline;
   color: darken($link-color, 15%);

diff --git a/_sass/layouts/_posts.scss b/_sass/layouts/_posts.scss
@@ -47,3 +47,19 @@ header {
     @extend %padding-regular;
   }
 }
+// Post navigation (next/prev post)
+#post_nav {
+  width:100%;
+  display: flex;
+  border-bottom: 1px solid $border-color;
+}
+#post_nav .prev {
+  @extend %padding-left-regular;
+  width: 50%;
+  text-align: left;
+}
+#post_nav .next {
+  @extend %padding-right-regular;
+  width: 50%;
+  text-align: right;
+}