responsive blog with pagination

config.rb

@@ -55,6 +55,10 @@
   blog.prefix = 'blog'
   blog.layout = 'layouts/blog'
   blog.tag_template = 'blog/tag.html'
+
+  blog.paginate = true
+  blog.page_link = "page/{num}"
+  blog.per_page = 10
 end
 
 page '/blog/feed.xml', layout: false

source/blog/_sidebar.html.erb

@@ -1,7 +1,7 @@
 <ol id='toc-list'>
   <% if blog.tags['Recent Posts'] %>
   <li class='level-1'>
-    <a href="<%= tag_path 'Recent posts'%>">Recent Posts</a>
+    <a href="<%= tag_path 'Recent posts'%>" class="slide-widget-head">Recent Posts</a>
     <ol style="display:block">
       <% blog.tags['Recent Posts'].sort_by(&:date).reverse.take(10).each_with_index do |article, i| %>
       <li class='level-3'><%= link_to article.title, article %></li>
@@ -10,15 +10,15 @@
   </li>
   <% end %>
   <li class='level-1'>
-    <a href="<%= tag_path 'Releases'%>">Releases</a>
+    <a href="<%= tag_path 'Releases'%>" class="slide-widget-head">Releases</a>
     <ol style="display:block">
       <% blog.tags['Releases'].sort_by(&:date).reverse.take(10).each_with_index do |article, i| %>
       <li class='level-3'><%= link_to article.title, article %></li>
     <% end %>
     </ol>
   </li>
   <li class='level-1'>
-    <a href="<%= tag_path 'Ember Data' %>">Ember Data</a>
+    <a href="<%= tag_path 'Ember Data' %>" class="slide-widget-head">Ember Data</a>
     <ol style="display:block">
       <% blog.tags['Ember Data'].sort_by(&:date).reverse.each_with_index do |article, i| %>
       <li class='level-3'><%= link_to article.title, article %></li>

source/blog/index.html.erb

@@ -1,11 +1,14 @@
 ---
 title: "Blog"
+responsive: true
+pageable: true
+per_page: 10
 ---
 
 <% partial_for :head, 'head' %>
 <% partial_for :sidebar, 'sidebar' %>
 
-<% blog.articles.each_with_index do |article, i| %>
+<% page_articles.each_with_index do |article, i| %>
   <article class="blog-post-summary">
     <h2><%= link_to article.title, article %> &ndash; <time><%= article.date.strftime('%b %d, %Y') %></time></span></h2>
     <% if article.data.author %>
@@ -14,6 +17,16 @@ title: "Blog"
       </h5>
     <% end%>
     <%= article.summary %>
-    <%= link_to "Read more...", article %>
+    <%= link_to "Read more...", article, :class => "read-more" %>
   </article>
 <% end %>
+
+<div class="pagination">
+   <% if prev_page %>
+      <a class="newer-posts" href="<%= prev_page.url %>">Newer articles</a>
+    <% end %>
+   <p class="page-number">Page <%= page_number %> of <%= num_pages %></p>
+    <% if next_page %>
+      <a class="older-posts" href="<%= next_page.url %>">Older articles</a>
+    <% end %>
+</div>

source/stylesheets/blog.css.scss

@@ -1,3 +1,102 @@
+$small-breakpoint: 670px;
+$medium-breakpoint: 1040px;
+
+body.blog.responsive{
+  #content-wrapper{
+    @media screen and (max-width: $medium-breakpoint) {
+      width: 100%;
+      float: none;
+    }
+    @media screen and (max-width: $small-breakpoint) {
+      width: 100%;
+      float: none;
+    }
+
+    #sidebar {
+      @media screen and (max-width: $medium-breakpoint) {
+        width: 30%;
+        float: left;
+        &:after{
+          width: 100%;
+        }
+        .slide-widget-head{
+          font-size: 1.2em;
+        }
+        ol li.level-3{
+          a{
+            font-size: 1.2em;
+          }
+        }
+      }
+      @media screen and (max-width: $small-breakpoint) {
+        width: 100%;
+        float: none;
+        padding-bottom: 0em;
+        min-height: 0;
+
+        &:after{
+          display: none;
+        }
+      }
+
+    }
+    #content.has-sidebar{
+      margin-bottom: 0;
+      @media screen and (max-width: $medium-breakpoint) {
+        width: 70%;
+        float: left;
+        margin: 0;
+        padding: 2rem;
+        .blog-post-summary{
+          >h2{
+            line-height: 1.5;
+          }
+          >p{
+            font-size: 1.3em;
+            line-height: 1.8em;
+          }
+          >a.read-more{
+            font-size: 1.3em;
+          }
+        }
+      }
+      @media screen and (max-width: $small-breakpoint) {
+        width: 100%;
+        float: none;
+        margin: 0;
+        padding: 1rem;
+
+      }
+    }
+
+    .pagination {
+      position: relative;
+      margin: 40px auto 20px;
+      font-size: 1.1em;
+      color: #9EABB3;
+      text-align: center;
+      a{
+        position: absolute;
+        display: inline-block;
+        &.older-posts{
+          right: 0;
+        }
+        &.newer-posts{
+          left: 0;
+        }
+      }
+      .page-number{
+        display: inline-block;
+        color: #333;
+        margin: 0;
+      }
+    }
+
+
+  }
+
+}
+
 .blog {
   .btn {
     font-weight: bold;