From d8d51719fb2ec7cb2ee70dab4665c74baa0fb783 Mon Sep 17 00:00:00 2001
From: B Mathis <brandon@imathis.com>
Date: Sun, 18 Oct 2009 20:10:45 -0500
Subject: [PATCH] added compass, added some basic stylesheets

---
 .gitignore                                    |  3 +-
 Rakefile                                      |  2 +-
 config.rb                                     |  4 +-
 source/_layouts/default.haml                  |  7 +-
 source/_layouts/post.haml                     |  7 +-
 .../_posts/2009-10-18-Groove-Pocket.markdown  |  5 ++
 source/_posts/2009-10-18-Latin-Rocks.markdown |  7 ++
 source/index.haml                             |  2 +-
 source/stylesheets/_library.sass              |  9 +++
 source/stylesheets/ie.sass                    |  0
 .../stylesheets/library/_border_radius.sass   | 47 +++++++++++++
 source/stylesheets/library/_box_shadow.sass   | 10 +++
 source/stylesheets/library/_button_style.sass | 45 +++++++++++++
 source/stylesheets/library/_clearfix.sass     | 24 +++++++
 source/stylesheets/library/_float.sass        | 16 +++++
 source/stylesheets/library/_gradient.sass     | 15 +++++
 source/stylesheets/library/_hacks.sass        |  8 +++
 source/stylesheets/library/_link_colors.sass  | 24 +++++++
 source/stylesheets/library/_list_borders.sass |  7 ++
 source/stylesheets/library/_opacity.sass      | 18 +++++
 source/stylesheets/library/_reset.sass        | 58 ++++++++++++++++
 source/stylesheets/library/_sprite_hover.sass |  4 ++
 source/stylesheets/library/_sprite_img.sass   | 52 ++++++++++++++
 source/stylesheets/library/_typography.sass   | 67 +++++++++++++++++++
 source/stylesheets/partials/_base.sass        | 16 +++++
 source/stylesheets/partials/_main.sass        |  4 ++
 .../partials/base/_typography.sass            | 26 +++++++
 .../partials/main/_flash_messages.sass        | 36 ++++++++++
 source/stylesheets/partials/main/_form.sass   | 61 +++++++++++++++++
 source/stylesheets/partials/main/_layout.sass | 62 +++++++++++++++++
 source/stylesheets/partials/main/_theme.sass  | 50 ++++++++++++++
 source/stylesheets/print.sass                 |  0
 source/stylesheets/screen.sass                |  3 +
 33 files changed, 691 insertions(+), 8 deletions(-)
 create mode 100644 source/_posts/2009-10-18-Groove-Pocket.markdown
 create mode 100644 source/_posts/2009-10-18-Latin-Rocks.markdown
 create mode 100644 source/stylesheets/_library.sass
 create mode 100644 source/stylesheets/ie.sass
 create mode 100644 source/stylesheets/library/_border_radius.sass
 create mode 100644 source/stylesheets/library/_box_shadow.sass
 create mode 100644 source/stylesheets/library/_button_style.sass
 create mode 100644 source/stylesheets/library/_clearfix.sass
 create mode 100644 source/stylesheets/library/_float.sass
 create mode 100644 source/stylesheets/library/_gradient.sass
 create mode 100644 source/stylesheets/library/_hacks.sass
 create mode 100644 source/stylesheets/library/_link_colors.sass
 create mode 100644 source/stylesheets/library/_list_borders.sass
 create mode 100644 source/stylesheets/library/_opacity.sass
 create mode 100644 source/stylesheets/library/_reset.sass
 create mode 100644 source/stylesheets/library/_sprite_hover.sass
 create mode 100644 source/stylesheets/library/_sprite_img.sass
 create mode 100644 source/stylesheets/library/_typography.sass
 create mode 100644 source/stylesheets/partials/_base.sass
 create mode 100644 source/stylesheets/partials/_main.sass
 create mode 100644 source/stylesheets/partials/base/_typography.sass
 create mode 100644 source/stylesheets/partials/main/_flash_messages.sass
 create mode 100644 source/stylesheets/partials/main/_form.sass
 create mode 100644 source/stylesheets/partials/main/_layout.sass
 create mode 100644 source/stylesheets/partials/main/_theme.sass
 create mode 100644 source/stylesheets/print.sass
 create mode 100644 source/stylesheets/screen.sass

diff --git a/.gitignore b/.gitignore
index d97e100..26c08c3 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1 +1,2 @@
-site
\ No newline at end of file
+site
+source/stylesheets/.sass-cache
\ No newline at end of file
diff --git a/Rakefile b/Rakefile
index 75f89b9..d36a84d 100644
--- a/Rakefile
+++ b/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"
diff --git a/config.rb b/config.rb
index 8fcaa80..6c61491 100644
--- a/config.rb
+++ b/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"
-sass_dir = "_source/stylesheets"
+css_dir = "site/stylesheets"
+sass_dir = "source/stylesheets"
 images_dir = "images"
 
 # To enable relative paths to assets via compass helper functions. Uncomment:
diff --git a/source/_layouts/default.haml b/source/_layouts/default.haml
index 43dae4f..cec5376 100644
--- a/source/_layouts/default.haml
+++ b/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
diff --git a/source/_layouts/post.haml b/source/_layouts/post.haml
index 42ccde4..4accb53 100644
--- a/source/_layouts/post.haml
+++ b/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
\ No newline at end of file
diff --git a/source/_posts/2009-10-18-Groove-Pocket.markdown b/source/_posts/2009-10-18-Groove-Pocket.markdown
new file mode 100644
index 0000000..2f14850
--- /dev/null
+++ b/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!
\ No newline at end of file
diff --git a/source/_posts/2009-10-18-Latin-Rocks.markdown b/source/_posts/2009-10-18-Latin-Rocks.markdown
new file mode 100644
index 0000000..f444681
--- /dev/null
+++ b/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.
\ No newline at end of file
diff --git a/source/index.haml b/source/index.haml
index af77e06..12afdcf 100644
--- a/source/index.haml
+++ b/source/index.haml
@@ -1,5 +1,5 @@
 ---
-layout: basic/default
+layout: default
 title: Blog
 ---
 .blog
diff --git a/source/stylesheets/_library.sass b/source/stylesheets/_library.sass
new file mode 100644
index 0000000..85425cd
--- /dev/null
+++ b/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
\ No newline at end of file
diff --git a/source/stylesheets/ie.sass b/source/stylesheets/ie.sass
new file mode 100644
index 0000000..e69de29
diff --git a/source/stylesheets/library/_border_radius.sass b/source/stylesheets/library/_border_radius.sass
new file mode 100644
index 0000000..475b66d
--- /dev/null
+++ b/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)
\ No newline at end of file
diff --git a/source/stylesheets/library/_box_shadow.sass b/source/stylesheets/library/_box_shadow.sass
new file mode 100644
index 0000000..728a894
--- /dev/null
+++ b/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
+  
\ No newline at end of file
diff --git a/source/stylesheets/library/_button_style.sass b/source/stylesheets/library/_button_style.sass
new file mode 100644
index 0000000..2b68d5d
--- /dev/null
+++ b/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
\ No newline at end of file
diff --git a/source/stylesheets/library/_clearfix.sass b/source/stylesheets/library/_clearfix.sass
new file mode 100644
index 0000000..29548fe
--- /dev/null
+++ b/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
\ No newline at end of file
diff --git a/source/stylesheets/library/_float.sass b/source/stylesheets/library/_float.sass
new file mode 100644
index 0000000..b459e81
--- /dev/null
+++ b/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")
\ No newline at end of file
diff --git a/source/stylesheets/library/_gradient.sass b/source/stylesheets/library/_gradient.sass
new file mode 100644
index 0000000..31c498e
--- /dev/null
+++ b/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)
\ No newline at end of file
diff --git a/source/stylesheets/library/_hacks.sass b/source/stylesheets/library/_hacks.sass
new file mode 100644
index 0000000..33b442b
--- /dev/null
+++ b/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
\ No newline at end of file
diff --git a/source/stylesheets/library/_link_colors.sass b/source/stylesheets/library/_link_colors.sass
new file mode 100644
index 0000000..546c436
--- /dev/null
+++ b/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
\ No newline at end of file
diff --git a/source/stylesheets/library/_list_borders.sass b/source/stylesheets/library/_list_borders.sass
new file mode 100644
index 0000000..b4fe6db
--- /dev/null
+++ b/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
\ No newline at end of file
diff --git a/source/stylesheets/library/_opacity.sass b/source/stylesheets/library/_opacity.sass
new file mode 100644
index 0000000..f8d2a05
--- /dev/null
+++ b/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)
diff --git a/source/stylesheets/library/_reset.sass b/source/stylesheets/library/_reset.sass
new file mode 100644
index 0000000..af4fe75
--- /dev/null
+++ b/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
diff --git a/source/stylesheets/library/_sprite_hover.sass b/source/stylesheets/library/_sprite_hover.sass
new file mode 100644
index 0000000..13c644f
--- /dev/null
+++ b/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)
\ No newline at end of file
diff --git a/source/stylesheets/library/_sprite_img.sass b/source/stylesheets/library/_sprite_img.sass
new file mode 100644
index 0000000..dadac12
--- /dev/null
+++ b/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
\ No newline at end of file
diff --git a/source/stylesheets/library/_typography.sass b/source/stylesheets/library/_typography.sass
new file mode 100644
index 0000000..8b2c67c
--- /dev/null
+++ b/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)
\ No newline at end of file
diff --git a/source/stylesheets/partials/_base.sass b/source/stylesheets/partials/_base.sass
new file mode 100644
index 0000000..c88d3c0
--- /dev/null
+++ b/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
\ No newline at end of file
diff --git a/source/stylesheets/partials/_main.sass b/source/stylesheets/partials/_main.sass
new file mode 100644
index 0000000..4494b8a
--- /dev/null
+++ b/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
\ No newline at end of file
diff --git a/source/stylesheets/partials/base/_typography.sass b/source/stylesheets/partials/base/_typography.sass
new file mode 100644
index 0000000..3a607b5
--- /dev/null
+++ b/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
\ No newline at end of file
diff --git a/source/stylesheets/partials/main/_flash_messages.sass b/source/stylesheets/partials/main/_flash_messages.sass
new file mode 100644
index 0000000..bdc9f9c
--- /dev/null
+++ b/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
\ No newline at end of file
diff --git a/source/stylesheets/partials/main/_form.sass b/source/stylesheets/partials/main/_form.sass
new file mode 100644
index 0000000..dc28ff0
--- /dev/null
+++ b/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
\ No newline at end of file
diff --git a/source/stylesheets/partials/main/_layout.sass b/source/stylesheets/partials/main/_layout.sass
new file mode 100644
index 0000000..dfc937a
--- /dev/null
+++ b/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
\ No newline at end of file
diff --git a/source/stylesheets/partials/main/_theme.sass b/source/stylesheets/partials/main/_theme.sass
new file mode 100644
index 0000000..6d70f79
--- /dev/null
+++ b/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
\ No newline at end of file
diff --git a/source/stylesheets/print.sass b/source/stylesheets/print.sass
new file mode 100644
index 0000000..e69de29
diff --git a/source/stylesheets/screen.sass b/source/stylesheets/screen.sass
new file mode 100644
index 0000000..51e46f6
--- /dev/null
+++ b/source/stylesheets/screen.sass
@@ -0,0 +1,3 @@
+@import library.sass
+@import partials/base.sass
+@import partials/main.sass
\ No newline at end of file