1. Styled pagination for blog index

2. Fixed Newer pagination link on page 2
3. Improved sidebar section breakdown on collapse
4. Removed sharing links from the blog index page (moved to pages)
5. Improved styling for metadata on the blog index
6. Moved /blog/archives.html to /blog/archives/index.html
7. Improved responsive layout styling bugs

.themes/classic/sass/base/_layout.scss

@@ -19,7 +19,7 @@ body {
   max-width: $max-width;
   position: relative;
   margin: 0 auto;
-  > header, > nav, > footer, #content > article, #content > div > article, #content > div > nav {
+  > header, > nav, > footer, #content > article, #content > div > article, #content > div > section, nav[role=pagination] {
     @extend .group;
     padding-left: $pad-min;
     padding-right: $pad-min;
@@ -59,11 +59,6 @@ body {
   body > header { font-size: 1em; }
   #content aside {
     @extend .group;
-    section {
-      &.odd, &.even { float: left; width: 48%; }
-      &.odd { margin-left: 0; }
-      &.even { margin-left: 4%; }
-    }
   }
 }
 @media only screen and (min-width: 768px) {

.themes/classic/sass/base/_theme.scss

@@ -4,7 +4,7 @@ $img-border: inline-image('dotted-border.png');
 // Main Link Colors
 $link-color: lighten(#165b94, 3) !default;
 $link-color-hover: adjust-color($link-color, $lightness: 10, $saturation: 25) !default;
-$link-color-visited: adjust-color($link-color, $hue: 80, $lightness: -2) !default;
+$link-color-visited: adjust-color($link-color, $hue: 80, $lightness: -4) !default;
 $link-color-active: adjust-color($link-color-hover, $lightness: -15) !default;
 
 // Main Section Colors
@@ -38,7 +38,7 @@ $nav-border-left: darken($nav-bg, 11) !default;
 $nav-border-right: lighten($nav-bg, 7) !default;
 
 /* Sidebar colors */
-$sidebar-bg: #eee !default;
+$sidebar-bg: #f2f2f2 !default;
 $sidebar-link-color: $link-color !default;
 $sidebar-link-color-hover: $link-color-hover !default;
 $sidebar-color: change-color(mix($text-color, $sidebar-bg, 80), $hue: hue($sidebar-bg), $saturation: saturation($sidebar-bg)/2) !default;

.themes/classic/sass/partials/_blog.scss

@@ -5,8 +5,7 @@
   }
   > article, > div > article {
     overflow: hidden;
-    padding-bottom: 1em;
+    padding-top: 1em;
-    &:last-child { margin-bottom: 0;  }
     h2 {
       padding-top: 0.8em;
       background: $img-border top left repeat-x;
@@ -32,16 +31,16 @@
       font-size: .9em;
       color: $text-color-light;
       margin: 0;
-      @extend .sans;
       &.meta {
+        @extend .sans;
         text-transform: uppercase;
+        position: absolute; top: 0;
       }
     }
     @media only screen and (min-width: 768px) {
       margin-bottom: 1.5em;
       padding-bottom: 1em;
       background: $img-border bottom left repeat-x;
-      p.meta { position: absolute; top: 0; }
     }
   }
   .feature {
@@ -82,12 +81,13 @@
     }
   }
   > div > article > footer {
-    margin-bottom: 1.5em;
+    padding-bottom: 2.5em;
-    background: $img-border top left repeat-x;
     margin-top: 2em;
-    padding-top: 1em;
     @extend .sans;
-    p.meta { display: inline-block; font-size: .8em; }
+    p.meta {
+      margin-bottom: .8em;
+      font-size: .85em;
+    }
   }
 
 }
@@ -95,6 +95,8 @@ article + article {
   background: $img-border top left repeat-x;
 }
 #content .blog-index {
+  padding: { top: 0; bottom: 0; }
+  article { padding-top: 2em; }
   article header { background: none; padding-bottom: 0; }
   article h1 {
     font-size: 2.2em;
@@ -126,3 +128,23 @@ article + article {
   padding: 0 .4em 0 .2em;
   display: inline-block;
 }
+
+nav[role=pagination] {
+  text-align: center;
+  font-size: .95em;
+  div {
+    position: relative;
+    background: $img-border top left repeat-x;
+    padding: {top: 1.5em; bottom: 1.5em;}
+  }
+  a {
+    text-decoration: none;
+    color: $text-color-light;
+    &.prev { position: absolute; left: 0; }
+    &.next { position: absolute; right: 0; }
+    &:hover { color: $link-color-hover; }
+    &[href*=archive] {
+      &:before, &:after { content: '\2014'; padding: 0 .3em; }
+    }
+  }
+}

.themes/classic/sass/partials/_navigation.scss

@@ -86,7 +86,7 @@ body > nav {
       .search { width: 91%; }
     }
     fieldset[role=mobile-nav] { display: none; }
-    fieldset[role=site-search]{ width: 100%; }
+    fieldset[role=site-search]{ width: 99%; }
   }
 
   @media only screen and (min-width: 992px) {

.themes/classic/sass/partials/_sharing.scss

@@ -1,7 +1,6 @@
-footer .sharing {
+.sharing {
-  display: inline-block;
+  p.meta + & {
-  position: relative;
+    padding: { top: 1em; left: 0; }
-  top: .3em;
+    background: $img-border top left repeat-x;
-  padding-left: .5em;
+  }
-  &:first-child { padding-left: 0; }
 }

.themes/classic/source/_includes/article.html

@@ -5,20 +5,17 @@
     {% else %}
       <h1 class="entry-title">{{ page.title | titlecase }}</h1>
     {% endif %}
-    {% unless page.no_meta or !index %}<p class="meta">{% include post_date.html %}</p>{% endunless %}
+    {% unless page.no_meta %}
+      <p class="meta">{% include post_date.html %}</p>
+    {% endunless %}
   </header>
+  {% if index %}
+  {% endif %}
 {% endunless %}
 {% if index %}
   <div class="entry-content">{{ content | exerpt | smart_quotes }}</div>
-  <p><a rel="full-article" href="{{ post.url }}">Read on &rarr;</a></p>
   <footer>
-    <p class="meta">
+    <a rel="full-article" href="{{ post.url }}">Read on &rarr;</a>
-      {% include post_author.html %}
-      {% include post_date.html %}
-      {% include post_categories.html %}
-      <span class="comments"><a rel="comments" href="{{ post.url }}#disqus_thread">Comments</a></span>
-      {% include sharing.html %}
-    </p>
   </footer>
 {% else %}
 <div class="entry-content">{{ content | smart_quotes }}</div>

.themes/classic/source/_includes/navigation.html

@@ -12,5 +12,5 @@
 </form>
 <ul role="main-nav">
   <li><a href="/">Blog</a></li>
-  <li><a href="/blog/archives.html">Archives</a></li>
+  <li><a href="/blog/archives/index.html">Archives</a></li>
 </ul>

.themes/classic/source/_includes/post_categories.html

@@ -1,6 +1,6 @@
 {% capture category %}{% if post %}{{ post.categories | category_links | size }}{% else %}{{ page.categories | category_links | size }}{% endif %}{% endcapture %}
 {% unless category == '0' %}
-<span class="categories"> in
+<span class="categories">
   {% if post %}
     {{ post.categories | category_links }}
   {% else %}

.themes/classic/source/index.html

@@ -11,13 +11,17 @@ blog_index: true
   </article>
 {% endfor %}
 <nav role="pagination">
+  <div>
     {% if paginator.next_page %}
-    <a href="/page{{paginator.next_page}}/">&larr; Older</a>
+      <a class="prev" href="/page{{paginator.next_page}}/">&larr; Older</a>
     {% endif %}
-  <a href="/blog/archive.html">Blog Archive</a>
+    <a href="/blog/archives/index.html">Blog Archives</a>
-  {% if paginator.previous_page %}
+    {% if paginator.previous_page and paginator.previous_page > 1 %}
-    <a href="/page{{paginator.previous_page}}/">Newer &rarr;</a>
+      <a class="next" href="/page{{paginator.previous_page}}/">Newer &rarr;</a>
+    {% elsif paginator.previous_page %}
+      <a class="next" href="/">Newer &rarr;</a>
     {% endif %}
+  </div>
 </nav>
 {% if site.disqus_short_name %}
 <script type="text/javascript">

.themes/classic/source/javascripts/octopress.js

@@ -9,7 +9,7 @@ function getNav(){
   });
 }
 function addSidebarToggler() {
-  $('#content').prepend('<a href="#" class="toggle-sidebar">&raquo;</a>');
+  $('#content').append('<a href="#" class="toggle-sidebar">&raquo;</a>');
   $('.toggle-sidebar').bind('click', function(e){
     e.preventDefault();
     if($('body').hasClass('collapse-sidebar')){

_config.yml

@@ -28,7 +28,7 @@ simple_search: http://google.com/search
 email:
 
 # Twitter
-twitter_user:
+twitter_user: imathis
 twitter_tweet_count: 4
 twitter_show_replies: false
 twitter_follow_button: true
@@ -40,7 +40,7 @@ google_plus_one: true
 google_plus_one_size: medium
 
 # Pinboard
-pinboard_user:
+pinboard_user: imathis
 pinboard_count: 3
 
 # Delicious
@@ -48,7 +48,7 @@ delicious_user:
 delicious_count: 3
 
 # Disqus Comments
-disqus_short_name:
+disqus_short_name: octopress
 
 # Google Analytics
 google_analytics_tracking_id: