From 5d1d04c52c014171b911c3d7c23108e64f0ee9df Mon Sep 17 00:00:00 2001
From: Brandon Mathis <brandon@imathis.com>
Date: Tue, 12 Jul 2011 19:40:57 -0400
Subject: 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.

---
 .themes/classic/sass/base/_layout.scss | 118 +++++++++++++++++++++------------
 1 file changed, 75 insertions(+), 43 deletions(-)

(limited to '.themes/classic/sass/base')

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;
+    }
   }
 }
-- 
cgit v1.2.1