Add some pagination.

_config.yml

@@ -9,3 +9,4 @@ url: "http://pixyll.com"
 # Build settings
 markdown: kramdown
 permalink: pretty
+paginate: 3

_includes/pagination.html

@@ -0,0 +1,21 @@
+<div class="pagination clearfix mb1 mt4">
+  <div class="left p1">
+    {% if paginator.next_page %}
+      <a class="pagination-item older button button-big button-gray" href="{{ site.baseurl }}page{{paginator.next_page}}">Older</a>
+    {% else %}
+      <span class="pagination-item older button button-big button-gray button-disabled">Older</span>
+    {% endif %}
+  </div>
+  <div class="right p1">
+    {% if paginator.previous_page %}
+      {% if paginator.page == 2 %}
+        <a class="pagination-item newer button button-big button-gray" href="{{ site.baseurl }}/">Newer</a>
+      {% else %}
+        <a class="pagination-item newer button button-big button-gray" href="{{ site.baseurl }}page{{paginator.previous_page}}">Newer</a>
+      {% endif %}
+    {% else %}
+      <span class="pagination-item newer button button-big button-gray button-disabled">Newer</span>
+    {% endif %}
+  </div>
+  <div class=""></div>
+</div>

_posts/2014-06-08-pixyll-has-pagination.md

@@ -0,0 +1,9 @@
+---
+layout:     post
+title:      Pixyll has Pagination
+date:       2014-06-08 11:21:29
+summary:    This is an empty post to illustrate the pagination component with Pixyll.
+categories: jekyll pixyll
+---
+
+This is an empty post to illustrate the pagination component with Pixyll.

_posts/2014-06-09-so-what-is-jekyll.md

@@ -0,0 +1,9 @@
+---
+layout:     post
+title:      So, What is Jekyll?
+date:       2014-06-09 12:32:18
+summary:    Transform your plain text into static websites and blogs. Simple, static, and blog-aware.
+categories: jekyll pixyll
+---
+
+

css/pixyll.css

@@ -15,6 +15,10 @@
 
 body {
   font-size: 1.5rem;
+
+          box-sizing: border-box;
+     -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
 }
 
 .site-header a {
@@ -65,6 +69,24 @@ body {
   color: #7a7a7a;
 }
 
+.pagination .button {
+  font-size: 1rem;
+  font-weight: 200;
+  letter-spacing: 1px;
+}
+
+.button-disabled {
+  opacity: 0.55;
+  background-color: #999;
+}
+
+.button-disabled:hover,
+.button-disabled:active,
+.button-disabled:focus {
+  cursor: not-allowed;
+  background-color: #999;
+}
+
 p {
   font-weight: 200;
   font-family: 'Merriweather', Georgia, 'Times New Roman', serif;

index.html

@@ -5,7 +5,7 @@
 <div class="home">
 
   <div class="posts">
-    {% for post in site.posts %}
+    {% for post in paginator.posts %}
       <div class="post">
         <a href="{{ post.url | prepend: site.baseurl }}" class="post-link">
           <span class="post-meta">{{ post.date | date: "%b %-d, %Y" }}</span> <br><br>
@@ -16,5 +16,7 @@ <h3 class="h2 post-title">{{ post.title }}</h3>
     {% endfor %}
   </div>
 
+  {% include pagination.html %}
+
   <!--<p class="rss-subscribe">subscribe <a href="{{ "/feed.xml" | prepend: site.baseurl }}">via RSS</a></p>-->
 </div>