major refactoring, improved file watching, changed site to public to support rack via pow (http://pow.cx) also implemented the basics of a 320 and up design refresh on the classic theme. This should make it great for mobile reading

18 files changed, 237 insertions, 27 deletions

diff --git a/source/sass/themes/classic/_partials.scss b/sass/themes/classic/_partials.scss
index c88faaac..e1e72490 100644
--- a/source/sass/themes/classic/_partials.scss
+++ b/sass/themes/classic/_partials.scss
@@ -1,8 +1,8 @@
-@import "partials/shared";
-@import "partials/syntax";
-@import "partials/search";
-@import "partials/sidebar";
-@import "partials/twitter";
+//@import "partials/shared";
+//@import "partials/syntax";
+//@import "partials/search";
+//@import "partials/sidebar";
+//@import "partials/twitter";
 
 /* layout partials */
 @import "partials/header";
diff --git a/source/sass/themes/classic/_style.scss b/sass/themes/classic/_style.scss
index f36aaa18..70421360 100644
--- a/source/sass/themes/classic/_style.scss
+++ b/sass/themes/classic/_style.scss
@@ -1,4 +1,4 @@
-@import "core/layout";
 @import "core/theme";
+@import "core/layout";
 @import "core/typography";
-//@import "partials";
+@import "partials";
diff --git a/sass/themes/classic/core/_layout.scss b/sass/themes/classic/core/_layout.scss
new file mode 100644
index 00000000..b245fd1f
--- /dev/null
+++ b/sass/themes/classic/core/_layout.scss
@@ -0,0 +1,94 @@
+a {
+  color: $link_color;
+  &:hover, &:focus {
+    color: saturate(darken($link_color, 15), 20); }
+  &:visited {
+    color: darken(adjust_hue($link_color, 70), 10);
+  }
+}
+
+$min-width: 320px;
+$max-width: 1440px;
+$default-border-radius: 4px;
+
+.group { @include pie-clearfix; }
+.core-layout { > div { @extend .inner-wrap; } }
+
+body {
+  > header, > nav, > footer {
+    @extend .core-layout;
+    min-width: $min-width;
+  }
+}
+
+
+@mixin media-layout($page-pad, $sidebar-width, $sidebar-pad) {
+  $side-nav: $sidebar-width - $page-pad - $sidebar-pad;
+
+  .inner-wrap {
+    padding: 0 $page-pad;
+    position: relative;
+    margin: 0 auto;
+    max-width: $max-width;
+    @extend .group;
+  }
+
+  body > nav + div {
+    @extend .group;
+    padding: 0;
+    max-width: $max-width + $page-pad*2;
+    margin: 0 auto;
+    > div {
+      @extend .group;
+      margin-right: $sidebar-width;
+    }
+  }
+  body > nav > div > div { width: $side-nav;
+    .search { width: $side-nav - 70px; }
+  }
+
+  #articles {
+    float: left;
+    width: 100%;
+    padding-top: 25px;
+    padding-bottom: 25px;
+    > * {
+      padding-right: $page-pad;
+      padding-left: $page-pad;
+    }
+    > article {
+      margin-bottom: 1.5em;
+      padding-bottom: 1.5em;
+      padding-right: $page-pad;
+      padding-left: $page-pad;
+    }
+    + aside {
+      display: block;
+      float: left;
+      width: $sidebar-width - $sidebar-pad*2;
+      margin: 0 -100% 0 0;
+      padding: $sidebar-pad;
+    }
+  }
+}
+
+@media only screen and (min-width: 320px) {
+  @import "../media/480";
+}
+
+@media only screen and (min-width: 768px) {
+  @include media-layout(15px, 240px, 15px);
+  @import "../media/768";
+}
+
+@media only screen and (min-width: 992px) {
+  @include media-layout(40px, 320px, 30px);
+  @import "../media/992";
+}
+
+
+//*{
+    //transition: width .5s;
+    //-moz-transition: width .5s;
+    //-webkit-transition: margin .5s;
+//}
diff --git a/source/sass/themes/classic/core/_theme.scss b/sass/themes/classic/core/_theme.scss
index a69b11d7..a69b11d7 100644
--- a/source/sass/themes/classic/core/_theme.scss
+++ b/sass/themes/classic/core/_theme.scss
diff --git a/source/sass/themes/classic/core/_typography.scss b/sass/themes/classic/core/_typography.scss
index 473f0744..5916c82e 100644
--- a/source/sass/themes/classic/core/_typography.scss
+++ b/sass/themes/classic/core/_typography.scss
@@ -7,6 +7,7 @@ $blockquote: $type-border !default; //darken($type-border, 20) !default;
 // Fonts
 @include font-face("Adelle", font-files("adellebasic_bold-webfont.woff", woff, "adellebasic_bold-webfont.ttf", truetype, "adellebasic_bold-webfont.svg#webfontKykxqSyz", svg), $eot: "adellebasic_bold-webfont.eot" );
 .heading-font { font-family: Adelle, "Helvetica Neue", Helvetica, Arial, sans; }
+.sans-font { font-family: "Helvetica Neue", Helvetica, Arial, sans; }
 
 body > header h1 {
   font-size: 3em;
@@ -24,17 +25,17 @@ body {
 }
 
 article {
-  margin-bottom: 1.5em;
-  padding-bottom: 1.5em;
-  padding-top: 1em;
-  + article { border-top: 3px solid $type-color-light; }
   &:last-child { border-bottom: none; }
   h2 {
     padding-top: 0.8em;
     border-top: 3px double $type-border;
   }
-  .author, time { text-transform: uppercase; }
-  .updated { font-size: .8em; color: $type-color-light; }
+  .byline + time:before, .byline + time +time:before {
+    content: "\2022 ";
+    padding: 0 .3em 0 .2em;
+    display: inline-block;
+    @include opacity(.5);
+  }
   time span {
     font-size: .7em;
     line-height: 0;
@@ -47,13 +48,7 @@ article {
       font-size: .8em;
       color: $type-color-light;
       font-family: Palatino, Times, "Times New Roman";
-      //margin-top: -1.2em;
-      //border: {
-        top-width: 1px;
-        //bottom-width: 1px;
-        //style: dashed;
-        //color: $type-border;
-      //}
+      margin-top: -1.4em;
     }
   }
 }
diff --git a/sass/themes/classic/media/_480.scss b/sass/themes/classic/media/_480.scss
new file mode 100644
index 00000000..e6f0613a
--- /dev/null
+++ b/sass/themes/classic/media/_480.scss
@@ -0,0 +1,16 @@
+body {
+  > header, > nav, > footer {
+    > div {
+      padding-left: .5em;
+      padding-right: .5em;
+    }
+  }
+  > header { font-size: .7em; padding: .5em 0; }
+}
+#articles { font-size: .9em; line-height: 1.5em;
+  > article { padding: .5em; }
+  + aside { display: none; }
+}
+body > nav > div > div { width: 180px;
+  .search { width: 110px; }
+}
diff --git a/sass/themes/classic/media/_768.scss b/sass/themes/classic/media/_768.scss
new file mode 100644
index 00000000..d8c61d57
--- /dev/null
+++ b/sass/themes/classic/media/_768.scss
@@ -0,0 +1,16 @@
+body > header, body #articles {
+  font-size: .95em;
+}
+
+//body {
+  //> header, > nav, > footer {
+    //> div { padding: 0 15px; }
+  //}
+//}
+//#page > div {
+  //margin-right: 0;
+  //#main { float: none; }
+  //> aside { margin: 0; float: none; }
+//}
+//page > div > aside { float: none; }
+//#main > * { padding-left: 15px; padding-right: 15px; }
diff --git a/sass/themes/classic/media/_992.scss b/sass/themes/classic/media/_992.scss
new file mode 100644
index 00000000..f7c643b6
--- /dev/null
+++ b/sass/themes/classic/media/_992.scss
@@ -0,0 +1,3 @@
+body > header, body #articles {
+  font-size: 1.05em;
+}
diff --git a/source/sass/themes/classic/partials/_blog.scss b/sass/themes/classic/partials/_blog.scss
index 47b48878..1dd255dd 100644
--- a/source/sass/themes/classic/partials/_blog.scss
+++ b/sass/themes/classic/partials/_blog.scss
@@ -1,7 +1,4 @@
 article {
-  h2 {
-    padding-top: 0;
-    margin-bottom: 0.1em; }
   .title {
     text-decoration: none;
     &:hover {
diff --git a/source/sass/themes/classic/partials/_footer.scss b/sass/themes/classic/partials/_footer.scss
index 08e6138c..08e6138c 100644
--- a/source/sass/themes/classic/partials/_footer.scss
+++ b/sass/themes/classic/partials/_footer.scss
diff --git a/source/sass/themes/classic/partials/_header.scss b/sass/themes/classic/partials/_header.scss
index a4964af9..ba7993a8 100644
--- a/source/sass/themes/classic/partials/_header.scss
+++ b/sass/themes/classic/partials/_header.scss
@@ -1,11 +1,13 @@
 body > header {
   background-color: $header_bg;
   border-bottom: 1px solid $header_border;
-  padding: 25px 0;
   h1 {
     display: inline-block;
     margin: 0;
     a, a:visited {
       font-weight: normal;
       color: $title_color;
-      text-decoration: none; } } }
+      text-decoration: none;
+    }
+  }
+}
diff --git a/sass/themes/classic/partials/_navigation.scss b/sass/themes/classic/partials/_navigation.scss
new file mode 100644
index 00000000..30685034
--- /dev/null
+++ b/sass/themes/classic/partials/_navigation.scss
@@ -0,0 +1,67 @@
+body > nav {
+  > div > div {
+    float: right;
+    position: relative;
+    padding: .45em 0 0 0;
+    a {
+      float: right;
+      @include replace-text-with-dimensions('rss.png');
+    }
+    form {
+      margin: 0; padding: 0;
+      @include background-clip(padding-box);
+      input[type='text']{
+        margin: 0;
+        @include border-radius(1em);
+        float: left;
+        border: 1px solid #ccc;
+        color: #888;
+        background: image-url('search.png') no-repeat .5em .4em #f6f6f6;
+        padding: .4em .8em .1em 1.8em;
+        line-height: 1.35em;
+        font-size: .85em;
+        &:focus {
+          color: #444;
+          border-color: #80b1df;
+          @include box-shadow(#80b1df 0 0 4px, #80b1df 0 0 3px inset);
+          background-color: #fff;
+          outline: none;
+        }
+      }
+    }
+  }
+  @extend .group;
+  position: relative;
+  z-index: 1;
+  background-color: $nav-bg;
+  @include background-image(linear-gradient(#fcfcfc, #f4f4f4 0.3, #dddddd));
+  border: {
+    top: 1px solid $nav-border-top;
+    bottom: 1px solid $nav-border-bottom; };
+  ul {
+    position: relative;
+    @include horizontal-list;
+    margin: 0 auto;
+    padding: .5em 0;
+  }
+  ul li {
+    padding: 0 1em;
+    margin: 0;
+    border-left: 1px solid $nav-border-left;
+    border-right: 1px solid $nav-border-right;
+    &:first-child {
+      border-left: none;
+      padding-left: 0; }
+    &:last-child {
+      border-right: 0; }
+    a {
+      display: inline-block;
+      color: $nav-color;
+      line-height: 150%;
+      text-decoration: none;
+      &:hover {
+        color: $nav-color-hover;
+      }
+    }
+  }
+}
diff --git a/source/sass/themes/classic/partials/_page.scss b/sass/themes/classic/partials/_page.scss
index 2a1503b4..414a37e9 100644
--- a/source/sass/themes/classic/partials/_page.scss
+++ b/sass/themes/classic/partials/_page.scss
@@ -2,7 +2,7 @@ body {
   background-color: $sidebar_bg;
 }
 
-#page > div {
+body > div > div {
   background-color: $main_bg; border-right: 1px solid $sidebar_border;
-  @include box-shadow(rgba(#000, .1) 0 0 18px);
+  //@include box-shadow(rgba(#000, .1) 0 0 18px);
 }
diff --git a/sass/themes/classic/partials/_search.scss b/sass/themes/classic/partials/_search.scss
new file mode 100644
index 00000000..e69de29b
--- /dev/null
+++ b/sass/themes/classic/partials/_search.scss
diff --git a/source/sass/themes/classic/partials/_shared.scss b/sass/themes/classic/partials/_shared.scss
index a97b6051..a97b6051 100644
--- a/source/sass/themes/classic/partials/_shared.scss
+++ b/sass/themes/classic/partials/_shared.scss
diff --git a/sass/themes/classic/partials/_sidebar.scss b/sass/themes/classic/partials/_sidebar.scss
new file mode 100644
index 00000000..faab4152
--- /dev/null
+++ b/sass/themes/classic/partials/_sidebar.scss
@@ -0,0 +1,20 @@
+#articles + aside {
+  section {
+    @extend .sans-font;
+    font-size: .8em;
+    line-height: 1.5em;
+    margin-bottom: 1.5em;
+  }
+  ul {
+    margin-bottom: 0.5em;
+  }
+  li {
+    list-style: none;
+    padding: .5em 0;
+    margin: 0;
+    border-bottom: 1px solid #ddd;
+    p:last-child {
+      margin-bottom: 0;
+    }
+  }
+}
diff --git a/source/sass/themes/classic/partials/_syntax.scss b/sass/themes/classic/partials/_syntax.scss
index b06a5a10..b06a5a10 100644
--- a/source/sass/themes/classic/partials/_syntax.scss
+++ b/sass/themes/classic/partials/_syntax.scss
diff --git a/source/sass/themes/classic/partials/_twitter.scss b/sass/themes/classic/partials/_twitter.scss
index 5d8b7d97..5d8b7d97 100644
--- a/source/sass/themes/classic/partials/_twitter.scss
+++ b/sass/themes/classic/partials/_twitter.scss