sane-scale 0.5.1 → 0.6
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 +52 -37
- data/lib/sane-scale.rb +1 -1
- data/stylesheets/sane-scale/_build-font-scale.scss +26 -27
- data/stylesheets/sane-scale/_build-scale.scss +22 -22
- data/stylesheets/sane-scale/_build-typography.scss +30 -24
- data/stylesheets/sane-scale/_set-font-size.scss +34 -7
- data/templates/project/sass/_typography-config.scss +31 -31
- data/templates/project/stylesheets/main.css +6 -5
- metadata +1 -1
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA1:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 967cb2dd85d7c6ad70bc08983405aa7593acbea1
|
|
4
|
+
data.tar.gz: ee44b4ea907f18b8e16c9f6756426b0d23b7aef9
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: ac337138bc6f33566991fa2f942bb893b82579f4a6c86a2f2a010f3867ab1f744bddf65d4aa9ccd17ced090d50592df44637249e3e87e02f4dd149d36e3f0c86
|
|
7
|
+
data.tar.gz: d7480ffec32e0666831e93831b1745ae4a144f4d7644829ce4f87039d89508dd26ae28c05212c8514b9426a3706bbb025b9867359830d7f45ffa82026aad06a2
|
data/README.md
CHANGED
|
@@ -62,53 +62,46 @@ Similarly, you can also apply an adjustment to line-height on a font-by-font bas
|
|
|
62
62
|
|
|
63
63
|
|
|
64
64
|
|
|
65
|
-
###
|
|
65
|
+
### Build font scales
|
|
66
66
|
|
|
67
|
-
|
|
67
|
+
From a few constraints, `ss-build-typography` builds a modular scale for each specified media query.
|
|
68
68
|
|
|
69
69
|
```scss
|
|
70
|
-
$
|
|
71
|
-
|
|
72
|
-
//
|
|
73
|
-
"
|
|
74
|
-
|
|
75
|
-
"
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
70
|
+
$typography: ss-build-typography((
|
|
71
|
+
|
|
72
|
+
// Define your font scales and their constraints.
|
|
73
|
+
"scales": (
|
|
74
|
+
// Phone sizes.
|
|
75
|
+
"default": (
|
|
76
|
+
"base-font-size": 16px,
|
|
77
|
+
"base-line-height": 1.5,
|
|
78
|
+
"max-font-size": 28px,
|
|
79
|
+
"max-line-height": 1.35
|
|
80
|
+
),
|
|
81
|
+
|
|
82
|
+
// Tablet sizes and larger.
|
|
83
|
+
"tablet": (
|
|
84
|
+
"media-query": "screen and (min-width: 768px)",
|
|
85
|
+
"base-font-size": 18px,
|
|
86
|
+
"base-line-height": 1.6,
|
|
87
|
+
"max-font-size": 42px,
|
|
88
|
+
"max-line-height": 1.25
|
|
89
|
+
)
|
|
79
90
|
),
|
|
80
91
|
|
|
81
|
-
//
|
|
82
|
-
"
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
"base-line-height": 1.6,
|
|
86
|
-
"max-font-size": 42px,
|
|
87
|
-
"max-line-height": 1.25,
|
|
88
|
-
"round-under": 0px
|
|
89
|
-
)
|
|
90
|
-
);
|
|
92
|
+
// Other than the base, how many sizes do you need?
|
|
93
|
+
"numb-smaller-sizes": 1,
|
|
94
|
+
"numb-larger-sizes": 4
|
|
95
|
+
));
|
|
91
96
|
```
|
|
92
|
-
For each scale, you'll need to specify
|
|
97
|
+
For each scale, you'll need to specify font-size and line-height for both a base size and a max size. Additional font-sizes and line-heights will be interpolated from these constraints.
|
|
93
98
|
|
|
94
|
-
A `media-query` property should also be set for each, exluding the default scale. Feel free to name the other scales whatever you like.
|
|
99
|
+
A `media-query` property should also be set for each, exluding the "default" scale. Feel free to name the other scales whatever you like.
|
|
95
100
|
|
|
96
|
-
If you need a bit of typographic guidance, [Responsive Typography: The Basics](https://ia.net/know-how/responsive-typography-the-basics "Responsive Typography: The Basics") by Information Architects is an excellent read.
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
### Build your font scales
|
|
101
|
-
|
|
102
|
-
All that's left to do is to define the sizes you need and build the scale itself:
|
|
103
|
-
|
|
104
|
-
```scss
|
|
105
|
-
$numb-smaller-sizes: 1;
|
|
106
|
-
$numb-larger-sizes: 4;
|
|
107
|
-
|
|
108
|
-
$typography: ss-build-typography($font-scales, $numb-smaller-sizes, $numb-larger-sizes);
|
|
109
|
-
```
|
|
110
101
|
That's it! Note that `$typography` is a key variable. This map will be used by the following mixins to lookup and apply sizes.
|
|
111
102
|
|
|
103
|
+
If you need a bit of typographic guidance, [Responsive Typography: The Basics](https://ia.net/know-how/responsive-typography-the-basics "Responsive Typography: The Basics") by Information Architects is an excellent read.
|
|
104
|
+
|
|
112
105
|
|
|
113
106
|
|
|
114
107
|
### Apply responsize sizing
|
|
@@ -145,3 +138,25 @@ You might occassionally want finer-grained control of your type styles. For thes
|
|
|
145
138
|
```
|
|
146
139
|
|
|
147
140
|
Here we just styled our h4 to have the size 1 for only the tablet breakpoint. With `ss-set-responsive-font-size()` the corresponding sizes for each other breakpoint would have also been applied.
|
|
141
|
+
|
|
142
|
+
|
|
143
|
+
### Working with uppercase
|
|
144
|
+
|
|
145
|
+
If you'd like to set something in all caps and have it align to your font scales, include an `uppercase-adjustment` when defining fonts:
|
|
146
|
+
|
|
147
|
+
```scss
|
|
148
|
+
$font-verdana: (
|
|
149
|
+
"family": unquote("Verdana, sans-serif"),
|
|
150
|
+
"font-size-adjustment": 0.89,
|
|
151
|
+
"line-height-adjustment": 0.94,
|
|
152
|
+
"uppercase-adjustment": 0.85
|
|
153
|
+
);
|
|
154
|
+
``
|
|
155
|
+
|
|
156
|
+
Apply the uppercase style like so:
|
|
157
|
+
```scss
|
|
158
|
+
.h4 {
|
|
159
|
+
@include ss-set-responsive-font-size($font-verdana, 1, $uppercase: true);
|
|
160
|
+
}
|
|
161
|
+
```
|
|
162
|
+
|
data/lib/sane-scale.rb
CHANGED
|
@@ -17,7 +17,7 @@ Compass::Frameworks.register('sane-scale', :path => extension_path)
|
|
|
17
17
|
# version contains alphas, it will be created as a
|
|
18
18
|
# prerelease version. Date is in the form of YYYY-MM-DD
|
|
19
19
|
module SaneScale
|
|
20
|
-
VERSION = "0.
|
|
20
|
+
VERSION = "0.6"
|
|
21
21
|
DATE = "2016-07-17"
|
|
22
22
|
end
|
|
23
23
|
|
|
@@ -2,44 +2,43 @@
|
|
|
2
2
|
// Create a modular font scale.
|
|
3
3
|
// Returns a nested list of font-size and line-height values.
|
|
4
4
|
|
|
5
|
-
@function ss-build-font-scale(
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
5
|
+
@function ss-build-font-scale($opts: ()) {
|
|
6
|
+
|
|
7
|
+
// Extend default opts
|
|
8
|
+
$opts: map-merge((
|
|
9
|
+
"base-font-size": 16px,
|
|
9
10
|
"base-line-height": 1.5,
|
|
10
11
|
"max-font-size": 28px,
|
|
11
12
|
"max-line-height": 1.35,
|
|
12
|
-
"
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
$
|
|
16
|
-
|
|
13
|
+
"round-under": null,
|
|
14
|
+
"numb-smaller-sizes": 1,
|
|
15
|
+
"numb-larger-sizes": 4
|
|
16
|
+
), $opts);
|
|
17
|
+
|
|
17
18
|
|
|
18
19
|
// Create font-size and line-height scales
|
|
19
|
-
$font-size-scale: ss-build-scale(
|
|
20
|
-
map-get($
|
|
21
|
-
map-get($
|
|
22
|
-
$numb-smaller-sizes,
|
|
23
|
-
$numb-larger-sizes
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
map-get($
|
|
29
|
-
map-get($
|
|
30
|
-
$numb-
|
|
31
|
-
|
|
32
|
-
map-get($params, "rounding")
|
|
33
|
-
);
|
|
20
|
+
$font-size-scale: ss-build-scale((
|
|
21
|
+
"base-value": map-get($opts, "base-font-size"),
|
|
22
|
+
"max-value": map-get($opts, "max-font-size"),
|
|
23
|
+
"numb-smaller-values": map-get($opts, "numb-smaller-sizes"),
|
|
24
|
+
"numb-larger-values": map-get($opts, "numb-larger-sizes")
|
|
25
|
+
));
|
|
26
|
+
|
|
27
|
+
$line-height-scale: ss-build-scale((
|
|
28
|
+
"base-value": map-get($opts, "base-line-height"),
|
|
29
|
+
"max-value": map-get($opts, "max-line-height"),
|
|
30
|
+
"numb-smaller-values": map-get($opts, "numb-smaller-sizes"),
|
|
31
|
+
"numb-larger-values": map-get($opts, "numb-larger-sizes")
|
|
32
|
+
));
|
|
34
33
|
|
|
35
34
|
$sizes: ();
|
|
36
35
|
|
|
37
36
|
// Pair each size with the correponding font-size
|
|
38
37
|
// and line-height, then add the size to the scale.
|
|
39
|
-
@for $i from
|
|
38
|
+
@for $i from -(map-get($opts, "numb-smaller-sizes")) to map-get($opts, "numb-larger-sizes") + 1 {
|
|
40
39
|
|
|
41
40
|
// Calculate array position in order to lookup sizes in lists.
|
|
42
|
-
$arr-position: $i + $numb-smaller-sizes + 1;
|
|
41
|
+
$arr-position: $i + map-get($opts, "numb-smaller-sizes") + 1;
|
|
43
42
|
|
|
44
43
|
// Key for size
|
|
45
44
|
$name-of-size: $i;
|
|
@@ -54,6 +53,6 @@
|
|
|
54
53
|
$sizes: map-merge($sizes, ($name-of-size: $values));
|
|
55
54
|
}
|
|
56
55
|
|
|
57
|
-
$font-scale: map-merge($
|
|
56
|
+
$font-scale: map-merge($opts, ("sizes": $sizes));
|
|
58
57
|
@return $font-scale;
|
|
59
58
|
}
|
|
@@ -1,41 +1,41 @@
|
|
|
1
1
|
|
|
2
2
|
// Create a modular scale. Returns a list of values.
|
|
3
3
|
|
|
4
|
-
@function ss-build-scale(
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
$
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
4
|
+
@function ss-build-scale($opts: ()) {
|
|
5
|
+
|
|
6
|
+
// Extend default opts
|
|
7
|
+
$opts: map-merge((
|
|
8
|
+
"base-value": 16px,
|
|
9
|
+
"max-value": 28px,
|
|
10
|
+
"numb-smaller-values": 1,
|
|
11
|
+
"numb-larger-values": 4
|
|
12
|
+
), $opts);
|
|
13
|
+
|
|
14
|
+
$base-value: map-get($opts, "base-value");
|
|
15
|
+
$max-value: map-get($opts, "max-value");
|
|
16
|
+
$numb-larger-values: map-get($opts, "numb-larger-values");
|
|
17
|
+
$numb-smaller-values: map-get($opts, "numb-smaller-values");
|
|
18
|
+
|
|
19
|
+
// Build the scale.
|
|
12
20
|
$scale: ();
|
|
13
21
|
|
|
14
22
|
// The ratio we'll use to calculate the missing sizes.
|
|
15
|
-
$scaling-ratio: nth-root($max / $base, $larger-values);
|
|
23
|
+
$scaling-ratio: nth-root($max-value / $base-value, $numb-larger-values);
|
|
16
24
|
|
|
17
25
|
// Calculate and add smaller values to the scale.
|
|
18
|
-
@for $i from -$smaller-values through -1 {
|
|
19
|
-
$size: $base * power($scaling-ratio, $i);
|
|
26
|
+
@for $i from -$numb-smaller-values through -1 {
|
|
27
|
+
$size: $base-value * power($scaling-ratio, $i);
|
|
20
28
|
$scale: append($scale, $size);
|
|
21
29
|
}
|
|
22
30
|
|
|
23
31
|
// Add the base value to the scale.
|
|
24
|
-
$scale: append($scale, $base);
|
|
32
|
+
$scale: append($scale, $base-value);
|
|
25
33
|
|
|
26
34
|
// Calculate and add larger values to the scale.
|
|
27
|
-
@for $i from 1 through ($larger-values) {
|
|
28
|
-
$size: $base * power($scaling-ratio, $i);
|
|
35
|
+
@for $i from 1 through ($numb-larger-values) {
|
|
36
|
+
$size: $base-value * power($scaling-ratio, $i);
|
|
29
37
|
$scale: append($scale, $size);
|
|
30
38
|
}
|
|
31
39
|
|
|
32
|
-
// Optionally round the scale.
|
|
33
|
-
@if $rounding == true {
|
|
34
|
-
@each $size-name, $size-value in $scale {
|
|
35
|
-
$new-value: round($size-value);
|
|
36
|
-
$scale: map-merge($scale, ($size-name: $new-value));
|
|
37
|
-
}
|
|
38
|
-
}
|
|
39
|
-
|
|
40
40
|
@return $scale;
|
|
41
41
|
}
|
|
@@ -2,37 +2,43 @@
|
|
|
2
2
|
// Augments a breakpoint map by building a "scale" property
|
|
3
3
|
// containing the specified sizes to each breakpoint.
|
|
4
4
|
|
|
5
|
-
@function ss-build-typography(
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
"
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
5
|
+
@function ss-build-typography($opts: ()) {
|
|
6
|
+
|
|
7
|
+
// Extend default opts
|
|
8
|
+
$opts: map-merge((
|
|
9
|
+
"scales": (
|
|
10
|
+
"default": (
|
|
11
|
+
"base-font-size": 16px,
|
|
12
|
+
"base-line-height": 1.5,
|
|
13
|
+
"max-font-size": 28px,
|
|
14
|
+
"max-line-height": 1.35
|
|
15
|
+
),
|
|
16
|
+
"tablet": (
|
|
17
|
+
"media-query": "screen and (min-width: 768px)",
|
|
18
|
+
"base-font-size": 18px,
|
|
19
|
+
"base-line-height": 1.6,
|
|
20
|
+
"max-font-size": 42px,
|
|
21
|
+
"max-line-height": 1.25
|
|
22
|
+
)
|
|
14
23
|
),
|
|
15
|
-
|
|
16
|
-
"
|
|
17
|
-
|
|
18
|
-
"base-font-size": 20px,
|
|
19
|
-
"base-line-height": 1.6,
|
|
20
|
-
"max-font-size": 42px,
|
|
21
|
-
"max-line-height": 1.25,
|
|
22
|
-
"rounding": false
|
|
23
|
-
)
|
|
24
|
-
),
|
|
25
|
-
$numb-smaller-sizes: 1,
|
|
26
|
-
$numb-larger-sizes: 4
|
|
27
|
-
) {
|
|
24
|
+
"numb-smaller-sizes": 1,
|
|
25
|
+
"numb-larger-sizes": 4
|
|
26
|
+
), $opts);
|
|
28
27
|
|
|
28
|
+
// The object we'll return.
|
|
29
29
|
$typography: ();
|
|
30
30
|
|
|
31
31
|
// Create a scale for each breakpoint.
|
|
32
|
-
@each $font-scale-name, $font-scale-
|
|
32
|
+
@each $font-scale-name, $font-scale-opts in map-get($opts, "scales") {
|
|
33
|
+
|
|
34
|
+
// Merge global opts with scale-specific opts
|
|
35
|
+
$font-scale-opts: map-merge($font-scale-opts, (
|
|
36
|
+
"numb-smaller-sizes": map-get($opts, "numb-smaller-sizes"),
|
|
37
|
+
"numb-larger-sizes": map-get($opts, "numb-larger-sizes")
|
|
38
|
+
));
|
|
33
39
|
|
|
34
40
|
// Create a font scale.
|
|
35
|
-
$font-scale: ss-build-font-scale($font-scale-
|
|
41
|
+
$font-scale: ss-build-font-scale($font-scale-opts);
|
|
36
42
|
$typography: map-merge($typography, ($font-scale-name: $font-scale));
|
|
37
43
|
}
|
|
38
44
|
|
|
@@ -3,14 +3,22 @@
|
|
|
3
3
|
******************************************************/
|
|
4
4
|
|
|
5
5
|
// Apply styles for a specific font, breakpoint, and size.
|
|
6
|
-
@mixin ss-apply-font-styles($font, $size, $scale-name) {
|
|
6
|
+
@mixin ss-apply-font-styles($font, $size, $scale-name, $uppercase: false) {
|
|
7
7
|
|
|
8
8
|
// Get font-size and apply adjustments.
|
|
9
9
|
$unadjusted-font-size: map-deep-get($typography, $scale-name, "sizes", $size, "font-size");
|
|
10
10
|
$font-size-adjustment: map-get($font, "font-size-adjustment") or 1.00;
|
|
11
|
+
$uppercase-adjustment: map-get($font, "uppercase-adjustment") or 1.00;
|
|
11
12
|
|
|
12
|
-
|
|
13
|
+
@if $uppercase {
|
|
14
|
+
$font-size-adjustment: $font-size-adjustment * $uppercase-adjustment;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
$font-size: $unadjusted-font-size * $font-size-adjustment;
|
|
13
18
|
|
|
19
|
+
// Round font-size.
|
|
20
|
+
$font-size-precision: map-deep-get($typography, $scale-name, "font-size-precision") or 0.001;
|
|
21
|
+
|
|
14
22
|
// Get line-height and apply adjustments.
|
|
15
23
|
$unadjusted-line-height: map-deep-get($typography, $scale-name, "sizes", $size, "line-height");
|
|
16
24
|
$line-height-adjustment: map-get($font, "line-height-adjustment") or 1.00;
|
|
@@ -21,32 +29,51 @@
|
|
|
21
29
|
$line-height-adjustment: $line-height-adjustment * (1 / $font-size-adjustment);
|
|
22
30
|
}
|
|
23
31
|
|
|
24
|
-
line-height: $unadjusted-line-height * $line-height-adjustment;
|
|
32
|
+
$line-height: $unadjusted-line-height * $line-height-adjustment;
|
|
33
|
+
|
|
34
|
+
// Round line-height.
|
|
35
|
+
$line-height-precision: map-deep-get($typography, $scale-name, "line-height-precision") or 0.001;
|
|
36
|
+
// $line-height: ss-round($line-height, $line-height-precision);
|
|
37
|
+
|
|
38
|
+
font-size: $font-size;
|
|
39
|
+
line-height: $line-height;
|
|
25
40
|
}
|
|
26
41
|
|
|
27
42
|
// Apply non-responsive styling. Only the size used for
|
|
28
43
|
// the specified media query will be applied.
|
|
29
|
-
@mixin ss-set-font-size($font, $size, $scale-name) {
|
|
44
|
+
@mixin ss-set-font-size($font, $size, $scale-name, $uppercase: false) {
|
|
45
|
+
|
|
30
46
|
font-family: map-get($font, "family");
|
|
47
|
+
|
|
48
|
+
@if $uppercase {
|
|
49
|
+
text-transform: uppercase;
|
|
50
|
+
}
|
|
51
|
+
|
|
31
52
|
@include ss-apply-font-styles($font, $size, $scale-name);
|
|
32
53
|
}
|
|
33
54
|
|
|
34
55
|
// Apply responsive styling. Corresponding sizes for
|
|
35
56
|
// each media query will be applied.
|
|
36
|
-
@mixin ss-set-responsive-font-size($font, $size) {
|
|
57
|
+
@mixin ss-set-responsive-font-size($font, $size: 0, $uppercase: false) {
|
|
58
|
+
|
|
37
59
|
font-family: map-get($font, "family");
|
|
60
|
+
|
|
61
|
+
@if $uppercase {
|
|
62
|
+
text-transform: uppercase;
|
|
63
|
+
}
|
|
64
|
+
|
|
38
65
|
@each $scale-name, $scale-value in $typography {
|
|
39
66
|
|
|
40
67
|
// For the default styles, don't include a media query.
|
|
41
68
|
@if $scale-name == "default" {
|
|
42
|
-
@include ss-apply-font-styles($font, $size, $scale-name);
|
|
69
|
+
@include ss-apply-font-styles($font, $size, $scale-name, $uppercase);
|
|
43
70
|
}
|
|
44
71
|
|
|
45
72
|
// For other breakpoints, set style with a media query.
|
|
46
73
|
@else {
|
|
47
74
|
$media-query: map-deep-get($typography, $scale-name, "media-query");
|
|
48
75
|
@media #{$media-query} {
|
|
49
|
-
@include ss-apply-font-styles($font, $size, $scale-name);
|
|
76
|
+
@include ss-apply-font-styles($font, $size, $scale-name, $uppercase);
|
|
50
77
|
}
|
|
51
78
|
}
|
|
52
79
|
}
|
|
@@ -9,7 +9,8 @@
|
|
|
9
9
|
$font-georgia: (
|
|
10
10
|
"family": unquote("Georgia, serif"),
|
|
11
11
|
"font-size-adjustment": 1.00,
|
|
12
|
-
"line-height-adjustment": 1.00
|
|
12
|
+
"line-height-adjustment": 1.00,
|
|
13
|
+
"uppercase-adjustment": 0.82
|
|
13
14
|
);
|
|
14
15
|
|
|
15
16
|
// Additional fonts
|
|
@@ -17,7 +18,8 @@ $font-georgia: (
|
|
|
17
18
|
$font-verdana: (
|
|
18
19
|
"family": unquote("Verdana, sans-serif"),
|
|
19
20
|
"font-size-adjustment": 0.89,
|
|
20
|
-
"line-height-adjustment": 0.94
|
|
21
|
+
"line-height-adjustment": 0.94,
|
|
22
|
+
"uppercase-adjustment": 0.85
|
|
21
23
|
);
|
|
22
24
|
|
|
23
25
|
$font-feather: (
|
|
@@ -43,36 +45,34 @@ $font-icon: $font-feather;
|
|
|
43
45
|
$font-icon-weight: normal;
|
|
44
46
|
|
|
45
47
|
/******************************************************
|
|
46
|
-
*
|
|
48
|
+
* TYPOGRAPHY CONFIG
|
|
47
49
|
******************************************************/
|
|
48
50
|
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
"
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
51
|
+
$typography: ss-build-typography((
|
|
52
|
+
|
|
53
|
+
// Define your font scales and their constraints.
|
|
54
|
+
"scales": (
|
|
55
|
+
|
|
56
|
+
// Phone sizes.
|
|
57
|
+
"default": (
|
|
58
|
+
"base-font-size": 16px,
|
|
59
|
+
"base-line-height": 1.5,
|
|
60
|
+
"max-font-size": 28px,
|
|
61
|
+
"max-line-height": 1.35
|
|
62
|
+
),
|
|
63
|
+
|
|
64
|
+
// Tablet sizes and larger.
|
|
65
|
+
"tablet": (
|
|
66
|
+
"media-query": "screen and (min-width: 768px)",
|
|
67
|
+
"base-font-size": 18px,
|
|
68
|
+
"base-line-height": 1.6,
|
|
69
|
+
"max-font-size": 42px,
|
|
70
|
+
"max-line-height": 1.25
|
|
71
|
+
)
|
|
60
72
|
),
|
|
61
73
|
|
|
62
|
-
//
|
|
63
|
-
"
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
"max-font-size": 42px,
|
|
68
|
-
"max-line-height": 1.25,
|
|
69
|
-
"rounding": false
|
|
70
|
-
)
|
|
71
|
-
);
|
|
72
|
-
|
|
73
|
-
// Other than the base, how many sizes do you need?
|
|
74
|
-
$numb-smaller-sizes: 1;
|
|
75
|
-
$numb-larger-sizes: 4;
|
|
76
|
-
|
|
77
|
-
// Build and override the default scale with your own.
|
|
78
|
-
$typography: ss-build-typography($font-scales, $numb-smaller-sizes, $numb-larger-sizes);
|
|
74
|
+
// Other than the base, how many sizes do you need?
|
|
75
|
+
"numb-smaller-sizes": 1,
|
|
76
|
+
"numb-larger-sizes": 4
|
|
77
|
+
));
|
|
78
|
+
|
|
@@ -73,7 +73,7 @@ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu,
|
|
|
73
73
|
* FONT ROLES
|
|
74
74
|
******************************************************/
|
|
75
75
|
/******************************************************
|
|
76
|
-
*
|
|
76
|
+
* TYPOGRAPHY CONFIG
|
|
77
77
|
******************************************************/
|
|
78
78
|
/******************************************************
|
|
79
79
|
* Typography
|
|
@@ -1116,14 +1116,15 @@ nav a {
|
|
|
1116
1116
|
/* line 123, ../sass/main.scss */
|
|
1117
1117
|
.copy-larger4 {
|
|
1118
1118
|
font-family: Georgia, serif;
|
|
1119
|
-
|
|
1120
|
-
|
|
1119
|
+
text-transform: uppercase;
|
|
1120
|
+
font-size: 22.96px;
|
|
1121
|
+
line-height: 1.64634;
|
|
1121
1122
|
}
|
|
1122
1123
|
@media screen and (min-width: 768px) {
|
|
1123
1124
|
/* line 123, ../sass/main.scss */
|
|
1124
1125
|
.copy-larger4 {
|
|
1125
|
-
font-size:
|
|
1126
|
-
line-height: 1.
|
|
1126
|
+
font-size: 34.44px;
|
|
1127
|
+
line-height: 1.52439;
|
|
1127
1128
|
}
|
|
1128
1129
|
}
|
|
1129
1130
|
|