improved layout flexibility

source/_includes/footer.haml

@@ -1,5 +1,5 @@
 #footer
-  .page_width
+  .content
     Copyright © #{Time.now.strftime('%Y')} - #{page.blog_title} -
     %span.credit Powered by <a href="http://octopress.org">Octopress</a>
 

source/_includes/header.haml

@@ -1,6 +1,7 @@
-.page_width
+.content
+  %h1
     %a.title(href="/")=page.blog_title
-  - if page.respond_to? :google_custom_search_id
+  - if page.respond_to?(:google_custom_search_id) && page.google_custom_search_id
     #search
       %form(action="http://www.google.com/cse" id="cse-search-box")
         %input(type="hidden" name="cx" value="#{page.google_custom_search_id}")

source/_includes/navigation.haml

@@ -1,4 +1,4 @@
-.page_width
+.content
   %ul
     %li.alpha
       %a(href="/") Blog

source/_layouts/blog_post.haml

@@ -25,8 +25,8 @@ google_analytics_tracking_id:
     #header= include "header.haml"
     #nav= include "navigation.haml"
     #page
-      .page_width
+      #content
         #main
-          .blog= include "post.haml"
+          .blog.content= include "post.haml"
         #sidebar= include "sidebar.haml"
     = include "footer.haml"

source/_layouts/default.haml

@@ -25,7 +25,8 @@ google_analytics_tracking_id:
     #header= include "header.haml"
     #nav= include "navigation.haml"
     #page
-      .page_width
-        #main= preserve rp(content)
+      #content
+        #main
+          .content= preserve rp(content)
         #sidebar= include "sidebar.haml"
     = include "footer.haml"

source/_posts/2009-11-13-hello-world.markdown

@@ -1,5 +1,6 @@
 ---
 title: Hello World! I'm Octopress!
+updated: March 10th, 2010
 ---
 
 **Octopress is a blogging framework designed for hackers**, based on [Jekyll](http://github.com/mojombo/jekyll) the blog aware static site generator powering [Github pages](http://pages.github.com/).

source/javascripts/octopress.js

@@ -17,7 +17,7 @@ function addExpander(div){
 function toggleExpander(expander){
   var html = '';
   var expanderPos = expander.getPosition().y;
-  if($('main').toggleClass('expanded').hasClass('expanded'))
+  if($('page').toggleClass('expanded').hasClass('expanded'))
     html = '« contract';
   else
     html = 'expand »';

stylesheets/_layout.sass

@@ -1,20 +1,52 @@
-!page_width = 900px
-!main_width = 620px
 !page_pad = 30px
-!sidebar_margin = 30px
-!sidebar_width = !page_width - !main_width - !sidebar_margin
-!pad = 15px
+!page_width = 980px
+!sidebar_margin = 25px
+!sidebar_width = 250px
 !default_border_radius = 4px
 
 html body
-  background-color= !body_bg
-  color= !body_color
+  background-color: #{!body_bg}
+  color: #{!body_color}
   a
-    color= !link_color
+    color: #{!link_color}
+    &:hover, &:focus
+      color: #{saturate(darken(!link_color, 15), 20)}
+    &:visited
+      color: #{darken(adjust_hue(!link_color, 70), 10)}
 
-.page_width
-  width= !page_width
+#header, #footer, #nav
+  .content
+    position: relative
     margin: 0 auto
-  padding:
-    left= !page_pad
-    right= !page_pad
+    width: #{!page_width - !page_pad}
+    padding: 0 #{!page_pad/2}
+
+#page, #header, #footer, #nav
+  min-width: #{!page_width}
+  
+#page, #content, .content
+  +pie-clearfix
+#content
+  margin: 0 auto
+  width: #{!page_width - !sidebar_width - !page_pad/2}
+  padding: 0 #{!sidebar_width} 0 #{!page_pad/2}
+#main
+  float: left
+  width: 100%
+  .content
+    padding-right: #{!sidebar_margin}
+
+#sidebar
+  float: left
+  width: #{!sidebar_width - !page_pad}
+  margin: 0 -100% 0 0
+  padding: #{!page_pad} 0 #{!page_pad} #{!page_pad}
+
+#page.expanded
+  #content
+    width: #{!page_width}
+    padding: 0
+  #sidebar
+    float: none
+    margin: 0
+    padding: 0 0 #{!page_pad}

stylesheets/_library.sass

@@ -1,10 +1,7 @@
+@import compass/utilities
 @import compass/css3
+
 @import library/reset.sass
-@import library/clearfix.sass
-@import library/border_radius.sass
-@import library/easy_box_shadow.sass
 @import library/list_borders.sass
 @import library/typography.sass
 @import library/link_colors.sass
-@import library/gradient.sass
-@import library/button_style.sass

stylesheets/_theme.sass

@@ -20,10 +20,12 @@
 
 !page_border_sides = #ccc
 !page_bg = #f0f0f0
+!sidebar_bg = #fcfcfc
+!sidebar_border = #eee
 
 // Blog 
 !article_border = #eee
-!blog_bg = #fff
+!main_bg = #fff
 
 !footer_color = #999
 !footer_bg = #444

stylesheets/library/_border_radius.sass

@@ -1,47 +0,0 @@
-!default_border_radius ||= 5px
-
-// Round all borders by amount
-=border-radius(!radius = !default_border_radius)
-  border-radius= !radius
-  -moz-border-radius= !radius
-  -webkit-border-radius= !radius
-
-// Round radius at position by amount.
-// values for !vert: "top", "bottom"
-// values for !horz: "left", "right
-=border-corner-radius(!vert, !horz, !radius = !default_border_radius)
-  border-#{!vert}-#{!horz}-radius= !radius
-  -moz-border-radius-#{!vert}#{!horz}= !radius
-  -webkit-border-#{!vert}-#{!horz}-radius= !radius
-  
-=border-top-left-radius(!radius = !default_border_radius)
-  +border-corner-radius("top", "left", !radius)
-
-=border-top-right-radius(!radius = !default_border_radius)
-  +border-corner-radius("top", "right", !radius)
-
-=border-bottom-left-radius(!radius = !default_border_radius)
-  +border-corner-radius("bottom", "left", !radius)
-
-=border-bottom-right-radius(!radius = !default_border_radius)
-  +border-corner-radius("bottom", "right", !radius)
-
-// Round top corners by amount
-=border-top-radius(!radius = !default_border_radius)
-  +border-top-left-radius(!radius)
-  +border-top-right-radius(!radius)
-
-// Round right corners by amount
-=border-right-radius(!radius = !default_border_radius)
-  +border-top-right-radius(!radius)
-  +border-bottom-right-radius(!radius)
-
-// Round bottom corners by amount
-=border-bottom-radius(!radius = !default_border_radius)
-  +border-bottom-left-radius(!radius)
-  +border-bottom-right-radius(!radius)
-
-// Round left corners by amount
-=border-left-radius(!radius = !default_border_radius)
-  +border-top-left-radius(!radius)
-  +border-bottom-left-radius(!radius)

stylesheets/library/_button_style.sass

@@ -1,45 +0,0 @@
-=btn-border-color(!color)
-  border-color= darken(!color, 25)
-
-=btn-text-shadow(!color)
-  !text_shadow = darken(!color, 25)
-  text-shadow= !text_shadow  "1px 1px 1px"
-
-=btn-style(!color)
-  !color1 = lighten(!color, 30)
-  !color2 = darken(!color, 20)
-  +h-linear-gradient(!color1, !color2)
-  background-color= !color
-  +btn-border-color(!color)
-  +btn-text-shadow(!color)
-
-=btn-style-hover(!color)
-  !color = lighten(!color, 8)
-  !color1 = lighten(!color, 22)
-  !color2 = darken(!color, 38)
-  +h-linear-gradient(!color1, !color2)
-  background-color= !color
-  +btn-border-color(!color)
-  +btn-text-shadow(!color)
-
-=btn-style-active(!color)
-  !color = darken(!color, 5)
-  !color1 = lighten(!color, 25)
-  !color2 = darken(!color, 35)
-  +h-linear-gradient(!color1, !color2)
-  background-color= !color
-  +btn-border-color(!color)
-  +btn-text-shadow(!color)
-
-=btn-structure(!font_size, !border_width, !line_height = !font_size *1.2)
-  !v_padding = floor(!font_size/2.5)
-  !h_padding = floor(!font_size)
-  !v_padding_active = !v_padding - 1px
-  !h_padding_active = !h_padding - 1px
-  border-width= !border_width
-  font-size= !font_size
-  padding= !v_padding !h_padding
-  line-height= !line_height
-  &:active
-    border-width= !border_width + 1px
-    padding= !v_padding_active !h_padding_active

stylesheets/library/_clearfix.sass

@@ -1,24 +0,0 @@
-// based on compass clearfix
-
-@import _hacks.sass
-
-// Extends the element to enclose any floats it contains.
-// This basic method is preferred for the usual case, when positioned content will not show outside the bounds of the container.
-// Recommendations include using this in conjunction with a width:
-// http://www.quirksmode.org/blog/archives/2005/03/clearing_floats.html
-=clearfix
-  :overflow hidden
-  +has-layout
-
-// Extends the element to enclose any floats it contains.
-// This older "Easy Clearing" method has the advantage of allowing positioned elements to hang outside the bounds of the container, at the expense of more tricky CSS.
-// http://www.positioniseverything.net/easyclearing.html
-=pie-clearfix
-  &:after
-    :content " "
-    :display block
-    :height 0
-    :clear both
-    :overflow hidden
-    :visibility hidden
-  +has-layout

stylesheets/library/_easy_box_shadow.sass

@@ -1,12 +0,0 @@
-!default_box_shadow_color = #333
-!default_box_shadow_x_offset = 1px
-!default_box_shadow_y_offset = 1px
-!default_box_shadow_blur_radius = 8px
-
-=box-shadow(!color = !default_box_shadow_color, !blur_radius = !default_box_shadow_blur_radius, !x_offset = !default_box_shadow_x_offset, !y_offset = !default_box_shadow_y_offset, !inset = "")
-  box-shadow= !inset !x_offset !y_offset !blur_radius !color
-  -webkit-box-shadow= !inset !x_offset !y_offset !blur_radius !color
-  -moz-box-shadow= !inset !x_offset !y_offset !blur_radius !color
-
-=inset-box-shadow(!color = !default_box_shadow_color, !blur_radius = !default_box_shadow_blur_radius, !x_offset = !default_box_shadow_x_offset, !y_offset = !default_box_shadow_y_offset)
-  +box-shadow(!color, !blur_radius, !x_offset, !y_offset, "inset")

stylesheets/library/_gradient.sass

@@ -1,15 +0,0 @@
-=linear-gradient(!from_coord, !to_coord, !color_start, !color_end, !color_stop1 = 0, !color_stop1_pos = .3, !color_stop_2 = 0, !color_stop2_pos = .9)
-  !gradient = "#{!from_coord}, #{!to_coord}, from(#{!color_start}), to(#{!color_end})"
-  //@if !color_stop1 != 0
-  //  !gradient += "color-stop(#{!color_stop1_pos}, #{!color_stop1})"
-  background= "-webkit-gradient(linear, #{!gradient})"
-  background= "-moz-linear-gradient(#{!gradient})"
-
-=h-linear-gradient(!color1, !color2)
-  +linear-gradient("left top", "left bottom", !color1, !color2)
-
-=v-linear-gradient(!color1, !color2)
-  +linear-gradient("left top", "right top", !color1, !color2)
-
-//=h-three-color-gradient(!color1, !color2, !color3, !color3_pos = .5)
-//  +linear-gradient("left top", "left bottom", !color1, !color2, !color3, !color3_pos)

stylesheets/library/_hacks.sass

@@ -1,8 +0,0 @@
-// based on compass hacks
-
-=has-layout
-  // This makes ie6 get layout
-  :display inline-block
-  // and this puts it back to block
-  &
-    :display block

stylesheets/library/_opacity.sass

@@ -1,18 +0,0 @@
-//**
-  Provides cross-browser css opacity.
-  @param !opacity
-    A number between 0 and 1, where 0 is transparent and 1 is opaque.
-=opacity(!opacity)
-  :opacity= !opacity
-  :-moz-opacity= !opacity
-  :-khtml-opacity= !opacity
-  :-ms-filter= "progid:DXImageTransform.Microsoft.Alpha(Opacity=" + round(!opacity*100) + ")"
-  :filter= "alpha(opacity=" + round(!opacity*100) + ")"
-
-// Make an element completely transparent.
-=transparent
-  +opacity(0)
-
-// Make an element completely opaque.
-=opaque
-  +opacity(1)

stylesheets/library/_sprite_hover.sass

@@ -1,4 +0,0 @@
-=sprite-column-hover-row(!col, !row_hover=2, !width=!sprite_default_size, !height=!sprite_default_size, !margin=!sprite_default_margin)
-  +sprite-position(!col, 1, !width, !height, !margin)
-  &:hover
-    +sprite-position(!col, !row_hover, !width, !height, !margin)

stylesheets/library/_sprite_img.sass

@@ -1,52 +0,0 @@
-//**
-  Example 1:
-  a.twitter
-    +sprite-img("icons-32.png", 1)
-  a.facebook
-    +sprite-img("icons-32png", 2)
-  ...
-  Example 2:
-  a
-    +sprite-background("icons-32.png")
-    a.twitter
-      +sprite-column(1)
-    a.facebook
-      +sprite-row(2)
-    ...
- 
-!sprite_default_size  ||= 32px
-!sprite_default_margin ||= 0px
-!sprite_image_default_width ||= !sprite_default_size
-!sprite_image_default_height ||= !sprite_default_size
- 
- 
-// Sets all the rules for a sprite from a given sprite image to show just one of the sprites.
-// To reduce duplication use a sprite-bg mixin for common properties and a sprite-select mixin for positioning.
-=sprite-img(!img, !col, !row = 1, !width = !sprite_image_default_width, !height = !sprite_image_default_height, !margin = !sprite_default_margin)
-  +sprite-background(!img, !width, !height)
-  +sprite-position(!col, !row, !width, !height, !margin)
- 
-// Sets rules common for all sprites, assumes you want a square, but allows a rectangular region.
-=sprite-background(!img, !width = !sprite_default_size, !height = !width)
-  +sprite-background-rectangle(!img, !width, !height)
- 
-// Sets rules common for all sprites, assumes a rectangular region.
-=sprite-background-rectangle(!img, !width = !sprite_image_default_width, !height = !sprite_image_default_height)
-  :background= image_url(!img) "no-repeat"
-  :width= !width
-  :height= !height
-  :overflow hidden
- 
-// Allows horizontal sprite positioning optimized for a single row of sprites.
-=sprite-column(!col, !width = !sprite_image_default_width, !margin = !sprite_default_margin)
-  +sprite-position(!col, 1, !width, 0px, !margin)
- 
-// Allows vertical sprite positioning optimized for a single column of sprites.
-=sprite-row(!row, !height = !sprite_image_default_height, !margin = !sprite_default_margin)
-  +sprite-position(1, !row, 0px, !height, !margin)
- 
-// Allows vertical and horizontal sprite positioning from a grid of equal dimensioned sprites.
-=sprite-position(!col, !row = 1, !width = !sprite_image_default_width, !height = !sprite_image_default_height, !margin = !sprite_default_margin)
-  !x = ((!col - 1) * -!width) - ((!col - 1) * !margin)
-  !y = ((!row - 1) * -!height) - ((!row - 1) * !margin)
-  :background-position= !x !y

stylesheets/library/_typography.sass

@@ -2,12 +2,12 @@
 !small ||= floor(!base_font_size * .85)
 !big ||= floor(!base_font_size * 1.25)
 !base_font_color ||= #333
-!h6 = ceil(!base_font_size*1.3)
-!h5 = ceil(!base_font_size*1.4)
-!h4 = ceil(!base_font_size*1.7)
-!h3 = ceil(!base_font_size*1.9)
-!h2 = ceil(!base_font_size*2.2)
-!h1 = ceil(!base_font_size*2.5)
+!h6 = ceil(!base_font_size*1)
+!h5 = ceil(!base_font_size*1)
+!h4 = ceil(!base_font_size*1.2)
+!h3 = ceil(!base_font_size*1.8)
+!h2 = ceil(!base_font_size*2.8)
+!h1 = ceil(!base_font_size*3.2)
 
 =heading-font 
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif
@@ -29,8 +29,8 @@
   !h5 = ceil(!font_size*1)
   !h4 = ceil(!font_size*1.2)
   !h3 = ceil(!font_size*1.8)
-  !h2 = ceil(!font_size*3)
-  !h1 = ceil(!font_size*3.5)
+  !h2 = ceil(!font_size*2.8)
+  !h1 = ceil(!font_size*3.2)
   h1, h2, h3, h4
     &:first-child
       margin-top: 0

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
@@ -22,3 +22,5 @@
     margin-bottom: 1.5em
     font-size: 75%
     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
+    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
+  background-color: #{!main_bg}
+#main
+  background-color: #{!main_bg}
+  border-right: 1px solid #{!sidebar_border}
   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
-#main
-  width= !main_width
-  float: left
-  &.expanded
-    width: 100%

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