shevy 2.0.0 → 2.1.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/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
|
|