pagination

README.md

@@ -0,0 +1,5 @@
+
+Requirements
+------------------
+
+Grunt, Jekyll

_config.yml

@@ -1,7 +1,13 @@
 name: kremalicious
 description: Blog of designer & developer Matthias Kretschmann
+url: http://kremalicious.com
+author: Matthias Kretschmann
+
 permalink: /:title
 relative_permalinks: true
+paginate: 10
+paginate_path: "/page/:num"
+
 markdown: redcarpet
 pygments: true
 

_src/assets/less/grid.less

@@ -65,7 +65,7 @@
 	.col6 { margin-left: 0; }
 
 	.col1 { width: 13%; }
-	.col2 { width: 30%; }
+	.col2 { width: 28%; }
 	.col3 { width: 48%; }
 	.col4 { width: 65%; }
 	.col5 { width: 82%; }

_src/assets/less/navigation.less

@@ -41,35 +41,29 @@ a.nav-main-link {
     font-weight: @headings-font-weight;
     line-height: @headings-line-height;
 	.h6;
-	p {
-		width: 48%;
-		margin: 0;
-		position: relative;
-		font-size: .95em;
-	}
-	
-	.alignright { text-align: right; }
-	
+    
+	p { position: relative;	}
 	a { display: block; }
-	
-	.alignleft i { margin-right: .5em; }
-	
-	.alignright i { margin-left: .5em; }
-	
-	.single & .alignleft a { margin-left: 1.5em; }
-	
-	.single & .alignright a { margin-right: 1.5em; }
-	
-	.single & i {
+    
+	i {
 		position: absolute;
 		left: 0;
 		top: 0;
 	}
+    
+	.alignright { text-align: right; }
 	
-	.single & .alignright i {
+	.alignleft i { margin-right: .5em; }
+	
+	.alignright i { 
+        margin-left: .5em;
 		left: auto;
 		right: 0;
-	}
+    }
+	
+	.alignleft a { margin-left: 1.5em; }
+	.alignright a { margin-right: 1.5em; }
+	
 	
 }
 

_src/index.html

@@ -3,7 +3,7 @@ layout: base
 title: Home
 ---
 
-{% for post in site.posts %}
+{% for post in paginator.posts %}
     
     {% if post.layout == "link" %}
     
@@ -62,4 +62,29 @@ title: Home
     
     {% endif %}
         
-{% endfor %}
+{% endfor %}
+
+<nav class="row pager pagination">
+    {% if paginator.previous_page %}
+        
+        <p class="previous col2 alignleft">
+            <i class="icon-arrow-left"></i> 
+            {% if paginator.previous_page == 1 %}
+                <a href="/" rel="prev">Previous</a> 
+            {% else %}
+                <a href="/page/{{ paginator.previous_page }}/" rel="prev">Previous</a>
+            {% endif %}
+        </p>
+    {% endif %}
+    <p class="col2 textcenter">
+        <span class="page_number ">Page {{ paginator.page }} of {{ paginator.total_pages }}</span>
+    </p>
+    {% if paginator.next_page %}
+        <p class="next col2 alignright">
+            <a href="/page/{{ paginator.next_page }}/" rel="next">Next</a> 
+            <i class="icon-arrow-right"></i>
+        </p>
+    {% endif %}
+</nav>
+
+