1/* Typography */
2
3h1,h2,h3,h4,h5,h6 {
4  font-family: $font-family;
5  font-weight: $header-font-weight;
6  color: $header-font-color;
7  text-rendering: optimizeLegibility;
8  @include padding-leader($rhythm-spacing);
9  @include adjust-leading-to($rhythm-height);
10  @include padding-trailer($rhythm-spacing);
11  a {
12    color: $header-link-color;
13  }
14}
15
16@include respond(all-phones) {
17
18  h1,h2,h3,h4,h5,h6 { word-wrap: break-word;}
19
20}
21
22h1 {
23  @include font-size($xxxlarge);
24  &.xlarge {
25    @include font-size($reallybig);
26  }
27  &.xxlarge {
28    @include font-size($tremendous);
29  }
30  &.absurd {
31    @include font-size($absurd);
32  }
33}
34h2 { @include font-size($xlarge); }
35h3 { @include font-size($larger);}
36h4 { @include font-size($large);}
37h5 { @include font-size($med);}
38h6 { @include font-size($norm);}
39
40@include respond(all-phones) {
41
42  h1 { @include font-size($xlarge);}
43  h2 { @include font-size($larger + 6);}
44
45}
46
47.subhead {
48  color: #777;
49  font-weight: normal;
50  margin-bottom: 20px;
51}
52
53/*=====================================================
54
55  Links & Paragraph styles
56
57  ======================================================*/
58
59p {
60  font-family: $font-family;
61  font-weight: $body-font-weight;
62  @include font-size($base-font-size);
63  margin-bottom: $base-line-height / 2;
64  @include adjust-leading-to(1);
65  &.lead {
66    @include font-size(ms(0) * 1.25);
67    margin-bottom: ms(1);
68  }
69  @include respond(portrait-tablets) {
70    @include font-size($base-font-size * 1.1);
71    @include adjust-leading-to(1);
72  }
73}
74
75a {
76  color: $body-link-color;
77  text-decoration: none;
78  outline: 0;
79  line-height: inherit;
80  &:hover {
81    color: $body-link-hover-color;
82  }
83}
84
85/*=====================================================
86
87  Lists
88
89 ======================================================*/
90
91ul, ol {
92  @include margin-trailer($rhythm-spacing);
93}
94
95ul {
96  list-style: none outside;
97}
98
99ol {
100  list-style: decimal;
101  margin-left: 30px;
102}
103
104ul {
105  &.square, &.circle, &.disc {
106    margin-left: 25px;
107  }
108  &.square {
109    list-style: square outside;
110  }
111  &.circle {
112    list-style: circle outside;
113  }
114  &.disc {
115    list-style: disc outside;
116  }
117  ul {
118    margin: 4px 0 5px 25px;
119  }
120}
121
122ol ol {
123  margin: 4px 0 5px 30px;
124}
125
126li {
127  @include padding-trailer($rhythm-spacing);
128}
129
130ul.large li {
131  line-height: 21px;
132}
133
134dl dt {
135  font-weight: bold;
136  @include font-size($norm);
137}
138
139@include respond(portrait-tablets) {
140
141  ul, ol, dl, p { text-align: left;}
142
143}
144
145/* Mobile */
146
147em {
148  font-style: italic;
149  line-height: inherit;
150}
151
152strong {
153  font-weight: $font-weight-bold;
154  line-height: inherit;
155}
156
157small {
158  font-size: 56.4%;
159  line-height: inherit;
160}
161
162h1 small, h2 small, h3 small, h4 small, h5 small {
163  color: #777;
164}
165
166/*  Blockquotes  */
167
168blockquote {
169  line-height: 20px;
170  color: #777;
171  p {
172    line-height: 20px;
173    color: #777;
174  }
175  margin: 0 0 18px;
176  padding: 9px 20px 0 19px;
177  border-left: 5px solid $horizontal-rule-color;
178  cite {
179    display: block;
180    font-size: 12px;
181    font-size: 1.2rem;
182    color: $body-font-color;
183    &:before {
184      content: "\2014 \0020";
185    }
186    a {
187      color: $body-font-color;
188      &:visited {
189        color: $body-font-color;
190      }
191    }
192  }
193}
194
195hr {
196  border: 1px solid $horizontal-rule-color;
197  clear: both;
198  margin: 16px 0 18px;
199  height: 0;
200}
201
202abbr, acronym {
203  text-transform: uppercase;
204  font-size: 90%;
205  color: #222;
206  border-bottom: 1px solid $horizontal-rule-color;
207  cursor: help;
208}
209
210abbr {
211  text-transform: none;
212}
213
214/**
215   * Print styles.
216 *
217 * Inlined to avoid required HTTP connection: www.phpied.com/delay-loading-your-print-css/
218 * Credit to Paul Irish and HTML5 Boilerplate (html5boilerplate.com)
219 */
220
221@media print {
222  * {
223    background: transparent !important;
224    color: black !important;
225    text-shadow: none !important;
226    filter: none !important;
227    -ms-filter: none !important;
228  }
229  /* Black prints faster: sanbeiji.com/archives/953 */
230  p a {
231    color: $body-font-color !important;
232    text-decoration: underline;
233    &:visited {
234      color: $body-font-color !important;
235      text-decoration: underline;
236    }
237    &[href]:after {
238      content: " (" attr(href) ")";
239    }
240  }
241  abbr[title]:after {
242    content: " (" attr(title) ")";
243  }
244  a {
245    &[href^="javascript:"]:after, &[href^="#"]:after {
246      content: "";
247    }
248  }
249  /* Don't show links for images, or javascript/internal links */
250  pre, blockquote {
251    border: 1px solid #999;
252    page-break-inside: avoid;
253  }
254  thead {
255    display: table-header-group;
256  }
257  /* css-discuss.incutio.com/wiki/Printing_Tables */
258  tr, img {
259    page-break-inside: avoid;
260  }
261  @page {
262    margin: 0.5cm;
263  }
264
265  p, h2, h3 {
266    orphans: 3;
267    widows: 3;
268  }
269  h2, h3 {
270    page-break-after: avoid;
271  }
272}
273