... | ... |
@@ -29,7 +29,7 @@ task :generate => :clean do |
29 | 29 |
system "compass" |
30 | 30 |
system "jekyll" |
31 | 31 |
Dir["#{site}/stylesheets/*.sass"].each { |f| rm_rf(f) } |
32 |
- system "mv #{site}/atom.html #{site}/blog/atom.xml" |
|
32 |
+ system "mv #{site}/atom.html #{site}/atom.xml" |
|
33 | 33 |
end |
34 | 34 |
|
35 | 35 |
desc "generate and deploy website" |
... | ... |
@@ -2,8 +2,8 @@ |
2 | 2 |
project_type = :stand_alone |
3 | 3 |
# Set this to the root of your project when deployed: |
4 | 4 |
http_path = "/" |
5 |
-css_dir = "_site/stylesheets" |
|
6 |
-sass_dir = "_source/stylesheets" |
|
5 |
+css_dir = "site/stylesheets" |
|
6 |
+sass_dir = "source/stylesheets" |
|
7 | 7 |
images_dir = "images" |
8 | 8 |
|
9 | 9 |
# To enable relative paths to assets via compass helper functions. Uncomment: |
... | ... |
@@ -6,13 +6,16 @@ |
6 | 6 |
%meta{:name=>"description", :content=>page.description}/ |
7 | 7 |
- if page.respond_to? :keywords |
8 | 8 |
%meta{:name=>"keywords", :content=>page.keywords}/ |
9 |
+ %link{:href=>"/stylesheets/screen.css", :rel=>"stylesheet", :media=>"screen, projection", :type=>"text/css"} |
|
9 | 10 |
%body |
10 | 11 |
#header |
11 | 12 |
.page_width |
12 |
- %a.title(href="/")Blog |
|
13 |
+ %a.title(href="/") My Blog |
|
13 | 14 |
%ul#header_nav.nav |
14 | 15 |
%li.alpha |
15 |
- %a(href="/") Home |
|
16 |
+ %a(href="/archives") Archives |
|
17 |
+ %li.omega |
|
18 |
+ %a(href="/atom.xml") Subscribe |
|
16 | 19 |
#page |
17 | 20 |
.page_width |
18 | 21 |
= content |
... | ... |
@@ -6,15 +6,20 @@ |
6 | 6 |
%meta{:name=>"description", :content=>page.description}/ |
7 | 7 |
- if page.respond_to? :keywords |
8 | 8 |
%meta{:name=>"keywords", :content=>page.keywords}/ |
9 |
+ %link{:href=>"/stylesheets/screen.css", :rel=>"stylesheet", :media=>"screen, projection", :type=>"text/css"} |
|
9 | 10 |
%body |
10 | 11 |
#header |
11 | 12 |
.page_width |
12 |
- %a.title(href="/")Page Title |
|
13 |
+ %a.title(href="/")My Blog |
|
13 | 14 |
%ul#header_nav.nav |
14 | 15 |
%li.alpha |
15 | 16 |
%a(href="/") Home |
16 | 17 |
#page |
17 | 18 |
.page_width |
19 |
+ %h2= rp(page.title) |
|
18 | 20 |
= content |
21 |
+ %p.pubdate |
|
22 |
+ Published: |
|
23 |
+ =page.date.strftime("%d %b, %Y") |
|
19 | 24 |
#footer |
20 | 25 |
.page_width Footer |
21 | 26 |
\ No newline at end of file |
1 | 6 |
new file mode 100644 |
... | ... |
@@ -0,0 +1,7 @@ |
0 |
+--- |
|
1 |
+title: Latin Rocks! |
|
2 |
+--- |
|
3 |
+ |
|
4 |
+Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum. |
|
5 |
+ |
|
6 |
+Ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla. |
|
0 | 7 |
\ No newline at end of file |
6 | 6 |
new file mode 100644 |
... | ... |
@@ -0,0 +1,9 @@ |
0 |
+@import library/reset.sass |
|
1 |
+@import library/clearfix.sass |
|
2 |
+@import library/border_radius.sass |
|
3 |
+@import library/box_shadow.sass |
|
4 |
+@import library/list_borders.sass |
|
5 |
+@import library/typography.sass |
|
6 |
+@import library/link_colors.sass |
|
7 |
+@import library/gradient.sass |
|
8 |
+@import library/button_style.sass |
|
0 | 9 |
\ No newline at end of file |
2 | 11 |
new file mode 100644 |
... | ... |
@@ -0,0 +1,47 @@ |
0 |
+!default_border_radius ||= 5px |
|
1 |
+ |
|
2 |
+// Round all borders by amount |
|
3 |
+=border-radius(!radius = !default_border_radius) |
|
4 |
+ border-radius= !radius |
|
5 |
+ -moz-border-radius= !radius |
|
6 |
+ -webkit-border-radius= !radius |
|
7 |
+ |
|
8 |
+// Round radius at position by amount. |
|
9 |
+// values for !vert: "top", "bottom" |
|
10 |
+// values for !horz: "left", "right |
|
11 |
+=border-corner-radius(!vert, !horz, !radius = !default_border_radius) |
|
12 |
+ border-#{!vert}-#{!horz}-radius= !radius |
|
13 |
+ -moz-border-radius-#{!vert}#{!horz}= !radius |
|
14 |
+ -webkit-border-#{!vert}-#{!horz}-radius= !radius |
|
15 |
+ |
|
16 |
+=border-top-left-radius(!radius = !default_border_radius) |
|
17 |
+ +border-corner-radius("top", "left", !radius) |
|
18 |
+ |
|
19 |
+=border-top-right-radius(!radius = !default_border_radius) |
|
20 |
+ +border-corner-radius("top", "right", !radius) |
|
21 |
+ |
|
22 |
+=border-bottom-left-radius(!radius = !default_border_radius) |
|
23 |
+ +border-corner-radius("bottom", "left", !radius) |
|
24 |
+ |
|
25 |
+=border-bottom-right-radius(!radius = !default_border_radius) |
|
26 |
+ +border-corner-radius("bottom", "right", !radius) |
|
27 |
+ |
|
28 |
+// Round top corners by amount |
|
29 |
+=border-top-radius(!radius = !default_border_radius) |
|
30 |
+ +border-top-left-radius(!radius) |
|
31 |
+ +border-top-right-radius(!radius) |
|
32 |
+ |
|
33 |
+// Round right corners by amount |
|
34 |
+=border-right-radius(!radius = !default_border_radius) |
|
35 |
+ +border-top-right-radius(!radius) |
|
36 |
+ +border-bottom-right-radius(!radius) |
|
37 |
+ |
|
38 |
+// Round bottom corners by amount |
|
39 |
+=border-bottom-radius(!radius = !default_border_radius) |
|
40 |
+ +border-bottom-left-radius(!radius) |
|
41 |
+ +border-bottom-right-radius(!radius) |
|
42 |
+ |
|
43 |
+// Round left corners by amount |
|
44 |
+=border-left-radius(!radius = !default_border_radius) |
|
45 |
+ +border-top-left-radius(!radius) |
|
46 |
+ +border-bottom-left-radius(!radius) |
|
0 | 47 |
\ No newline at end of file |
1 | 48 |
new file mode 100644 |
... | ... |
@@ -0,0 +1,10 @@ |
0 |
+!default_box_shadow_color = #333 |
|
1 |
+!default_box_shadow_x_offset = 1px |
|
2 |
+!default_box_shadow_y_offset = 1px |
|
3 |
+!default_box_shadow_blur_radius = 8px |
|
4 |
+ |
|
5 |
+=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) |
|
6 |
+ box-shadow= !x_offset !y_offset !blur_radius !color |
|
7 |
+ -webkit-box-shadow= !x_offset !y_offset !blur_radius !color |
|
8 |
+ -moz-box-shadow= !x_offset !y_offset !blur_radius !color |
|
9 |
+ |
|
0 | 10 |
\ No newline at end of file |
1 | 11 |
new file mode 100644 |
... | ... |
@@ -0,0 +1,45 @@ |
0 |
+=btn-border-color(!color) |
|
1 |
+ border-color= darken(!color, 25) |
|
2 |
+ |
|
3 |
+=btn-text-shadow(!color) |
|
4 |
+ !text_shadow = darken(!color, 25) |
|
5 |
+ text-shadow= !text_shadow "1px 1px 1px" |
|
6 |
+ |
|
7 |
+=btn-style(!color) |
|
8 |
+ !color1 = lighten(!color, 30) |
|
9 |
+ !color2 = darken(!color, 20) |
|
10 |
+ +h-linear-gradient(!color1, !color2) |
|
11 |
+ background-color= !color |
|
12 |
+ +btn-border-color(!color) |
|
13 |
+ +btn-text-shadow(!color) |
|
14 |
+ |
|
15 |
+=btn-style-hover(!color) |
|
16 |
+ !color = lighten(!color, 8) |
|
17 |
+ !color1 = lighten(!color, 22) |
|
18 |
+ !color2 = darken(!color, 38) |
|
19 |
+ +h-linear-gradient(!color1, !color2) |
|
20 |
+ background-color= !color |
|
21 |
+ +btn-border-color(!color) |
|
22 |
+ +btn-text-shadow(!color) |
|
23 |
+ |
|
24 |
+=btn-style-active(!color) |
|
25 |
+ !color = darken(!color, 5) |
|
26 |
+ !color1 = lighten(!color, 25) |
|
27 |
+ !color2 = darken(!color, 35) |
|
28 |
+ +h-linear-gradient(!color1, !color2) |
|
29 |
+ background-color= !color |
|
30 |
+ +btn-border-color(!color) |
|
31 |
+ +btn-text-shadow(!color) |
|
32 |
+ |
|
33 |
+=btn-structure(!font_size, !border_width, !line_height = !font_size *1.2) |
|
34 |
+ !v_padding = floor(!font_size/2.5) |
|
35 |
+ !h_padding = floor(!font_size) |
|
36 |
+ !v_padding_active = !v_padding - 1px |
|
37 |
+ !h_padding_active = !h_padding - 1px |
|
38 |
+ border-width= !border_width |
|
39 |
+ font-size= !font_size |
|
40 |
+ padding= !v_padding !h_padding |
|
41 |
+ line-height= !line_height |
|
42 |
+ &:active |
|
43 |
+ border-width= !border_width + 1px |
|
44 |
+ padding= !v_padding_active !h_padding_active |
|
0 | 45 |
\ No newline at end of file |
1 | 46 |
new file mode 100644 |
... | ... |
@@ -0,0 +1,24 @@ |
0 |
+// based on compass clearfix |
|
1 |
+ |
|
2 |
+@import _hacks.sass |
|
3 |
+ |
|
4 |
+// Extends the element to enclose any floats it contains. |
|
5 |
+// This basic method is preferred for the usual case, when positioned content will not show outside the bounds of the container. |
|
6 |
+// Recommendations include using this in conjunction with a width: |
|
7 |
+// http://www.quirksmode.org/blog/archives/2005/03/clearing_floats.html |
|
8 |
+=clearfix |
|
9 |
+ :overflow hidden |
|
10 |
+ +has-layout |
|
11 |
+ |
|
12 |
+// Extends the element to enclose any floats it contains. |
|
13 |
+// 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. |
|
14 |
+// http://www.positioniseverything.net/easyclearing.html |
|
15 |
+=pie-clearfix |
|
16 |
+ &:after |
|
17 |
+ :content " " |
|
18 |
+ :display block |
|
19 |
+ :height 0 |
|
20 |
+ :clear both |
|
21 |
+ :overflow hidden |
|
22 |
+ :visibility hidden |
|
23 |
+ +has-layout |
|
0 | 24 |
\ No newline at end of file |
1 | 25 |
new file mode 100644 |
... | ... |
@@ -0,0 +1,16 @@ |
0 |
+// based on compass float |
|
1 |
+ |
|
2 |
+@import modules/_clearfix.sass |
|
3 |
+ |
|
4 |
+// Available as alternate syntax with just +float |
|
5 |
+=float(!side = "left") |
|
6 |
+ :display inline |
|
7 |
+ :float= !side |
|
8 |
+ |
|
9 |
+// Implementation of float:left with fix for double-margin bug |
|
10 |
+=float-left |
|
11 |
+ +float("left") |
|
12 |
+ |
|
13 |
+// Implementation of float:right with fix for double-margin bug |
|
14 |
+=float-right |
|
15 |
+ +float("right") |
|
0 | 16 |
\ No newline at end of file |
1 | 17 |
new file mode 100644 |
... | ... |
@@ -0,0 +1,15 @@ |
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) |
|
1 |
+ !gradient = "#{!from_coord}, #{!to_coord}, from(#{!color_start}), to(#{!color_end})" |
|
2 |
+ //@if !color_stop1 != 0 |
|
3 |
+ // !gradient += "color-stop(#{!color_stop1_pos}, #{!color_stop1})" |
|
4 |
+ background= "-webkit-gradient(linear, #{!gradient})" |
|
5 |
+ background= "-moz-linear-gradient(#{!gradient})" |
|
6 |
+ |
|
7 |
+=h-linear-gradient(!color1, !color2) |
|
8 |
+ +linear-gradient("left top", "left bottom", !color1, !color2) |
|
9 |
+ |
|
10 |
+=v-linear-gradient(!color1, !color2) |
|
11 |
+ +linear-gradient("left top", "right top", !color1, !color2) |
|
12 |
+ |
|
13 |
+//=h-three-color-gradient(!color1, !color2, !color3, !color3_pos = .5) |
|
14 |
+// +linear-gradient("left top", "left bottom", !color1, !color2, !color3, !color3_pos) |
|
0 | 15 |
\ No newline at end of file |
1 | 9 |
new file mode 100644 |
... | ... |
@@ -0,0 +1,24 @@ |
0 |
+!default_link_color ||= #165B94 |
|
1 |
+!default_link_color_hover ||= #fff |
|
2 |
+!default_link_color_alt ||= #91D5F1 |
|
3 |
+!default_link_color_hover_alt ||= #000 |
|
4 |
+ |
|
5 |
+=link-color(!hover = true) |
|
6 |
+ +link-color-style(!default_link_color, !default_link_color_hover, !default_link_color, !hover) |
|
7 |
+ |
|
8 |
+=link-color-alt(!hover = true) |
|
9 |
+ +link-color-style(!default_link_color_alt, !default_link_color_hover_alt, !default_link_color_alt, !hover) |
|
10 |
+ |
|
11 |
+=link-color-heading(!link_color = "inherit", !hover_bg_color = #ccc) |
|
12 |
+ +link-color-style(!link_color,) |
|
13 |
+ |
|
14 |
+=link-color-style(!color = !default_link_color, !color_hover = !default_link_color_hover, !link_hover_bg = !color, !hover = true) |
|
15 |
+ color= !color |
|
16 |
+ padding: 2px |
|
17 |
+ margin: 0 -2px |
|
18 |
+ +border-radius(3px) |
|
19 |
+ @if !hover |
|
20 |
+ &:hover |
|
21 |
+ background-color= !link_hover_bg |
|
22 |
+ color= !color_hover |
|
23 |
+ text-decoration: none |
|
0 | 24 |
\ No newline at end of file |
1 | 8 |
new file mode 100644 |
... | ... |
@@ -0,0 +1,18 @@ |
0 |
+//** |
|
1 |
+ Provides cross-browser css opacity. |
|
2 |
+ @param !opacity |
|
3 |
+ A number between 0 and 1, where 0 is transparent and 1 is opaque. |
|
4 |
+=opacity(!opacity) |
|
5 |
+ :opacity= !opacity |
|
6 |
+ :-moz-opacity= !opacity |
|
7 |
+ :-khtml-opacity= !opacity |
|
8 |
+ :-ms-filter= "progid:DXImageTransform.Microsoft.Alpha(Opacity=" + round(!opacity*100) + ")" |
|
9 |
+ :filter= "alpha(opacity=" + round(!opacity*100) + ")" |
|
10 |
+ |
|
11 |
+// Make an element completely transparent. |
|
12 |
+=transparent |
|
13 |
+ +opacity(0) |
|
14 |
+ |
|
15 |
+// Make an element completely opaque. |
|
16 |
+=opaque |
|
17 |
+ +opacity(1) |
0 | 18 |
new file mode 100644 |
... | ... |
@@ -0,0 +1,58 @@ |
0 |
+// Borrowed from the blueprint reset |
|
1 |
+ |
|
2 |
+// Global reset rules. |
|
3 |
+// For more specific resets, use the reset mixins provided below |
|
4 |
+=global-reset |
|
5 |
+ html, body |
|
6 |
+ +reset |
|
7 |
+ +nested-reset |
|
8 |
+ |
|
9 |
+// Reset all elements within some selector scope.To reset the selector itself, |
|
10 |
+// mixin the appropriate reset mixin for that element type as well. This could be |
|
11 |
+// useful if you want to style a part of your page in a dramatically different way. |
|
12 |
+=nested-reset |
|
13 |
+ div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, |
|
14 |
+ pre, a, abbr, acronym, address, code, del, dfn, em, img, |
|
15 |
+ dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption, tbody, tfoot, thead, tr |
|
16 |
+ +reset |
|
17 |
+ blockquote, q |
|
18 |
+ +reset-quotation |
|
19 |
+ th, td, caption |
|
20 |
+ +reset-table-cell |
|
21 |
+ table |
|
22 |
+ +reset-table |
|
23 |
+ a img |
|
24 |
+ :border none |
|
25 |
+ |
|
26 |
+=reset-box-model |
|
27 |
+ :margin 0 |
|
28 |
+ :padding 0 |
|
29 |
+ :border 0 |
|
30 |
+ |
|
31 |
+=reset |
|
32 |
+ +reset-box-model |
|
33 |
+ :font |
|
34 |
+ :weight inherit |
|
35 |
+ :style inherit |
|
36 |
+ :size 100% |
|
37 |
+ :family inherit |
|
38 |
+ :vertical-align baseline |
|
39 |
+ |
|
40 |
+=reset-quotation |
|
41 |
+ +reset |
|
42 |
+ :quotes "" "" |
|
43 |
+ &:before, |
|
44 |
+ &:after |
|
45 |
+ :content "" |
|
46 |
+ |
|
47 |
+=reset-table-cell |
|
48 |
+ +reset |
|
49 |
+ :text-align left |
|
50 |
+ :font-weight normal |
|
51 |
+ :vertical-align middle |
|
52 |
+ |
|
53 |
+=reset-table |
|
54 |
+ +reset |
|
55 |
+ :border-collapse separate |
|
56 |
+ :border-spacing 0 |
|
57 |
+ :vertical-align middle |
0 | 58 |
new file mode 100644 |
... | ... |
@@ -0,0 +1,4 @@ |
0 |
+=sprite-column-hover-row(!col, !row_hover=2, !width=!sprite_default_size, !height=!sprite_default_size, !margin=!sprite_default_margin) |
|
1 |
+ +sprite-position(!col, 1, !width, !height, !margin) |
|
2 |
+ &:hover |
|
3 |
+ +sprite-position(!col, !row_hover, !width, !height, !margin) |
|
0 | 4 |
\ No newline at end of file |
1 | 5 |
new file mode 100644 |
... | ... |
@@ -0,0 +1,52 @@ |
0 |
+//** |
|
1 |
+ Example 1: |
|
2 |
+ a.twitter |
|
3 |
+ +sprite-img("icons-32.png", 1) |
|
4 |
+ a.facebook |
|
5 |
+ +sprite-img("icons-32png", 2) |
|
6 |
+ ... |
|
7 |
+ Example 2: |
|
8 |
+ a |
|
9 |
+ +sprite-background("icons-32.png") |
|
10 |
+ a.twitter |
|
11 |
+ +sprite-column(1) |
|
12 |
+ a.facebook |
|
13 |
+ +sprite-row(2) |
|
14 |
+ ... |
|
15 |
+ |
|
16 |
+!sprite_default_size ||= 32px |
|
17 |
+!sprite_default_margin ||= 0px |
|
18 |
+!sprite_image_default_width ||= !sprite_default_size |
|
19 |
+!sprite_image_default_height ||= !sprite_default_size |
|
20 |
+ |
|
21 |
+ |
|
22 |
+// Sets all the rules for a sprite from a given sprite image to show just one of the sprites. |
|
23 |
+// To reduce duplication use a sprite-bg mixin for common properties and a sprite-select mixin for positioning. |
|
24 |
+=sprite-img(!img, !col, !row = 1, !width = !sprite_image_default_width, !height = !sprite_image_default_height, !margin = !sprite_default_margin) |
|
25 |
+ +sprite-background(!img, !width, !height) |
|
26 |
+ +sprite-position(!col, !row, !width, !height, !margin) |
|
27 |
+ |
|
28 |
+// Sets rules common for all sprites, assumes you want a square, but allows a rectangular region. |
|
29 |
+=sprite-background(!img, !width = !sprite_default_size, !height = !width) |
|
30 |
+ +sprite-background-rectangle(!img, !width, !height) |
|
31 |
+ |
|
32 |
+// Sets rules common for all sprites, assumes a rectangular region. |
|
33 |
+=sprite-background-rectangle(!img, !width = !sprite_image_default_width, !height = !sprite_image_default_height) |
|
34 |
+ :background= image_url(!img) "no-repeat" |
|
35 |
+ :width= !width |
|
36 |
+ :height= !height |
|
37 |
+ :overflow hidden |
|
38 |
+ |
|
39 |
+// Allows horizontal sprite positioning optimized for a single row of sprites. |
|
40 |
+=sprite-column(!col, !width = !sprite_image_default_width, !margin = !sprite_default_margin) |
|
41 |
+ +sprite-position(!col, 1, !width, 0px, !margin) |
|
42 |
+ |
|
43 |
+// Allows vertical sprite positioning optimized for a single column of sprites. |
|
44 |
+=sprite-row(!row, !height = !sprite_image_default_height, !margin = !sprite_default_margin) |
|
45 |
+ +sprite-position(1, !row, 0px, !height, !margin) |
|
46 |
+ |
|
47 |
+// Allows vertical and horizontal sprite positioning from a grid of equal dimensioned sprites. |
|
48 |
+=sprite-position(!col, !row = 1, !width = !sprite_image_default_width, !height = !sprite_image_default_height, !margin = !sprite_default_margin) |
|
49 |
+ !x = ((!col - 1) * -!width) - ((!col - 1) * !margin) |
|
50 |
+ !y = ((!row - 1) * -!height) - ((!row - 1) * !margin) |
|
51 |
+ :background-position= !x !y |
|
0 | 52 |
\ No newline at end of file |
1 | 53 |
new file mode 100644 |
... | ... |
@@ -0,0 +1,67 @@ |
0 |
+!base_font_size ||= 14px |
|
1 |
+!base_font_size_small ||= 12px |
|
2 |
+!h6 ||= !base_font_size |
|
3 |
+!h5 ||= ceil(!h6*1.1) |
|
4 |
+!h4 ||= ceil(!h5*1.1) |
|
5 |
+!h3 ||= ceil(!h4*1.2) |
|
6 |
+!h2 ||= ceil(!h3*1.25) |
|
7 |
+!h1 ||= ceil(!h2*1.255) |
|
8 |
+ |
|
9 |
+=set-heading-sizes(!font_size = !base_font_size) |
|
10 |
+ !h6 = !font_size |
|
11 |
+ !h5 = ceil(!h6*1.1) |
|
12 |
+ !h4 = ceil(!h5*1.1) |
|
13 |
+ !h3 = ceil(!h4*1.2) |
|
14 |
+ !h2 = ceil(!h3*1.25) |
|
15 |
+ !h1 = ceil(!h2*1.255) |
|
16 |
+ h1, h2, h3, h4 |
|
17 |
+ &:first-child |
|
18 |
+ margin-top: 0 |
|
19 |
+ h1 |
|
20 |
+ font-size= !h1 |
|
21 |
+ margin-bottom= !h2/2 |
|
22 |
+ line-height= !h1 * 1.2 |
|
23 |
+ h2 |
|
24 |
+ font-size= !h2 |
|
25 |
+ margin= !h2/2 0 !h2/2 |
|
26 |
+ line-height= !h2 * 1.2 |
|
27 |
+ h3 |
|
28 |
+ font-size= !h3 |
|
29 |
+ margin= !h2/2 0 !h2/2 |
|
30 |
+ line-height= !h3 * 1.2 |
|
31 |
+ h4 |
|
32 |
+ font-size= !h4 |
|
33 |
+ margin= !h4/2 0 !h4/2 |
|
34 |
+ line-height= !h4 * 1.2 |
|
35 |
+ h5 |
|
36 |
+ font-size= !h5 |
|
37 |
+ margin= !h4/2 0 !h4/2 |
|
38 |
+ line-height= !h5 * 1.2 |
|
39 |
+ h6 |
|
40 |
+ font-size= !h6 |
|
41 |
+ margin= !h4/2 0 !h4/2 |
|
42 |
+ line-height= !h6 * 1.2 |
|
43 |
+ |
|
44 |
+=typography-defaults(!font_size = !base_font_size) |
|
45 |
+ line-height= ceil(!font_size * 1.5) |
|
46 |
+ p |
|
47 |
+ padding-bottom= !font_size * 2 |
|
48 |
+ h1,h2,h3,h4,h5,h6 |
|
49 |
+ font-weight: bold |
|
50 |
+ em |
|
51 |
+ font-style: italic |
|
52 |
+ strong |
|
53 |
+ font-weight: bold |
|
54 |
+ span.highlight, em.highlight, strong.highlight |
|
55 |
+ background-color: #ff6 |
|
56 |
+ padding: 2px |
|
57 |
+ margin: 0 -2px |
|
58 |
+ ul, ol, dl |
|
59 |
+ list-style: inside |
|
60 |
+ margin= 0 0 (!font_size) |
|
61 |
+ li |
|
62 |
+ padding: 0 0 2px |
|
63 |
+ small |
|
64 |
+ font-size= floor(!font_size * .85) |
|
65 |
+ big |
|
66 |
+ font-size= floor(!font_size * 1.25) |
|
0 | 67 |
\ No newline at end of file |
1 | 68 |
new file mode 100644 |
... | ... |
@@ -0,0 +1,16 @@ |
0 |
+//compass default reset |
|
1 |
++global-reset |
|
2 |
+//my reset |
|
3 |
+button |
|
4 |
+ margin: 0 |
|
5 |
+ padding: 0 |
|
6 |
+ background: none |
|
7 |
+ border: none |
|
8 |
+ cursor: pointer |
|
9 |
+ |
|
10 |
+button::-moz-focus-inner |
|
11 |
+ border: none |
|
12 |
+ padding: 0 |
|
13 |
+ |
|
14 |
+@import compass/utilities.sass |
|
15 |
+@import base/typography.sass |
|
0 | 16 |
\ No newline at end of file |
1 | 5 |
new file mode 100644 |
... | ... |
@@ -0,0 +1,26 @@ |
0 |
+!base_font_size = 15px |
|
1 |
+!base_font_size_small = 13px |
|
2 |
+!default_border_radius = 6px |
|
3 |
+ |
|
4 |
+=heading-font |
|
5 |
+ font-family: "Helvetica Neue", Helvetica, Arial, sans-serif |
|
6 |
+=sans-font |
|
7 |
+ font-family: "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", Helvetica, Arial, Verdana, sans-serif |
|
8 |
+=serif-font |
|
9 |
+ font-family: Baskerville, "Times New Roman", Times, Georgia, serif |
|
10 |
+=fixed-font |
|
11 |
+ font-family: "Menlo", "Bitstream Vera Sans", Monaco, "Andale Mono", "Lucida Console", monospace |
|
12 |
+ |
|
13 |
+body |
|
14 |
+ font-size= !base_font_size |
|
15 |
+ +set-heading-sizes |
|
16 |
+ +typography-defaults |
|
17 |
+ +sans-font |
|
18 |
+ |
|
19 |
+h1,h2,h3,h4,h5,h6 |
|
20 |
+ color: #333 |
|
21 |
+ letter-spacing: -1px |
|
22 |
+ font-weight: bold |
|
23 |
+ol li |
|
24 |
+ list-style: decimal |
|
25 |
+ margin-left: 1.9em |
|
0 | 26 |
\ No newline at end of file |
1 | 27 |
new file mode 100644 |
... | ... |
@@ -0,0 +1,36 @@ |
0 |
+!flash_notice ||= #00529B |
|
1 |
+!flash_success ||= #4F8A10 |
|
2 |
+!flash_warning ||= #FBF4BD |
|
3 |
+!flash_error ||= #D8000C |
|
4 |
+!flash_notice_bg ||= #BDE5F8 |
|
5 |
+!flash_success_bg ||= #DFF2BF |
|
6 |
+!flash_warning_bg ||= #FBF4BD |
|
7 |
+!flash_error_bg ||= #FFD9DA |
|
8 |
+ |
|
9 |
+=flash-message-style |
|
10 |
+ +flash-message-structure |
|
11 |
+ &.notice |
|
12 |
+ +flash-color(!flash_notice, !flash_notice_bg) |
|
13 |
+ &.success |
|
14 |
+ +flash-color(!flash_success, !flash_success_bg) |
|
15 |
+ &.warning |
|
16 |
+ +flash-color(!flash_warning, !flash_warning_bg) |
|
17 |
+ &.error |
|
18 |
+ +flash-color(!flash_error, !flash_error_bg) |
|
19 |
+ |
|
20 |
+=flash-message-structure |
|
21 |
+ background-repeat: no-repeat |
|
22 |
+ background-position: 10px center |
|
23 |
+ border: 1px dashed |
|
24 |
+ padding: 10px 15px |
|
25 |
+ margin: 0 0 15px |
|
26 |
+ |
|
27 |
+=flash-color(!color, !bg = 0) |
|
28 |
+ color= !color |
|
29 |
+ @if !bg == 0 |
|
30 |
+ background-color= desaturate(lighten(adjust_hue(!color, -10), 83), 20) |
|
31 |
+ @else |
|
32 |
+ background-color= !bg |
|
33 |
+ |
|
34 |
+#flash |
|
35 |
+ +flash-message-style |
|
0 | 36 |
\ No newline at end of file |
1 | 37 |
new file mode 100644 |
... | ... |
@@ -0,0 +1,61 @@ |
0 |
+#page |
|
1 |
+ form |
|
2 |
+ clear: both |
|
3 |
+ padding-bottom= !pad |
|
4 |
+ fieldset, fieldset input.textbox, fieldset textarea |
|
5 |
+ +border-radius |
|
6 |
+ fieldset |
|
7 |
+ background-color= !fieldset_bg |
|
8 |
+ width: 480px |
|
9 |
+ border= "1px solid" !fieldset_border |
|
10 |
+ padding: 35px 25px 20px |
|
11 |
+ margin-bottom= !pad*2.2 |
|
12 |
+ label |
|
13 |
+ font-size: 90% |
|
14 |
+ display: block |
|
15 |
+ padding-bottom: 4px |
|
16 |
+ select |
|
17 |
+ font-size: 110% |
|
18 |
+ input.textbox, textarea |
|
19 |
+ font-size: 115% |
|
20 |
+ color= !textinput_color |
|
21 |
+ background-color= !textinput_bg |
|
22 |
+ |
|
23 |
+ width: 70% |
|
24 |
+ padding: 6px 8px |
|
25 |
+ outline: 0 |
|
26 |
+ display: inline-block |
|
27 |
+ |
|
28 |
+ border: 1px solid |
|
29 |
+ border-top-color= !textinput_border_top |
|
30 |
+ border-bottom-color= !textinput_border_bottom |
|
31 |
+ border-left-color= !textinput_border_left |
|
32 |
+ border-right-color= !textinput_border_right |
|
33 |
+ |
|
34 |
+ &:focus |
|
35 |
+ background= !textinput_bg_focus |
|
36 |
+ border-color= !textinput_border_focus |
|
37 |
+ |
|
38 |
+ input.checkbox, label.checkbox |
|
39 |
+ display: inline-block |
|
40 |
+ p |
|
41 |
+ +clearfix |
|
42 |
+ padding= 0 8px !pad |
|
43 |
+ input.wrong:focus |
|
44 |
+ outline: 2px solid #d0a5a5 |
|
45 |
+ background: #fef2f2 |
|
46 |
+ button |
|
47 |
+ +border-radius(5px) |
|
48 |
+ +btn-style(!blue_btn) |
|
49 |
+ +btn-structure(18px, 1px) |
|
50 |
+ color= !default_button_text_color |
|
51 |
+ border: |
|
52 |
+ width: 1px |
|
53 |
+ style: solid |
|
54 |
+ &:hover, &:focus |
|
55 |
+ +btn-style-hover(!blue_btn) |
|
56 |
+ outline: none |
|
57 |
+ &:active |
|
58 |
+ +btn-style-active(!blue_btn) |
|
59 |
+ a.cancel |
|
60 |
+ color= !cancel_link |
|
0 | 61 |
\ No newline at end of file |
1 | 62 |
new file mode 100644 |
... | ... |
@@ -0,0 +1,62 @@ |
0 |
+!page_width = 560px |
|
1 |
+!pad = 15px |
|
2 |
+!default_border_radius = 4px |
|
3 |
+ |
|
4 |
+html body |
|
5 |
+ background-color= !body_bg |
|
6 |
+ color= !body_color |
|
7 |
+ a |
|
8 |
+ color= !link_color |
|
9 |
+ |
|
10 |
+#header |
|
11 |
+ background-color= !header_bg |
|
12 |
+ border-bottom= "1px solid" !header_border |
|
13 |
+ padding: 20px 0 |
|
14 |
+ a.title |
|
15 |
+ font-size= !h3 |
|
16 |
+ display: inline-block |
|
17 |
+ color= !header_nav |
|
18 |
+ text-decoration: none |
|
19 |
+ #header_nav |
|
20 |
+ float: right |
|
21 |
+ +horizontal-list |
|
22 |
+ a |
|
23 |
+ color: #ccc |
|
24 |
+ li.alpha a |
|
25 |
+ color: #f2f2f2 |
|
26 |
+ |
|
27 |
+.page_width |
|
28 |
+ width= !page_width |
|
29 |
+ margin: 0 auto |
|
30 |
+ padding: |
|
31 |
+ left: 30px |
|
32 |
+ right: 30px |
|
33 |
+ |
|
34 |
+#page |
|
35 |
+ background-color= !page_bg |
|
36 |
+ border-top= "1px solid" !page_border |
|
37 |
+ padding: 25px 0 |
|
38 |
+ |
|
39 |
+#subnav |
|
40 |
+ +clearfix |
|
41 |
+ margin: -25px 0 25px |
|
42 |
+ padding: 10px 0 |
|
43 |
+ background-color= !subnav_bg |
|
44 |
+ border-bottom= "1px solid" !subnav_border |
|
45 |
+ font-size: 85% |
|
46 |
+ #account |
|
47 |
+ float: right |
|
48 |
+ a |
|
49 |
+ color= !subnav_logout_color |
|
50 |
+ display: inline-block |
|
51 |
+ padding-left: 10px |
|
52 |
+ margin-left: 8px |
|
53 |
+ border-left= "1px solid" #aaa |
|
54 |
+ |
|
55 |
+#footer |
|
56 |
+ font-size= !base_font_size_small |
|
57 |
+ clear: both |
|
58 |
+ padding: 15px 0 |
|
59 |
+ color= !footer_color |
|
60 |
+ +h-linear-gradient(darken(!body_bg, 25), !body_bg) |
|
61 |
+ border-top= "4px solid" !footer_bg |
|
0 | 62 |
\ No newline at end of file |
1 | 63 |
new file mode 100644 |
... | ... |
@@ -0,0 +1,50 @@ |
0 |
+// Main Section Colors |
|
1 |
+!body_color = #333 |
|
2 |
+!body_bg = #323232 |
|
3 |
+!test = darken(!body_bg, 20) |
|
4 |
+!header_bg = #323232 |
|
5 |
+!header_border = #181818 |
|
6 |
+!header_nav = #ddd |
|
7 |
+!header_nav_hover = #fff |
|
8 |
+!page_border = #fff |
|
9 |
+!page_bg = #ececec |
|
10 |
+!footer_color = #999 |
|
11 |
+!footer_bg = #444 |
|
12 |
+!subnav_bg = #fff |
|
13 |
+!subnav_border = #ccc |
|
14 |
+!subnav_link_color = #333 |
|
15 |
+!subnav_logout_color = #777 |
|
16 |
+ |
|
17 |
+// Link Colors |
|
18 |
+!link_color = #165B94 |
|
19 |
+ |
|
20 |
+// Form Colors |
|
21 |
+!fieldset_bg = #fff |
|
22 |
+!fieldset_border = #c3c3c3 |
|
23 |
+ |
|
24 |
+!textinput_color = #333 |
|
25 |
+!textinput_bg = #f4f4f4 |
|
26 |
+!textinput_bg_focus = #fefeee |
|
27 |
+ |
|
28 |
+!textinput_border_top = #aaa |
|
29 |
+!textinput_border_bottom = #c6c6c6 |
|
30 |
+!textinput_border_left = #c3c3c3 |
|
31 |
+!textinput_border_right = #c3c3c3 |
|
32 |
+!textinput_border_focus = #989898 |
|
33 |
+ |
|
34 |
+!cancel_link = #555 |
|
35 |
+ |
|
36 |
+// Button Colors |
|
37 |
+!default_button_text_color = #fff |
|
38 |
+!default_button_bg = yellow |
|
39 |
+!blue_btn = desaturate(adjust_hue(!default_button_bg, -16), 25) |
|
40 |
+ |
|
41 |
+// Flash Message Colors |
|
42 |
+!flash_notice = #00529B |
|
43 |
+!flash_notice_bg = #BDE5F8 |
|
44 |
+!flash_success = #4F8A10 |
|
45 |
+!flash_success_bg = #DFF2BF |
|
46 |
+!flash_warning = #FBF4BD |
|
47 |
+!flash_warning_bg = #FBF4BD |
|
48 |
+!flash_error = #D8000C |
|
49 |
+!flash_error_bg = #FFD9DA |
|
0 | 50 |
\ No newline at end of file |