@@ -1,5 +1,5 @@

 @import "base/utilities";

 @import "base/solarized";

 @import "base/theme";

-@import "base/layout";

 @import "base/typography";

+@import "base/layout";

@@ -12,8 +12,30 @@ $sidebar-pad-medium: 15px !default;

 $sidebar-pad-wide: 20px !default;

 $sidebar-width-wide: 300px !default;

+$indented-lists: false !default;

+

 .group { @include pie-clearfix; }

+@mixin collapse-sidebar {

+  float: none;

+  width: auto;

+  clear: left;

+  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%; }

+  }

+  &.thirds section {

+    width: 30%;

+    margin-left: 5%;

+    &.first { margin-left: 0; }

+  }

+}

+

 body {

   -webkit-text-size-adjust: none;

   max-width: $max-width;

@@ -43,23 +65,31 @@ body {

   }

 }

-#content {

-  > div, > article { width: 100%; }

-  > aside {

-    float: none;

-    padding: 0 $pad-min 1px;

-    background-color: lighten($sidebar-bg, 2);

-    border-top: 1px solid $sidebar-border;

-  }

+#content { > div, > article { width: 100%; }}

+

+aside[role=sidebar] {

+  float: none;

+  padding: 0 $pad-min 1px;

+  background-color: lighten($sidebar-bg, 2);

+  border-top: 1px solid $sidebar-border;

+  @extend .group;

 }

-.toggle-sidebar { display: none; }

+.toggle-sidebar { &, .no-sidebar & { display: none; }}

+

+body.sidebar-footer {

+  @media only screen and (min-width: 750px) {

+    aside[role=sidebar]{ @include collapse-sidebar; }

+  }

+  #content { margin-right: 0px; }

+  .toggle-sidebar { display: none; }

+}

 @media only screen and (min-width: 550px) {

   body > header { font-size: 1em; }

-  #content aside {

-    @extend .group;

-  }

+}

+@media only screen and (min-width: 750px) {

+  aside[role=sidebar] { @include collapse-sidebar; }

 }

 @media only screen and (min-width: 768px) {

   body { -webkit-text-size-adjust: auto; }

@@ -73,89 +103,28 @@ body {

     @extend .group;

     margin-right: $sidebar-width-medium;

     position: relative;

+    .no-sidebar & { margin-right: 0; }

+    .collapse-sidebar & { margin-right: 20px; }

     > 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 {

-        width: auto; margin-left: 0;

-        &.odd, &.even { float: none; width: auto; margin-left: 0; }

-      }

-    }

-    .collapse-sidebar & {

-      margin-right: 20px;

-      > 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: -10px; top: 0; bottom: 0;

-    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;

+  aside[role=sidebar] {

+    @extend .group;

+    width: $sidebar-width-medium - $sidebar-pad-medium*2;

+    padding: 0 $sidebar-pad-medium $sidebar-pad-medium;

+    background: none;

+    clear: none;

+    float: left;

+    margin: 0 -100% 0 0;

+    section {

+      width: auto; margin-left: 0;

+      &.odd, &.even { float: none; width: auto; margin-left: 0; }

     }

     .collapse-sidebar & {

-      text-indent: 0px;

-      right: -20px;

-      width: 19px;

-      &:hover {

-        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;

-      }

+      @include collapse-sidebar;

     }

   }

 }

@@ -168,13 +137,19 @@ body {

       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 {

+  }

+  aside[role=sidebar] {

+    width: $sidebar-width-wide - $sidebar-pad-wide*2;

+    padding: 1.2em $sidebar-pad-wide $sidebar-pad-wide;

+    .collapse-sidebar & {

       padding: { left: $pad-wide; right: $pad-wide; }

       @extend .group;

     }

   }

 }

+

+@if $indented-lists == false {

+  @media only screen and (min-width: 768px) {

+    ul, ol { margin-left: 0; }

+  }

+}

@@ -55,10 +55,15 @@ h6, section h5, section section h4, section section section h3 {

 }

 p, blockquote, ul, ol { margin-bottom: 1.5em; }

-ul{ list-style-type: circle; }

+ul { list-style-type: disc;

+  ul { list-style-type: circle;

+    ul { list-style-type: square; }}}

-ol{ list-style-type: decimal; ol { list-style-type: lower-alpha; } }

-ul ul, ol ol { margin-left: 1.75em; }

+ol { list-style-type: decimal;

+  ol { list-style-type: lower-alpha;

+    ol { list-style-type: lower-roman; }}}

+

+ul, ol { &, ul, ol { margin-left: 1.3em; }}

 strong { font-weight: bold; }

@@ -2,6 +2,7 @@

 // To give it a try, uncomment some of the lines below, make changes, rebuild your blog, and see how it works.

 //$max-width: 1350px;

+//$indented-lists: true;

 // Padding used for layout margins

 //$pad-min: 18px;

@@ -1,7 +1,2 @@

 // This File is imported last, and will override other styles in the cascade

 // Add styles here to make changes without digging in too much

-

-// For example if you want indented lists on all screen sizes uncomment the following lines

-// #content article {

-//  ul, ol { margin-left: 1.4em; }

-// }

@@ -1,10 +1,6 @@

 article {

   overflow: hidden;

   padding-top: 1em;

-  ul, ol { margin-left: 1.4em; }

-  @media only screen and (min-width: 768px) {

-    ul, ol { margin-left: 0; }

-  }

   header {

     position: relative;

     padding-top: 2em;

@@ -35,9 +31,9 @@ article {

   h2 {

     padding-top: 0.8em;

     background: $img-border top left repeat-x;

-    .entry-content &:first-child { padding-top: 0; }

-    &:first-child { background: none; }

   }

+  .entry-content & h2:first-child, header + h2 { padding-top: 0; }

+  h2:first-child, header + h2 { background: none; }

   .feature {

     padding-top: .5em;

     margin-bottom: 1em;

@@ -90,7 +86,9 @@ article {

 }

 article + article {

-  background: $img-border top left repeat-x;

+  .blog-index & {

+    background: $img-border top left repeat-x;

+  }

 }

 #content .blog-index {

   padding: { top: 0; bottom: 0; }

@@ -175,6 +175,9 @@ pre, .highlight, .gist-highlight {

 .highlight code { @extend .pre-code; background: #000;}

 figure[role=code] {

+  background: none;

+  padding: 0;

+  border: 0;

   margin-bottom: 1.5em;

   figcaption {

     position: relative;

@@ -21,6 +21,7 @@ aside[role=sidebar] {

   }

   ul {

     margin-bottom: 0.5em;

+    margin-left: 0;

   }

   li {

     list-style: none;

@@ -47,3 +48,52 @@ aside[role=sidebar] {

     color: $sidebar-link-color-subdued-hover;

   }

 }

+

+@media only screen and (min-width: 768px) {

+  .toggle-sidebar {

+    outline: none;

+    position: absolute; right: -10px; top: 0; bottom: 0;

+    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 & {

+      text-indent: 0px;

+      right: -20px;

+      width: 19px;

+      &:hover {

+        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;

+      }

+    }

+  }

+}