diff --git a/layouts/articles.html b/layouts/articles.html
index 7b99c55..8ab87fc 100644
--- a/layouts/articles.html
+++ b/layouts/articles.html
@@ -7,18 +7,7 @@
-
-
+
<%= render 'header' %>
@@ -39,9 +28,9 @@
<%= render 'footer' %>
diff --git a/layouts/listing.html b/layouts/listing.html
index b4b637e..7584575 100644
--- a/layouts/listing.html
+++ b/layouts/listing.html
@@ -6,7 +6,7 @@
<%= @item[:title] %>
-
+
<%= render 'header' %>
@@ -19,16 +19,16 @@
<%= post_date.day %>
<%= post_date.strftime('%b') %>
<%= post_date.year %>
-
+
<%= article[:title] %>
<% end %>
<%= render 'footer' %>
diff --git a/output/css/style.css b/output/css/style.css
index e01e273..0b7c540 100644
--- a/output/css/style.css
+++ b/output/css/style.css
@@ -142,4 +142,9 @@ ul#menu li {
padding-top: 1em;
display: block;
font-weight: 200;
-}
\ No newline at end of file
+}
+
+.pagination {
+ display: none;
+ text-align: center;
+}
diff --git a/output/js/articles.js b/output/js/articles.js
new file mode 100644
index 0000000..a0a43cc
--- /dev/null
+++ b/output/js/articles.js
@@ -0,0 +1,33 @@
+var articles;
+
+function articles_loaded(data) {
+ articles = data;
+ console.log(data);
+ $('.pagination').slideDown('fast');
+};
+
+jQuery(function() {
+ $('.newer, .older').click(function() {
+ var elem = $(this);
+
+ var page;
+ var matches;
+ if(matches = elem.attr('href').match(/(\d+)$/)) {
+ page = new Number(matches[1]);
+ }
+ else {
+ return false;
+ }
+
+ var per_page = 10;
+
+ var i = (page - 1) * per_page;
+ for(; i < page * per_page; i++) {
+ console.log(articles[i].title);
+ }
+
+ return false;
+ });
+
+ jQuery.get('/articles/index.json', {}, articles_loaded, 'json');
+});