B Mathis
15 years ago
27 changed files with 124 additions and 328 deletions
@ -1,20 +1,52 @@ |
|||
!page_width = 900px |
|||
!main_width = 620px |
|||
!page_pad = 30px |
|||
!sidebar_margin = 30px |
|||
!sidebar_width = !page_width - !main_width - !sidebar_margin |
|||
!pad = 15px |
|||
!page_width = 980px |
|||
!sidebar_margin = 25px |
|||
!sidebar_width = 250px |
|||
!default_border_radius = 4px |
|||
|
|||
html body |
|||
background-color= !body_bg |
|||
color= !body_color |
|||
background-color: #{!body_bg} |
|||
color: #{!body_color} |
|||
a |
|||
color= !link_color |
|||
color: #{!link_color} |
|||
&:hover, &:focus |
|||
color: #{saturate(darken(!link_color, 15), 20)} |
|||
&:visited |
|||
color: #{darken(adjust_hue(!link_color, 70), 10)} |
|||
|
|||
.page_width |
|||
width= !page_width |
|||
#header, #footer, #nav |
|||
.content |
|||
position: relative |
|||
margin: 0 auto |
|||
padding: |
|||
left= !page_pad |
|||
right= !page_pad |
|||
width: #{!page_width - !page_pad} |
|||
padding: 0 #{!page_pad/2} |
|||
|
|||
#page, #header, #footer, #nav |
|||
min-width: #{!page_width} |
|||
|
|||
#page, #content, .content |
|||
+pie-clearfix |
|||
#content |
|||
margin: 0 auto |
|||
width: #{!page_width - !sidebar_width - !page_pad/2} |
|||
padding: 0 #{!sidebar_width} 0 #{!page_pad/2} |
|||
#main |
|||
float: left |
|||
width: 100% |
|||
.content |
|||
padding-right: #{!sidebar_margin} |
|||
|
|||
#sidebar |
|||
float: left |
|||
width: #{!sidebar_width - !page_pad} |
|||
margin: 0 -100% 0 0 |
|||
padding: #{!page_pad} 0 #{!page_pad} #{!page_pad} |
|||
|
|||
#page.expanded |
|||
#content |
|||
width: #{!page_width} |
|||
padding: 0 |
|||
#sidebar |
|||
float: none |
|||
margin: 0 |
|||
padding: 0 0 #{!page_pad} |
|||
@ -1,10 +1,7 @@ |
|||
@import compass/utilities |
|||
@import compass/css3 |
|||
|
|||
@import library/reset.sass |
|||
@import library/clearfix.sass |
|||
@import library/border_radius.sass |
|||
@import library/easy_box_shadow.sass |
|||
@import library/list_borders.sass |
|||
@import library/typography.sass |
|||
@import library/link_colors.sass |
|||
@import library/gradient.sass |
|||
@import library/button_style.sass |
|||
@ -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) |
|||
@ -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 |
|||
@ -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 |
|||
@ -1,12 +0,0 @@ |
|||
!default_box_shadow_color = #333 |
|||
!default_box_shadow_x_offset = 1px |
|||
!default_box_shadow_y_offset = 1px |
|||
!default_box_shadow_blur_radius = 8px |
|||
|
|||
=box-shadow(!color = !default_box_shadow_color, !blur_radius = !default_box_shadow_blur_radius, !x_offset = !default_box_shadow_x_offset, !y_offset = !default_box_shadow_y_offset, !inset = "") |
|||
box-shadow= !inset !x_offset !y_offset !blur_radius !color |
|||
-webkit-box-shadow= !inset !x_offset !y_offset !blur_radius !color |
|||
-moz-box-shadow= !inset !x_offset !y_offset !blur_radius !color |
|||
|
|||
=inset-box-shadow(!color = !default_box_shadow_color, !blur_radius = !default_box_shadow_blur_radius, !x_offset = !default_box_shadow_x_offset, !y_offset = !default_box_shadow_y_offset) |
|||
+box-shadow(!color, !blur_radius, !x_offset, !y_offset, "inset") |
|||
@ -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) |
|||
@ -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 |
|||
@ -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) |
|||
@ -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) |
|||
@ -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 |
|||
@ -1,13 +1,12 @@ |
|||
#footer |
|||
+linear-gradient(color_stops(darken(!body_bg, 5), !body_bg)) |
|||
font-size: #{!base_font_size_small} |
|||
color: #{!footer_color} |
|||
border-top: 10px solid #{!footer_bg} |
|||
padding: 15px 0 |
|||
position: relative |
|||
z-index: 2 |
|||
font-size= !base_font_size_small |
|||
clear: both |
|||
padding= !base_font_size * 1.5 0 |
|||
color= !footer_color |
|||
+h-linear-gradient(darken(!body_bg, 25), !body_bg) |
|||
border-top= "14px solid" !footer_bg |
|||
a |
|||
color= #ddd |
|||
color: #ddd |
|||
&:hover |
|||
color = #fff |
|||
color: #fff |
|||
@ -1,12 +1,11 @@ |
|||
#header |
|||
background-color= !header_bg |
|||
border-bottom= "1px solid" !header_border |
|||
padding: 30px 0 |
|||
.page_width |
|||
position: relative |
|||
a.title |
|||
font-size= !h1 |
|||
+heading-font |
|||
background-color: {!header_bg} |
|||
border-bottom: 1px solid #{!header_border} |
|||
padding: 25px 0 |
|||
h1 |
|||
display: inline-block |
|||
color= !title_color |
|||
margin: 0 |
|||
a.title |
|||
font-weight: normal |
|||
color: #{!title_color} |
|||
text-decoration: none |
|||
@ -1,19 +1,8 @@ |
|||
#page |
|||
+clearfix |
|||
background-color= !page_bg |
|||
.page_width |
|||
+clearfix |
|||
position: relative |
|||
background-color: #{!main_bg} |
|||
#main |
|||
background-color: #{!main_bg} |
|||
border-right: 1px solid #{!sidebar_border} |
|||
padding: |
|||
top: 25px |
|||
bottom: 25px |
|||
background-color= !blog_bg |
|||
+box-shadow(#ccc) |
|||
border: |
|||
left= "1px solid" !page_border_sides |
|||
right= "1px solid" !page_border_sides |
|||
#main |
|||
width= !main_width |
|||
float: left |
|||
&.expanded |
|||
width: 100% |
|||
Loading…
Reference in new issue