improved layout flexibility

stylesheets/partials/_blog.sass

@@ -7,12 +7,12 @@
     &:hover
       text-decoration: underline
   .article
-    padding= !base_font_size * 1.5 0 !base_font_size * 1.5
-    border-bottom= "1px solid" !article_border
+    padding: #{!base_font_size * 1.5 0} #{!base_font_size * 1.5}
+    border-bottom: 1px solid #{!article_border}
     &:first-child
       padding-top: 0
   #disqus_thread
-    padding-top= !base_font_size
+    padding-top: #{!base_font_size}
   .meta
     +sans-font
     border-bottom: 1px dashed #ddd
@@ -21,4 +21,6 @@
     padding: 8px 0 5px
     margin-bottom: 1.5em
     font-size: 75%
-    letter-spacing: 1px
+    letter-spacing: 1px
+  .footer
+    padding-top: 15px

stylesheets/partials/_footer.sass

@@ -1,13 +1,12 @@
 #footer
+  +linear-gradient(color_stops(darken(!body_bg, 5), !body_bg))
+  font-size: #{!base_font_size_small}
+  color: #{!footer_color}
+  border-top: 10px solid #{!footer_bg}
+  padding: 15px 0
   position: relative
   z-index: 2
-  font-size= !base_font_size_small
-  clear: both
-  padding= !base_font_size * 1.5 0
-  color= !footer_color
-  +h-linear-gradient(darken(!body_bg, 25), !body_bg)
-  border-top= "14px solid" !footer_bg
   a
-    color= #ddd
+    color: #ddd
     &:hover
-      color = #fff
+      color: #fff

stylesheets/partials/_header.sass

@@ -1,12 +1,11 @@
 #header
-  background-color= !header_bg
-  border-bottom= "1px solid" !header_border
-  padding: 30px 0
-  .page_width
-    position: relative
-  a.title
-    font-size= !h1
-    +heading-font
+  background-color: {!header_bg}
+  border-bottom: 1px solid #{!header_border}
+  padding: 25px 0
+  h1
     display: inline-block
-    color= !title_color
-    text-decoration: none
+    margin: 0
+    a.title
+      font-weight: normal
+      color: #{!title_color}
+      text-decoration: none

stylesheets/partials/_navigation.sass

@@ -2,23 +2,20 @@
   +clearfix
   position: relative
   z-index: 1
-  padding: 6px 0
-  background:
-    color= !nav_bg
-    image: -webkit-gradient(linear, left top, left bottom, from(#fcfcfc), to(#ddd), color-stop(0.3, #f4f4f4))
-    image: -moz-linear-gradient(left top, left bottom, from(#fcfcfc), to(#ddd), color-stop(0.3, #f4f4f4))
+  background-color: #{!nav_bg}
+  +linear-gradient(color_stops(#fcfcfc, #f4f4f4 .3, #ddd))
   border:
-    top= "1px solid" !nav_border_top
-    bottom= "1px solid" !nav_border_bottom
+    top: 1px solid #{!nav_border_top}
+    bottom: 1px solid #{!nav_border_bottom}
   ul
     position: relative
     +horizontal-list
     margin: 0 auto
-    overflow: visible
+    padding: 6px 0
     li
       padding: 0 15px
-      border-left= "1px solid" !nav_border_left
-      border-right= "1px solid" !nav_border_right
+      border-left: 1px solid #{!nav_border_left}
+      border-right: 1px solid #{!nav_border_right}
       &.alpha
         border-left: none
         padding-left: 0
@@ -26,7 +23,7 @@
         border-right: 0
       &.subscribe
         position: absolute
-        left= !page_width - !sidebar_width - !sidebar_margin/2
+        left: #{!page_width - !sidebar_width - !sidebar_margin/2}
         border: none
         a
           display: inline-block
@@ -34,8 +31,8 @@
           background: url("/images/rss.png") left top no-repeat
       a
         display: inline-block
-        color= !nav_color
+        color: #{!nav_color}
         line-height: 150%
         text-decoration: none
         &:hover
-          color= !nav_color_hover
+          color: #{!nav_color_hover}

stylesheets/partials/_page.sass

@@ -1,19 +1,8 @@
 #page
-  +clearfix
-  background-color= !page_bg
-  .page_width
-    +clearfix
-    position: relative
-    padding:
-      top: 25px
-      bottom: 25px
-    background-color= !blog_bg
-    +box-shadow(#ccc)
-    border:
-      left= "1px solid" !page_border_sides
-      right= "1px solid" !page_border_sides
+  background-color: #{!main_bg}
 #main
-  width= !main_width
-  float: left
-  &.expanded
-    width: 100%
+  background-color: #{!main_bg}
+  border-right: 1px solid #{!sidebar_border}
+  padding:
+    top: 25px
+    bottom: 25px

stylesheets/partials/_search.sass

@@ -1,7 +1,7 @@
 #search
   position: absolute
-  left= !page_width + !sidebar_margin - !sidebar_width
-  top= 10%
+  left: #{!page_width + !sidebar_margin - !sidebar_width}
+  top: #{30%}
   form
     background: url(/images/search_bg.png) no-repeat
     padding: 0

stylesheets/partials/_sidebar.sass

@@ -1,16 +1,17 @@
 #sidebar
-  float: left
-  width= !sidebar_width
-  margin-left= !sidebar_margin
-  font-size: 80%
-  line-height: 1.625em
-  h4
-    margin: 20px 0 0
+  line-height: 1.45em
+  font-size: 90%
+  h3
+    font-size: #{!h4+2}
+    margin: 20px -15px 10px
+    padding: 12px 15px
+    background: #fff
+    border-bottom: 1px solid #e5e5e5
+    border-top: 1px solid #e5e5e5
     &:first-child
-      margin-top: 10px
-    .small
-      +sans-font
-      font-size: 50%
+      margin-top: 0
+  h4
+    font-size: #{!h5}
       
 #twitter, #delicious
   +border-radius