1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
|
// Sections
body {
// Output a horizontal grid to help with debugging typography. The
// $typey-debug variable will toggle its output.
@include typey-debug-grid();
// Remove the margin in all browsers (opinionated).
margin: 0;
padding: 0;
}
// Headings
//
// All HTML headings, `<h1>` through `<h6>`, are available. `%h1` through `%h6`
// classes are also available, for when you want to match the font styling of a
// heading but still want your text to be displayed inline.
// Correct the font size and margin on `h1` elements within `section` and
// `article` contexts in Chrome, Firefox, and Safari.
h1,
%h1 {
// Set the font-size while keeping a proper vertical rhythm.
@include font-size(xxl);
// Set 1 unit of vertical rhythm on the top and bottom margins.
@include margin-top(1, xxl);
@include margin-bottom(1, xxl);
line-height: 1.3;
}
h2,
%h2 {
@include font-size(xl);
@include margin-top(1, xl);
@include margin-bottom(1, xl);
line-height: 1.3;
}
h3,
%h3 {
@include font-size(l);
@include margin-top(1, l);
@include margin-bottom(1, l);
line-height: 1.3;
}
h4,
%h4 {
@include font-size(m);
@include margin-top(1, m);
@include margin-bottom(1, m);
line-height: 1.3;
}
h5,
%h5 {
@include font-size(s);
@include margin-top(1, s);
@include margin-bottom(1, s);
line-height: 1.3;
}
h6,
%h6 {
@include font-size(xs);
@include margin-top(1, xs);
@include margin-bottom(1, xs);
line-height: 1.3;
}
// Set max text line width for redability.
h2,
h3,
h4,
h5,
h6,
p {
max-width: $max-line-width;
}
|
