1. Added Category support

2. Designed blog archives pages
3. Restructured Sass
4. Added Categories to rake post metadata
5. Some general style improvements

11 files changed, 100 insertions, 224 deletions

diff --git a/themes/classic/sass/partials/_blog.scss b/themes/classic/sass/partials/_blog.scss
index 12f596a1..0cf11ae8 100644
--- a/themes/classic/sass/partials/_blog.scss
+++ b/themes/classic/sass/partials/_blog.scss
@@ -1,111 +1,107 @@
-$border: inline-image('dotted-border.png');
 #articles {
   overflow: hidden;
-  @media only screen and (max-width: 768px) {
-    ul, ol { margin-left: 1.4em; }
+  ul, ol { margin-left: 1.4em; }
+  @media only screen and (min-width: 768px) {
+    ul, ol { margin-left: 0; }
   }
   > article {
     padding-bottom: 1em;
-    &:last-child { margin-bottom: 0; border-bottom: none; }
+    &:last-child { margin-bottom: 0;  }
     h2 {
       padding-top: 0.8em;
-      background: $border top left repeat-x;
-      &:first-child {
-        background: none;
-        padding-top: 0;
-      }
+      background: $img-border top left repeat-x;
+      &:first-child { background: none; padding-top: 0; }
     }
-    .byline + time:before, time +time:before, .comments:before {
+    .byline + time:before, time +time:before, .comments:before, .byline ~ .categories:before {
       @extend .separator;
     }
-    header {
-      position: relative;
-      padding-top: 2em;
-      margin-bottom: 1.5em;
-      padding-bottom: 1em;
-      background: $border bottom left repeat-x;
-      h1 {
-        margin: 0;
-        a { text-decoration: none;
-          &:hover { text-decoration: underline; } }
-      }
-      p {
-        font-size: .9em;
-        color: $text-color-light;
-        margin: 0;
-        @extend .sans;
-        &.meta {
-          text-transform: uppercase;
-          position: absolute;
-          top: 0;
-        }
-      }
-      @media only screen and (max-width: 768px) {
-        padding-bottom: 1em;
-        margin-bottom: 1em;
-        background: $border bottom left repeat-x;
-        p.meta { position: static; }
+  }
+  header {
+    position: relative;
+    padding-top: 2em;
+    padding-bottom: 1em;
+    margin-bottom: 1em;
+    background: $img-border bottom left repeat-x;
+    h1 {
+      margin: 0;
+      a { text-decoration: none;
+        &:hover { text-decoration: underline; } }
+    }
+    p {
+      font-size: .9em;
+      color: $text-color-light;
+      margin: 0;
+      @extend .sans;
+      &.meta {
+        text-transform: uppercase;
       }
     }
-    h1.feature {
-      padding-top: .5em;
-      margin-bottom: 1em;
+    @media only screen and (min-width: 768px) {
+      margin-bottom: 1.5em;
       padding-bottom: 1em;
-      background: $border bottom left repeat-x;
-      font-size: 2.0em; font-style: italic;
-      line-height: 1.3em;
+      background: $img-border bottom left repeat-x;
+      p.meta { position: absolute; top: 0; }
     }
-    .entry-content {
-      img, video { max-width: 100%; height: auto; }
-      video {
-        width: 100%; display: block; margin-bottom: 1.5em;
-        padding: .8em; background: #fff; border: 1px solid #eee;
-        @include box-sizing(border-box);
-      }
-      .flash-video {
-        max-width: 100%;
-        margin-bottom: 1.5em;
-        @include box-sizing(border-box);
-        padding: .8em; background: #fff; border: 1px solid #eee;
-        > div {
-          position: relative;
-          display: block;
-          padding-bottom: 56.25%;
-          padding-top: 1px;
-          height: 0;
-          overflow: hidden;
-          iframe, object, embed {
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-          }
-        }
-      }
+  }
+  h1.feature {
+    padding-top: .5em;
+    margin-bottom: 1em;
+    padding-bottom: 1em;
+    background: $img-border bottom left repeat-x;
+    font-size: 2.0em; font-style: italic;
+    line-height: 1.3em;
+  }
+  .entry-content {
+    img, video { max-width: 100%; height: auto; }
+    video {
+      width: 100%; display: block; margin-bottom: 1.5em;
+      padding: .8em; background: #fff; border: 1px solid #eee;
+      @include box-sizing(border-box);
     }
-    iframe.twitter-share-button {
+  }
+  .flash-video {
+    max-width: 100%;
+    margin-bottom: 1.5em;
+    @include box-sizing(border-box);
+    padding: .8em; background: #fff; border: 1px solid #eee;
+    > div {
       position: relative;
-      top: .3em;
-      padding-left: .5em;
-    }
-    > footer {
-      margin-top: 2em;
-      padding-top: 1em;
-      margin-bottom: 1.5em;
-      background: $border top left repeat-x;
-      time, .author { color: $text-color-light; @extend .sans; }
+      display: block;
+      padding-bottom: 56.25%;
+      padding-top: 1px;
+      height: 0;
+      overflow: hidden;
+      iframe, object, embed {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+      }
     }
   }
+  iframe.twitter-share-button {
+    position: relative;
+    top: .3em;
+    padding-left: .5em;
+  }
+  > article > footer {
+    margin-top: 2em;
+    padding-top: 1em;
+    margin-bottom: 1.5em;
+    background: $img-border top left repeat-x;
+    @extend .sans;
+  }
+
 }
 article + article {
-  background: $border top left repeat-x;
+  background: $img-border top left repeat-x;
 }
 #articles.blog-index {
   article header { background: none; padding-bottom: 0; }
   article h1 {
     font-size: 2.2em;
-    a { color: inherit; &:hover{ color: $link-color-hover; } }
+    a { color: inherit; &:hover { color: $link-color-hover; } }
   }
   a[rel=full-article] {
     background: darken($main-bg, 5);
@@ -125,8 +121,6 @@ article + article {
   footer {
     @extend .sans;
     margin-top: 1em;
-    p.meta { color: $text-color-light; }
-    a { color: inherit; &:hover{ color: $link-color-hover;} }
   }
 }
 
diff --git a/themes/classic/sass/partials/_delicious.scss b/themes/classic/sass/partials/_delicious.scss
deleted file mode 100644
index e962702e..00000000
--- a/themes/classic/sass/partials/_delicious.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-.delicious-posts {
-  a.delicious-link { margin-bottom: .5em; display: block; }
-  p { font-size: 1em; }
-}
diff --git a/themes/classic/sass/partials/_footer.scss b/themes/classic/sass/partials/_footer.scss
index 019bc2a4..350c562d 100644
--- a/themes/classic/sass/partials/_footer.scss
+++ b/themes/classic/sass/partials/_footer.scss
@@ -4,7 +4,7 @@ body > footer {
   color: $footer-color;
   text-shadow: lighten($footer-bg, 5) 0 1px;
   background-color: $footer-bg;
-  @include background(linear-gradient(lighten($footer-bg, 8), $footer-bg, darken($footer-bg, 11)));
+  @include background(image-url('noise.png'), linear-gradient(lighten($footer-bg, 8), $footer-bg, darken($footer-bg, 11)));
   border-top: 1px solid $footer-border-top;
   position: relative;
   padding-top: 1em;
diff --git a/themes/classic/sass/partials/_header.scss b/themes/classic/sass/partials/_header.scss
index 9cc4601f..8ae128b1 100644
--- a/themes/classic/sass/partials/_header.scss
+++ b/themes/classic/sass/partials/_header.scss
@@ -1,5 +1,5 @@
 body > header {
-  background-color: $header-bg;
+  background: $header-bg;
   h1 {
     display: inline-block;
     margin: 0;
diff --git a/themes/classic/sass/partials/_navigation.scss b/themes/classic/sass/partials/_navigation.scss
index 2fa17a1a..be132561 100644
--- a/themes/classic/sass/partials/_navigation.scss
+++ b/themes/classic/sass/partials/_navigation.scss
@@ -1,13 +1,12 @@
 body > nav {
   position: relative;
   background-color: $nav-bg;
-  @include background(linear-gradient(lighten($nav-bg, 8), $nav-bg, darken($nav-bg, 11)));
+  @include background(image-url('noise.png'), linear-gradient(lighten($nav-bg, 8), $nav-bg, darken($nav-bg, 11)));
   border: {
     top: 1px solid $nav-border-top;
     bottom: 1px solid $nav-border-bottom; }
   padding-top: .35em;
   padding-bottom: .35em;
-  //position: absolute; left: 0; right: 0; top: 0;
   form {
     @include background-clip(padding-box);
     margin: 0; padding: 0;
@@ -43,7 +42,7 @@ body > nav {
       @include horizontal-list(0);
       float: left;
       display: block;
-      padding-top: .25em;
+      padding-top: .15em;
     }
     ul[role=subscription] {
       margin-left: .8em;
@@ -59,7 +58,7 @@ body > nav {
       text-shadow: lighten($nav-bg, 12) 0 1px;
       float: left;
       text-decoration: none;
-      font-size: 1em;
+      font-size: 1.1em;
       padding: .1em 0;
       line-height: 1.5em;
     }
@@ -132,7 +131,7 @@ body > nav {
       }
     }
   }
-  ul[role=subscription] { li, a { border: 0; padding: 0; }}
+  ul[role=subscription] { position: relative; top: .2em; li, a { border: 0; padding: 0; }}
   a[rel=subscribe-rss]{ @include mask-subscription-nav('rss.png'); }
   a[rel=subscribe-email]{ @include mask-subscription-nav('email.png'); }
 }
diff --git a/themes/classic/sass/partials/_page.scss b/themes/classic/sass/partials/_page.scss
index 99a07ebc..d8ff5449 100644
--- a/themes/classic/sass/partials/_page.scss
+++ b/themes/classic/sass/partials/_page.scss
@@ -1,12 +1,12 @@
 html {
-  background: $page-bg inline-image('line-tile.png') top left;
+  background: $page-bg image-url('line-tile.png') top left;
 }
 body {
   > div {
-    background-color: $sidebar-bg;
+    background: $sidebar-bg image-url('noise.png') top left;
     border-bottom: 1px solid $page-border-bottom;
     > div {
-      background-color: $main-bg;
+      background: $main-bg image-url('noise.png') top left;
       border-right: 1px solid $sidebar-border;
     }
   }
diff --git a/themes/classic/sass/partials/_pinboard.scss b/themes/classic/sass/partials/_pinboard.scss
deleted file mode 100644
index 9f9ab461..00000000
--- a/themes/classic/sass/partials/_pinboard.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-#pinboard_linkroll {
-  .pin-title, .pin-description {
-    display: block;
-    margin-bottom: .5em;
-  }
-  .pin-tag {
-    @include hover-link;
-    @extend .aside-alt-link;
-    &:after { content: ','; }
-    &:last-child:after { content: ''; }
-  }
-}
diff --git a/themes/classic/sass/partials/_sidebar.scss b/themes/classic/sass/partials/_sidebar.scss
index 8c38e2a6..ac790e04 100644
--- a/themes/classic/sass/partials/_sidebar.scss
+++ b/themes/classic/sass/partials/_sidebar.scss
@@ -1,59 +1,4 @@
-.side-shadow-border {
-  @include box-shadow(lighten($sidebar-bg, 5) 0 1px);
-}
-#articles + aside {
-  color: $sidebar-color;
-  padding-top: 1.2em;
-  text-shadow: lighten($sidebar-bg, 8) 0 1px;
-  section {
-    @extend .sans;
-    font-size: .8em;
-    line-height: 1.4em;
-    margin-bottom: 1.5em;
-    h1 {
-      margin: 1.5em 0 0;
-      padding-bottom: .2em;
-      border-bottom: 1px solid $sidebar-border;
-      @extend .side-shadow-border;
-      + p {
-        padding-top: .4em;
-      }
-    }
-  }
-  ul {
-    margin-bottom: 0.5em;
-  }
-  li {
-    list-style: none;
-    padding: .5em 0;
-    margin: 0;
-    border-bottom: 1px solid $sidebar-border;
-    @extend .side-shadow-border;
-    p:last-child {
-      margin-bottom: 0;
-    }
-  }
-  a {
-    color: inherit;
-    @include transition(color, .5s);
-  }
-  &:hover a, &:hover #tweets a { color: $sidebar-link-color;
-    &:hover { color: $sidebar-link-color-hover; }
-  }
-  #recent_posts {
-    time {
-      text-transform: uppercase;
-      font-size: .9em;
-      color: #666;
-    }
-  }
-  @import "twitter";
-  @import "pinboard";
-  @import "delicious";
-}
-.aside-alt-link {
-  color: $sidebar-link-color-subdued;
-  &:hover {
-    color: $sidebar-link-color-subdued-hover;
-  }
-}
+@import "sidebar/base";
+@import "sidebar/twitter";
+@import "sidebar/pinboard";
+@import "sidebar/delicious";
diff --git a/themes/classic/sass/partials/_solarized.scss b/themes/classic/sass/partials/_solarized.scss
deleted file mode 100644
index 4952120d..00000000
--- a/themes/classic/sass/partials/_solarized.scss
+++ /dev/null
@@ -1,16 +0,0 @@
-$base03:    #002b36; //darkest blue
-$base02:    #073642; //dark blue
-$base01:    #586e75; //darkest gray
-$base00:    #657b83; //dark gray
-$base0:     #839496; //medium gray
-$base1:     #93a1a1; //medium light gray
-$base2:     #eee8d5; //cream
-$base3:     #fdf6e3; //white
-$yellow:    #b58900;
-$orange:    #cb4b16;
-$red:       #dc322f;
-$magenta:   #d33682;
-$violet:    #6c71c4;
-$blue:      #268bd2;
-$cyan:      #2aa198;
-$green:     #859900;
diff --git a/themes/classic/sass/partials/_syntax.scss b/themes/classic/sass/partials/_syntax.scss
index dc6472f2..b14b23bd 100644
--- a/themes/classic/sass/partials/_syntax.scss
+++ b/themes/classic/sass/partials/_syntax.scss
@@ -1,14 +1,16 @@
+$pre-bg: image-url('noise.png') top left;
 .highlight, html .gist .gist-file .gist-syntax .gist-highlight {
   .line-numbers {
     text-align: right;
     font-size: .8em;
     line-height: 1.45em;
-    background: $base02 !important;
+    background: $base02 $pre-bg !important;
     border-right: 1px solid darken($base03, 2) !important;
     @include box-shadow(lighten($base02, 2) -1px 0 inset);
     text-shadow: darken($base02, 10) 0 -1px;
     span { color: $base01 !important; }
     padding: .8em !important;
+    @include border-radius(0);
   }
 }
 html .gist .gist-file {
@@ -30,7 +32,7 @@ html .gist .gist-file {
    border: 1px solid lighten($base02, 2) !important;
    color: $base01;
    font-size: .7em !important;
-   background: $base02;
+   background: $base02 $pre-bg;
    @extend .sans;
    line-height: 1.5em;
     a {
@@ -51,14 +53,15 @@ html .gist .gist-file {
   }
 }
 pre {
-  background: #333;
+  background: $base03 $pre-bg;
   @include border-radius(.4em);
   @extend .mono;
+  border: 1px solid $base02;
   line-height: 1.45em;
   font-size: .8em;
   margin-bottom: 1.5em;
   padding: .8em 1em;
-  color: #ccc;
+  color: $base1;
   overflow: auto;
 }
 h3.filename {
@@ -88,7 +91,7 @@ p code {
   padding: .8em !important;
   overflow-x: auto;
   line-height: 1.45em;
-  background: $base03 !important;
+  background: $base03 $pre-bg !important;
   color: $base1 !important;
   span { color: $base1 !important; }
   span { font-style: normal !important; font-weight: normal !important; }
diff --git a/themes/classic/sass/partials/_twitter.scss b/themes/classic/sass/partials/_twitter.scss
deleted file mode 100644
index 36c6f62b..00000000
--- a/themes/classic/sass/partials/_twitter.scss
+++ /dev/null
@@ -1,33 +0,0 @@
-#tweets {
-  .loading {
-    background: inline-image('bird_32_gray.png') no-repeat center .5em;
-    color: darken($sidebar-bg, 18);
-    text-shadow: $main-bg 0 1px;
-    text-align: center;
-    padding: 2.5em 0 .5em;
-    &.error {
-      background: inline-image('bird_32_gray_fail.png') no-repeat center .5em;
-    }
-  }
-  a { color: $sidebar-link-color-subdued; @include hover-link; }
-  p {
-    position: relative;
-    padding-right: 1em;
-  }
-  a[href*=status]{
-    color: $twitter-status-link;
-    float: right;
-    padding: 0 0 .1em 1em;
-    position: relative; right: -1.3em;
-    text-shadow: #fff 0 1px;
-    font-size: .7em;
-    span { font-size: 1.5em; }
-    &:hover {
-      color: $sidebar-link-color-subdued-hover;
-      text-decoration: none;
-    }
-  }
-  a[href*='twitter.com/search']{
-    @extend .aside-alt-link;
-  }
-}