schnitzelstyle 0.0.8 → 0.0.9

Sign up to get free protection for your applications and to get access to all the features.
@@ -17,7 +17,7 @@
17
17
  * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
18
18
 
19
19
  body {
20
- background-color: $color-page-background;
20
+ background-color: $color-background;
21
21
  color: $color-text;
22
22
  font: $font-default;
23
23
  padding-bottom: 20px;
@@ -43,7 +43,7 @@
43
43
  .container>header {
44
44
  margin-top: 20px !important;
45
45
 
46
- color: $color-header;
46
+ color: $color-title;
47
47
  font: $font-header;
48
48
  font-size: 120%;
49
49
  line-height: 150%;
@@ -54,7 +54,7 @@
54
54
  font: $font-header;
55
55
  font-size: 200%;
56
56
  font-weight: bold;
57
- @include floaty-title($color-page-background, $color-header);
57
+ @include floaty-title($color-background, $color-title);
58
58
  }
59
59
  }
60
60
 
@@ -1,7 +1,7 @@
1
1
  $container-width: 600px;
2
2
 
3
- $font-1: 16px "Georgia" !default;
4
- $font-2: 14px "Lucida Grande" !default;
3
+ $font-1: 16px "Georgia",serif !default;
4
+ $font-2: 14px "Tahoma","Lucida Grande",sans-serif !default;
5
5
 
6
6
  $font-default: $font-1;
7
7
  $font-header: $font-2;
@@ -9,20 +9,25 @@ $font-footer: $font-header !default;
9
9
  $font-monospaced: 13px Menlo,Monaco,Courier !default;
10
10
 
11
11
  // define some colors
12
- $color-0: white !default;
13
- $color-1: #666 !default;
14
- $color-2: #999 !default;
15
- $color-3: #4ea4ec !default;
16
- $color-4: complement($color-3);
12
+ $color-background: white !default;
13
+ $color-text: #666 !default;
14
+ $color-extra: #4ea4ec !default;
15
+
16
+ // Or try a different color scheme...:
17
+ //
18
+ // $color-background: #333 !default;
19
+ // $color-text: #ccc !default;
20
+ // $color-extra: #f93 !default;
17
21
 
18
22
  // apply colors to basic page elements
19
- $color-page-background: $color-0 !default;
20
- $color-text: $color-1 !default;
21
- $color-footer: $color-2 !default;
22
- $color-header: $color-3 !default;
23
+ $color-footer: rgba($color-text, 0.5) !default;
24
+ $color-title: $color-extra !default;
25
+
26
+ $color-heading-background: rgba($color-text, 0.18);
27
+ $color-heading-text: $color-text !default;
23
28
 
24
29
  $color-link: $color-text !default;
25
- $color-link-underline: lighten($color-4, 10%) !default;
26
- $color-link-hover: darken($color-link, 20%) !default;
30
+ $color-link-underline: complement($color-extra) !default;
31
+ $color-link-hover: complement($color-extra) !default;
27
32
 
28
33
  $color-error: #d33 !default;
@@ -10,13 +10,12 @@
10
10
  // footer
11
11
  &>footer {
12
12
  @include small-type;
13
- color: lighten($color-text, 30%); // FIXME
13
+
14
+ &, & a, & a:hover { color: $color-footer };
14
15
  a {
15
- color: lighten($color-text, 30%); // FIXME
16
16
  text-decoration: none;
17
17
  border-bottom: none;
18
18
  &:hover {
19
- color: lighten($color-text, 30%); // FIXME
20
19
  text-decoration: underline;
21
20
  }
22
21
  }
@@ -34,7 +33,6 @@
34
33
 
35
34
  em {
36
35
  font-style: italic;
37
- color: #666;
38
36
  }
39
37
 
40
38
  // links
@@ -63,7 +61,7 @@
63
61
 
64
62
  // headings
65
63
  h1, h2, h3, h4, h5, h6 {
66
- @include floaty-title($color-text, darken($color-page-background, 5%));
64
+ @include floaty-title($color-heading-text, $color-heading-background);
67
65
  font: $font-header;
68
66
  margin-top: 1.5em;
69
67
  font-weight: bold;
@@ -73,14 +71,13 @@
73
71
  font-size: 150%;
74
72
  text-transform: uppercase;
75
73
  }
76
-
77
74
  // quotes
78
75
  blockquote {
79
76
  @include justified;
80
- color: #777; // FIXME
77
+ color: rgba($color-text, 0.8);
81
78
  padding: 0 20px;
82
79
  font-style: italic;
83
- border-left: 5px solid #eee;
80
+ border-left: 5px solid rgba($color-text, 0.2);
84
81
  }
85
82
 
86
83
  // images
@@ -93,8 +90,8 @@
93
90
  // code
94
91
  pre, code {
95
92
  font: $font-monospaced;
96
- background-color: #eee;
97
- color: #666;
93
+ background-color: rgba($color-text, 0.2);
94
+ color: rgba($color-text, 0.9);
98
95
  }
99
96
 
100
97
  code {
@@ -26,7 +26,7 @@
26
26
  box-shadow: $x $y $r $color;
27
27
  }
28
28
 
29
- @mixin button($color: #f93, $radius: 4px) {
29
+ @mixin button($color: complement($color-extra), $radius: 4px) {
30
30
  $text-color: lighten($color, 50%);
31
31
 
32
32
  padding: 2px 8px;
@@ -10,7 +10,7 @@
10
10
  @include small-type;
11
11
  font-weight: bold;
12
12
  padding-left: 5px;
13
- color: $color-header;
13
+ color: $color-title;
14
14
  }
15
15
 
16
16
  input, textarea {
@@ -19,11 +19,11 @@
19
19
  padding: 5px;
20
20
  border: none;
21
21
  font: $font-monospaced;
22
- background-color: #f4f4f4; // FIXME
23
- color: #999; // FIXME
22
+ background-color: rgba($color-text, 0.15);
23
+ color: rgba($color-text, 0.6);
24
24
 
25
25
  @include animated(100ms);
26
- &:hover, &:focus { color: #333; } // FIXME
26
+ &:hover, &:focus { color: $color-text }
27
27
  }
28
28
 
29
29
  select, option {
@@ -45,7 +45,7 @@
45
45
  .hint {
46
46
  padding: 0px 5px;
47
47
  display: block;
48
- color: $color-2;
48
+ color: $color-extra;
49
49
  @include small-type;
50
50
  }
51
51
  }
@@ -66,9 +66,8 @@
66
66
  }
67
67
 
68
68
  ::-webkit-input-placeholder {
69
- color: #ccc;
70
- font: $font-footer;
71
- font-size: 80%;
69
+ @include small-type;
70
+ color: rgba($color-text, 0.4);
72
71
  padding-top: 2px;
73
72
  }
74
73
  }
@@ -1,8 +1,5 @@
1
1
  @mixin schnitzel-responsive {
2
2
  @media only screen and (max-width: 640px) {
3
- // for debugging
4
- // body { background-color: #fee }
5
-
6
3
  body {
7
4
  padding-bottom: 10px;
8
5
  }
@@ -1,3 +1,3 @@
1
1
  module Schnitzelstyle
2
- VERSION = "0.0.8"
2
+ VERSION = "0.0.9"
3
3
  end
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: schnitzelstyle
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.0.8
4
+ version: 0.0.9
5
5
  prerelease:
6
6
  platform: ruby
7
7
  authors:
@@ -13,7 +13,7 @@ date: 2012-02-23 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: sass
16
- requirement: &70103334050860 !ruby/object:Gem::Requirement
16
+ requirement: &70341453518800 !ruby/object:Gem::Requirement
17
17
  none: false
18
18
  requirements:
19
19
  - - ! '>='
@@ -21,7 +21,7 @@ dependencies:
21
21
  version: '0'
22
22
  type: :runtime
23
23
  prerelease: false
24
- version_requirements: *70103334050860
24
+ version_requirements: *70341453518800
25
25
  description: A simple, light-weight CSS framework to kickstart your web app.
26
26
  email:
27
27
  - hendrik@mans.de