| /* ========================================================================== |
| Base |
| ========================================================================== */ |
| |
| /* |
| Typography |
| ========================================================================== */ |
| |
| body { |
| font-family: $base-font; |
| color: $text-color; |
| @include font-size(16); |
| } |
| |
| p { |
| @include font-size(18,yes,28); |
| } |
| |
| li { |
| @include font-size(16,12,24); |
| } |
| |
| /* Headings */ |
| |
| h1, h2, h3, h4, h5, h6 { |
| font-family: $heading-font; |
| text-rendering: optimizeLegibility; // Fix the character spacing for headings |
| } |
| h1 { |
| @include font-size(36); |
| } |
| h2 { |
| @include font-size(32); |
| } |
| h3 { |
| @include font-size(28); |
| } |
| h4 { |
| @include font-size(24); |
| } |
| h5 { |
| @include font-size(20); |
| } |
| h6 { |
| @include font-size(18); |
| } |
| |
| /* Underlined text */ |
| |
| u, |
| ins { |
| text-decoration: none; |
| border-bottom: 1px solid $text-color; |
| } |
| |
| /* Links */ |
| |
| a { |
| color: $link-color; |
| &:hover { |
| color: darken($link-color, 20); |
| } |
| &:focus { |
| @extend %tab-focus; |
| } |
| &:hover, |
| &:active { |
| outline: 0; |
| } |
| } |
| |
| /* Quoted text */ |
| |
| blockquote { |
| padding-left: $gutter; |
| padding-right: $gutter; |
| border-left: 6px solid $info-color; |
| p { |
| font-family: $alt-font; |
| @include font-size(24); |
| } |
| cite { |
| font-family: $base-font; |
| font-weight: 700; |
| font-style: normal; |
| @include font-size(18); |
| } |
| } |
| |
| // Code |
| tt, code, kbd, samp, pre { |
| font-family: $code-font; |
| } |
| pre { |
| overflow-x: auto; // add scrollbars to wide code blocks |
| } |
| p code, |
| li code { |
| @include font-size(16,no); |
| color: $text-color; |
| white-space: nowrap; |
| margin: 0 2px; |
| padding: 0 5px; |
| border: 1px solid $border-color; |
| background-color: lighten($primary-color, 95); |
| border-radius: $border-radius; |
| } |
| |
| /* |
| Media and embeds |
| ========================================================================== */ |
| |
| /* Figures and images */ |
| |
| figure { |
| margin-left: -1 * $gutter; |
| margin-right: -1 * $gutter; |
| // full width figures on small screens |
| @include media($small) { |
| margin-left: 0; |
| margin-right: 0; |
| position: relative; |
| } |
| @include clearfix; |
| img, |
| .fluid-width-video-wrapper, |
| .palette { |
| margin-bottom: (0px + $doc-line-height) / 2; |
| // margin-bottom: (0rem + ($doc-line-height / $doc-font-size)) / 2; |
| } |
| a { |
| img { |
| /* Image hover animation */ |
| @include transition(box-shadow 0.3s); |
| &:hover { |
| box-shadow: 0 0 10px rgba($black, .20); |
| } |
| } |
| } |
| &.half { |
| @include outer-container; |
| @include media($small) { |
| a, |
| > img { |
| @include span-columns(6); |
| @include omega(2n); |
| } |
| figcaption { |
| clear: left; |
| } |
| } |
| } |
| &.third { |
| @include outer-container; |
| @include media($small) { |
| a, |
| > img { |
| @include span-columns(4); |
| @include omega(3n); |
| } |
| figcaption { |
| clear: left; |
| } |
| } |
| } |
| } |
| |
| /* Figure captions */ |
| |
| figcaption { |
| padding-left: $gutter; |
| padding-right: $gutter; |
| @include media($small) { |
| padding-left: 0; |
| padding-right: 0; |
| } |
| font-family: $alt-font; |
| @include font-size(14,yes); |
| color: $caption-color; |
| clear: both; |
| a { |
| color: $caption-color; |
| text-decoration: none; |
| border-bottom: 1px dotted $caption-color; |
| &:hover { |
| border-bottom-style: solid; |
| } |
| } |
| } |
| |
| .half, |
| .third { |
| & figcaption { /* Remove caption indents */ |
| padding-left: 0; |
| padding-right: 0; |
| } |
| } |
| |
| /* Fix IE9 SVG bug */ |
| svg:not(:root) { |
| overflow: hidden; |
| } |
| |
| /* |
| Tables |
| ========================================================================== */ |
| |
| table { |
| border-collapse: collapse; |
| margin: ((0px + $doc-line-height) / 2) 0; |
| margin: ((0rem + ($doc-line-height / $doc-font-size)) / 2) 0; |
| width: 100%; |
| } |
| tbody { |
| tr:hover > td, tr:hover > th { |
| background-color: $table-hover-color; |
| } |
| } |
| thead { |
| tr:first-child td { |
| border-bottom: 2px solid $table-border-color; |
| } |
| } |
| th { |
| padding: (0px + $doc-line-height) / 2; |
| padding: (0rem + ($doc-line-height / $doc-font-size)) / 2; |
| font-family: $alt-font; |
| font-weight: bold; |
| text-align: left; |
| background-color: $table-header-color; |
| border-bottom: 1px solid darken($border-color, 15%); |
| } |
| td { |
| border-bottom: 1px solid $border-color; |
| padding: (0px + $doc-line-height) / 2; |
| padding: (0rem + ($doc-line-height / $doc-font-size)) / 2; |
| } |
| tr, td, th { |
| vertical-align: middle; |
| } |
| |
| /* |
| Horizontal rules |
| ========================================================================== */ |
| |
| hr { |
| display: block; |
| position: relative; |
| margin: 0px + (2 * $doc-line-height) 0; |
| margin: 0rem + ((2 * $doc-line-height) / $doc-font-size) 0; |
| padding: 0; |
| height: 5px; |
| border: 0; |
| &:before { |
| content: ''; |
| position: absolute; |
| top: 0; |
| left: 0; |
| width: 2 * $column; |
| height: 1px; |
| background: $border-color; |
| } |
| } |
| |
| /* |
| Forms |
| ========================================================================== */ |
| |
| fieldset { |
| background: lighten($border-color, 10); |
| border: 1px solid $border-color; |
| margin-bottom: 0px + $doc-line-height; |
| margin-bottom: 0rem + ($doc-line-height / $doc-font-size); |
| padding: $gutter; |
| border-radius: $border-radius; |
| } |
| |
| input, |
| label, |
| select { |
| display: block; |
| @include font-size($form-font-size,no); |
| } |
| |
| label { |
| font-weight: bold; |
| font-family: $alt-font; |
| margin-bottom: (0px + $doc-line-height) / 4; |
| margin-bottom: (0rem + ($doc-line-height / $doc-font-size)) / 4; |
| &.required:after { |
| content: "*"; |
| } |
| abbr { |
| display: none; |
| } |
| } |
| |
| textarea, |
| #{$all-text-inputs}, |
| select, |
| select[multiple=multiple] { |
| @include box-sizing(border-box); |
| @include transition(border-color); |
| background-color: white; |
| border-radius: $form-border-radius; |
| border: 1px solid $form-border-color; |
| box-shadow: $form-box-shadow; |
| font-family: $form-font-family; |
| font-size: $form-font-size; |
| margin-bottom: (0px + $doc-line-height) / 2; |
| margin-bottom: (0rem + ($doc-line-height / $doc-font-size)) / 2; |
| padding: ((0px + $doc-line-height) / 3) ((0px + $doc-line-height) / 3); |
| padding: ((0rem + ($doc-line-height / $doc-font-size)) / 3) ((0rem + ($doc-line-height / $doc-font-size)) / 3); |
| width: 100%; |
| &:hover { |
| border-color: $form-border-color-hover; |
| } |
| &:focus { |
| border-color: $form-border-color-focus; |
| box-shadow: $form-box-shadow-focus; |
| outline: none; |
| } |
| } |
| |
| textarea { |
| resize: vertical; |
| } |
| |
| input[type="search"] { |
| @include appearance(none); |
| } |
| |
| input[type="checkbox"], input[type="radio"] { |
| display: inline; |
| margin-right: (0px + $doc-line-height) / 4; |
| margin-right: (0rem + ($doc-line-height / $doc-font-size)) / 4; |
| } |
| |
| input[type="file"] { |
| width: 100%; |
| } |
| |
| select { |
| width: auto; |
| max-width: 100%; |
| margin-bottom: 0px + $doc-line-height; |
| margin-bottom: 0rem + ($doc-line-height / $doc-font-size); |
| } |
| |
| form button, |
| input[type="submit"] { |
| @extend .btn; |
| @include appearance(none); |
| cursor: pointer; |
| user-select: none; |
| vertical-align: middle; |
| white-space: nowrap; |
| } |
| |
| /* |
| Navigation lists |
| ========================================================================== */ |
| |
| /** |
| * Removes margins, padding, and bullet points from navigation lists |
| * |
| * Example usage: |
| * <nav> |
| * <ul> |
| * <li><a href="#link-1">Link 1</a></li> |
| * <li><a href="#link-2">Link 2</a></li> |
| * <li><a href="#link-3">Link 3</a></li> |
| * </ul> |
| * </nav> |
| */ |
| |
| nav { |
| ul { |
| margin: 0; |
| padding: 0; |
| } |
| li { |
| list-style: none; |
| } |
| a { |
| text-decoration: none; |
| } |
| } |
| |
| /* |
| Global animation transition |
| ========================================================================== */ |
| |
| b, i, strong, em, blockquote, p, q, span, figure, img, h1, h2, header, input, a, tr, td, .highlight { |
| @include transition (color 0.2s ease-out, opacity 0.2s ease-out, background 0.2s ease-out, border-color 0.2s ease-out); |
| } |