Browse code

added compass, added some basic stylesheets

B Mathis authored on 19/10/2009 at 01:10:45
Showing 33 changed files
... ...
@@ -1 +1,2 @@
1
-site
2 1
\ No newline at end of file
2
+site
3
+source/stylesheets/.sass-cache
3 4
\ No newline at end of file
... ...
@@ -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
22 27
new file mode 100644
... ...
@@ -0,0 +1,5 @@
0
+---
1
+title: Groove Pocket
2
+---
3
+
4
+> You can't hold no groove if you ain't got no pocket!
0 5
\ 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
... ...
@@ -1,5 +1,5 @@
1 1
 ---
2
-layout: basic/default
2
+layout: default
3 3
 title: Blog
4 4
 ---
5 5
 .blog
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
1 10
new file mode 100644
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 16
new file mode 100644
... ...
@@ -0,0 +1,8 @@
0
+// based on compass hacks
1
+
2
+=has-layout
3
+  // This makes ie6 get layout
4
+  :display inline-block
5
+  // and this puts it back to block
6
+  &
7
+    :display block
0 8
\ 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 25
new file mode 100644
... ...
@@ -0,0 +1,7 @@
0
+=list-borders(!color1,!color2)
1
+  border-left= "1px solid" !color1
2
+  border-right= "1px solid" !color2
3
+  &.alpha
4
+    border-left: none
5
+  &.omega
6
+    border-right: 0
0 7
\ 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 17
new file mode 100644
... ...
@@ -0,0 +1,4 @@
0
+@import main/theme.sass
1
+@import main/layout.sass
2
+@import main/form.sass
3
+@import main/flash_messages.sass
0 4
\ 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
1 51
new file mode 100644
2 52
new file mode 100644
... ...
@@ -0,0 +1,3 @@
0
+@import library.sass
1
+@import partials/base.sass
2
+@import partials/main.sass
0 3
\ No newline at end of file