added compass, added some basic stylesheets

.gitignore

@@ -1 +1,2 @@
-site
+site
+source/stylesheets/.sass-cache

Rakefile

@@ -29,7 +29,7 @@ task :generate => :clean do
   system "compass"
   system "jekyll"
   Dir["#{site}/stylesheets/*.sass"].each { |f| rm_rf(f) }
-  system "mv #{site}/atom.html #{site}/blog/atom.xml"
+  system "mv #{site}/atom.html #{site}/atom.xml"
 end
 
 desc "generate and deploy website"

config.rb

@@ -2,8 +2,8 @@
 project_type = :stand_alone
 # Set this to the root of your project when deployed:
 http_path = "/"
-css_dir = "_site/stylesheets"
+css_dir = "site/stylesheets"
-sass_dir = "_source/stylesheets"
+sass_dir = "source/stylesheets"
 images_dir = "images"
 
 # To enable relative paths to assets via compass helper functions. Uncomment:

source/_layouts/default.haml

@@ -6,13 +6,16 @@
       %meta{:name=>"description", :content=>page.description}/
     - if page.respond_to? :keywords
       %meta{:name=>"keywords", :content=>page.keywords}/
+    %link{:href=>"/stylesheets/screen.css", :rel=>"stylesheet", :media=>"screen, projection", :type=>"text/css"}
   %body
     #header
       .page_width
-        %a.title(href="/")Blog
+        %a.title(href="/") My Blog
         %ul#header_nav.nav
           %li.alpha
-            %a(href="/") Home
+            %a(href="/archives") Archives
+          %li.omega
+            %a(href="/atom.xml") Subscribe
     #page
       .page_width
         = content

source/_layouts/post.haml

@@ -6,15 +6,20 @@
       %meta{:name=>"description", :content=>page.description}/
     - if page.respond_to? :keywords
       %meta{:name=>"keywords", :content=>page.keywords}/
+    %link{:href=>"/stylesheets/screen.css", :rel=>"stylesheet", :media=>"screen, projection", :type=>"text/css"}
   %body
     #header
       .page_width
-        %a.title(href="/")Page Title
+        %a.title(href="/")My Blog
         %ul#header_nav.nav
           %li.alpha
             %a(href="/") Home
     #page
       .page_width
+        %h2= rp(page.title)
         = content
+        %p.pubdate
+          Published:
+          =page.date.strftime("%d %b, %Y")
     #footer
       .page_width Footer

source/_posts/2009-10-18-Groove-Pocket.markdown

@@ -0,0 +1,5 @@
+---
+title: Groove Pocket
+---
+
+> You can't hold no groove if you ain't got no pocket!

source/_posts/2009-10-18-Latin-Rocks.markdown

@@ -0,0 +1,7 @@
+---
+title: Latin Rocks!
+---
+
+Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum.
+
+Ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.

source/index.haml

@@ -1,5 +1,5 @@
 ---
-layout: basic/default
+layout: default
 title: Blog
 ---
 .blog

source/stylesheets/_library.sass

@@ -0,0 +1,9 @@
+@import library/reset.sass
+@import library/clearfix.sass
+@import library/border_radius.sass
+@import library/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

source/stylesheets/library/_border_radius.sass

@@ -0,0 +1,47 @@
+!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)

source/stylesheets/library/_box_shadow.sass

@@ -0,0 +1,10 @@
+!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, !x_offset = !default_box_shadow_x_offset, !y_offset = !default_box_shadow_y_offset, !blur_radius = !default_box_shadow_blur_radius)
+  box-shadow= !x_offset !y_offset !blur_radius !color
+  -webkit-box-shadow= !x_offset !y_offset !blur_radius !color
+  -moz-box-shadow= !x_offset !y_offset !blur_radius !color
+  

source/stylesheets/library/_button_style.sass

@@ -0,0 +1,45 @@
+=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

source/stylesheets/library/_clearfix.sass

@@ -0,0 +1,24 @@
+// 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

source/stylesheets/library/_float.sass

@@ -0,0 +1,16 @@
+// based on compass float
+
+@import modules/_clearfix.sass
+
+// Available as alternate syntax with just +float
+=float(!side = "left")
+  :display inline
+  :float= !side
+
+// Implementation of float:left with fix for double-margin bug
+=float-left
+  +float("left")
+
+// Implementation of float:right with fix for double-margin bug
+=float-right
+  +float("right")

source/stylesheets/library/_gradient.sass

@@ -0,0 +1,15 @@
+=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)

source/stylesheets/library/_hacks.sass

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

source/stylesheets/library/_link_colors.sass

@@ -0,0 +1,24 @@
+!default_link_color           ||= #165B94
+!default_link_color_hover     ||= #fff
+!default_link_color_alt       ||= #91D5F1
+!default_link_color_hover_alt ||= #000
+
+=link-color(!hover = true)
+  +link-color-style(!default_link_color, !default_link_color_hover, !default_link_color, !hover)
+
+=link-color-alt(!hover = true)
+  +link-color-style(!default_link_color_alt, !default_link_color_hover_alt, !default_link_color_alt, !hover)
+  
+=link-color-heading(!link_color = "inherit", !hover_bg_color = #ccc)
+  +link-color-style(!link_color,)
+
+=link-color-style(!color = !default_link_color, !color_hover = !default_link_color_hover, !link_hover_bg = !color, !hover = true)
+  color= !color
+  padding: 2px
+  margin: 0 -2px
+  +border-radius(3px)
+  @if !hover
+    &:hover
+      background-color= !link_hover_bg
+      color= !color_hover
+      text-decoration: none

source/stylesheets/library/_list_borders.sass

@@ -0,0 +1,7 @@
+=list-borders(!color1,!color2)
+  border-left= "1px solid" !color1
+  border-right= "1px solid" !color2
+  &.alpha
+    border-left: none
+  &.omega
+    border-right: 0

source/stylesheets/library/_opacity.sass

@@ -0,0 +1,18 @@
+//**
+  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)

source/stylesheets/library/_reset.sass

@@ -0,0 +1,58 @@
+// Borrowed from the blueprint reset
+
+// Global reset rules.
+// For more specific resets, use the reset mixins provided below
+=global-reset
+  html, body
+    +reset
+  +nested-reset
+
+// Reset all elements within some selector scope.To reset the selector itself,
+// mixin the appropriate reset mixin for that element type as well. This could be
+// useful if you want to style a part of your page in a dramatically different way.
+=nested-reset
+  div, span, object, iframe, h1, h2, h3, h4, h5, h6, p,
+  pre, a, abbr, acronym, address, code, del, dfn, em, img,
+  dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption, tbody, tfoot, thead, tr
+    +reset
+  blockquote, q
+    +reset-quotation
+  th, td, caption
+    +reset-table-cell
+  table
+    +reset-table
+  a img
+    :border none
+
+=reset-box-model
+  :margin 0
+  :padding 0
+  :border 0
+
+=reset
+  +reset-box-model
+  :font
+    :weight inherit
+    :style inherit
+    :size 100%
+    :family inherit
+  :vertical-align baseline
+
+=reset-quotation
+  +reset
+  :quotes "" ""
+  &:before,
+  &:after
+    :content ""
+
+=reset-table-cell
+  +reset
+  :text-align left
+  :font-weight normal
+  :vertical-align middle
+
+=reset-table
+  +reset
+  :border-collapse separate
+  :border-spacing 0
+  :vertical-align middle

source/stylesheets/library/_sprite_hover.sass

@@ -0,0 +1,4 @@
+=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)

source/stylesheets/library/_sprite_img.sass

@@ -0,0 +1,52 @@
+//**
+  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

source/stylesheets/library/_typography.sass

@@ -0,0 +1,67 @@
+!base_font_size ||= 14px
+!base_font_size_small ||= 12px
+!h6 ||= !base_font_size
+!h5 ||= ceil(!h6*1.1)
+!h4 ||= ceil(!h5*1.1)
+!h3 ||= ceil(!h4*1.2)
+!h2 ||= ceil(!h3*1.25)
+!h1 ||= ceil(!h2*1.255)
+
+=set-heading-sizes(!font_size = !base_font_size)
+  !h6 = !font_size
+  !h5 = ceil(!h6*1.1)
+  !h4 = ceil(!h5*1.1)
+  !h3 = ceil(!h4*1.2)
+  !h2 = ceil(!h3*1.25)
+  !h1 = ceil(!h2*1.255)
+  h1, h2, h3, h4
+    &:first-child
+      margin-top: 0
+  h1
+    font-size= !h1
+    margin-bottom= !h2/2
+    line-height= !h1 * 1.2
+  h2
+    font-size= !h2
+    margin= !h2/2 0 !h2/2
+    line-height= !h2 * 1.2
+  h3
+    font-size= !h3
+    margin= !h2/2 0 !h2/2
+    line-height= !h3 * 1.2
+  h4
+    font-size= !h4
+    margin= !h4/2 0 !h4/2
+    line-height= !h4 * 1.2
+  h5
+    font-size= !h5
+    margin= !h4/2 0 !h4/2
+    line-height= !h5 * 1.2
+  h6
+    font-size= !h6
+    margin= !h4/2 0 !h4/2
+    line-height= !h6 * 1.2
+
+=typography-defaults(!font_size = !base_font_size)
+  line-height= ceil(!font_size * 1.5)
+  p
+    padding-bottom= !font_size * 2
+  h1,h2,h3,h4,h5,h6
+    font-weight: bold
+  em
+    font-style: italic
+  strong
+    font-weight: bold
+  span.highlight, em.highlight, strong.highlight
+    background-color: #ff6
+    padding: 2px
+    margin: 0 -2px
+  ul, ol, dl
+    list-style: inside
+    margin= 0 0 (!font_size)
+  li
+    padding: 0 0 2px
+  small
+    font-size= floor(!font_size * .85)
+  big
+    font-size= floor(!font_size * 1.25)

source/stylesheets/partials/_base.sass

@@ -0,0 +1,16 @@
+//compass default reset
++global-reset
+//my reset
+button
+  margin: 0
+  padding: 0
+  background: none
+  border: none
+  cursor: pointer
+
+button::-moz-focus-inner
+  border: none
+  padding: 0
+
+@import compass/utilities.sass
+@import base/typography.sass

source/stylesheets/partials/_main.sass

@@ -0,0 +1,4 @@
+@import main/theme.sass
+@import main/layout.sass
+@import main/form.sass
+@import main/flash_messages.sass

source/stylesheets/partials/base/_typography.sass

@@ -0,0 +1,26 @@
+!base_font_size = 15px
+!base_font_size_small = 13px
+!default_border_radius = 6px
+
+=heading-font 
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif
+=sans-font
+  font-family: "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", Helvetica, Arial, Verdana, sans-serif
+=serif-font
+  font-family: Baskerville, "Times New Roman", Times, Georgia, serif
+=fixed-font
+  font-family: "Menlo", "Bitstream Vera Sans", Monaco, "Andale Mono", "Lucida Console", monospace
+    
+body
+  font-size= !base_font_size
+  +set-heading-sizes
+  +typography-defaults
+  +sans-font
+  
+h1,h2,h3,h4,h5,h6
+  color: #333
+  letter-spacing: -1px
+  font-weight: bold
+ol li
+  list-style: decimal
+  margin-left: 1.9em

source/stylesheets/partials/main/_flash_messages.sass

@@ -0,0 +1,36 @@
+!flash_notice       ||= #00529B
+!flash_success      ||= #4F8A10
+!flash_warning      ||= #FBF4BD
+!flash_error        ||= #D8000C
+!flash_notice_bg    ||= #BDE5F8
+!flash_success_bg   ||= #DFF2BF
+!flash_warning_bg   ||= #FBF4BD
+!flash_error_bg     ||= #FFD9DA
+
+=flash-message-style
+  +flash-message-structure
+  &.notice
+    +flash-color(!flash_notice, !flash_notice_bg)
+  &.success
+    +flash-color(!flash_success, !flash_success_bg)
+  &.warning
+    +flash-color(!flash_warning, !flash_warning_bg)
+  &.error
+    +flash-color(!flash_error, !flash_error_bg)
+
+=flash-message-structure
+  background-repeat: no-repeat
+  background-position: 10px center
+  border: 1px dashed
+  padding: 10px 15px
+  margin: 0 0 15px
+
+=flash-color(!color, !bg = 0)
+  color= !color
+  @if !bg == 0
+    background-color= desaturate(lighten(adjust_hue(!color, -10), 83), 20)
+  @else
+    background-color= !bg
+
+#flash
+  +flash-message-style

source/stylesheets/partials/main/_form.sass

@@ -0,0 +1,61 @@
+#page
+  form
+    clear: both
+    padding-bottom= !pad
+    fieldset, fieldset input.textbox, fieldset textarea
+      +border-radius
+    fieldset
+      background-color= !fieldset_bg
+      width: 480px
+      border= "1px solid" !fieldset_border
+      padding: 35px 25px 20px
+      margin-bottom= !pad*2.2
+    label
+      font-size: 90%
+      display: block
+      padding-bottom: 4px
+    select
+      font-size: 110%
+    input.textbox, textarea
+      font-size: 115%
+      color= !textinput_color
+      background-color= !textinput_bg
+      
+      width: 70%
+      padding: 6px 8px
+      outline: 0
+      display: inline-block
+      
+      border: 1px solid
+      border-top-color= !textinput_border_top
+      border-bottom-color= !textinput_border_bottom
+      border-left-color= !textinput_border_left
+      border-right-color= !textinput_border_right
+      
+      &:focus
+        background= !textinput_bg_focus
+        border-color= !textinput_border_focus
+        
+    input.checkbox, label.checkbox
+      display: inline-block
+    p
+      +clearfix
+      padding= 0 8px !pad
+    input.wrong:focus
+      outline: 2px solid #d0a5a5
+      background: #fef2f2
+    button
+      +border-radius(5px)
+      +btn-style(!blue_btn)
+      +btn-structure(18px, 1px)
+      color= !default_button_text_color
+      border:
+        width: 1px
+        style: solid
+      &:hover, &:focus
+        +btn-style-hover(!blue_btn)
+        outline: none
+      &:active
+        +btn-style-active(!blue_btn)
+    a.cancel
+      color= !cancel_link

source/stylesheets/partials/main/_layout.sass

@@ -0,0 +1,62 @@
+!page_width = 560px
+!pad = 15px
+!default_border_radius = 4px
+
+html body
+  background-color= !body_bg
+  color= !body_color
+  a
+    color= !link_color
+
+#header
+  background-color= !header_bg
+  border-bottom= "1px solid" !header_border
+  padding: 20px 0
+  a.title
+    font-size= !h3
+    display: inline-block
+    color= !header_nav
+    text-decoration: none
+  #header_nav
+    float: right
+    +horizontal-list
+    a
+      color: #ccc
+    li.alpha a
+      color: #f2f2f2
+
+.page_width
+  width= !page_width
+  margin: 0 auto
+  padding:
+    left: 30px
+    right: 30px
+
+#page
+  background-color= !page_bg
+  border-top= "1px solid" !page_border
+  padding: 25px 0
+
+#subnav
+  +clearfix
+  margin: -25px 0 25px
+  padding: 10px 0
+  background-color= !subnav_bg
+  border-bottom= "1px solid" !subnav_border
+  font-size: 85%
+  #account
+    float: right
+    a
+      color= !subnav_logout_color
+      display: inline-block
+      padding-left: 10px
+      margin-left: 8px
+      border-left= "1px solid" #aaa
+
+#footer
+  font-size= !base_font_size_small
+  clear: both
+  padding: 15px 0
+  color= !footer_color
+  +h-linear-gradient(darken(!body_bg, 25), !body_bg)
+  border-top= "4px solid" !footer_bg

source/stylesheets/partials/main/_theme.sass

@@ -0,0 +1,50 @@
+// Main Section Colors
+!body_color = #333
+!body_bg = #323232
+!test = darken(!body_bg, 20)
+!header_bg = #323232
+!header_border = #181818
+!header_nav = #ddd
+!header_nav_hover = #fff
+!page_border = #fff
+!page_bg = #ececec
+!footer_color = #999
+!footer_bg = #444
+!subnav_bg = #fff
+!subnav_border = #ccc
+!subnav_link_color = #333
+!subnav_logout_color = #777
+
+// Link Colors
+!link_color = #165B94
+
+// Form Colors
+!fieldset_bg = #fff
+!fieldset_border = #c3c3c3
+
+!textinput_color = #333
+!textinput_bg = #f4f4f4
+!textinput_bg_focus = #fefeee
+
+!textinput_border_top = #aaa
+!textinput_border_bottom = #c6c6c6
+!textinput_border_left = #c3c3c3
+!textinput_border_right = #c3c3c3
+!textinput_border_focus = #989898
+
+!cancel_link = #555
+
+// Button Colors
+!default_button_text_color = #fff
+!default_button_bg = yellow
+!blue_btn = desaturate(adjust_hue(!default_button_bg, -16), 25)
+
+// Flash Message Colors
+!flash_notice   	= #00529B
+!flash_notice_bg  = #BDE5F8
+!flash_success    = #4F8A10
+!flash_success_bg = #DFF2BF
+!flash_warning    = #FBF4BD
+!flash_warning_bg = #FBF4BD
+!flash_error      = #D8000C
+!flash_error_bg   = #FFD9DA

source/stylesheets/screen.sass

@@ -0,0 +1,3 @@
+@import library.sass
+@import partials/base.sass
+@import partials/main.sass