blob: 6abd3f5b2d3df3cec11d4afbe4bb34de75bd881c [file] [log] [blame]
// =========== Base
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }
*,
*:after,
*:before {
@include box-sizing(border-box);
}
::-moz-selection { background: $color-neutral-90; color: $white; text-shadow: none; }
::selection { background: $color-neutral-90; color: $white; text-shadow: none; }
html {
color: $color-neutral-70;
font: 300 $font-size-base $font-family-body;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: auto;
-webkit-text-size-adjust: 100%;
}
body {
line-height: 1.5em;
background-color: #fff;
}
// Headings
h1, h2, legend, h3, h4, h5, h6 {
font-family: $font-family-heading;
font-weight: 400;
line-height: 1.5em;
margin: 0 0 0.25em 0;
}
h1 { font-size: 2rem; }
h2,
legend {
font-size: 1.5rem;
}
h3 { font-size: 1.3rem; }
h4 { font-size: 1.2rem; }
h5 { font-size: 1.1rem; }
h6 { font-size: 1rem; }
// Paragraphs
p {
margin-bottom: $spacing;
&.is-lead { font-size: $font-size-40; }
}
// Links
a {
color: $color-brand-50;
cursor: pointer;
text-decoration: none;
&:hover { color: $color-brand-60; }
}
// Other
small {
color: $color-neutral-50;
font-size: $font-size-20;
}
em { font-style: italic; }
strong { font-weight: bold; }
code, pre { font-family: 'courier new', monospace; }
pre { overflow-x: auto; }
abbr { border-bottom: 1px dotted $color-neutral-50; }
del { text-decoration: line-through; }
mark { background-color: lighten(yellow, 35%); }
hr {
background-color: transparent;
border: solid $color-neutral-30;
border-width: 1px 0 0;
clear: both;
margin: 2.5rem $spacing;
}
// Lists
ul, ol { margin: 0 0 $spacing 1.5rem; }
ul { list-style: disc; }
ol { list-style: decimal; }
dl {
margin-bottom: $spacing;
dt { font-weight: bold; }
dd { margin-left: $spacing; }
&.advanced {
@include grid-container;
dt { @include grid(16, 0, 1); }
dd { @include grid(32); }
}
}