/
_typography.scss
123 lines (110 loc) · 2.67 KB
/
_typography.scss
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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
@if $establish-type-rules {
// @page Pattern Library/Typography
// @name Headings
//
// @description
// The default heading styling across all uSwitch pages.
// We allow extending the sizes of these headings with `%heading-{$i}` so that we don't repeat similar font sizes across the site.
//
// #### Best practices
// * Headings are for structure, not presentation
// * The first heading on the page should be an H1
// * Headings should be listed in consecutive order [H1, H2, H3], not [H1, H5, H2]
//
// @markup
// <h1>Heading 1</h1>
// <h2>Heading 2</h2>
// <h3>Heading 3</h3>
// <h4>Heading 4</h4>
// <h5>Heading 5</h5>
// <h6>Heading 6</h6>
html {
@include normal-font;
font-size: $base-font-size;
line-height: $base-line-ratio + em;
}
body {
color: $c-typegrey;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin-top: 0;
margin-bottom: .375em;
}
@for $level from 1 through 6 {
h#{$level},
%heading-#{$level},
.us-heading--#{$level} {
@include heading($level);
}
}
// @page Pattern Library/Typography
// @name Paragraphs
//
// @description
// Default paragraph styling with a margin bottom.
//
// @state .us-standfirst - Used for heros and introductory paragraphs.
//
// @markup
// <p class="{$modifiers}">
// Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vel arcu non magna varius sagittis vel at elit.
// Vivamus et orci pretium, commodo eros vitae, tincidunt purus. Nunc consequat condimentum porttitor.
// Cras at mi sed quam hendrerit bibendum ac a lorem. Mauris a sapien vitae massa lacinia malesuada.
// </p>
p,
.trailered {
margin: 0 0 1.5em 0;
}
.us-standfirst {
@include baseline(18px);
}
// @page Pattern Library/Typography
// @name Lists
//
// @description
// Normal list styling.
//
// @markup
// <ul>
// <li>List item 1</li>
// <li>List item 2</li>
// <li>List item 3</li>
// </ul>
ul {
li {
margin-bottom: .5em;
}
}
small {
line-height: 1.15em;
}
// @page Pattern Library/Typography
// @name Blockquote
//
// @description
// Default blockquote.
//
// @markup
// <blockquote>
// <p>
// Lorem ipsum dolor sit amet, consectetur adipiscing elit.
// Aenean vel arcu non magna varius sagittis vel at elit.
// Vivamus et orci pretium, commodo eros vitae, tincidunt purus.
// </p>
// </blockquote>
blockquote {
@include italic-font;
padding: $gutter-width / 2;
color: $c-navy;
border-left: 5px solid $c-bordergrey;
> p {
padding: 0;
margin: 0;
}
}
}