From f7700443ece4537c252b10a7463d12fd1725f40a Mon Sep 17 00:00:00 2001 From: B Mathis Date: Thu, 5 Nov 2009 21:34:41 -0600 Subject: moved stylesheets --- .gitignore | 2 +- Rakefile | 1 - source/stylesheets/_base.sass | 3 - source/stylesheets/_layout.sass | 119 --------------- source/stylesheets/_library.sass | 10 -- source/stylesheets/_partials.sass | 2 - source/stylesheets/_theme.sass | 49 ------- source/stylesheets/_typography.sass | 27 ---- source/stylesheets/ie.sass | 0 source/stylesheets/library/_border_radius.sass | 47 ------ source/stylesheets/library/_button_style.sass | 45 ------ source/stylesheets/library/_clearfix.sass | 24 --- source/stylesheets/library/_easy_box_shadow.sass | 8 - 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 | 177 ----------------------- source/stylesheets/partials/_search.sass | 18 --- source/stylesheets/partials/_twitter.sass | 2 - source/stylesheets/print.sass | 0 source/stylesheets/screen.sass | 11 -- stylesheets/_base.sass | 3 + stylesheets/_layout.sass | 119 +++++++++++++++ stylesheets/_library.sass | 10 ++ stylesheets/_partials.sass | 2 + stylesheets/_theme.sass | 49 +++++++ stylesheets/_typography.sass | 27 ++++ stylesheets/ie.sass | 0 stylesheets/library/_border_radius.sass | 47 ++++++ stylesheets/library/_button_style.sass | 45 ++++++ stylesheets/library/_clearfix.sass | 24 +++ stylesheets/library/_easy_box_shadow.sass | 8 + stylesheets/library/_float.sass | 16 ++ stylesheets/library/_gradient.sass | 15 ++ stylesheets/library/_hacks.sass | 8 + stylesheets/library/_link_colors.sass | 24 +++ stylesheets/library/_list_borders.sass | 7 + stylesheets/library/_opacity.sass | 18 +++ stylesheets/library/_reset.sass | 58 ++++++++ stylesheets/library/_sprite_hover.sass | 4 + stylesheets/library/_sprite_img.sass | 52 +++++++ stylesheets/library/_typography.sass | 177 +++++++++++++++++++++++ stylesheets/partials/_search.sass | 18 +++ stylesheets/partials/_twitter.sass | 2 + stylesheets/print.sass | 0 stylesheets/screen.sass | 11 ++ 52 files changed, 745 insertions(+), 746 deletions(-) delete mode 100644 source/stylesheets/_base.sass delete mode 100644 source/stylesheets/_layout.sass delete mode 100644 source/stylesheets/_library.sass delete mode 100644 source/stylesheets/_partials.sass delete mode 100644 source/stylesheets/_theme.sass delete mode 100644 source/stylesheets/_typography.sass delete mode 100644 source/stylesheets/ie.sass delete mode 100644 source/stylesheets/library/_border_radius.sass delete mode 100644 source/stylesheets/library/_button_style.sass delete mode 100644 source/stylesheets/library/_clearfix.sass delete mode 100644 source/stylesheets/library/_easy_box_shadow.sass delete mode 100644 source/stylesheets/library/_float.sass delete mode 100644 source/stylesheets/library/_gradient.sass delete mode 100644 source/stylesheets/library/_hacks.sass delete mode 100644 source/stylesheets/library/_link_colors.sass delete mode 100644 source/stylesheets/library/_list_borders.sass delete mode 100644 source/stylesheets/library/_opacity.sass delete mode 100644 source/stylesheets/library/_reset.sass delete mode 100644 source/stylesheets/library/_sprite_hover.sass delete mode 100644 source/stylesheets/library/_sprite_img.sass delete mode 100644 source/stylesheets/library/_typography.sass delete mode 100644 source/stylesheets/partials/_search.sass delete mode 100644 source/stylesheets/partials/_twitter.sass delete mode 100644 source/stylesheets/print.sass delete mode 100644 source/stylesheets/screen.sass create mode 100644 stylesheets/_base.sass create mode 100644 stylesheets/_layout.sass create mode 100644 stylesheets/_library.sass create mode 100644 stylesheets/_partials.sass create mode 100644 stylesheets/_theme.sass create mode 100644 stylesheets/_typography.sass create mode 100644 stylesheets/ie.sass create mode 100644 stylesheets/library/_border_radius.sass create mode 100644 stylesheets/library/_button_style.sass create mode 100644 stylesheets/library/_clearfix.sass create mode 100644 stylesheets/library/_easy_box_shadow.sass create mode 100644 stylesheets/library/_float.sass create mode 100644 stylesheets/library/_gradient.sass create mode 100644 stylesheets/library/_hacks.sass create mode 100644 stylesheets/library/_link_colors.sass create mode 100644 stylesheets/library/_list_borders.sass create mode 100644 stylesheets/library/_opacity.sass create mode 100644 stylesheets/library/_reset.sass create mode 100644 stylesheets/library/_sprite_hover.sass create mode 100644 stylesheets/library/_sprite_img.sass create mode 100644 stylesheets/library/_typography.sass create mode 100644 stylesheets/partials/_search.sass create mode 100644 stylesheets/partials/_twitter.sass create mode 100644 stylesheets/print.sass create mode 100644 stylesheets/screen.sass diff --git a/.gitignore b/.gitignore index 26c08c32..fe9f7057 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,2 @@ site -source/stylesheets/.sass-cache \ No newline at end of file +*/.sass-cache \ No newline at end of file diff --git a/Rakefile b/Rakefile index 690c31be..cc4aa74f 100644 --- a/Rakefile +++ b/Rakefile @@ -50,7 +50,6 @@ desc "Generate site files only" task :generate_site => :clean do puts "Generating website..." system "jekyll" - Dir["#{site}/stylesheets/*.sass"].each { |f| rm_rf(f) } system "mv #{site}/atom.html #{site}/atom.xml" end diff --git a/source/stylesheets/_base.sass b/source/stylesheets/_base.sass deleted file mode 100644 index 82b34b76..00000000 --- a/source/stylesheets/_base.sass +++ /dev/null @@ -1,3 +0,0 @@ -//compass default reset -+global-reset -@import compass/utilities.sass \ No newline at end of file diff --git a/source/stylesheets/_layout.sass b/source/stylesheets/_layout.sass deleted file mode 100644 index ab06b650..00000000 --- a/source/stylesheets/_layout.sass +++ /dev/null @@ -1,119 +0,0 @@ -!page_width = 900px -!sidebar_width = 250px -!sidebar_margin = 30px -!pad = 15px -!default_border_radius = 4px - -html body - background-color= !body_bg - color= !body_color - a - color= !link_color - -#footer a - color= #ddd - &:hover - color = #fff -#header - background-color= !header_bg - border-bottom= "1px solid" !header_border - padding: 30px 0 - .page_width - position: relative - a.title - font-size= !h1 - +heading-font - display: inline-block - color= !title_color - text-decoration: none - -#nav - +clearfix - position: relative - z-index: 1 - padding: 6px 0 - background: - color= !nav_bg - image: -webkit-gradient(linear, left top, left bottom, from(#fcfcfc), to(#ddd), color-stop(0.3, #f4f4f4)) - image: -moz-linear-gradient(left top, left bottom, from(#fcfcfc), to(#ddd), color-stop(0.3, #f4f4f4)) - border: - top= "1px solid" !nav_border_top - bottom= "1px solid" !nav_border_bottom - ul - position: relative - +horizontal-list - margin: 0 auto - overflow: visible - li - padding: 0 15px - border-left= "1px solid" !nav_border_left - border-right= "1px solid" !nav_border_right - &.alpha - border-left: none - padding-left: 0 - &.omega - border-right: 0 - &.subscribe - position: absolute - left= !page_width - !sidebar_width - !sidebar_margin/2 - border: none - a - display: inline-block - padding-left: 28px - background: url("/images/rss.png") left top no-repeat - a - display: inline-block - color= !nav_color - line-height: 150% - text-decoration: none - &:hover - color= !nav_color_hover - -.page_width - width= !page_width - margin: 0 auto - padding: - left: 30px - right: 30px - -#page - +clearfix - background-color= !page_bg - .page_width - +clearfix - padding: - top: 25px - bottom: 25px - background-color= !blog_bg - +easy-box-shadow(#ccc) - border: - left= "1px solid" !page_border_sides - right= "1px solid" !page_border_sides -#main - width= !page_width - !sidebar_width - !sidebar_margin -#sidebar - width= !sidebar_width - margin-left= !sidebar_margin - -#main, #sidebar - float: left - -.blog - .article - padding= !base_font_size * 1.5 0 !base_font_size * 1.5 - border-bottom= "1px solid" !article_border - &:first-child - padding-top: 0 - .footer - padding-top= !base_font_size - - -#footer - position: relative - z-index: 2 - font-size= !base_font_size_small - clear: both - padding= !base_font_size * 1.5 0 - color= !footer_color - +h-linear-gradient(darken(!body_bg, 25), !body_bg) - border-top= "14px solid" !footer_bg \ No newline at end of file diff --git a/source/stylesheets/_library.sass b/source/stylesheets/_library.sass deleted file mode 100644 index e6c00822..00000000 --- a/source/stylesheets/_library.sass +++ /dev/null @@ -1,10 +0,0 @@ -@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 diff --git a/source/stylesheets/_partials.sass b/source/stylesheets/_partials.sass deleted file mode 100644 index 326df48d..00000000 --- a/source/stylesheets/_partials.sass +++ /dev/null @@ -1,2 +0,0 @@ -@import partials/twitter.sass -@import partials/search.sass \ No newline at end of file diff --git a/source/stylesheets/_theme.sass b/source/stylesheets/_theme.sass deleted file mode 100644 index b159019e..00000000 --- a/source/stylesheets/_theme.sass +++ /dev/null @@ -1,49 +0,0 @@ -// Link Colors -!link_color = #165B94 - -// Main Section Colors -!body_color = #333 -!body_bg = #323232 - -!header_bg = #323232 -!header_border = #181818 -!title_color = #ddd - -!nav_color = #555 -!nav_color_hover = #000 -!nav_bg = #e8e8e8 -!nav_border_top = #fff -!nav_border_bottom = #aaa -!nav_border_left = #ccc -!nav_border_right = #fff - -!page_border_sides = #ccc -!page_bg = #f0f0f0 - -// Blog -!article_border = #eee -!blog_bg = #fff - -!footer_color = #999 -!footer_bg = #444 - -// Form Colors -!fieldset_bg = #ececec -!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) \ No newline at end of file diff --git a/source/stylesheets/_typography.sass b/source/stylesheets/_typography.sass deleted file mode 100644 index b5fcd56e..00000000 --- a/source/stylesheets/_typography.sass +++ /dev/null @@ -1,27 +0,0 @@ -!base_font_size = 16px -!base_font_size_small = 13px -!base_font_color = #333 -!default_border_radius = 6px - -+general-typography -=heading-font - +serif-font -=quote-font - +serif-font - -body - font-size= !base_font_size - +sans-font - -h1,h2,h3,h4,h5,h6 - color: #333 - font-weight: bold - +heading-font - -blockquote - +heading-font - font-size= !base_font_size * 1.2 -.quote blockquote - font-size= !h4 - line-height= !h5 * 1.625 - color: #555 \ No newline at end of file diff --git a/source/stylesheets/ie.sass b/source/stylesheets/ie.sass deleted file mode 100644 index e69de29b..00000000 diff --git a/source/stylesheets/library/_border_radius.sass b/source/stylesheets/library/_border_radius.sass deleted file mode 100644 index 475b66d5..00000000 --- a/source/stylesheets/library/_border_radius.sass +++ /dev/null @@ -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 diff --git a/source/stylesheets/library/_button_style.sass b/source/stylesheets/library/_button_style.sass deleted file mode 100644 index 2b68d5db..00000000 --- a/source/stylesheets/library/_button_style.sass +++ /dev/null @@ -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 diff --git a/source/stylesheets/library/_clearfix.sass b/source/stylesheets/library/_clearfix.sass deleted file mode 100644 index 29548fe0..00000000 --- a/source/stylesheets/library/_clearfix.sass +++ /dev/null @@ -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 diff --git a/source/stylesheets/library/_easy_box_shadow.sass b/source/stylesheets/library/_easy_box_shadow.sass deleted file mode 100644 index 437f187a..00000000 --- a/source/stylesheets/library/_easy_box_shadow.sass +++ /dev/null @@ -1,8 +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 - -=easy-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) - \ No newline at end of file diff --git a/source/stylesheets/library/_float.sass b/source/stylesheets/library/_float.sass deleted file mode 100644 index b459e81f..00000000 --- a/source/stylesheets/library/_float.sass +++ /dev/null @@ -1,16 +0,0 @@ -// 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 deleted file mode 100644 index 31c498e0..00000000 --- a/source/stylesheets/library/_gradient.sass +++ /dev/null @@ -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 diff --git a/source/stylesheets/library/_hacks.sass b/source/stylesheets/library/_hacks.sass deleted file mode 100644 index 33b442b6..00000000 --- a/source/stylesheets/library/_hacks.sass +++ /dev/null @@ -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 diff --git a/source/stylesheets/library/_link_colors.sass b/source/stylesheets/library/_link_colors.sass deleted file mode 100644 index 546c436e..00000000 --- a/source/stylesheets/library/_link_colors.sass +++ /dev/null @@ -1,24 +0,0 @@ -!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 deleted file mode 100644 index b4fe6dbb..00000000 --- a/source/stylesheets/library/_list_borders.sass +++ /dev/null @@ -1,7 +0,0 @@ -=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 deleted file mode 100644 index f8d2a056..00000000 --- a/source/stylesheets/library/_opacity.sass +++ /dev/null @@ -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) diff --git a/source/stylesheets/library/_reset.sass b/source/stylesheets/library/_reset.sass deleted file mode 100644 index af4fe754..00000000 --- a/source/stylesheets/library/_reset.sass +++ /dev/null @@ -1,58 +0,0 @@ -// 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 deleted file mode 100644 index 13c644f6..00000000 --- a/source/stylesheets/library/_sprite_hover.sass +++ /dev/null @@ -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 diff --git a/source/stylesheets/library/_sprite_img.sass b/source/stylesheets/library/_sprite_img.sass deleted file mode 100644 index dadac12b..00000000 --- a/source/stylesheets/library/_sprite_img.sass +++ /dev/null @@ -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 diff --git a/source/stylesheets/library/_typography.sass b/source/stylesheets/library/_typography.sass deleted file mode 100644 index a1b5c631..00000000 --- a/source/stylesheets/library/_typography.sass +++ /dev/null @@ -1,177 +0,0 @@ -!base_font_size ||= 14px -!base_font_size_small ||= 12px -!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) - -=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: Times, "Times New Roman" Georgia, serif -=fixed-font - font-family: "Menlo", "Bitstream Vera Sans", Monaco, "Andale Mono", "Lucida Console", monospace - -=general-typography(!font_size = !base_font_size) - +set-heading-sizes(!font_size) - +typography-defaults(!font_size) - -=set-heading-sizes(!font_size = !base_font_size) - !h6 = ceil(!font_size*1.3) - !h5 = ceil(!font_size*1.4) - !h4 = ceil(!font_size*1.7) - !h3 = ceil(!font_size*1.9) - !h2 = ceil(!font_size*2.2) - !h1 = ceil(!font_size*2.5) - h1, h2, h3, h4 - &:first-child - margin-top: 0 - h1 - font-size= !h1 - margin-bottom= !font_size * .765 - line-height= !h1 * 1.625 - h2 - font-size= !h2 - margin-bottom= !font_size * .855 - line-height= !h2 * 1.625 - h3 - font-size= !h3 - margin-bottom= !font_size * .956 - line-height= !h3 * 1.625 - h4 - font-size= !h4 - margin-bottom= !font_size * 1.161 - line-height= !h4 * 1.625 - h5 - font-size= !h5 - margin-bottom= !font_size * 1.238 - line-height= !h5 * 1.625 - h6 - font-size= !h6 - margin-bottom= !font_size * 1.625 - line-height= !h6 * 1.625 - -=typography-defaults(!font_size = !base_font_size) - body - line-height= ceil(!font_size * 1.625) - color= !base_font_color - p - +p-style(!font_size) - table - +table-style(!font_size) - ol - +ol-style(!font_size) - ul - +ul-style(!font_size) - dl - +dl-style(!font_size) - blockquote - +quote-style - q - font-style: italic - &:before - content: "\201C" - &:after - content: "\201D" - em, dfn - font-style: italic - strong, dfn - font-weight: bold - del - text-decoration: line-through - span.highlight, em.highlight, strong.highlight - background-color: #ff6 - padding: 2px - margin: 0 -2px - abbr, acronym - border-bottom: 1px dotted - cursor: help - address - margin-top= !font_size * 1.625 - font-style: italic - pre, code - margin= !font_size * 1.625 0 - white-space: pre - pre, code, tt - +fixed-font - line-height= !font_size * 1.5 - tt - display: block - margin= !font_size * 1.625 0 - sub, sup - line-height: 0 - hr - margin-bottom= !font_size * 1.625 - - small - font-size= floor(!font_size * .85) - big - font-size= floor(!font_size * 1.25) - -=ol-style(!font_size = !base_font_size) - list-style: outside - margin= 0 0 !font_size * 1.625 - li - list-style: decimal - ol - margin= 0 0 !font_size * 1.625 - -=ul-style(!font_size = !base_font_size) - list-style: outside - margin= 0 0 !font_size * 1.625 - li ul - margin= 0 0 !font_size * 1.625 - -=dl-style(!font_size = !base_font_size) - margin= 0 0 !font_size * 1.625 - dt - font-weight: bold - dd - margin-left= !font_size * 1.625 - -=quote-style(!font_size = !base_font_size) - padding= !font_size !font_size !font_size * 1.625 !font_size * 1.4 - &:before - content: "\201C" - font-size= !font_size * 3 - margin= 0 0 0 -.625em - position: absolute - font-family: Times, Georgia, serif - color: #aaa - line-height: 0 - > p - padding: 0 - margin: 0 - -=p-style(!font_size = !base_font_size) - padding-bottom= !font_size * 0.8125 - img - float: left - margin: - top= !font_size * .5 - right= !font_size * .8125 - bottom= !font_size* .8125 - left= 0 - padding: 0 - &.right - margin: - right= 0 - left= !font_size * .8125 - -=table-style(!font_size = !base_font_size) - margin= 0 0 !font_size * 1.625 - border-collapse: collapse - th - font-weight: bold - tr, th, td - margin: 0 - padding= 0 !font_size * 1.625 0 !font_size - tfoot - font-style: italic - caption - text-align: center \ No newline at end of file diff --git a/source/stylesheets/partials/_search.sass b/source/stylesheets/partials/_search.sass deleted file mode 100644 index 4de9c021..00000000 --- a/source/stylesheets/partials/_search.sass +++ /dev/null @@ -1,18 +0,0 @@ -#search - position: absolute - left= !page_width + !sidebar_margin - !sidebar_width - top= 10% - form - background: url(/images/search_bg.png) no-repeat - padding: 2px 0 0 - height: 28px - width: 218px - #q - background: none - width: 160px - margin-left: 30px - font-size: 15px - border: none - color: #aaa - &:focus - outline: none \ No newline at end of file diff --git a/source/stylesheets/partials/_twitter.sass b/source/stylesheets/partials/_twitter.sass deleted file mode 100644 index baeef5b4..00000000 --- a/source/stylesheets/partials/_twitter.sass +++ /dev/null @@ -1,2 +0,0 @@ -#twitter - font-size: 85% \ No newline at end of file diff --git a/source/stylesheets/print.sass b/source/stylesheets/print.sass deleted file mode 100644 index e69de29b..00000000 diff --git a/source/stylesheets/screen.sass b/source/stylesheets/screen.sass deleted file mode 100644 index e7fcb538..00000000 --- a/source/stylesheets/screen.sass +++ /dev/null @@ -1,11 +0,0 @@ -/* SASS mixins */ -@import library.sass - -/* primary SASS */ -@import base.sass -@import theme.sass -@import typography.sass -@import layout.sass - -/* specific SASS */ -@import partials.sass \ No newline at end of file diff --git a/stylesheets/_base.sass b/stylesheets/_base.sass new file mode 100644 index 00000000..82b34b76 --- /dev/null +++ b/stylesheets/_base.sass @@ -0,0 +1,3 @@ +//compass default reset ++global-reset +@import compass/utilities.sass \ No newline at end of file diff --git a/stylesheets/_layout.sass b/stylesheets/_layout.sass new file mode 100644 index 00000000..ab06b650 --- /dev/null +++ b/stylesheets/_layout.sass @@ -0,0 +1,119 @@ +!page_width = 900px +!sidebar_width = 250px +!sidebar_margin = 30px +!pad = 15px +!default_border_radius = 4px + +html body + background-color= !body_bg + color= !body_color + a + color= !link_color + +#footer a + color= #ddd + &:hover + color = #fff +#header + background-color= !header_bg + border-bottom= "1px solid" !header_border + padding: 30px 0 + .page_width + position: relative + a.title + font-size= !h1 + +heading-font + display: inline-block + color= !title_color + text-decoration: none + +#nav + +clearfix + position: relative + z-index: 1 + padding: 6px 0 + background: + color= !nav_bg + image: -webkit-gradient(linear, left top, left bottom, from(#fcfcfc), to(#ddd), color-stop(0.3, #f4f4f4)) + image: -moz-linear-gradient(left top, left bottom, from(#fcfcfc), to(#ddd), color-stop(0.3, #f4f4f4)) + border: + top= "1px solid" !nav_border_top + bottom= "1px solid" !nav_border_bottom + ul + position: relative + +horizontal-list + margin: 0 auto + overflow: visible + li + padding: 0 15px + border-left= "1px solid" !nav_border_left + border-right= "1px solid" !nav_border_right + &.alpha + border-left: none + padding-left: 0 + &.omega + border-right: 0 + &.subscribe + position: absolute + left= !page_width - !sidebar_width - !sidebar_margin/2 + border: none + a + display: inline-block + padding-left: 28px + background: url("/images/rss.png") left top no-repeat + a + display: inline-block + color= !nav_color + line-height: 150% + text-decoration: none + &:hover + color= !nav_color_hover + +.page_width + width= !page_width + margin: 0 auto + padding: + left: 30px + right: 30px + +#page + +clearfix + background-color= !page_bg + .page_width + +clearfix + padding: + top: 25px + bottom: 25px + background-color= !blog_bg + +easy-box-shadow(#ccc) + border: + left= "1px solid" !page_border_sides + right= "1px solid" !page_border_sides +#main + width= !page_width - !sidebar_width - !sidebar_margin +#sidebar + width= !sidebar_width + margin-left= !sidebar_margin + +#main, #sidebar + float: left + +.blog + .article + padding= !base_font_size * 1.5 0 !base_font_size * 1.5 + border-bottom= "1px solid" !article_border + &:first-child + padding-top: 0 + .footer + padding-top= !base_font_size + + +#footer + position: relative + z-index: 2 + font-size= !base_font_size_small + clear: both + padding= !base_font_size * 1.5 0 + color= !footer_color + +h-linear-gradient(darken(!body_bg, 25), !body_bg) + border-top= "14px solid" !footer_bg \ No newline at end of file diff --git a/stylesheets/_library.sass b/stylesheets/_library.sass new file mode 100644 index 00000000..e6c00822 --- /dev/null +++ b/stylesheets/_library.sass @@ -0,0 +1,10 @@ +@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 diff --git a/stylesheets/_partials.sass b/stylesheets/_partials.sass new file mode 100644 index 00000000..326df48d --- /dev/null +++ b/stylesheets/_partials.sass @@ -0,0 +1,2 @@ +@import partials/twitter.sass +@import partials/search.sass \ No newline at end of file diff --git a/stylesheets/_theme.sass b/stylesheets/_theme.sass new file mode 100644 index 00000000..b159019e --- /dev/null +++ b/stylesheets/_theme.sass @@ -0,0 +1,49 @@ +// Link Colors +!link_color = #165B94 + +// Main Section Colors +!body_color = #333 +!body_bg = #323232 + +!header_bg = #323232 +!header_border = #181818 +!title_color = #ddd + +!nav_color = #555 +!nav_color_hover = #000 +!nav_bg = #e8e8e8 +!nav_border_top = #fff +!nav_border_bottom = #aaa +!nav_border_left = #ccc +!nav_border_right = #fff + +!page_border_sides = #ccc +!page_bg = #f0f0f0 + +// Blog +!article_border = #eee +!blog_bg = #fff + +!footer_color = #999 +!footer_bg = #444 + +// Form Colors +!fieldset_bg = #ececec +!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) \ No newline at end of file diff --git a/stylesheets/_typography.sass b/stylesheets/_typography.sass new file mode 100644 index 00000000..b5fcd56e --- /dev/null +++ b/stylesheets/_typography.sass @@ -0,0 +1,27 @@ +!base_font_size = 16px +!base_font_size_small = 13px +!base_font_color = #333 +!default_border_radius = 6px + ++general-typography +=heading-font + +serif-font +=quote-font + +serif-font + +body + font-size= !base_font_size + +sans-font + +h1,h2,h3,h4,h5,h6 + color: #333 + font-weight: bold + +heading-font + +blockquote + +heading-font + font-size= !base_font_size * 1.2 +.quote blockquote + font-size= !h4 + line-height= !h5 * 1.625 + color: #555 \ No newline at end of file diff --git a/stylesheets/ie.sass b/stylesheets/ie.sass new file mode 100644 index 00000000..e69de29b diff --git a/stylesheets/library/_border_radius.sass b/stylesheets/library/_border_radius.sass new file mode 100644 index 00000000..475b66d5 --- /dev/null +++ b/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/stylesheets/library/_button_style.sass b/stylesheets/library/_button_style.sass new file mode 100644 index 00000000..2b68d5db --- /dev/null +++ b/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/stylesheets/library/_clearfix.sass b/stylesheets/library/_clearfix.sass new file mode 100644 index 00000000..29548fe0 --- /dev/null +++ b/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/stylesheets/library/_easy_box_shadow.sass b/stylesheets/library/_easy_box_shadow.sass new file mode 100644 index 00000000..437f187a --- /dev/null +++ b/stylesheets/library/_easy_box_shadow.sass @@ -0,0 +1,8 @@ +!default_box_shadow_color = #333 +!default_box_shadow_x_offset = 1px +!default_box_shadow_y_offset = 1px +!default_box_shadow_blur_radius = 8px + +=easy-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) + \ No newline at end of file diff --git a/stylesheets/library/_float.sass b/stylesheets/library/_float.sass new file mode 100644 index 00000000..b459e81f --- /dev/null +++ b/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/stylesheets/library/_gradient.sass b/stylesheets/library/_gradient.sass new file mode 100644 index 00000000..31c498e0 --- /dev/null +++ b/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/stylesheets/library/_hacks.sass b/stylesheets/library/_hacks.sass new file mode 100644 index 00000000..33b442b6 --- /dev/null +++ b/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/stylesheets/library/_link_colors.sass b/stylesheets/library/_link_colors.sass new file mode 100644 index 00000000..546c436e --- /dev/null +++ b/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/stylesheets/library/_list_borders.sass b/stylesheets/library/_list_borders.sass new file mode 100644 index 00000000..b4fe6dbb --- /dev/null +++ b/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/stylesheets/library/_opacity.sass b/stylesheets/library/_opacity.sass new file mode 100644 index 00000000..f8d2a056 --- /dev/null +++ b/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/stylesheets/library/_reset.sass b/stylesheets/library/_reset.sass new file mode 100644 index 00000000..af4fe754 --- /dev/null +++ b/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/stylesheets/library/_sprite_hover.sass b/stylesheets/library/_sprite_hover.sass new file mode 100644 index 00000000..13c644f6 --- /dev/null +++ b/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/stylesheets/library/_sprite_img.sass b/stylesheets/library/_sprite_img.sass new file mode 100644 index 00000000..dadac12b --- /dev/null +++ b/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/stylesheets/library/_typography.sass b/stylesheets/library/_typography.sass new file mode 100644 index 00000000..a1b5c631 --- /dev/null +++ b/stylesheets/library/_typography.sass @@ -0,0 +1,177 @@ +!base_font_size ||= 14px +!base_font_size_small ||= 12px +!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) + +=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: Times, "Times New Roman" Georgia, serif +=fixed-font + font-family: "Menlo", "Bitstream Vera Sans", Monaco, "Andale Mono", "Lucida Console", monospace + +=general-typography(!font_size = !base_font_size) + +set-heading-sizes(!font_size) + +typography-defaults(!font_size) + +=set-heading-sizes(!font_size = !base_font_size) + !h6 = ceil(!font_size*1.3) + !h5 = ceil(!font_size*1.4) + !h4 = ceil(!font_size*1.7) + !h3 = ceil(!font_size*1.9) + !h2 = ceil(!font_size*2.2) + !h1 = ceil(!font_size*2.5) + h1, h2, h3, h4 + &:first-child + margin-top: 0 + h1 + font-size= !h1 + margin-bottom= !font_size * .765 + line-height= !h1 * 1.625 + h2 + font-size= !h2 + margin-bottom= !font_size * .855 + line-height= !h2 * 1.625 + h3 + font-size= !h3 + margin-bottom= !font_size * .956 + line-height= !h3 * 1.625 + h4 + font-size= !h4 + margin-bottom= !font_size * 1.161 + line-height= !h4 * 1.625 + h5 + font-size= !h5 + margin-bottom= !font_size * 1.238 + line-height= !h5 * 1.625 + h6 + font-size= !h6 + margin-bottom= !font_size * 1.625 + line-height= !h6 * 1.625 + +=typography-defaults(!font_size = !base_font_size) + body + line-height= ceil(!font_size * 1.625) + color= !base_font_color + p + +p-style(!font_size) + table + +table-style(!font_size) + ol + +ol-style(!font_size) + ul + +ul-style(!font_size) + dl + +dl-style(!font_size) + blockquote + +quote-style + q + font-style: italic + &:before + content: "\201C" + &:after + content: "\201D" + em, dfn + font-style: italic + strong, dfn + font-weight: bold + del + text-decoration: line-through + span.highlight, em.highlight, strong.highlight + background-color: #ff6 + padding: 2px + margin: 0 -2px + abbr, acronym + border-bottom: 1px dotted + cursor: help + address + margin-top= !font_size * 1.625 + font-style: italic + pre, code + margin= !font_size * 1.625 0 + white-space: pre + pre, code, tt + +fixed-font + line-height= !font_size * 1.5 + tt + display: block + margin= !font_size * 1.625 0 + sub, sup + line-height: 0 + hr + margin-bottom= !font_size * 1.625 + + small + font-size= floor(!font_size * .85) + big + font-size= floor(!font_size * 1.25) + +=ol-style(!font_size = !base_font_size) + list-style: outside + margin= 0 0 !font_size * 1.625 + li + list-style: decimal + ol + margin= 0 0 !font_size * 1.625 + +=ul-style(!font_size = !base_font_size) + list-style: outside + margin= 0 0 !font_size * 1.625 + li ul + margin= 0 0 !font_size * 1.625 + +=dl-style(!font_size = !base_font_size) + margin= 0 0 !font_size * 1.625 + dt + font-weight: bold + dd + margin-left= !font_size * 1.625 + +=quote-style(!font_size = !base_font_size) + padding= !font_size !font_size !font_size * 1.625 !font_size * 1.4 + &:before + content: "\201C" + font-size= !font_size * 3 + margin= 0 0 0 -.625em + position: absolute + font-family: Times, Georgia, serif + color: #aaa + line-height: 0 + > p + padding: 0 + margin: 0 + +=p-style(!font_size = !base_font_size) + padding-bottom= !font_size * 0.8125 + img + float: left + margin: + top= !font_size * .5 + right= !font_size * .8125 + bottom= !font_size* .8125 + left= 0 + padding: 0 + &.right + margin: + right= 0 + left= !font_size * .8125 + +=table-style(!font_size = !base_font_size) + margin= 0 0 !font_size * 1.625 + border-collapse: collapse + th + font-weight: bold + tr, th, td + margin: 0 + padding= 0 !font_size * 1.625 0 !font_size + tfoot + font-style: italic + caption + text-align: center \ No newline at end of file diff --git a/stylesheets/partials/_search.sass b/stylesheets/partials/_search.sass new file mode 100644 index 00000000..4de9c021 --- /dev/null +++ b/stylesheets/partials/_search.sass @@ -0,0 +1,18 @@ +#search + position: absolute + left= !page_width + !sidebar_margin - !sidebar_width + top= 10% + form + background: url(/images/search_bg.png) no-repeat + padding: 2px 0 0 + height: 28px + width: 218px + #q + background: none + width: 160px + margin-left: 30px + font-size: 15px + border: none + color: #aaa + &:focus + outline: none \ No newline at end of file diff --git a/stylesheets/partials/_twitter.sass b/stylesheets/partials/_twitter.sass new file mode 100644 index 00000000..baeef5b4 --- /dev/null +++ b/stylesheets/partials/_twitter.sass @@ -0,0 +1,2 @@ +#twitter + font-size: 85% \ No newline at end of file diff --git a/stylesheets/print.sass b/stylesheets/print.sass new file mode 100644 index 00000000..e69de29b diff --git a/stylesheets/screen.sass b/stylesheets/screen.sass new file mode 100644 index 00000000..e7fcb538 --- /dev/null +++ b/stylesheets/screen.sass @@ -0,0 +1,11 @@ +/* SASS mixins */ +@import library.sass + +/* primary SASS */ +@import base.sass +@import theme.sass +@import typography.sass +@import layout.sass + +/* specific SASS */ +@import partials.sass \ No newline at end of file -- cgit v1.2.1