1/* =============================================================================
2   Typography
3
4   To achieve a pleasant vertical rhythm, we use Compass' Vertical Rhythm mixins
5   so that the line height of our base font becomes the basic unit of vertical
6   measurement. We use multiples of that unit to set the top and bottom margins
7   for our block level elements and to set the line heights of any fonts.
8   For more information, see http://24ways.org/2006/compose-to-a-vertical-rhythm
9   ========================================================================== */
10
11
12html {
13  font-family: $base-font;
14  color: $text;
15}
16body {
17  font-size: $body-font-size;
18  color: $text;
19}
20
21h1, h2, h3, h4 ,h5 ,h6 {
22  font-family: $headline-font;
23  font-weight: 600;
24  color: $headline-color;
25}
26h1, h2 {
27  font-weight: 300;
28}
29h1 {
30  @include adjust-font-size-to( $h1-font-size );
31}
32h1 + h1 {
33  @include leader (0);
34}
35h2 {
36  @include adjust-font-size-to( $h2-font-size );
37  @include leader(2, $h2-font-size);
38  @include trailer(0, $h2-font-size);
39  @include adjust-leading-to(1.4, $h2-font-size);
40}
41h3 {
42  @include adjust-font-size-to( $h3-font-size );
43  @include leader(1, $h3-font-size);
44  @include trailer(0.4, $h3-font-size);
45  @include adjust-leading-to(1.4, $h2-font-size);
46}
47h4 {
48  @include adjust-font-size-to( $h4-font-size );
49  @include leader(0, $h4-font-size);
50  @include trailer(0, $h4-font-size);
51}
52h5 {
53  @include adjust-font-size-to( $h5-font-size );
54  @include leader(0, $h5-font-size);
55  @include trailer(0, $h5-font-size);
56}
57h6 {
58  @include adjust-font-size-to( $h6-font-size );
59  @include leader(0, $h6-font-size);
60  @include trailer(0, $h6-font-size);
61}
62
63// @media only screen and (max-width: $break-small) {
64//   h1 {
65//     font-size: $h1-font-size - 0.6 !important;
66//   }
67// }
68
69p {
70  margin: rhythm(1) 0;
71  &.noindent, &.caption & {
72    text-indent: 0;
73  }
74  &.caption {
75    text-align: left;
76    .lightbox & {
77      color: $white;
78    }
79  }
80}
81
82a,
83a:link,
84a:visited {
85  color: $link-color;
86  font-weight: bold;
87  text-decoration: none;
88  word-wrap: break-word;
89  transition: opacity 0.3s ease 0s;
90  &:hover,
91  &:focus {
92    color: $link-hover-color;
93  }
94}
95a.section-anchor {
96  display: block;
97  padding-top: 3.33em;
98}
99
100footer[role="contentinfo"] {
101  font-size: 0.84615385em;
102  a,
103  a:link,
104  a:visited {
105    color: $footer-link-color;
106    font-weight: normal;
107    font-weight: 600;
108    text-decoration: none;
109    word-wrap: break-word;
110    &:hover,
111    &:focus {
112      color: $link-hover-color;
113    }
114  }
115}
116
117table {
118  font-size: $body-font-size;
119}
120
121td dl {
122  margin: 0.4em 0;
123}
124
125td dt {
126  margin: 0 0 0.4em 0;
127}
128
129em {
130  padding-right: 2px; /* "kerning" adjustment */
131}
132
133img {
134  vertical-align: middle;
135}
136
137figcaption {
138  font-family: $alt-font;
139//  @include adjust-font-size-to(12px);
140  color: lighten($text, 20%);
141}
142
143blockquote {
144  margin: rhythm(0.5) $indent-amount;
145}
146
147cite {
148  margin: rhythm(0.5) $indent-amount;
149//  @include adjust-font-size-to(12px);
150  color: lighten($text, 30%);
151  font-style: normal;
152}
153
154canvas {
155  background: $white;
156  margin: rhythm(1) 0;
157}
158
159.code,
160code,
161pre {
162  color: $monospace-font-color;
163  font-family: $sourcecode;
164  //font-size: $monospace-font-size;
165}
166
167a > code {
168  color: $link-color;
169}
170
171pre {
172  margin: 2em 0;
173  word-wrap: break-word;
174  position: relative;
175
176  &[data-filename] {
177
178
179    &::after {
180      content: attr(data-filename);
181      background-color: $gray-medium;
182      color: #fff;
183      padding: 2px 12px;
184      position: absolute;
185      right: 0;
186      top: 0;
187    }
188  }
189  a {
190    text-decoration: underline;
191  }
192}
193.static-code-container {
194//  @include adjust-font-size-to(13px);
195  line-height: 1em;
196  clear: both;
197}
198
199code,
200kbd,
201samp {
202  margin: rhythm(1) 0;
203//  @include adjust-font-size-to(13px);
204  line-height: 1em;
205}
206
207dl,
208menu,
209ol,
210ul,
211.item-list ul {
212  margin: 0.8em 0;
213}
214ul {
215  padding-left: $indent-amount*1.6;
216}
217ol {
218  padding-left: $indent-amount*1.9;
219}
220
221hr {
222  height: 1px;
223  border: 0;
224  border-bottom: $default-border;
225  padding-bottom: -1px;
226  margin: rhythm(1) 0;
227}
228
229.capitalize {
230  text-transform: uppercase;
231}
232
233/* Support a hack for the ::first-element rules below, which only apply if
234* the element has a subset of displays, which include inline-block.
235*
236* Use the data-inline-block attribute rather than a class on the element
237* because the templates may end up overriding the class attribute.
238*/
239[data-list-item] {
240  display: list-item;
241}
242
243.uncapitalize::first-letter {
244  text-transform: lowercase;
245}
246
247.capitalize::first-letter {
248  text-transform: uppercase;
249}
250
251.kbd {
252  background-color: #f7f7f7;
253  border: 1px solid #ccc;
254  color: #333;
255  font-size: 11px;
256  line-height: 1.4;
257  text-shadow: 0 1px 0 #fff;
258  font-family: Arial,Helvetica,sans-serif;
259  display: inline-block;
260  padding: 0.1em 0.6em;
261  margin: 0 0.1em;
262  white-space: nowrap;
263  box-shadow: 0 1px 0px rgba(0, 0, 0, 0.2), 0 0 0 2px #ffffff inset;
264  border-radius: 3px;
265}
266