| // =========== 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; |
| } |
| |
| |
| // 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); } |
| } |
| } |