reorganized stylesheets

source/_layouts/default.haml

@@ -37,7 +37,7 @@ google_analytics: true
       %script(src="/javascripts/twitter.js" type="text/javascript")
     - if page.respond_to? :google_analytics
       %script(src="http://www.google-analytics.com/ga.js" type="text/javascript")
-  %body
+  %body(id="#{(page.respond_to?(:body_id) ? page.body_id : nil)}")
     #header
       .page_width
         %a.title(href="/")=page.blog_title
@@ -60,11 +60,13 @@ google_analytics: true
       .page_width
         #main
           - if page.respond_to? :date
-            %h2= page.title
-            = preserve rp(content)
-            %p.pubdate
-              Published:
-              =page.date.strftime("%d %b, %Y")
+            .blog
+              .article
+                %h2= page.title
+                = preserve rp(content)
+              %p.pubdate
+                Published:
+                =page.date.strftime("%d %b, %Y")
               - if page.respond_to? :disqus_short_name
                 #disqus_thread
                 :javascript

stylesheets/_layout.sass

@@ -12,112 +12,9 @@ html body
   a
     color= !link_color
 
-#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
-    display: inline-block
-    color= !title_color
-    text-decoration: none
-
-#nav
-  +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))
-  border:
-    top= "1px solid" !nav_border_top
-    bottom= "1px solid" !nav_border_bottom
-  ul
-    position: relative
-    +horizontal-list
-    margin: 0 auto
-    overflow: visible
-    li
-      padding: 0 15px
-      border-left= "1px solid" !nav_border_left
-      border-right= "1px solid" !nav_border_right
-      &.alpha
-        border-left: none
-        padding-left: 0
-      &.omega
-        border-right: 0
-      &.subscribe
-        position: absolute
-        left= !page_width - !sidebar_width - !sidebar_margin/2
-        border: none
-        a
-          display: inline-block
-          padding-left: 28px
-          background: url("/images/rss.png") left top no-repeat
-      a
-        display: inline-block
-        color= !nav_color
-        line-height: 150%
-        text-decoration: none
-        &:hover
-          color= !nav_color_hover
-
 .page_width
   width= !page_width
   margin: 0 auto
   padding:
     left= !page_pad
     right= !page_pad
-
-#page
-  +clearfix
-  background-color= !page_bg
-  .page_width
-    +clearfix
-    position: relative
-    padding:
-      top: 25px
-      bottom: 25px
-    background-color= !blog_bg
-    +easy-box-shadow(#ccc)
-    border:
-      left= "1px solid" !page_border_sides
-      right= "1px solid" !page_border_sides
-#main
-  width= !main_width
-  float: left
-  &.expanded
-    width: 100%
-
-#sidebar
-  float: left
-  width= !sidebar_width
-  margin-left= !sidebar_margin
-  font-size: 80%
-  line-height: 1.625em
-  h4
-    margin: 20px 0 0
-    &:first-child
-      margin-top: 10px
-    .small
-      +sans-font
-      font-size: 50%
-
-#footer
-  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
-    &:hover
-      color = #fff

stylesheets/_partials.sass

@@ -1,6 +1,13 @@
 @import partials/shared.sass
-@import partials/blog.sass
 @import partials/syntax.sass
 @import partials/search.sass
 @import partials/sidebar.sass
 @import partials/twitter.sass
+
+/* layout partials */
+@import partials/header.sass
+@import partials/navigation.sass
+@import partials/page.sass
+@import partials/sidebar.sass
+@import partials/blog.sass
+@import partials/footer.sass

stylesheets/partials/_footer.sass

@@ -0,0 +1,13 @@
+#footer
+  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
+    &:hover
+      color = #fff

stylesheets/partials/_header.sass

@@ -0,0 +1,12 @@
+#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
+    display: inline-block
+    color= !title_color
+    text-decoration: none

stylesheets/partials/_navigation.sass

@@ -0,0 +1,41 @@
+#nav
+  +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))
+  border:
+    top= "1px solid" !nav_border_top
+    bottom= "1px solid" !nav_border_bottom
+  ul
+    position: relative
+    +horizontal-list
+    margin: 0 auto
+    overflow: visible
+    li
+      padding: 0 15px
+      border-left= "1px solid" !nav_border_left
+      border-right= "1px solid" !nav_border_right
+      &.alpha
+        border-left: none
+        padding-left: 0
+      &.omega
+        border-right: 0
+      &.subscribe
+        position: absolute
+        left= !page_width - !sidebar_width - !sidebar_margin/2
+        border: none
+        a
+          display: inline-block
+          padding-left: 28px
+          background: url("/images/rss.png") left top no-repeat
+      a
+        display: inline-block
+        color= !nav_color
+        line-height: 150%
+        text-decoration: none
+        &:hover
+          color= !nav_color_hover

stylesheets/partials/_page.sass

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

stylesheets/partials/_sidebar.sass

@@ -1,3 +1,17 @@
+#sidebar
+  float: left
+  width= !sidebar_width
+  margin-left= !sidebar_margin
+  font-size: 80%
+  line-height: 1.625em
+  h4
+    margin: 20px 0 0
+    &:first-child
+      margin-top: 10px
+    .small
+      +sans-font
+      font-size: 50%
+      
 #twitter, #delicious
   +border-radius
   background: #f8f8f8