shevy 1.0.1 → 2.0.0
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.
- checksums.yaml +4 -4
- data/.gitignore +4 -9
- data/Gruntfile.js +59 -0
- data/LICENSE.md +21 -0
- data/README.md +173 -19
- data/bower.json +35 -0
- data/core/_shevy.scss +12 -0
- data/core/_shevy_functions.scss +128 -0
- data/core/_shevy_mixins.scss +131 -0
- data/core/_shevy_variables.scss +20 -0
- data/demo/css/style.css +415 -0
- data/demo/dist/style.css +413 -0
- data/demo/index.html +126 -0
- data/demo/scss/style.scss +202 -0
- data/lib/shevy.rb +7 -5
- data/lib/shevy/generator.rb +81 -0
- data/lib/shevy/version.rb +1 -1
- data/package.json +34 -0
- data/sache.json +6 -0
- metadata +16 -6
- data/vendor/assets/stylesheets/shevy.scss +0 -13
- data/vendor/assets/stylesheets/shevy/_shevy_functions.scss +0 -39
- data/vendor/assets/stylesheets/shevy/_shevy_mixins.scss +0 -123
- data/vendor/assets/stylesheets/shevy/_shevy_variables.scss +0 -18
|
@@ -0,0 +1,131 @@
|
|
|
1
|
+
///
|
|
2
|
+
/// Output the headings (h1, h2...) with the calculated settings
|
|
3
|
+
/// @access public
|
|
4
|
+
/// @param {Map} $map [$shevy]
|
|
5
|
+
/// @output Headings with calculated settings
|
|
6
|
+
///
|
|
7
|
+
@mixin headings($map: $shevy) {
|
|
8
|
+
$settings: settings($map);
|
|
9
|
+
$base-font-unit: base-font-unit($settings);
|
|
10
|
+
$base-unit-multiplier: base-unit-multiplier($base-font-unit);
|
|
11
|
+
$base-font-size: base-font-size($settings);
|
|
12
|
+
$base-line-height: base-line-height($settings);
|
|
13
|
+
$base-spacing: base-spacing();
|
|
14
|
+
$font-scale-length: length(map-get($settings, 'base-font-scale'));
|
|
15
|
+
$font-unit-ems-bool: if($base-font-unit == 'em', true, false);
|
|
16
|
+
$margin-bottom-bool: map-get($settings, 'margin-bottom');
|
|
17
|
+
|
|
18
|
+
@for $i from 1 through $font-scale-length {
|
|
19
|
+
$font-scale-value: get-font-scale-value($i, $settings);
|
|
20
|
+
$font-size: $base-font-size * $font-scale-value;
|
|
21
|
+
$line-height: null;
|
|
22
|
+
$margin-bottom: 0;
|
|
23
|
+
|
|
24
|
+
// Line Height Calculation
|
|
25
|
+
@if $font-size <= $base-spacing {
|
|
26
|
+
$line-height: $base-spacing
|
|
27
|
+
} @else {
|
|
28
|
+
$increment: 1.5;
|
|
29
|
+
|
|
30
|
+
// Use half increments, while technically breaking the baseline, they are more aesthetically pleasing and still mathematically sound
|
|
31
|
+
@while base-spacing($increment) <= $font-size {
|
|
32
|
+
$increment: $increment + .5;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
@if $font-unit-ems-bool {
|
|
36
|
+
$line-height: base-spacing($increment) / $font-size;
|
|
37
|
+
} @else {
|
|
38
|
+
$line-height: base-spacing($increment);
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
// Margin Bottom Calculation
|
|
43
|
+
@if $margin-bottom-bool {
|
|
44
|
+
@if $font-unit-ems-bool {
|
|
45
|
+
$margin-bottom: $base-spacing / $font-size * $base-unit-multiplier;
|
|
46
|
+
} @else {
|
|
47
|
+
$margin-bottom: $base-spacing;
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
// Headings Output
|
|
52
|
+
h#{$i} {
|
|
53
|
+
font-size: $font-size;
|
|
54
|
+
line-height: $line-height;
|
|
55
|
+
margin-bottom: $margin-bottom;
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
///
|
|
61
|
+
/// Output font-size and line-height for body element
|
|
62
|
+
/// @access public
|
|
63
|
+
/// @param {Map} $map [$shevy] Map of settings
|
|
64
|
+
/// @output Font-size and line-height for body element
|
|
65
|
+
///
|
|
66
|
+
@mixin body($map: $shevy) {
|
|
67
|
+
$settings: settings($map);
|
|
68
|
+
$base-font-unit: base-font-unit($settings);
|
|
69
|
+
$base-unit-muliplier: base-unit-multiplier($base-font-unit);
|
|
70
|
+
$base-font-size: base-font-size($settings);
|
|
71
|
+
$base-line-height: base-line-height($settings);
|
|
72
|
+
|
|
73
|
+
// Output
|
|
74
|
+
body {
|
|
75
|
+
font-size: $base-font-size;
|
|
76
|
+
line-height: $base-line-height;
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
///
|
|
81
|
+
/// Output font-size, line-height and margin-bottom for p, ol, ul, and pre elements
|
|
82
|
+
/// @access public
|
|
83
|
+
/// @param {Map} $map [$shevy] Map of settings
|
|
84
|
+
/// @output Font-size, line-height and margin-bottom for p, ol, ul, and pre elements
|
|
85
|
+
///
|
|
86
|
+
@mixin content($map: $shevy) {
|
|
87
|
+
$settings: settings($map);
|
|
88
|
+
$base-font-unit: base-font-unit($settings);
|
|
89
|
+
$base-unit-multiplier: base-unit-multiplier($base-font-unit);
|
|
90
|
+
$base-font-size: base-font-size($settings);
|
|
91
|
+
$base-line-height: base-line-height($settings);
|
|
92
|
+
$base-spacing: base-spacing();
|
|
93
|
+
$margin-bottom: 0;
|
|
94
|
+
$margin-bottom-bool: map-get($settings, 'margin-bottom');
|
|
95
|
+
$font-unit-ems-bool: if($base-font-unit == 'em', true, false);;
|
|
96
|
+
|
|
97
|
+
// Margin Bottom
|
|
98
|
+
@if $margin-bottom-bool {
|
|
99
|
+
@if $font-unit-ems-bool {
|
|
100
|
+
$margin-bottom: $base-spacing / $base-font-size * $base-unit-multiplier;
|
|
101
|
+
} @else {
|
|
102
|
+
$margin-bottom: $base-spacing;
|
|
103
|
+
}
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
// Content Elements
|
|
107
|
+
p,
|
|
108
|
+
ol,
|
|
109
|
+
ul,
|
|
110
|
+
pre {
|
|
111
|
+
font-size: $base-font-size;
|
|
112
|
+
line-height: $base-line-height;
|
|
113
|
+
margin-bottom: $margin-bottom;
|
|
114
|
+
}
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
///
|
|
118
|
+
/// Temporarily use a different settings map
|
|
119
|
+
/// @access public
|
|
120
|
+
/// @param {Map} $map A map consisting of some or all $shevy settings.
|
|
121
|
+
/// @content [Merges the $map with the $shevy settings and uses this new map to do all shevy math within this content block. Restores the $shevy settings after the block.]
|
|
122
|
+
///
|
|
123
|
+
@mixin with-settings($map) {
|
|
124
|
+
$settings: settings();
|
|
125
|
+
$old: $settings;
|
|
126
|
+
$shevy: map-merge($old, $map) !global;
|
|
127
|
+
|
|
128
|
+
@content;
|
|
129
|
+
|
|
130
|
+
$shevy: $old !global
|
|
131
|
+
}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
///
|
|
2
|
+
/// Default $shevy settings
|
|
3
|
+
/// @prop $shevy-defaults
|
|
4
|
+
/// @prop {Value} $shevy-defaults.base-font-size [1em] Base font size of the project; Can be in px, em, or rem
|
|
5
|
+
/// @prop {Number} $shevy-defaults.base-line-height [1.5] Base line-height of the project; Should be a unitless value.
|
|
6
|
+
/// @prop {Map} $shevy-defaults.base-font-scale [(3, 2.5, 2, 1.5, 1.25, 1)] Font scale for project, largest to smallest, i.e the base font size multiplied by this number will result in the font-sizes for h1, h2, h3... in order.
|
|
7
|
+
/// @prop {Boolean} $shevy-defaults.margin-bottom [true] Determines if headings and content elements will have a margin-bottom set on them.
|
|
8
|
+
///
|
|
9
|
+
$shevy-defaults: (
|
|
10
|
+
base-font-size: 1em,
|
|
11
|
+
base-line-height: 1.5,
|
|
12
|
+
base-font-scale: (3, 2.5, 2, 1.5, 1.25, 1),
|
|
13
|
+
margin-bottom: true
|
|
14
|
+
);
|
|
15
|
+
|
|
16
|
+
// Empty $shevy set as default in case one is not supplied by user
|
|
17
|
+
$shevy: () !default;
|
|
18
|
+
|
|
19
|
+
// Merge defaults with $shevy to create base level map
|
|
20
|
+
$shevy: map-merge($shevy-defaults, $shevy);
|
data/demo/css/style.css
ADDED
|
@@ -0,0 +1,415 @@
|
|
|
1
|
+
*,
|
|
2
|
+
*:before,
|
|
3
|
+
*:after {
|
|
4
|
+
box-sizing: inherit;
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
* {
|
|
8
|
+
margin: 0;
|
|
9
|
+
padding: 0;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
html {
|
|
13
|
+
box-sizing: border-box;
|
|
14
|
+
font-size: 100%;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
body {
|
|
18
|
+
font-family: sans-serif;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.container {
|
|
22
|
+
width: 90%;
|
|
23
|
+
margin: 1em auto;
|
|
24
|
+
}
|
|
25
|
+
@media only screen and (min-width: 520px) {
|
|
26
|
+
.container {
|
|
27
|
+
width: 67%;
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
@media only screen and (min-width: 1025px) {
|
|
31
|
+
.container {
|
|
32
|
+
width: 50%;
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.footer {
|
|
37
|
+
margin-bottom: 3em;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
h1 {
|
|
41
|
+
font-size: 3em;
|
|
42
|
+
line-height: 1.25;
|
|
43
|
+
margin-bottom: 0.5em;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
h2 {
|
|
47
|
+
font-size: 2.5em;
|
|
48
|
+
line-height: 1.2;
|
|
49
|
+
margin-bottom: 0.6em;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
h3 {
|
|
53
|
+
font-size: 2em;
|
|
54
|
+
line-height: 1.125;
|
|
55
|
+
margin-bottom: 0.75em;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
h4 {
|
|
59
|
+
font-size: 1.5em;
|
|
60
|
+
line-height: 1;
|
|
61
|
+
margin-bottom: 1em;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
h5 {
|
|
65
|
+
font-size: 1.25em;
|
|
66
|
+
line-height: 1.2;
|
|
67
|
+
margin-bottom: 1.2em;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
h6 {
|
|
71
|
+
font-size: 1em;
|
|
72
|
+
line-height: 1.5;
|
|
73
|
+
margin-bottom: 1.5em;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
p {
|
|
77
|
+
font-size: 1em;
|
|
78
|
+
line-height: 1.5em;
|
|
79
|
+
margin-bottom: 1.5em;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
.shevy {
|
|
83
|
+
background-image: url(http://basehold.it/i/24/);
|
|
84
|
+
}
|
|
85
|
+
.shevy h1 {
|
|
86
|
+
font-size: 3em;
|
|
87
|
+
line-height: 1.25;
|
|
88
|
+
margin-bottom: 0.5em;
|
|
89
|
+
}
|
|
90
|
+
.shevy h2 {
|
|
91
|
+
font-size: 2.5em;
|
|
92
|
+
line-height: 1.2;
|
|
93
|
+
margin-bottom: 0.6em;
|
|
94
|
+
}
|
|
95
|
+
.shevy h3 {
|
|
96
|
+
font-size: 2em;
|
|
97
|
+
line-height: 1.125;
|
|
98
|
+
margin-bottom: 0.75em;
|
|
99
|
+
}
|
|
100
|
+
.shevy h4 {
|
|
101
|
+
font-size: 1.5em;
|
|
102
|
+
line-height: 1;
|
|
103
|
+
margin-bottom: 1em;
|
|
104
|
+
}
|
|
105
|
+
.shevy h5 {
|
|
106
|
+
font-size: 1.25em;
|
|
107
|
+
line-height: 1.2;
|
|
108
|
+
margin-bottom: 1.2em;
|
|
109
|
+
}
|
|
110
|
+
.shevy h6 {
|
|
111
|
+
font-size: 1em;
|
|
112
|
+
line-height: 1.5;
|
|
113
|
+
margin-bottom: 1.5em;
|
|
114
|
+
}
|
|
115
|
+
.shevy p {
|
|
116
|
+
font-size: 1em;
|
|
117
|
+
line-height: 1.5em;
|
|
118
|
+
margin-bottom: 1.5em;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
.large {
|
|
122
|
+
background-image: url(http://basehold.it/i/30/);
|
|
123
|
+
}
|
|
124
|
+
.large h1 {
|
|
125
|
+
font-size: 90px;
|
|
126
|
+
line-height: 105px;
|
|
127
|
+
margin-bottom: 30px;
|
|
128
|
+
}
|
|
129
|
+
.large h2 {
|
|
130
|
+
font-size: 75px;
|
|
131
|
+
line-height: 90px;
|
|
132
|
+
margin-bottom: 30px;
|
|
133
|
+
}
|
|
134
|
+
.large h3 {
|
|
135
|
+
font-size: 60px;
|
|
136
|
+
line-height: 75px;
|
|
137
|
+
margin-bottom: 30px;
|
|
138
|
+
}
|
|
139
|
+
.large h4 {
|
|
140
|
+
font-size: 45px;
|
|
141
|
+
line-height: 60px;
|
|
142
|
+
margin-bottom: 30px;
|
|
143
|
+
}
|
|
144
|
+
.large h5 {
|
|
145
|
+
font-size: 30px;
|
|
146
|
+
line-height: 30px;
|
|
147
|
+
margin-bottom: 30px;
|
|
148
|
+
}
|
|
149
|
+
.large h6 {
|
|
150
|
+
font-size: 15px;
|
|
151
|
+
line-height: 30px;
|
|
152
|
+
margin-bottom: 30px;
|
|
153
|
+
}
|
|
154
|
+
.large p {
|
|
155
|
+
font-size: 15px;
|
|
156
|
+
line-height: 30px;
|
|
157
|
+
margin-bottom: 30px;
|
|
158
|
+
}
|
|
159
|
+
.large h6 {
|
|
160
|
+
/* If you're clever and look at this and notice it's different,
|
|
161
|
+
let me tell you why. Shevy supports a half base-space so that large headings
|
|
162
|
+
don't have obnoxiously big margins. When you're using basehold.it,
|
|
163
|
+
it's nice to bump up a margin manually to get the text below back on the baseline. Kudos for finding this */
|
|
164
|
+
margin-bottom: 45px;
|
|
165
|
+
}
|
|
166
|
+
@media only screen and (min-width: 478px) {
|
|
167
|
+
.large h6 {
|
|
168
|
+
margin-bottom: 30px;
|
|
169
|
+
}
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
.responsive {
|
|
173
|
+
background-image: url(http://basehold.it/i/21/);
|
|
174
|
+
}
|
|
175
|
+
.responsive h1 {
|
|
176
|
+
font-size: 28px;
|
|
177
|
+
line-height: 31.5px;
|
|
178
|
+
margin-bottom: 21px;
|
|
179
|
+
}
|
|
180
|
+
.responsive h2 {
|
|
181
|
+
font-size: 24.5px;
|
|
182
|
+
line-height: 31.5px;
|
|
183
|
+
margin-bottom: 21px;
|
|
184
|
+
}
|
|
185
|
+
.responsive h3 {
|
|
186
|
+
font-size: 21px;
|
|
187
|
+
line-height: 21px;
|
|
188
|
+
margin-bottom: 21px;
|
|
189
|
+
}
|
|
190
|
+
.responsive h4 {
|
|
191
|
+
font-size: 17.5px;
|
|
192
|
+
line-height: 21px;
|
|
193
|
+
margin-bottom: 21px;
|
|
194
|
+
}
|
|
195
|
+
.responsive h5 {
|
|
196
|
+
font-size: 14px;
|
|
197
|
+
line-height: 21px;
|
|
198
|
+
margin-bottom: 21px;
|
|
199
|
+
}
|
|
200
|
+
.responsive h6 {
|
|
201
|
+
font-size: 10.5px;
|
|
202
|
+
line-height: 21px;
|
|
203
|
+
margin-bottom: 21px;
|
|
204
|
+
}
|
|
205
|
+
.responsive p {
|
|
206
|
+
font-size: 10.5px;
|
|
207
|
+
line-height: 21px;
|
|
208
|
+
margin-bottom: 21px;
|
|
209
|
+
}
|
|
210
|
+
@media only screen and (min-width: 520px) {
|
|
211
|
+
.responsive {
|
|
212
|
+
background-image: url(http://basehold.it/i/24/);
|
|
213
|
+
}
|
|
214
|
+
.responsive h1 {
|
|
215
|
+
font-size: 32px;
|
|
216
|
+
line-height: 36px;
|
|
217
|
+
margin-bottom: 24px;
|
|
218
|
+
}
|
|
219
|
+
.responsive h2 {
|
|
220
|
+
font-size: 28px;
|
|
221
|
+
line-height: 36px;
|
|
222
|
+
margin-bottom: 24px;
|
|
223
|
+
}
|
|
224
|
+
.responsive h3 {
|
|
225
|
+
font-size: 24px;
|
|
226
|
+
line-height: 24px;
|
|
227
|
+
margin-bottom: 24px;
|
|
228
|
+
}
|
|
229
|
+
.responsive h4 {
|
|
230
|
+
font-size: 20px;
|
|
231
|
+
line-height: 24px;
|
|
232
|
+
margin-bottom: 24px;
|
|
233
|
+
}
|
|
234
|
+
.responsive h5 {
|
|
235
|
+
font-size: 16px;
|
|
236
|
+
line-height: 24px;
|
|
237
|
+
margin-bottom: 24px;
|
|
238
|
+
}
|
|
239
|
+
.responsive h6 {
|
|
240
|
+
font-size: 12px;
|
|
241
|
+
line-height: 24px;
|
|
242
|
+
margin-bottom: 24px;
|
|
243
|
+
}
|
|
244
|
+
.responsive p {
|
|
245
|
+
font-size: 12px;
|
|
246
|
+
line-height: 24px;
|
|
247
|
+
margin-bottom: 24px;
|
|
248
|
+
}
|
|
249
|
+
}
|
|
250
|
+
@media only screen and (min-width: 769px) {
|
|
251
|
+
.responsive {
|
|
252
|
+
background-image: url(http://basehold.it/i/54/);
|
|
253
|
+
}
|
|
254
|
+
.responsive h1 {
|
|
255
|
+
font-size: 3.75em;
|
|
256
|
+
line-height: 1.35;
|
|
257
|
+
margin-bottom: 0.9em;
|
|
258
|
+
}
|
|
259
|
+
.responsive h2 {
|
|
260
|
+
font-size: 3.3em;
|
|
261
|
+
line-height: 1.02273;
|
|
262
|
+
margin-bottom: 1.02273em;
|
|
263
|
+
}
|
|
264
|
+
.responsive h3 {
|
|
265
|
+
font-size: 3em;
|
|
266
|
+
line-height: 1.125;
|
|
267
|
+
margin-bottom: 1.125em;
|
|
268
|
+
}
|
|
269
|
+
.responsive h4 {
|
|
270
|
+
font-size: 2.625em;
|
|
271
|
+
line-height: 1.28571;
|
|
272
|
+
margin-bottom: 1.28571em;
|
|
273
|
+
}
|
|
274
|
+
.responsive h5 {
|
|
275
|
+
font-size: 1.875em;
|
|
276
|
+
line-height: 1.8;
|
|
277
|
+
margin-bottom: 1.8em;
|
|
278
|
+
}
|
|
279
|
+
.responsive h6 {
|
|
280
|
+
font-size: 1.5em;
|
|
281
|
+
line-height: 2.25;
|
|
282
|
+
margin-bottom: 2.25em;
|
|
283
|
+
}
|
|
284
|
+
.responsive p {
|
|
285
|
+
font-size: 1.5em;
|
|
286
|
+
line-height: 2.25em;
|
|
287
|
+
margin-bottom: 2.25em;
|
|
288
|
+
}
|
|
289
|
+
}
|
|
290
|
+
@media only screen and (min-width: 1025px) {
|
|
291
|
+
.responsive {
|
|
292
|
+
background-image: url(http://basehold.it/i/54/);
|
|
293
|
+
}
|
|
294
|
+
.responsive h1 {
|
|
295
|
+
font-size: 90px;
|
|
296
|
+
line-height: 108px;
|
|
297
|
+
margin-bottom: 54px;
|
|
298
|
+
}
|
|
299
|
+
.responsive h2 {
|
|
300
|
+
font-size: 79.2px;
|
|
301
|
+
line-height: 81px;
|
|
302
|
+
margin-bottom: 54px;
|
|
303
|
+
}
|
|
304
|
+
.responsive h3 {
|
|
305
|
+
font-size: 72px;
|
|
306
|
+
line-height: 81px;
|
|
307
|
+
margin-bottom: 54px;
|
|
308
|
+
}
|
|
309
|
+
.responsive h4 {
|
|
310
|
+
font-size: 63px;
|
|
311
|
+
line-height: 81px;
|
|
312
|
+
margin-bottom: 54px;
|
|
313
|
+
}
|
|
314
|
+
.responsive h5 {
|
|
315
|
+
font-size: 45px;
|
|
316
|
+
line-height: 54px;
|
|
317
|
+
margin-bottom: 54px;
|
|
318
|
+
}
|
|
319
|
+
.responsive h6 {
|
|
320
|
+
font-size: 36px;
|
|
321
|
+
line-height: 54px;
|
|
322
|
+
margin-bottom: 54px;
|
|
323
|
+
}
|
|
324
|
+
.responsive p {
|
|
325
|
+
font-size: 36px;
|
|
326
|
+
line-height: 54px;
|
|
327
|
+
margin-bottom: 54px;
|
|
328
|
+
}
|
|
329
|
+
}
|
|
330
|
+
@media only screen and (min-width: 1350px) {
|
|
331
|
+
.responsive {
|
|
332
|
+
background-image: url(http://basehold.it/i/72/);
|
|
333
|
+
}
|
|
334
|
+
.responsive h1 {
|
|
335
|
+
font-size: 144px;
|
|
336
|
+
line-height: 180px;
|
|
337
|
+
margin-bottom: 72px;
|
|
338
|
+
}
|
|
339
|
+
.responsive h2 {
|
|
340
|
+
font-size: 120px;
|
|
341
|
+
line-height: 144px;
|
|
342
|
+
margin-bottom: 72px;
|
|
343
|
+
}
|
|
344
|
+
.responsive h3 {
|
|
345
|
+
font-size: 96px;
|
|
346
|
+
line-height: 108px;
|
|
347
|
+
margin-bottom: 72px;
|
|
348
|
+
}
|
|
349
|
+
.responsive h4 {
|
|
350
|
+
font-size: 84px;
|
|
351
|
+
line-height: 108px;
|
|
352
|
+
margin-bottom: 72px;
|
|
353
|
+
}
|
|
354
|
+
.responsive h5 {
|
|
355
|
+
font-size: 60px;
|
|
356
|
+
line-height: 72px;
|
|
357
|
+
margin-bottom: 72px;
|
|
358
|
+
}
|
|
359
|
+
.responsive h6 {
|
|
360
|
+
font-size: 48px;
|
|
361
|
+
line-height: 72px;
|
|
362
|
+
margin-bottom: 72px;
|
|
363
|
+
}
|
|
364
|
+
.responsive p {
|
|
365
|
+
font-size: 48px;
|
|
366
|
+
line-height: 72px;
|
|
367
|
+
margin-bottom: 72px;
|
|
368
|
+
}
|
|
369
|
+
}
|
|
370
|
+
@media only screen and (min-width: 769px) {
|
|
371
|
+
.responsive p:first-child {
|
|
372
|
+
margin-bottom: 1.125em;
|
|
373
|
+
}
|
|
374
|
+
}
|
|
375
|
+
@media only screen and (min-width: 1025px) {
|
|
376
|
+
.responsive p:first-child {
|
|
377
|
+
margin-bottom: 27px;
|
|
378
|
+
}
|
|
379
|
+
}
|
|
380
|
+
@media only screen and (min-width: 1350px) {
|
|
381
|
+
.responsive p:first-child {
|
|
382
|
+
margin-bottom: 36px;
|
|
383
|
+
}
|
|
384
|
+
}
|
|
385
|
+
|
|
386
|
+
.box {
|
|
387
|
+
background: red;
|
|
388
|
+
padding: 3em;
|
|
389
|
+
margin-bottom: 1.5em;
|
|
390
|
+
}
|
|
391
|
+
.responsive .box {
|
|
392
|
+
padding: 42px;
|
|
393
|
+
}
|
|
394
|
+
@media only screen and (min-width: 520px) {
|
|
395
|
+
.responsive .box {
|
|
396
|
+
padding: 48px;
|
|
397
|
+
}
|
|
398
|
+
}
|
|
399
|
+
@media only screen and (min-width: 769px) {
|
|
400
|
+
.responsive .box {
|
|
401
|
+
padding: 4.5em;
|
|
402
|
+
}
|
|
403
|
+
}
|
|
404
|
+
@media only screen and (min-width: 1025px) {
|
|
405
|
+
.responsive .box {
|
|
406
|
+
padding: 108px;
|
|
407
|
+
}
|
|
408
|
+
}
|
|
409
|
+
@media only screen and (min-width: 1350px) {
|
|
410
|
+
.responsive .box {
|
|
411
|
+
padding: 144px;
|
|
412
|
+
}
|
|
413
|
+
}
|
|
414
|
+
|
|
415
|
+
/*# sourceMappingURL=style.css.map */
|