schnitzelstyle 0.0.7 → 0.0.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,15 +1,18 @@
1
1
  @import 'schnitzelstyle/configuration';
2
2
  @import 'schnitzelstyle/reset';
3
3
  @import 'schnitzelstyle/basics';
4
+ @import 'schnitzelstyle/content';
4
5
  @import 'schnitzelstyle/eyecandy';
5
6
  @import 'schnitzelstyle/flashes';
6
7
  @import 'schnitzelstyle/forms';
7
8
  @import 'schnitzelstyle/grid';
8
9
  @import 'schnitzelstyle/export';
10
+ @import 'schnitzelstyle/responsive';
9
11
 
10
12
  @mixin schnitzel-complete {
11
13
  @include schnitzel-reset;
12
14
  @include schnitzel-basics;
15
+ @include schnitzel-content;
13
16
  @include schnitzel-flashes;
14
17
  @include schnitzel-forms;
15
18
  @include schnitzel-eyecandy;
@@ -1,25 +1,29 @@
1
- @mixin floaty-title($fg, $bg) {
2
- background-color: $bg;
3
- color: $fg;
4
- display: inline-block;
5
- padding: 0.3em 0.6em;
1
+ @mixin justified {
2
+ text-align: justify;
3
+ text-justify: newspaper;
4
+ }
6
5
 
7
- a {
8
- color: $fg;
9
- border: none;
10
- text-decoration: none;
11
- &:hover { color: $fg }
12
- }
6
+ @mixin small-type {
7
+ font: $font-footer;
8
+ font-size: 80%;
9
+ }
10
+
11
+ @mixin large-type {
12
+ font-size: 130%;
13
13
  }
14
14
 
15
15
  @mixin schnitzel-basics {
16
+ // we like the border-box sizing model. http://paulirish.com/2012/box-sizing-border-box-ftw/
17
+ * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
18
+
16
19
  body {
17
20
  background-color: $color-page-background;
18
21
  color: $color-text;
19
22
  font: $font-default;
23
+ padding-bottom: 20px;
20
24
  }
21
25
 
22
- /* set body class to 'loading' to switch the curser to a 'loading' cursor. */
26
+ // set body class to 'loading' to switch the curser to a 'loading' cursor.
23
27
  html.loading, html.loading * {
24
28
  cursor: wait !important;
25
29
  }
@@ -32,8 +36,12 @@
32
36
  font-weight: bold;
33
37
  }
34
38
 
39
+ // make sure each first and last child element has no leading margin.
40
+ *:first-child { margin-top: 0 !important }
41
+ *:last-child { margin-bottom: 0 !important }
42
+
35
43
  .container>header {
36
- margin: 2em 0;
44
+ margin-top: 20px !important;
37
45
 
38
46
  color: $color-header;
39
47
  font: $font-header;
@@ -47,16 +55,9 @@
47
55
  font-size: 200%;
48
56
  font-weight: bold;
49
57
  @include floaty-title($color-page-background, $color-header);
50
-
51
- @media only screen and (max-width: 640px) {
52
- font-size: 100%;
53
- }
54
- }
55
-
56
- @media only screen and (max-width: 640px) {
57
- font-size: 100%;
58
58
  }
59
59
  }
60
+
60
61
  .container>footer {
61
62
  font: $font-footer;
62
63
  font-size: 75%;
@@ -65,101 +66,6 @@
65
66
  text-align: right;
66
67
  a { color: $color-footer; }
67
68
  }
68
-
69
- *:first-child { margin-top: 0 !important }
70
- *:last-child { margin-bottom: 0 !important }
71
-
72
- article, section {
73
- margin: 4em 0;
74
-
75
- header {
76
- margin-bottom: 1em;
77
-
78
- h2 {
79
- @include floaty-title($color-page-background, $color-text);
80
- text-transform: uppercase;
81
- letter-spacing: 0.15em;
82
- }
83
- }
84
-
85
- p, dl, ol, ul, li, div.input {
86
- margin: 0.8em 0;
87
- line-height: 24px;
88
- }
89
-
90
- // tweet integration
91
- .twp-container {
92
- margin: 1.5em auto;
93
- }
94
-
95
- a {
96
- color: $color-link;
97
- text-decoration: none;
98
- border-bottom: 2px solid $color-link-underline;
99
-
100
- &:hover {
101
- color: $color-link-hover;
102
- }
103
- }
104
-
105
- ul {
106
- list-style-type: square;
107
- }
108
-
109
- ol {
110
- list-style-type: lower-roman;
111
- }
112
-
113
- em {
114
- font-style: italic;
115
- color: #666;
116
- }
117
-
118
- h1, h2, h3, h4, h5, h6 {
119
- font: $font-header;
120
- margin-top: 1em;
121
- @include floaty-title($color-text, darken($color-page-background, 5%));
122
- }
123
-
124
- h1 {
125
- font-size: 150%;
126
- text-transform: uppercase;
127
- }
128
-
129
- img {
130
- max-width: 100%;
131
- }
132
-
133
- pre, code {
134
- font: $font-monospaced;
135
- background-color: #eee;
136
- color: #666;
137
- }
138
-
139
- code { padding: 0.1em 0.5em; }
140
-
141
- pre {
142
- display: block;
143
- padding: 0.5em;
144
- overflow: scroll;
145
-
146
- code { padding: 0; }
147
- }
148
-
149
- blockquote {
150
- color: #777;
151
- padding-left: 1em;
152
- font-style: italic;
153
- border-left: 5px solid #eee;
154
- }
155
- }
156
-
157
- @media only screen and (max-width: 640px) {
158
- .container>article, .container>section {
159
- margin: 0;
160
- }
161
- }
162
-
163
69
  }
164
70
 
165
71
  /* http://nicolasgallagher.com/micro-clearfix-hack/ */
@@ -1,13 +1,16 @@
1
1
  $container-width: 600px;
2
2
 
3
- $font-default: 15px "Georgia" !default;
4
- $font-header: 14px "Lucida Grande" !default;
3
+ $font-1: 16px "Georgia" !default;
4
+ $font-2: 14px "Lucida Grande" !default;
5
+
6
+ $font-default: $font-1;
7
+ $font-header: $font-2;
5
8
  $font-footer: $font-header !default;
6
9
  $font-monospaced: 13px Menlo,Monaco,Courier !default;
7
10
 
8
11
  // define some colors
9
12
  $color-0: white !default;
10
- $color-1: #555 !default;
13
+ $color-1: #666 !default;
11
14
  $color-2: #999 !default;
12
15
  $color-3: #4ea4ec !default;
13
16
  $color-4: complement($color-3);
@@ -0,0 +1,135 @@
1
+ @mixin schnitzel-content {
2
+ article, section {
3
+ margin: 4em 0;
4
+
5
+ // header
6
+ &>header {
7
+ margin-bottom: 1em;
8
+ }
9
+
10
+ // footer
11
+ &>footer {
12
+ @include small-type;
13
+ color: lighten($color-text, 30%); // FIXME
14
+ a {
15
+ color: lighten($color-text, 30%); // FIXME
16
+ text-decoration: none;
17
+ border-bottom: none;
18
+ &:hover {
19
+ color: lighten($color-text, 30%); // FIXME
20
+ text-decoration: underline;
21
+ }
22
+ }
23
+ }
24
+
25
+ // basic styles
26
+ p, dl, ol, ul, li, div.input {
27
+ margin: 0.8em 0;
28
+ line-height: 24px;
29
+ }
30
+
31
+ p, li {
32
+ @include justified;
33
+ }
34
+
35
+ em {
36
+ font-style: italic;
37
+ color: #666;
38
+ }
39
+
40
+ // links
41
+ a {
42
+ color: $color-link;
43
+ text-decoration: none;
44
+ border-bottom: 2px solid $color-link-underline;
45
+
46
+ &:hover {
47
+ color: $color-link-hover;
48
+ }
49
+ }
50
+
51
+ // lists
52
+ ul {
53
+ list-style-type: square;
54
+ }
55
+
56
+ ol {
57
+ list-style-type: decimal;
58
+ }
59
+
60
+ li {
61
+ margin-left: 1em;
62
+ }
63
+
64
+ // headings
65
+ h1, h2, h3, h4, h5, h6 {
66
+ @include floaty-title($color-text, darken($color-page-background, 5%));
67
+ font: $font-header;
68
+ margin-top: 1.5em;
69
+ font-weight: bold;
70
+ }
71
+
72
+ h1 {
73
+ font-size: 150%;
74
+ text-transform: uppercase;
75
+ }
76
+
77
+ // quotes
78
+ blockquote {
79
+ @include justified;
80
+ color: #777; // FIXME
81
+ padding: 0 20px;
82
+ font-style: italic;
83
+ border-left: 5px solid #eee;
84
+ }
85
+
86
+ // images
87
+ img {
88
+ max-width: 100%;
89
+ display: block;
90
+ margin: 0 auto;
91
+ }
92
+
93
+ // code
94
+ pre, code {
95
+ font: $font-monospaced;
96
+ background-color: #eee;
97
+ color: #666;
98
+ }
99
+
100
+ code {
101
+ padding: 3px
102
+ }
103
+
104
+ pre {
105
+ display: block;
106
+ padding: 5px;
107
+ overflow: scroll;
108
+ }
109
+
110
+ // media embeds
111
+ //
112
+ // Prepare embedded media for proper responsiveness.
113
+ // Source: http://webdesignerwall.com/tutorials/css-elastic-videos
114
+ .embedded {
115
+ position: relative;
116
+ padding-bottom: 56.25%;
117
+ padding-top: 30px;
118
+ height: 0;
119
+ overflow: hidden;
120
+
121
+ iframe, object, embed {
122
+ position: absolute;
123
+ top: 0;
124
+ left: 0;
125
+ width: 100%;
126
+ height: 100%;
127
+ }
128
+ }
129
+
130
+ // embedded tweets
131
+ .twp-container {
132
+ margin: 1.5em auto;
133
+ }
134
+ }
135
+ }
@@ -1,3 +1,25 @@
1
+ @mixin floaty-title($fg, $bg) {
2
+ display: inline-block;
3
+ padding: 5px 10px;
4
+
5
+ color: $fg;
6
+ background-color: $bg;
7
+ border-left: 5px solid darken($bg, 10%);
8
+
9
+ a {
10
+ color: $fg;
11
+ border: none;
12
+ text-decoration: none;
13
+ &:hover { color: $fg }
14
+ }
15
+ }
16
+
17
+ @mixin animated($time: 200ms, $method: ease-in-out, $properties: all) {
18
+ -webkit-transition-duration: $time;
19
+ -webkit-transition-timing-function: $method;
20
+ -webkit-transition-property: $properties;
21
+ }
22
+
1
23
  @mixin box-shadow($x: 0, $y: 1px, $r: 2px, $color: rgba(0,0,0,.2)) {
2
24
  -webkit-box-shadow: $x $y $r $color;
3
25
  -moz-box-shadow: $x $y $r $color;
@@ -6,17 +6,24 @@
6
6
  margin: 0.5em 0;
7
7
 
8
8
  label {
9
- display: block;
10
- color: $color-header;
11
- font: $font-footer;
12
- font-size: 80%;
9
+ display: inline-block;
10
+ @include small-type;
13
11
  font-weight: bold;
12
+ padding-left: 5px;
13
+ color: $color-header;
14
14
  }
15
15
 
16
- input {
17
- font: $font-default;
18
- padding: 2px 4px;
19
- width: 600px;
16
+ input, textarea {
17
+ margin: 0;
18
+ width: 100%;
19
+ padding: 5px;
20
+ border: none;
21
+ font: $font-monospaced;
22
+ background-color: #f4f4f4; // FIXME
23
+ color: #999; // FIXME
24
+
25
+ @include animated(100ms);
26
+ &:hover, &:focus { color: #333; } // FIXME
20
27
  }
21
28
 
22
29
  select, option {
@@ -24,10 +31,8 @@
24
31
  padding: 2px 4px;
25
32
  }
26
33
 
27
- textarea {
28
- font: $font-default;
29
- padding: 2px 4px;
30
- width: 600px;
34
+ select {
35
+ display: block;
31
36
  }
32
37
 
33
38
  .error {
@@ -38,10 +43,10 @@
38
43
  }
39
44
 
40
45
  .hint {
46
+ padding: 0px 5px;
41
47
  display: block;
42
48
  color: $color-2;
43
- font: $font-footer;
44
- font-size: 80%;
49
+ @include small-type;
45
50
  }
46
51
  }
47
52
 
@@ -50,6 +55,8 @@
50
55
  }
51
56
 
52
57
  div.buttons {
58
+ margin-top: 2em !important;
59
+
53
60
  input {
54
61
  @include button;
55
62
  font-size: 100%;
@@ -1,13 +1,6 @@
1
- @mixin container($width: $container-width) {
2
- width: $width;
1
+ @mixin container {
2
+ width: 600px;
3
3
  margin: 0 auto;
4
- padding: 2em 0 5em 0;
5
-
6
- @media only screen and (max-width: 640px) {
7
- width: auto;
8
- margin: 0 0.6em;
9
- padding: 0.6em 0;
10
- }
11
4
  }
12
5
 
13
6
  @mixin row {
@@ -0,0 +1,46 @@
1
+ @mixin schnitzel-responsive {
2
+ @media only screen and (max-width: 640px) {
3
+ // for debugging
4
+ // body { background-color: #fee }
5
+
6
+ body {
7
+ padding-bottom: 10px;
8
+ }
9
+
10
+ // container overrides
11
+ .container {
12
+ width: auto;
13
+ padding: 0 10px;
14
+
15
+ &>header {
16
+ margin-top: 0 !important;
17
+ font-size: 100%;
18
+
19
+ .site-title {
20
+ font-size: 100%;
21
+
22
+ display: block;
23
+ margin-left: -10px;
24
+ margin-right: -10px;
25
+ }
26
+ }
27
+ }
28
+
29
+ // content overrides
30
+ article, section {
31
+ margin-top: 10px;
32
+
33
+ h1, h2, h3, h4, h5, h6 {
34
+ display: block;
35
+ margin-left: -10px;
36
+ margin-right: -10px;
37
+ }
38
+ }
39
+
40
+ // grid overrides
41
+ .column, .columns {
42
+ width: 100% !important;
43
+ float: none !important;
44
+ }
45
+ }
46
+ }
@@ -4,3 +4,4 @@
4
4
 
5
5
  @include schnitzel-complete;
6
6
  @include schnitzel-export;
7
+ @include schnitzel-responsive;
@@ -1,3 +1,3 @@
1
1
  module Schnitzelstyle
2
- VERSION = "0.0.7"
2
+ VERSION = "0.0.8"
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.7
4
+ version: 0.0.8
5
5
  prerelease:
6
6
  platform: ruby
7
7
  authors:
@@ -9,11 +9,11 @@ authors:
9
9
  autorequire:
10
10
  bindir: bin
11
11
  cert_chain: []
12
- date: 2012-02-21 00:00:00.000000000 Z
12
+ date: 2012-02-23 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: sass
16
- requirement: &70331843353520 !ruby/object:Gem::Requirement
16
+ requirement: &70103334050860 !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: *70331843353520
24
+ version_requirements: *70103334050860
25
25
  description: A simple, light-weight CSS framework to kickstart your web app.
26
26
  email:
27
27
  - hendrik@mans.de
@@ -40,12 +40,14 @@ files:
40
40
  - lib/assets/stylesheets/schnitzelstyle/_basics.scss
41
41
  - lib/assets/stylesheets/schnitzelstyle/_coderay.scss
42
42
  - lib/assets/stylesheets/schnitzelstyle/_configuration.scss
43
+ - lib/assets/stylesheets/schnitzelstyle/_content.scss
43
44
  - lib/assets/stylesheets/schnitzelstyle/_export.scss
44
45
  - lib/assets/stylesheets/schnitzelstyle/_eyecandy.scss
45
46
  - lib/assets/stylesheets/schnitzelstyle/_flashes.scss
46
47
  - lib/assets/stylesheets/schnitzelstyle/_forms.scss
47
48
  - lib/assets/stylesheets/schnitzelstyle/_grid.scss
48
49
  - lib/assets/stylesheets/schnitzelstyle/_reset.scss
50
+ - lib/assets/stylesheets/schnitzelstyle/_responsive.scss
49
51
  - lib/assets/stylesheets/schnitzelstyle/complete.scss
50
52
  - lib/schnitzelstyle.rb
51
53
  - lib/schnitzelstyle/rails.rb