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

@@ -1,6 +1,7 @@

-.page_width

-  %a.title(href="/")=page.blog_title

-  - if page.respond_to? :google_custom_search_id

+.content

+  %h1

+    %a.title(href="/")=page.blog_title

+  - 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}")

@@ -1,4 +1,4 @@

-.page_width

+.content

   %ul

     %li.alpha

       %a(href="/") Blog

@@ -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"

\ No newline at end of file

@@ -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"

\ No newline at end of file

@@ -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/).

@@ -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 »';

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

+    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

-  padding:

-    left= !page_pad

-    right= !page_pad

\ No newline at end of file

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

\ No newline at end of file

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

\ No newline at end of file

+@import library/link_colors.sass

\ No newline at end of file

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

deleted file mode 100644

@@ -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)

\ No newline at end of file

deleted file mode 100644

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

\ No newline at end of file

deleted file mode 100644

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

\ No newline at end of file

deleted file mode 100644

@@ -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")

\ No newline at end of file

deleted file mode 100644

@@ -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)

\ No newline at end of file

deleted file mode 100644

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

\ No newline at end of file

deleted file mode 100644

@@ -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)

deleted file mode 100644

@@ -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)

\ No newline at end of file

deleted file mode 100644

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

\ No newline at end of file

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

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

\ No newline at end of file

+    letter-spacing: 1px

+  .footer

+    padding-top: 15px

\ No newline at end of file

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

\ No newline at end of file

+      color: #fff

\ No newline at end of file

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

\ No newline at end of file

+    margin: 0

+    a.title

+      font-weight: normal

+      color: #{!title_color}

+      text-decoration: none

\ No newline at end of file

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

\ No newline at end of file

+          color: #{!nav_color_hover}

\ No newline at end of file

@@ -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%

\ No newline at end of file

+  background-color: #{!main_bg}

+  border-right: 1px solid #{!sidebar_border}

+  padding:

+    top: 25px

+    bottom: 25px

\ No newline at end of file

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

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