| /* ========================================================================== |
| BASE ELEMENTS |
| ========================================================================== */ |
| |
| html { |
| /* sticky footer fix */ |
| position: relative; |
| min-height: 100%; |
| } |
| |
| body { |
| margin: 0; |
| padding: 0; |
| color: $text-color; |
| font-family: $global-font-family; |
| line-height: 1.5; |
| |
| &.overflow--hidden { |
| /* when primary navigation is visible, the content in the background won't scroll */ |
| overflow: hidden; |
| } |
| } |
| |
| h1, h2, h3, h4, h5, h6 { |
| margin: 2em 0 0.5em; |
| line-height: 1.2; |
| font-family: $header-font-family; |
| font-weight: bold; |
| } |
| |
| h1 { |
| margin-top: 0; |
| font-size: $type-size-3; |
| } |
| |
| h2 { |
| font-size: $type-size-4; |
| } |
| |
| h3 { |
| font-size: $type-size-5; |
| } |
| |
| h4 { |
| font-size: $type-size-6; |
| } |
| |
| h5 { |
| font-size: $type-size-6; |
| } |
| |
| h6 { |
| font-size: $type-size-6; |
| } |
| |
| small, .small { |
| font-size: $type-size-6; |
| } |
| |
| p { |
| margin-bottom: 1.3em; |
| } |
| |
| u, |
| ins { |
| text-decoration: none; |
| border-bottom: 1px solid $text-color; |
| a { |
| color: inherit; |
| } |
| } |
| |
| del a { |
| color: inherit; |
| } |
| |
| /* reduce orphans and widows when printing */ |
| |
| p, pre, blockquote, ul, ol, dl, figure, table, fieldset { |
| orphans: 3; |
| widows: 3; |
| } |
| |
| /* abbreviations */ |
| |
| abbr[title], |
| abbr[data-original-title] { |
| text-decoration: none; |
| cursor: help; |
| border-bottom: 1px dotted $text-color; |
| } |
| |
| /* blockquotes */ |
| |
| blockquote { |
| margin: 2em 1em 2em 0; |
| padding-left: 1em; |
| padding-right: 1em; |
| font-style: italic; |
| border-left: 0.25em solid $primary-color; |
| |
| cite { |
| font-style: italic; |
| |
| &:before { |
| content: "\2014"; |
| padding-right: 5px; |
| } |
| } |
| } |
| |
| /* links */ |
| |
| a { |
| &:focus { |
| @extend %tab-focus; |
| } |
| |
| &:hover, |
| &:active { |
| outline: 0; |
| } |
| } |
| |
| /* code */ |
| |
| tt, code, kbd, samp, pre { |
| font-family: $monospace; |
| } |
| |
| pre { |
| overflow-x: auto; /* add scrollbars to wide code blocks*/ |
| } |
| |
| p > code, |
| a > code, |
| li > code, |
| figcaption > code, |
| td > code { |
| padding-top: 0.1rem; |
| padding-bottom: 0.1rem; |
| font-size: $type-size-6; |
| background: $code-background-color; |
| border: 1px solid $lighter-gray; |
| border-radius: $border-radius; |
| box-shadow: $box-shadow; |
| |
| &:before, &:after { |
| letter-spacing: -0.2em; |
| content: "\00a0"; /* non-breaking space*/ |
| } |
| } |
| |
| /* horizontal rule */ |
| |
| hr { |
| display: block; |
| margin: 1em 0; |
| border: 0; |
| border-top: 1px solid $border-color; |
| } |
| |
| /* lists */ |
| |
| ul li, |
| ol li { |
| margin-bottom: 0.5em; |
| } |
| |
| li ul, |
| li ol { |
| margin-top: 0.5em; |
| } |
| |
| /* |
| Media and embeds |
| ========================================================================== */ |
| |
| /* Figures and images */ |
| |
| figure { |
| display: -webkit-box; |
| display: flex; |
| -webkit-box-pack: justify; |
| justify-content: space-between; |
| -webkit-box-align: start; |
| align-items: flex-start; |
| flex-wrap: wrap; |
| margin: 2em 0; |
| |
| img, |
| iframe, |
| .fluid-width-video-wrapper { |
| margin-bottom: 1em; |
| } |
| |
| img { |
| width: 100%; |
| border-radius: $border-radius; |
| -webkit-transition: $global-transition; |
| transition: $global-transition; |
| } |
| |
| > a { |
| display: block; |
| } |
| |
| &.half { |
| > a, |
| > img { |
| @include breakpoint($small) { |
| width: calc(50% - 0.5em); |
| } |
| } |
| |
| figcaption { |
| width: 100%; |
| } |
| } |
| |
| &.third { |
| > a, |
| > img { |
| @include breakpoint($small) { |
| width: calc(33.3333% - 0.5em); |
| } |
| } |
| |
| figcaption { |
| width: 100%; |
| } |
| } |
| } |
| |
| /* Figure captions */ |
| |
| figcaption { |
| margin-bottom: 0.5em; |
| color: mix(#fff, $text-color, 25%); |
| font-family: $caption-font-family; |
| font-size: $type-size-6; |
| |
| a { |
| color: inherit; |
| text-decoration: none; |
| border-bottom: 1px solid $light-gray; |
| -webkit-transition: $global-transition; |
| transition: $global-transition; |
| |
| &:hover { |
| color: #000; |
| border-bottom-color: #000; |
| } |
| } |
| } |
| |
| |
| /* Fix IE9 SVG bug */ |
| |
| svg:not(:root) { |
| overflow: hidden; |
| } |
| |
| |
| /* |
| 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; |
| } |
| |
| /* override white-space for nested lists */ |
| ul li, |
| ol li { |
| margin-bottom: 0; |
| } |
| |
| li ul, |
| li ol { |
| margin-top: 0; |
| } |
| } |
| |
| /* |
| Global animation transition |
| ========================================================================== */ |
| |
| b, i, strong, em, blockquote, p, q, span, figure, img, h1, h2, header, input, a, tr, td, form button, input[type="submit"], .btn, .highlight, .archive__item-teaser { |
| -webkit-transition: $global-transition; |
| transition: $global-transition; |
| } |