schnitzelstyle 0.1.1 → 0.1.2
Sign up to get free protection for your applications and to get access to all the features.
- data/lib/assets/stylesheets/schnitzelstyle/_basics.scss +7 -3
- data/lib/assets/stylesheets/schnitzelstyle/_content.scss +25 -11
- data/lib/assets/stylesheets/schnitzelstyle/_eyecandy.scss +5 -5
- data/lib/assets/stylesheets/schnitzelstyle/_forms.scss +6 -3
- data/lib/assets/stylesheets/schnitzelstyle/_responsive.scss +20 -0
- data/lib/schnitzelstyle/version.rb +1 -1
- metadata +4 -4
@@ -4,6 +4,11 @@
|
|
4
4
|
-moz-#{$name}: $value;
|
5
5
|
}
|
6
6
|
|
7
|
+
@mixin box-model($model) {
|
8
|
+
@include vendorize(box-sizing, $model !important);
|
9
|
+
* { @include vendorize(box-sizing, $model !important); }
|
10
|
+
}
|
11
|
+
|
7
12
|
@mixin justified {
|
8
13
|
text-align: justify;
|
9
14
|
text-justify: newspaper;
|
@@ -19,10 +24,8 @@
|
|
19
24
|
}
|
20
25
|
|
21
26
|
@mixin schnitzel-basics {
|
22
|
-
// we like the border-box sizing model. http://paulirish.com/2012/box-sizing-border-box-ftw/
|
23
|
-
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
|
24
|
-
|
25
27
|
body {
|
28
|
+
@include box-model(border-box);
|
26
29
|
color: $color-text;
|
27
30
|
background-color: $color-background;
|
28
31
|
font: $font-default;
|
@@ -43,6 +46,7 @@
|
|
43
46
|
}
|
44
47
|
|
45
48
|
hr {
|
49
|
+
margin: 1.5em 0;
|
46
50
|
border: none;
|
47
51
|
color: rgba($color-text, 0.1);
|
48
52
|
background-color: rgba($color-text, 0.1);
|
@@ -57,8 +57,6 @@
|
|
57
57
|
li { margin-left: 1.5em; }
|
58
58
|
}
|
59
59
|
|
60
|
-
|
61
|
-
|
62
60
|
// headings
|
63
61
|
h1, h2, h3, h4, h5, h6 {
|
64
62
|
margin-top: 1.5em;
|
@@ -66,13 +64,18 @@
|
|
66
64
|
font-weight: bold;
|
67
65
|
}
|
68
66
|
|
67
|
+
hr+h1, hr+h2, hr+h3, hr+h4, hr+h5, hr+h6 {
|
68
|
+
margin-top: 0;
|
69
|
+
}
|
70
|
+
|
69
71
|
h1, h2 {
|
70
72
|
@include floaty-title($color-heading-text, $color-heading-background);
|
71
73
|
}
|
72
74
|
|
73
75
|
h1 {
|
74
|
-
font-size:
|
76
|
+
font-size: 140%;
|
75
77
|
text-transform: uppercase;
|
78
|
+
letter-spacing: -0.07em;
|
76
79
|
}
|
77
80
|
|
78
81
|
// quotes
|
@@ -94,12 +97,13 @@
|
|
94
97
|
// code
|
95
98
|
pre, code {
|
96
99
|
font: $font-monospaced;
|
97
|
-
background-color: rgba($color-text, 0.
|
100
|
+
background-color: rgba($color-text, 0.08);
|
98
101
|
color: rgba($color-text, 0.9);
|
102
|
+
border-radius: 3px;
|
99
103
|
}
|
100
104
|
|
101
105
|
code {
|
102
|
-
padding:
|
106
|
+
padding: 2px 5px
|
103
107
|
}
|
104
108
|
|
105
109
|
pre {
|
@@ -109,16 +113,26 @@
|
|
109
113
|
}
|
110
114
|
|
111
115
|
// media embeds
|
112
|
-
//
|
113
|
-
// Prepare embedded media for proper responsiveness.
|
114
|
-
// Source: http://webdesignerwall.com/tutorials/css-elastic-videos
|
115
116
|
.embedded {
|
116
117
|
position: relative;
|
117
|
-
|
118
|
-
|
119
|
-
|
118
|
+
$width: $container-width + 300px;
|
119
|
+
width: $width;
|
120
|
+
margin-left: -($width - $container-width) / 2;
|
120
121
|
overflow: hidden;
|
121
122
|
|
123
|
+
&.soundcloud {
|
124
|
+
height: 165px !important;
|
125
|
+
}
|
126
|
+
|
127
|
+
&.video {
|
128
|
+
&.vimeo {
|
129
|
+
height: ($width / 16) * 9;
|
130
|
+
}
|
131
|
+
&.youtube {
|
132
|
+
height: ($width / 16) * 9.5;
|
133
|
+
}
|
134
|
+
}
|
135
|
+
|
122
136
|
iframe, object, embed {
|
123
137
|
position: absolute;
|
124
138
|
top: 0;
|
@@ -5,11 +5,11 @@
|
|
5
5
|
|
6
6
|
@mixin floaty-title($fg, $bg) {
|
7
7
|
display: inline-block;
|
8
|
-
padding: 5px
|
8
|
+
padding: 5px 10px 4px 10px;
|
9
9
|
|
10
10
|
color: $fg;
|
11
11
|
background-color: $bg;
|
12
|
-
border-
|
12
|
+
border-bottom: 1px solid mix($color-text, $bg, 30%);
|
13
13
|
|
14
14
|
a {
|
15
15
|
color: $fg;
|
@@ -66,7 +66,7 @@
|
|
66
66
|
|
67
67
|
@mixin schnitzel-eyecandy {
|
68
68
|
.button { @include button }
|
69
|
-
.button.red { @include button(#c66) }
|
70
|
-
.button.green { @include button(#6c6) }
|
71
|
-
.button.blue
|
69
|
+
.button.red, button.red { @include button(#c66) }
|
70
|
+
.button.green, button.green { @include button(#6c6) }
|
71
|
+
.button.blue, button.blue { @include button(#66c) }
|
72
72
|
}
|
@@ -69,10 +69,13 @@
|
|
69
69
|
div.buttons {
|
70
70
|
margin-top: 2em !important;
|
71
71
|
|
72
|
-
input {
|
73
|
-
|
72
|
+
input { @include button; }
|
73
|
+
|
74
|
+
input, button {
|
75
|
+
display: inline-block;
|
74
76
|
font-size: 100%;
|
75
|
-
padding: 4px 10px;
|
77
|
+
padding: 4px 10px !important;
|
78
|
+
cursor: pointer;
|
76
79
|
}
|
77
80
|
}
|
78
81
|
}
|
@@ -1,4 +1,24 @@
|
|
1
1
|
@mixin schnitzel-responsive {
|
2
|
+
@media only screen and (max-width: 940px) {
|
3
|
+
article, section {
|
4
|
+
.embedded {
|
5
|
+
width: 100%;
|
6
|
+
margin-left: 0;
|
7
|
+
|
8
|
+
&.video {
|
9
|
+
height: 0 !important;
|
10
|
+
padding-top: 30px;
|
11
|
+
&.youtube {
|
12
|
+
padding-bottom: 56.25%;
|
13
|
+
}
|
14
|
+
&.vimeo {
|
15
|
+
padding-bottom: 52%;
|
16
|
+
}
|
17
|
+
}
|
18
|
+
}
|
19
|
+
}
|
20
|
+
}
|
21
|
+
|
2
22
|
@media only screen and (max-width: 640px) {
|
3
23
|
body {
|
4
24
|
padding-bottom: 10px;
|
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.1.
|
4
|
+
version: 0.1.2
|
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-03-
|
12
|
+
date: 2012-03-13 00:00:00.000000000 Z
|
13
13
|
dependencies:
|
14
14
|
- !ruby/object:Gem::Dependency
|
15
15
|
name: sass
|
16
|
-
requirement: &
|
16
|
+
requirement: &70119516222600 !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: *
|
24
|
+
version_requirements: *70119516222600
|
25
25
|
description: A simple, light-weight CSS framework to kickstart your web app.
|
26
26
|
email:
|
27
27
|
- hendrik@mans.de
|