1. Udated category layout

2. Improved scoping and styling for links
3. Sidebar collapse improvements

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

@@ -90,7 +90,7 @@ body {
       }
     }
     .collapse-sidebar & {
-      margin-right: 10px;
+      margin-right: 20px;
       > aside {
         float: none;
         clear: left;
@@ -114,31 +114,47 @@ body {
   }
   .toggle-sidebar {
     outline: none;
-    position: absolute; right: -21px; top: 0;
+    position: absolute; right: -10px; top: 0; bottom: 0;
-    width: 20px;
-    font-size: 1.2em;
-    line-height: 1.1em;
-    padding-bottom: .1em;
-    text-indent: -1px;
-    text-decoration: none;
-    @include link-colors(#ccc, #999);
-    @include border-bottom-right-radius(.3em);
-    text-align: center;
-    background: $main-bg;
-    border-bottom: 1px solid $sidebar-border;
-    border-right: 1px solid $sidebar-border;
     display: inline-block;
+    text-decoration: none;
+    color: mix($text-color-light, $sidebar-bg);
+    width: 9px;
+    cursor: pointer;
+    &:hover {
+      background: mix($sidebar-border, $sidebar-bg);
+      @include background(linear-gradient(left, rgba($sidebar-border, .5), rgba($sidebar-border, 0)));
+    }
+    &:after {
+      position: absolute; right: -11px; top: 0;
+      width: 20px;
+      font-size: 1.2em;
+      line-height: 1.1em;
+      padding-bottom: .15em;
+      @include border-bottom-right-radius(.3em);
+      text-align: center;
+      background: $main-bg $noise-bg;
+      border-bottom: 1px solid $sidebar-border;
+      border-right: 1px solid $sidebar-border;
+      content: "\00BB";
+      text-indent: -1px;
+    }
     .collapse-sidebar & {
-      right: -11px;
-      width: 24px;
-      bottom: 0;
-      background-color: $sidebar-bg;
-      border-right-width: 0;
       text-indent: 0px;
-      border-left: 1px solid $sidebar-border;
+      right: -20px;
-      @include link-colors(#aaa, #888);
+      width: 19px;
       &:hover {
-       background: $sidebar-border;
+        background: mix($sidebar-border, $sidebar-bg);
+      }
+      &:after {
+        border-left: 1px solid $sidebar-border;
+        text-shadow: #fff 0 1px;
+        content: "\00AB";
+        left: 0px; right: 0;
+        text-align: center;
+        text-indent: 0;
+        border: 0;
+        border-right-width: 0;
+        background: none;
       }
     }
   }

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

@@ -41,6 +41,7 @@ $nav-border-right: lighten($nav-bg, 7) !default;
 $sidebar-bg: #f2f2f2 !default;
 $sidebar-link-color: $link-color !default;
 $sidebar-link-color-hover: $link-color-hover !default;
+$sidebar-link-color-active: $link-color-active !default;
 $sidebar-color: change-color(mix($text-color, $sidebar-bg, 80), $hue: hue($sidebar-bg), $saturation: saturation($sidebar-bg)/2) !default;
 $sidebar-border: desaturate(darken($sidebar-bg, 7), 10) !default;
 $sidebar-border: darken($sidebar-bg, 7) !default;
@@ -61,9 +62,12 @@ $page-border-bottom: darken($footer-bg, 5) !default;
 
 /* Core theme application */
 
-article a, #articles + aside a {
+a {
   @include link-colors($link-color, $hover: $link-color-hover, $focus: $link-color-hover, $visited: $link-color-visited, $active: $link-color-active);
 }
+aside[role=sidebar] a {
+  @include link-colors($sidebar-link-color, $hover: $sidebar-link-color-hover, $focus: $sidebar-link-color-hover, $active: $sidebar-link-color-active);
+}
 a {
   @include transition(color, .3s);
 }

.themes/classic/sass/partials/_archive.scss

@@ -1,3 +1,6 @@
+#archive {
+  #content > div { &, > article { padding-top: 0; } }
+}
 #blog-archives {
   article {
     padding: 1em 0 1em;
@@ -6,12 +9,10 @@
     &:last-child {
       background: none;
     }
+    footer { padding: 0; margin: 0;}
   }
-  h2 {
+  h1 { color: $text-color; margin-bottom: .3em; }
-    background: none;
+  h2 { display: none; }
-    display: none;
-  }
-  h1, h2 { color: $text-color; margin-bottom: .3em; }
   h1 {
     font-size: 1.5em;
     a {
@@ -30,7 +31,7 @@
   .entry-content { display: none; }
   time {
     font-size: .9em;
-    line-height: 1em;
+    line-height: 1.2em;
     .month, .day { display: inline-block; }
     .month { text-transform: uppercase; }
   }
@@ -40,10 +41,11 @@
   @media only screen and (min-width: 550px) {
     article { margin-left: 5em; }
     h2 {
-      background: none;
+      margin-bottom: .3em;
+      font-weight: normal;
       display: inline-block;
+      position: relative; top: -1px;
       float: left;
-      padding-top: .75em;
       &:first-child { padding-top: .75em; }
     }
     time {

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

@@ -1,21 +1,10 @@
-#content {
+article {
-  article { ul, ol { margin-left: 1.4em; }}
+  overflow: hidden;
+  padding-top: 1em;
+  ul, ol { margin-left: 1.4em; }
   @media only screen and (min-width: 768px) {
     ul, ol { margin-left: 0; }
   }
-  > article, > div > article {
-    overflow: hidden;
-    padding-top: 1em;
-    h2 {
-      padding-top: 0.8em;
-      background: $img-border top left repeat-x;
-      .entry-content &:first-child { padding-top: 0; }
-      &:first-child { background: none; }
-    }
-    .byline + time:before, time +time:before, .comments:before, .byline ~ .categories:before {
-      @extend .separator;
-    }
-  }
   header {
     position: relative;
     padding-top: 2em;
@@ -43,6 +32,12 @@
       background: $img-border bottom left repeat-x;
     }
   }
+  h2 {
+    padding-top: 0.8em;
+    background: $img-border top left repeat-x;
+    .entry-content &:first-child { padding-top: 0; }
+    &:first-child { background: none; }
+  }
   .feature {
     padding-top: .5em;
     margin-bottom: 1em;
@@ -80,7 +75,7 @@
       }
     }
   }
-  > div > article > footer {
+  > footer {
     padding-bottom: 2.5em;
     margin-top: 2em;
     @extend .sans;
@@ -88,6 +83,9 @@
       margin-bottom: .8em;
       font-size: .85em;
     }
+    .byline + time:before, time +time:before, .comments:before, .byline ~ .categories:before {
+      @extend .separator;
+    }
   }
 
 }
@@ -129,7 +127,7 @@ article + article {
   display: inline-block;
 }
 
-nav[role=pagination] {
+#content nav[role=pagination] {
   text-align: center;
   font-size: .95em;
   div {

.themes/classic/sass/partials/_footer.scss

@@ -13,7 +13,7 @@ body > footer {
   @include border-bottom-radius(.4em);
   z-index: 1;
   a {
-    @include link-colors($footer-link-color, $footer-link-color-hover);
+    @include link-colors($footer-link-color, $footer-link-color-hover, $visited: $footer-link-color);
   }
   p:last-child { margin-bottom: 0; }
 }

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

@@ -88,7 +88,6 @@ body > nav {
     fieldset[role=mobile-nav] { display: none; }
     fieldset[role=site-search]{ width: 99%; }
   }
-
   @media only screen and (min-width: 992px) {
     form {
       width: $sidebar-width-wide - $pad-wide - $sidebar-pad-wide*2 + 10px;

.themes/classic/sass/partials/_syntax.scss

@@ -167,6 +167,12 @@ p code {
   overflow-y: hidden;
   overflow-x: auto;
 }
+pre, .highlight, .gist-highlight {
+  &::-webkit-scrollbar {  height: .5em; background: rgba(#fff, .15); }
+  //&::-webkit-scrollbar-track { -webkit-box-shadow: $base03 1px 1px 0 inset; }
+  &::-webkit-scrollbar-thumb:horizontal { background: rgba(#fff, .2);  -webkit-border-radius: 4px; border-radius: 4px }
+}
+
 .highlight code { @extend .pre-code; background: #000;}
 figure {
   margin-bottom: 1.5em;

.themes/classic/source/_layouts/category_index.html

@@ -1,10 +1,15 @@
 ---
-layout: post
+layout: page
-no_meta: true
+no_footer: true
 ---
 
-<div class="blog-archives category">
+<div id="blog-archives" class="category">
 {% for post in site.categories[page.category] %}
+{% capture this_year %}{{ post.date | date: "%Y" }}{% endcapture %}
+{% unless year == this_year %}
+  {% assign year = this_year %}
+  <h2>{{ year }}</h2>
+{% endunless %}
 <article>
   {% include archive_post.html %}
 </article>

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

@@ -9,15 +9,13 @@ function getNav(){
   });
 }
 function addSidebarToggler() {
-  $('#content').append('<a href="#" class="toggle-sidebar">&raquo;</a>');
+  $('#content').append('<span class="toggle-sidebar"></span>');
   $('.toggle-sidebar').bind('click', function(e){
     e.preventDefault();
     if($('body').hasClass('collapse-sidebar')){
       $('body').removeClass('collapse-sidebar');
-      e.target.innerHTML = '&raquo;';
     } else {
       $('body').addClass('collapse-sidebar');
-      e.target.innerHTML = '&laquo;';
     }
   });
   sections = $('aside[role=sidebar] > section')