1. Made default layout more generic.

2. Added a page layout and improved html on post layout.
3. Improved flexibility of stylesheets for different layout types.
4. Collapsing sidebar now moves it to the bottom of the page and floats
content into columns.
5. Improved sharing settings, added Google plus one.

1 files changed, 75 insertions, 43 deletions

diff --git a/.themes/classic/sass/base/_layout.scss b/.themes/classic/sass/base/_layout.scss
index b24e1b29..b1b44738 100644
--- a/.themes/classic/sass/base/_layout.scss
+++ b/.themes/classic/sass/base/_layout.scss
@@ -19,7 +19,7 @@ body {
   max-width: $max-width;
   position: relative;
   margin: 0 auto;
-  > header, > nav, > footer, #articles > article, #articles > nav {
+  > header, > nav, > footer, #content > article, #content > div > article {
     @extend .group;
     padding-left: $pad-min;
     padding-right: $pad-min;
@@ -43,64 +43,77 @@ body {
   }
 }
 
-.toggle-sidebar { display: none; }
-#articles { width: 100%;
-  + aside {
+#content {
+  > div, > article { width: 100%; }
+  > aside {
     float: none;
     padding: 0 $pad-min 1px;
-    background-color: $sidebar-bg;
+    background-color: lighten($sidebar-bg, 2);
     border-top: 1px solid $sidebar-border;
   }
 }
 
+.toggle-sidebar { display: none; }
+
 @media only screen and (min-width: 550px) {
   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) {
   body { -webkit-text-size-adjust: auto; }
   body > header { font-size: 1.2em; }
-  body > nav {
-    + div {
-      @extend .group;
-      padding: 0;
-      margin: 0 auto;
-      > div {
-        @extend .group;
-        margin-right: $sidebar-width-medium;
-      }
-    }
+  #main {
+    @extend .group;
+    padding: 0;
+    margin: 0 auto;
   }
-  #articles {
-    padding-top: $pad-medium/2;
-    padding-bottom: $pad-medium/2;
-    float: left;
-    + aside {
+  #content {
+    @extend .group;
+    margin-right: $sidebar-width-medium;
+    position: relative;
+    > div, > article {
+      padding-top: $pad-medium/2;
+      padding-bottom: $pad-medium/2;
+      float: left;
+    }
+    > aside {
       width: $sidebar-width-medium - $sidebar-pad-medium*2;
       padding: 0 $sidebar-pad-medium $sidebar-pad-medium;
       background: none;
       float: left;
       margin: 0 -100% 0 0;
+      section, section.even { width: auto; margin: 0; }
     }
-  }
-  body > div > div { position: relative; }
-
-  .collapse-sidebar {
-    > div > div { margin-right: 10px; }
-    #articles + aside {
-      display: none;
-    }
-    .toggle-sidebar {
-      right: -1px;
-      background-color: $sidebar-bg;
-      border-right-width: 0;
-      text-indent: 2px;
-      border-left: 1px solid $sidebar-border;
-      @include border-bottom-right-radius(0);
-      @include border-bottom-left-radius(.3em);
-      @include link-colors(#aaa, #888);
+    .collapse-sidebar & {
+      margin-right: 10px;
+      > aside {
+        float: none;
+        clear: left;
+        width: auto;
+        margin: 0;
+        padding: 0 $pad-medium 1px;
+        background-color: lighten($sidebar-bg, 2);
+        border-top: 1px solid lighten($sidebar-border, 4);
+        section {
+          &.odd, &.even { float: left; width: 48%; }
+          &.odd { margin-left: 0; }
+          &.even { margin-left: 4%; }
+        }
+      }
+      > aside.thirds section {
+        width: 30%;
+        margin-left: 5%;
+        &.first { margin-left: 0; }
+      }
     }
   }
-
   .toggle-sidebar {
     outline: none;
     position: absolute; right: -21px; top: 0;
@@ -117,18 +130,37 @@ body {
     border-bottom: 1px solid $sidebar-border;
     border-right: 1px solid $sidebar-border;
     display: inline-block;
+    .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;
+      @include link-colors(#aaa, #888);
+      &:hover {
+       background: $sidebar-border;
+      }
+    }
   }
 }
 
 @media only screen and (min-width: 992px) {
   body > header { font-size: 1.3em; }
-  body > nav + div > div { margin-right: $sidebar-width-wide; }
-  #articles {
-    padding-top: $pad-wide/2;
-    padding-bottom: $pad-wide/2;
-    + aside {
+  #content { margin-right: $sidebar-width-wide; }
+  #content {
+    > div, > article {
+      padding-top: $pad-wide/2;
+      padding-bottom: $pad-wide/2;
+    }
+    > aside {
       width: $sidebar-width-wide - $sidebar-pad-wide*2;
       padding: 1.2em $sidebar-pad-wide $sidebar-pad-wide;
     }
+    .collapse-sidebar & aside {
+      padding: { left: $pad-wide; right: $pad-wide; }
+      @extend .group;
+    }
   }
 }