shevy 2.0.0 → 2.1.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/README.md +5 -11
- data/bower.json +1 -1
- data/core/_shevy.scss +7 -9
- data/core/{_shevy_functions.scss → shevy/_functions.scss} +38 -3
- data/core/{_shevy_mixins.scss → shevy/_mixins.scss} +9 -8
- data/core/{_shevy_variables.scss → shevy/_variables.scss} +3 -1
- data/demo/css/style.css +136 -104
- data/demo/dist/style.css +136 -104
- data/demo/scss/style.scss +40 -35
- data/docs/assets/css/main.css +1 -0
- data/docs/assets/images/favicon.png +0 -0
- data/docs/assets/images/logo_full_compact.svg +1 -0
- data/docs/assets/images/logo_full_inline.svg +1 -0
- data/docs/assets/images/logo_light_compact.svg +1 -0
- data/docs/assets/images/logo_light_inline.svg +1 -0
- data/docs/assets/js/main.js +56 -0
- data/docs/assets/js/main.min.js +1 -0
- data/docs/assets/js/search.js +146 -0
- data/docs/assets/js/sidebar.js +163 -0
- data/docs/assets/js/vendor/fuse.min.js +20 -0
- data/docs/assets/js/vendor/jquery.min.js +4 -0
- data/docs/assets/js/vendor/prism.min.js +9 -0
- data/docs/index.html +163 -0
- data/lib/shevy/version.rb +1 -1
- data/package.json +7 -5
- metadata +19 -5
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA1:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 01afdc08376e30495dae14cb3aaf9a282f6d3bde
|
|
4
|
+
data.tar.gz: 5ea5863c598073abf76074c59da8ed04d6ee6d81
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 9aee868887c24d99045afabd20011bbe1fb4d50b5d9e144d784dea6f32ade7941c1cd105609b08a2da7a1065e68dc2b7fe94dd1d9b21a658f24baa22e2691e22
|
|
7
|
+
data.tar.gz: 2469c6d9608d94066bcc54a6099de962b4f106e9baccfae112b3b351dd3024819cd0cb4a5ec626b52b9bc99d733eefcd09707f47a43b78281f8e4999724e014c
|
data/README.md
CHANGED
|
@@ -4,23 +4,23 @@ A simple, configurable Sass library for typography with perfect vertical rhythm.
|
|
|
4
4
|
|
|
5
5
|
## Installation
|
|
6
6
|
|
|
7
|
-
If you want to add this to a project, copy the `
|
|
7
|
+
If you want to add this to a project, copy the `core/` directory into the appropriate location in your app.
|
|
8
8
|
|
|
9
9
|
```
|
|
10
|
-
$ cp -R
|
|
10
|
+
$ cp -R core/ path/to/your/project
|
|
11
11
|
```
|
|
12
12
|
|
|
13
13
|
Then `@import` the `_shevy.scss` file into your project.
|
|
14
14
|
|
|
15
15
|
```scss
|
|
16
|
-
@import '
|
|
16
|
+
@import 'core/shevy';
|
|
17
17
|
```
|
|
18
18
|
|
|
19
19
|
Be sure to place this _before_ any call to Shevy mixins and functions so that the Sass compiles without error.
|
|
20
20
|
|
|
21
21
|
#### Ruby on Rails
|
|
22
22
|
|
|
23
|
-
If you are using Ruby on Rails and would like to add Shevy to your project, you're in luck. Shevy is also a [Ruby Gem](https://rubygems.org/gems/shevy)
|
|
23
|
+
If you are using Ruby on Rails and would like to add Shevy to your project, you're in luck. Shevy is also a [Ruby Gem](https://rubygems.org/gems/shevy). In your `Gemfile` add:
|
|
24
24
|
|
|
25
25
|
```ruby
|
|
26
26
|
gem 'shevy'
|
|
@@ -32,13 +32,7 @@ Then run:
|
|
|
32
32
|
$ bundle install
|
|
33
33
|
```
|
|
34
34
|
|
|
35
|
-
Once the gem is installed, add Shevy to your
|
|
36
|
-
|
|
37
|
-
```
|
|
38
|
-
*= require shevy
|
|
39
|
-
```
|
|
40
|
-
|
|
41
|
-
And _then_ `@import` the `_shevy.scss` file into your project with:
|
|
35
|
+
Once the gem is installed, add Shevy to your project by adding:
|
|
42
36
|
|
|
43
37
|
```scss
|
|
44
38
|
@import 'shevy';
|
data/bower.json
CHANGED
data/core/_shevy.scss
CHANGED
|
@@ -1,12 +1,10 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
// Github: kyleshevlin
|
|
6
|
-
//////////////////////////////
|
|
1
|
+
////
|
|
2
|
+
/// Shevy
|
|
3
|
+
/// @author Kyle Shevlin
|
|
4
|
+
////
|
|
7
5
|
|
|
8
6
|
@import
|
|
9
|
-
'
|
|
10
|
-
'
|
|
11
|
-
'
|
|
7
|
+
'shevy/variables',
|
|
8
|
+
'shevy/functions',
|
|
9
|
+
'shevy/mixins'
|
|
12
10
|
;
|
|
@@ -47,7 +47,7 @@
|
|
|
47
47
|
}
|
|
48
48
|
|
|
49
49
|
///
|
|
50
|
-
/// Returns the line-height of the current settings
|
|
50
|
+
/// Returns the base line-height of the current settings
|
|
51
51
|
/// @access public
|
|
52
52
|
/// @param {Map} $map [$shevy] Map of settings
|
|
53
53
|
/// @return {Number} Current base-line-height setting
|
|
@@ -64,6 +64,34 @@
|
|
|
64
64
|
@return base-line-height($map);
|
|
65
65
|
}
|
|
66
66
|
|
|
67
|
+
///
|
|
68
|
+
/// Returns the line-height spacing, which is unaffected by proximity-factor
|
|
69
|
+
/// @access public
|
|
70
|
+
/// @param {Number} $factor [1] A factor with which to multiply the base-spacing value
|
|
71
|
+
/// @param {Map} $map [$shevy] Map of settings
|
|
72
|
+
/// @return {Value} Value of the calculated line-height
|
|
73
|
+
///
|
|
74
|
+
@function line-height-spacing($factor: 1, $map: $shevy) {
|
|
75
|
+
$settings: settings($map);
|
|
76
|
+
$line-height-spacing: line-height-spacing-math($settings);
|
|
77
|
+
|
|
78
|
+
@return $line-height-spacing * $factor;
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
///
|
|
82
|
+
/// Returns the line-height spacing, which is unaffected by proximity-factor
|
|
83
|
+
/// @access private
|
|
84
|
+
/// @param {Map} $map [$shevy] Map of settings
|
|
85
|
+
/// @return {Value} Value of base-font-size multiplied by base-line-height
|
|
86
|
+
///
|
|
87
|
+
@function line-height-spacing-math($map: $shevy) {
|
|
88
|
+
$settings: settings($map);
|
|
89
|
+
$base-font-size: base-font-size($settings);
|
|
90
|
+
$base-line-height: base-line-height($settings);
|
|
91
|
+
|
|
92
|
+
@return $base-font-size * $base-line-height;
|
|
93
|
+
}
|
|
94
|
+
|
|
67
95
|
///
|
|
68
96
|
/// Takes a factor, multiplies it with the current settings base spacing to output values that are multiples or dividends of the current vertical rhythm
|
|
69
97
|
/// @access public
|
|
@@ -89,14 +117,21 @@
|
|
|
89
117
|
/// Calculates base spacing
|
|
90
118
|
/// @access private
|
|
91
119
|
/// @param {Map} $map [$shevy] Map of settings
|
|
92
|
-
/// @return {Value} Value of base-font-size multiplied by base-line-height
|
|
120
|
+
/// @return {Value} Value of base-font-size multiplied by base-line-height, additionally multiplied by proximity factor if proximity is true
|
|
93
121
|
///
|
|
94
122
|
@function base-spacing-math($map: $shevy) {
|
|
95
123
|
$settings: settings($map);
|
|
96
124
|
$base-font-size: base-font-size($settings);
|
|
97
125
|
$base-line-height: base-line-height($settings);
|
|
126
|
+
$proximity-bool: map-get($settings, proximity);
|
|
127
|
+
$proximity-factor: map-get($settings, proximity-factor);
|
|
128
|
+
$base-spacing: $base-font-size * $base-line-height;
|
|
98
129
|
|
|
99
|
-
@
|
|
130
|
+
@if $proximity-bool {
|
|
131
|
+
$base-spacing: $base-spacing * $proximity-factor;
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
@return $base-spacing;
|
|
100
135
|
}
|
|
101
136
|
|
|
102
137
|
///
|
|
@@ -10,7 +10,8 @@
|
|
|
10
10
|
$base-unit-multiplier: base-unit-multiplier($base-font-unit);
|
|
11
11
|
$base-font-size: base-font-size($settings);
|
|
12
12
|
$base-line-height: base-line-height($settings);
|
|
13
|
-
$
|
|
13
|
+
$line-height-spacing: line-height-spacing(1, $settings);
|
|
14
|
+
$base-spacing: base-spacing(1, $settings);
|
|
14
15
|
$font-scale-length: length(map-get($settings, 'base-font-scale'));
|
|
15
16
|
$font-unit-ems-bool: if($base-font-unit == 'em', true, false);
|
|
16
17
|
$margin-bottom-bool: map-get($settings, 'margin-bottom');
|
|
@@ -18,24 +19,24 @@
|
|
|
18
19
|
@for $i from 1 through $font-scale-length {
|
|
19
20
|
$font-scale-value: get-font-scale-value($i, $settings);
|
|
20
21
|
$font-size: $base-font-size * $font-scale-value;
|
|
21
|
-
$line-height:
|
|
22
|
+
$line-height: 0;
|
|
22
23
|
$margin-bottom: 0;
|
|
23
24
|
|
|
24
25
|
// Line Height Calculation
|
|
25
|
-
@if $font-size <= $
|
|
26
|
-
$line-height: $
|
|
26
|
+
@if $font-size <= $line-height-spacing {
|
|
27
|
+
$line-height: $line-height-spacing;
|
|
27
28
|
} @else {
|
|
28
29
|
$increment: 1.5;
|
|
29
30
|
|
|
30
31
|
// Use half increments, while technically breaking the baseline, they are more aesthetically pleasing and still mathematically sound
|
|
31
|
-
@while
|
|
32
|
+
@while line-height-spacing($increment, $settings) <= $font-size {
|
|
32
33
|
$increment: $increment + .5;
|
|
33
34
|
}
|
|
34
35
|
|
|
35
36
|
@if $font-unit-ems-bool {
|
|
36
|
-
$line-height:
|
|
37
|
+
$line-height: line-height-spacing($increment, $settings) / $font-size;
|
|
37
38
|
} @else {
|
|
38
|
-
$line-height:
|
|
39
|
+
$line-height: line-height-spacing($increment, $settings);
|
|
39
40
|
}
|
|
40
41
|
}
|
|
41
42
|
|
|
@@ -89,7 +90,7 @@
|
|
|
89
90
|
$base-unit-multiplier: base-unit-multiplier($base-font-unit);
|
|
90
91
|
$base-font-size: base-font-size($settings);
|
|
91
92
|
$base-line-height: base-line-height($settings);
|
|
92
|
-
$base-spacing: base-spacing();
|
|
93
|
+
$base-spacing: base-spacing(1, $settings);
|
|
93
94
|
$margin-bottom: 0;
|
|
94
95
|
$margin-bottom-bool: map-get($settings, 'margin-bottom');
|
|
95
96
|
$font-unit-ems-bool: if($base-font-unit == 'em', true, false);;
|
|
@@ -10,7 +10,9 @@ $shevy-defaults: (
|
|
|
10
10
|
base-font-size: 1em,
|
|
11
11
|
base-line-height: 1.5,
|
|
12
12
|
base-font-scale: (3, 2.5, 2, 1.5, 1.25, 1),
|
|
13
|
-
margin-bottom: true
|
|
13
|
+
margin-bottom: true,
|
|
14
|
+
proximity: false,
|
|
15
|
+
proximity-factor: .85
|
|
14
16
|
);
|
|
15
17
|
|
|
16
18
|
// Empty $shevy set as default in case one is not supplied by user
|
data/demo/css/style.css
CHANGED
|
@@ -57,31 +57,36 @@ h3 {
|
|
|
57
57
|
|
|
58
58
|
h4 {
|
|
59
59
|
font-size: 1.5em;
|
|
60
|
-
line-height: 1;
|
|
60
|
+
line-height: 1.5em;
|
|
61
61
|
margin-bottom: 1em;
|
|
62
62
|
}
|
|
63
63
|
|
|
64
64
|
h5 {
|
|
65
65
|
font-size: 1.25em;
|
|
66
|
-
line-height: 1.
|
|
66
|
+
line-height: 1.5em;
|
|
67
67
|
margin-bottom: 1.2em;
|
|
68
68
|
}
|
|
69
69
|
|
|
70
70
|
h6 {
|
|
71
71
|
font-size: 1em;
|
|
72
|
-
line-height: 1.
|
|
72
|
+
line-height: 1.5em;
|
|
73
73
|
margin-bottom: 1.5em;
|
|
74
74
|
}
|
|
75
75
|
|
|
76
|
-
|
|
76
|
+
body {
|
|
77
77
|
font-size: 1em;
|
|
78
|
-
line-height: 1.
|
|
79
|
-
margin-bottom: 1.5em;
|
|
78
|
+
line-height: 1.5;
|
|
80
79
|
}
|
|
81
80
|
|
|
82
|
-
|
|
83
|
-
|
|
81
|
+
p,
|
|
82
|
+
ol,
|
|
83
|
+
ul,
|
|
84
|
+
pre {
|
|
85
|
+
font-size: 1em;
|
|
86
|
+
line-height: 1.5;
|
|
87
|
+
margin-bottom: 1.5em;
|
|
84
88
|
}
|
|
89
|
+
|
|
85
90
|
.shevy h1 {
|
|
86
91
|
font-size: 3em;
|
|
87
92
|
line-height: 1.25;
|
|
@@ -99,287 +104,314 @@ p {
|
|
|
99
104
|
}
|
|
100
105
|
.shevy h4 {
|
|
101
106
|
font-size: 1.5em;
|
|
102
|
-
line-height: 1;
|
|
107
|
+
line-height: 1.5em;
|
|
103
108
|
margin-bottom: 1em;
|
|
104
109
|
}
|
|
105
110
|
.shevy h5 {
|
|
106
111
|
font-size: 1.25em;
|
|
107
|
-
line-height: 1.
|
|
112
|
+
line-height: 1.5em;
|
|
108
113
|
margin-bottom: 1.2em;
|
|
109
114
|
}
|
|
110
115
|
.shevy h6 {
|
|
111
116
|
font-size: 1em;
|
|
112
|
-
line-height: 1.
|
|
117
|
+
line-height: 1.5em;
|
|
113
118
|
margin-bottom: 1.5em;
|
|
114
119
|
}
|
|
115
|
-
.shevy
|
|
120
|
+
.shevy body {
|
|
116
121
|
font-size: 1em;
|
|
117
|
-
line-height: 1.
|
|
122
|
+
line-height: 1.5;
|
|
123
|
+
}
|
|
124
|
+
.shevy p,
|
|
125
|
+
.shevy ol,
|
|
126
|
+
.shevy ul,
|
|
127
|
+
.shevy pre {
|
|
128
|
+
font-size: 1em;
|
|
129
|
+
line-height: 1.5;
|
|
118
130
|
margin-bottom: 1.5em;
|
|
119
131
|
}
|
|
120
132
|
|
|
121
|
-
.large {
|
|
122
|
-
background-image: url(http://basehold.it/i/30/);
|
|
123
|
-
}
|
|
124
133
|
.large h1 {
|
|
125
134
|
font-size: 90px;
|
|
126
135
|
line-height: 105px;
|
|
127
|
-
margin-bottom:
|
|
136
|
+
margin-bottom: 21px;
|
|
128
137
|
}
|
|
129
138
|
.large h2 {
|
|
130
139
|
font-size: 75px;
|
|
131
140
|
line-height: 90px;
|
|
132
|
-
margin-bottom:
|
|
141
|
+
margin-bottom: 21px;
|
|
133
142
|
}
|
|
134
143
|
.large h3 {
|
|
135
144
|
font-size: 60px;
|
|
136
145
|
line-height: 75px;
|
|
137
|
-
margin-bottom:
|
|
146
|
+
margin-bottom: 21px;
|
|
138
147
|
}
|
|
139
148
|
.large h4 {
|
|
140
149
|
font-size: 45px;
|
|
141
150
|
line-height: 60px;
|
|
142
|
-
margin-bottom:
|
|
151
|
+
margin-bottom: 21px;
|
|
143
152
|
}
|
|
144
153
|
.large h5 {
|
|
145
154
|
font-size: 30px;
|
|
146
155
|
line-height: 30px;
|
|
147
|
-
margin-bottom:
|
|
156
|
+
margin-bottom: 21px;
|
|
148
157
|
}
|
|
149
158
|
.large h6 {
|
|
150
159
|
font-size: 15px;
|
|
151
160
|
line-height: 30px;
|
|
152
|
-
margin-bottom:
|
|
161
|
+
margin-bottom: 21px;
|
|
153
162
|
}
|
|
154
|
-
.large
|
|
163
|
+
.large body {
|
|
155
164
|
font-size: 15px;
|
|
156
|
-
line-height:
|
|
157
|
-
|
|
165
|
+
line-height: 2;
|
|
166
|
+
}
|
|
167
|
+
.large p,
|
|
168
|
+
.large ol,
|
|
169
|
+
.large ul,
|
|
170
|
+
.large pre {
|
|
171
|
+
font-size: 15px;
|
|
172
|
+
line-height: 2;
|
|
173
|
+
margin-bottom: 21px;
|
|
158
174
|
}
|
|
159
175
|
.large h6 {
|
|
160
|
-
|
|
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;
|
|
176
|
+
margin-bottom: 31.5px;
|
|
165
177
|
}
|
|
166
178
|
@media only screen and (min-width: 478px) {
|
|
167
179
|
.large h6 {
|
|
168
|
-
margin-bottom:
|
|
180
|
+
margin-bottom: 21px;
|
|
169
181
|
}
|
|
170
182
|
}
|
|
171
183
|
|
|
172
|
-
.responsive {
|
|
173
|
-
background-image: url(http://basehold.it/i/21/);
|
|
174
|
-
}
|
|
175
184
|
.responsive h1 {
|
|
176
185
|
font-size: 28px;
|
|
177
186
|
line-height: 31.5px;
|
|
178
|
-
margin-bottom:
|
|
187
|
+
margin-bottom: 17.85px;
|
|
179
188
|
}
|
|
180
189
|
.responsive h2 {
|
|
181
190
|
font-size: 24.5px;
|
|
182
191
|
line-height: 31.5px;
|
|
183
|
-
margin-bottom:
|
|
192
|
+
margin-bottom: 17.85px;
|
|
184
193
|
}
|
|
185
194
|
.responsive h3 {
|
|
186
195
|
font-size: 21px;
|
|
187
196
|
line-height: 21px;
|
|
188
|
-
margin-bottom:
|
|
197
|
+
margin-bottom: 17.85px;
|
|
189
198
|
}
|
|
190
199
|
.responsive h4 {
|
|
191
200
|
font-size: 17.5px;
|
|
192
201
|
line-height: 21px;
|
|
193
|
-
margin-bottom:
|
|
202
|
+
margin-bottom: 17.85px;
|
|
194
203
|
}
|
|
195
204
|
.responsive h5 {
|
|
196
205
|
font-size: 14px;
|
|
197
206
|
line-height: 21px;
|
|
198
|
-
margin-bottom:
|
|
207
|
+
margin-bottom: 17.85px;
|
|
199
208
|
}
|
|
200
209
|
.responsive h6 {
|
|
201
210
|
font-size: 10.5px;
|
|
202
211
|
line-height: 21px;
|
|
203
|
-
margin-bottom:
|
|
212
|
+
margin-bottom: 17.85px;
|
|
204
213
|
}
|
|
205
|
-
.responsive
|
|
206
|
-
font-size:
|
|
207
|
-
line-height:
|
|
208
|
-
|
|
214
|
+
.responsive body {
|
|
215
|
+
font-size: 14px;
|
|
216
|
+
line-height: 1.5;
|
|
217
|
+
}
|
|
218
|
+
.responsive p,
|
|
219
|
+
.responsive ol,
|
|
220
|
+
.responsive ul,
|
|
221
|
+
.responsive pre {
|
|
222
|
+
font-size: 14px;
|
|
223
|
+
line-height: 1.5;
|
|
224
|
+
margin-bottom: 17.85px;
|
|
209
225
|
}
|
|
210
226
|
@media only screen and (min-width: 520px) {
|
|
211
|
-
.responsive {
|
|
212
|
-
background-image: url(http://basehold.it/i/24/);
|
|
213
|
-
}
|
|
214
227
|
.responsive h1 {
|
|
215
228
|
font-size: 32px;
|
|
216
229
|
line-height: 36px;
|
|
217
|
-
margin-bottom:
|
|
230
|
+
margin-bottom: 20.4px;
|
|
218
231
|
}
|
|
219
232
|
.responsive h2 {
|
|
220
233
|
font-size: 28px;
|
|
221
234
|
line-height: 36px;
|
|
222
|
-
margin-bottom:
|
|
235
|
+
margin-bottom: 20.4px;
|
|
223
236
|
}
|
|
224
237
|
.responsive h3 {
|
|
225
238
|
font-size: 24px;
|
|
226
239
|
line-height: 24px;
|
|
227
|
-
margin-bottom:
|
|
240
|
+
margin-bottom: 20.4px;
|
|
228
241
|
}
|
|
229
242
|
.responsive h4 {
|
|
230
243
|
font-size: 20px;
|
|
231
244
|
line-height: 24px;
|
|
232
|
-
margin-bottom:
|
|
245
|
+
margin-bottom: 20.4px;
|
|
233
246
|
}
|
|
234
247
|
.responsive h5 {
|
|
235
248
|
font-size: 16px;
|
|
236
249
|
line-height: 24px;
|
|
237
|
-
margin-bottom:
|
|
250
|
+
margin-bottom: 20.4px;
|
|
238
251
|
}
|
|
239
252
|
.responsive h6 {
|
|
240
253
|
font-size: 12px;
|
|
241
254
|
line-height: 24px;
|
|
242
|
-
margin-bottom:
|
|
255
|
+
margin-bottom: 20.4px;
|
|
243
256
|
}
|
|
244
|
-
.responsive
|
|
245
|
-
font-size:
|
|
246
|
-
line-height:
|
|
247
|
-
|
|
257
|
+
.responsive body {
|
|
258
|
+
font-size: 16px;
|
|
259
|
+
line-height: 1.5;
|
|
260
|
+
}
|
|
261
|
+
.responsive p,
|
|
262
|
+
.responsive ol,
|
|
263
|
+
.responsive ul,
|
|
264
|
+
.responsive pre {
|
|
265
|
+
font-size: 16px;
|
|
266
|
+
line-height: 1.5;
|
|
267
|
+
margin-bottom: 20.4px;
|
|
248
268
|
}
|
|
249
269
|
}
|
|
250
270
|
@media only screen and (min-width: 769px) {
|
|
251
|
-
.responsive {
|
|
252
|
-
background-image: url(http://basehold.it/i/54/);
|
|
253
|
-
}
|
|
254
271
|
.responsive h1 {
|
|
255
272
|
font-size: 3.75em;
|
|
256
|
-
line-height: 1.
|
|
257
|
-
margin-bottom: 0.
|
|
273
|
+
line-height: 1.2;
|
|
274
|
+
margin-bottom: 0.51em;
|
|
258
275
|
}
|
|
259
276
|
.responsive h2 {
|
|
260
277
|
font-size: 3.3em;
|
|
261
278
|
line-height: 1.02273;
|
|
262
|
-
margin-bottom:
|
|
279
|
+
margin-bottom: 0.57955em;
|
|
263
280
|
}
|
|
264
281
|
.responsive h3 {
|
|
265
282
|
font-size: 3em;
|
|
266
283
|
line-height: 1.125;
|
|
267
|
-
margin-bottom:
|
|
284
|
+
margin-bottom: 0.6375em;
|
|
268
285
|
}
|
|
269
286
|
.responsive h4 {
|
|
270
287
|
font-size: 2.625em;
|
|
271
288
|
line-height: 1.28571;
|
|
272
|
-
margin-bottom:
|
|
289
|
+
margin-bottom: 0.72857em;
|
|
273
290
|
}
|
|
274
291
|
.responsive h5 {
|
|
275
292
|
font-size: 1.875em;
|
|
276
|
-
line-height:
|
|
277
|
-
margin-bottom: 1.
|
|
293
|
+
line-height: 2.25em;
|
|
294
|
+
margin-bottom: 1.02em;
|
|
278
295
|
}
|
|
279
296
|
.responsive h6 {
|
|
280
297
|
font-size: 1.5em;
|
|
281
|
-
line-height: 2.
|
|
282
|
-
margin-bottom:
|
|
298
|
+
line-height: 2.25em;
|
|
299
|
+
margin-bottom: 1.275em;
|
|
283
300
|
}
|
|
284
|
-
.responsive
|
|
301
|
+
.responsive body {
|
|
285
302
|
font-size: 1.5em;
|
|
286
|
-
line-height:
|
|
287
|
-
|
|
303
|
+
line-height: 1.5;
|
|
304
|
+
}
|
|
305
|
+
.responsive p,
|
|
306
|
+
.responsive ol,
|
|
307
|
+
.responsive ul,
|
|
308
|
+
.responsive pre {
|
|
309
|
+
font-size: 1.5em;
|
|
310
|
+
line-height: 1.5;
|
|
311
|
+
margin-bottom: 1.275em;
|
|
288
312
|
}
|
|
289
313
|
}
|
|
290
314
|
@media only screen and (min-width: 1025px) {
|
|
291
|
-
.responsive {
|
|
292
|
-
background-image: url(http://basehold.it/i/54/);
|
|
293
|
-
}
|
|
294
315
|
.responsive h1 {
|
|
295
316
|
font-size: 90px;
|
|
296
317
|
line-height: 108px;
|
|
297
|
-
margin-bottom:
|
|
318
|
+
margin-bottom: 45.9px;
|
|
298
319
|
}
|
|
299
320
|
.responsive h2 {
|
|
300
321
|
font-size: 79.2px;
|
|
301
322
|
line-height: 81px;
|
|
302
|
-
margin-bottom:
|
|
323
|
+
margin-bottom: 45.9px;
|
|
303
324
|
}
|
|
304
325
|
.responsive h3 {
|
|
305
326
|
font-size: 72px;
|
|
306
327
|
line-height: 81px;
|
|
307
|
-
margin-bottom:
|
|
328
|
+
margin-bottom: 45.9px;
|
|
308
329
|
}
|
|
309
330
|
.responsive h4 {
|
|
310
331
|
font-size: 63px;
|
|
311
332
|
line-height: 81px;
|
|
312
|
-
margin-bottom:
|
|
333
|
+
margin-bottom: 45.9px;
|
|
313
334
|
}
|
|
314
335
|
.responsive h5 {
|
|
315
336
|
font-size: 45px;
|
|
316
337
|
line-height: 54px;
|
|
317
|
-
margin-bottom:
|
|
338
|
+
margin-bottom: 45.9px;
|
|
318
339
|
}
|
|
319
340
|
.responsive h6 {
|
|
320
341
|
font-size: 36px;
|
|
321
342
|
line-height: 54px;
|
|
322
|
-
margin-bottom:
|
|
343
|
+
margin-bottom: 45.9px;
|
|
323
344
|
}
|
|
324
|
-
.responsive
|
|
345
|
+
.responsive body {
|
|
325
346
|
font-size: 36px;
|
|
326
|
-
line-height:
|
|
327
|
-
|
|
347
|
+
line-height: 1.5;
|
|
348
|
+
}
|
|
349
|
+
.responsive p,
|
|
350
|
+
.responsive ol,
|
|
351
|
+
.responsive ul,
|
|
352
|
+
.responsive pre {
|
|
353
|
+
font-size: 36px;
|
|
354
|
+
line-height: 1.5;
|
|
355
|
+
margin-bottom: 45.9px;
|
|
328
356
|
}
|
|
329
357
|
}
|
|
330
358
|
@media only screen and (min-width: 1350px) {
|
|
331
|
-
.responsive {
|
|
332
|
-
background-image: url(http://basehold.it/i/72/);
|
|
333
|
-
}
|
|
334
359
|
.responsive h1 {
|
|
335
360
|
font-size: 144px;
|
|
336
361
|
line-height: 180px;
|
|
337
|
-
margin-bottom:
|
|
362
|
+
margin-bottom: 61.2px;
|
|
338
363
|
}
|
|
339
364
|
.responsive h2 {
|
|
340
365
|
font-size: 120px;
|
|
341
366
|
line-height: 144px;
|
|
342
|
-
margin-bottom:
|
|
367
|
+
margin-bottom: 61.2px;
|
|
343
368
|
}
|
|
344
369
|
.responsive h3 {
|
|
345
370
|
font-size: 96px;
|
|
346
371
|
line-height: 108px;
|
|
347
|
-
margin-bottom:
|
|
372
|
+
margin-bottom: 61.2px;
|
|
348
373
|
}
|
|
349
374
|
.responsive h4 {
|
|
350
375
|
font-size: 84px;
|
|
351
376
|
line-height: 108px;
|
|
352
|
-
margin-bottom:
|
|
377
|
+
margin-bottom: 61.2px;
|
|
353
378
|
}
|
|
354
379
|
.responsive h5 {
|
|
355
380
|
font-size: 60px;
|
|
356
381
|
line-height: 72px;
|
|
357
|
-
margin-bottom:
|
|
382
|
+
margin-bottom: 61.2px;
|
|
358
383
|
}
|
|
359
384
|
.responsive h6 {
|
|
360
385
|
font-size: 48px;
|
|
361
386
|
line-height: 72px;
|
|
362
|
-
margin-bottom:
|
|
387
|
+
margin-bottom: 61.2px;
|
|
363
388
|
}
|
|
364
|
-
.responsive
|
|
389
|
+
.responsive body {
|
|
365
390
|
font-size: 48px;
|
|
366
|
-
line-height:
|
|
367
|
-
|
|
391
|
+
line-height: 1.5;
|
|
392
|
+
}
|
|
393
|
+
.responsive p,
|
|
394
|
+
.responsive ol,
|
|
395
|
+
.responsive ul,
|
|
396
|
+
.responsive pre {
|
|
397
|
+
font-size: 48px;
|
|
398
|
+
line-height: 1.5;
|
|
399
|
+
margin-bottom: 61.2px;
|
|
368
400
|
}
|
|
369
401
|
}
|
|
370
402
|
@media only screen and (min-width: 769px) {
|
|
371
403
|
.responsive p:first-child {
|
|
372
|
-
margin-bottom:
|
|
404
|
+
margin-bottom: 0.95625em;
|
|
373
405
|
}
|
|
374
406
|
}
|
|
375
407
|
@media only screen and (min-width: 1025px) {
|
|
376
408
|
.responsive p:first-child {
|
|
377
|
-
margin-bottom:
|
|
409
|
+
margin-bottom: 22.95px;
|
|
378
410
|
}
|
|
379
411
|
}
|
|
380
412
|
@media only screen and (min-width: 1350px) {
|
|
381
413
|
.responsive p:first-child {
|
|
382
|
-
margin-bottom:
|
|
414
|
+
margin-bottom: 30.6px;
|
|
383
415
|
}
|
|
384
416
|
}
|
|
385
417
|
|
|
@@ -389,26 +421,26 @@ p {
|
|
|
389
421
|
margin-bottom: 1.5em;
|
|
390
422
|
}
|
|
391
423
|
.responsive .box {
|
|
392
|
-
padding:
|
|
424
|
+
padding: 35.7px;
|
|
393
425
|
}
|
|
394
426
|
@media only screen and (min-width: 520px) {
|
|
395
427
|
.responsive .box {
|
|
396
|
-
padding:
|
|
428
|
+
padding: 40.8px;
|
|
397
429
|
}
|
|
398
430
|
}
|
|
399
431
|
@media only screen and (min-width: 769px) {
|
|
400
432
|
.responsive .box {
|
|
401
|
-
padding:
|
|
433
|
+
padding: 3.825em;
|
|
402
434
|
}
|
|
403
435
|
}
|
|
404
436
|
@media only screen and (min-width: 1025px) {
|
|
405
437
|
.responsive .box {
|
|
406
|
-
padding:
|
|
438
|
+
padding: 91.8px;
|
|
407
439
|
}
|
|
408
440
|
}
|
|
409
441
|
@media only screen and (min-width: 1350px) {
|
|
410
442
|
.responsive .box {
|
|
411
|
-
padding:
|
|
443
|
+
padding: 122.4px;
|
|
412
444
|
}
|
|
413
445
|
}
|
|
414
446
|
|