@import "../../globals.core"; // Typography // -------------------------------------------------- // All font sizes use rem units // By default, 1rem equals 10px. For example, 1.4rem === 14px // $font-size-root value, which is on the element // is what can scale all fonts $font-size-root: 62.5% !default; $headings-font-weight: 500 !default; $headings-line-height: 1.2 !default; $h1-font-size: 2.6rem !default; $h2-font-size: 2.4rem !default; $h3-font-size: 2.2rem !default; $h4-font-size: 2.0rem !default; $h5-font-size: 1.8rem !default; $h6-font-size: 1.6rem !default; html { font-size: $font-size-root; } a { background-color: transparent; } .enable-hover a:hover { opacity: 0.7; } h1, h2, h3, h4, h5, h6 { font-weight: $headings-font-weight; line-height: $headings-line-height; margin-top: 1.6rem; margin-bottom: 1rem; &:first-child { margin-top: -0.3rem; } } h1 + h2, h1 + h3, h2 + h3 { margin-top: -0.3rem; } h1 { font-size: $h1-font-size; margin-top: 2rem; } h2 { font-size: $h2-font-size; margin-top: 1.8rem; } h3 { font-size: $h3-font-size; } h4 { font-size: $h4-font-size; } h5 { font-size: $h5-font-size; } h6 { font-size: $h6-font-size; } small { font-size: 75%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; }