From f7700443ece4537c252b10a7463d12fd1725f40a Mon Sep 17 00:00:00 2001 From: B Mathis Date: Thu, 5 Nov 2009 21:34:41 -0600 Subject: moved stylesheets --- 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 ++ 25 files changed, 744 insertions(+) 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 (limited to 'stylesheets') 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