// We use these to control header font styles $header-font-family: $body-font-family; $header-font-weight: $font-weight-normal; $header-font-style: $font-weight-normal; $header-font-color: #222; $header-line-height: 1.4; $header-top-margin: .2rem; $header-bottom-margin: .5rem; $header-text-rendering: optimizeLegibility; // We use these to control header font sizes $h1-font-size: rem-calc(44); $h2-font-size: rem-calc(37); $h3-font-size: rem-calc(27); $h4-font-size: rem-calc(23); $h5-font-size: rem-calc(18); $h6-font-size: 1rem; // We use these to control header size reduction on small screens $h1-font-reduction: rem-calc(10); $h2-font-reduction: rem-calc(10); $h3-font-reduction: rem-calc(5); $h4-font-reduction: rem-calc(5); $h5-font-reduction: 0; $h6-font-reduction: 0; // These control how subheaders are styled. $subheader-line-height: 1.4; $subheader-font-color: scale-color($header-font-color, $lightness: 35%); $subheader-font-weight: $font-weight-normal; $subheader-top-margin: .2rem; $subheader-bottom-margin: .5rem; // A general styling $small-font-size: 60%; $small-font-color: scale-color($header-font-color, $lightness: 35%); // We use these to style paragraphs $paragraph-font-family: inherit; $paragraph-font-weight: $font-weight-normal; $paragraph-font-size: 1rem; $paragraph-line-height: 1.6; $paragraph-margin-bottom: rem-calc(20); $paragraph-aside-font-size: rem-calc(14); $paragraph-aside-line-height: 1.35; $paragraph-aside-font-style: italic; $paragraph-text-rendering: optimizeLegibility; // We use these to style tags $code-color: grayscale($primary-color); $code-font-family: Consolas, 'Liberation Mono', Courier, monospace; $code-font-weight: $font-weight-normal; $code-background-color: scale-color($secondary-color, $lightness: 70%); $code-border-size: 1px; $code-border-style: solid; $code-border-color: scale-color($code-background-color, $lightness: -10%); $code-padding: rem-calc(2) rem-calc(5) rem-calc(1); // We use these to style anchors $anchor-text-decoration: none; $anchor-text-decoration-hover: none; $anchor-font-color: $primary-color; $anchor-font-color-hover: scale-color($anchor-font-color, $lightness: -14%); // We use these to style the
element $hr-border-width: 1px; $hr-border-style: solid; $hr-border-color: #ddd; $hr-margin: rem-calc(20); // We use these to style lists $list-font-family: $paragraph-font-family; $list-font-size: $paragraph-font-size; $list-line-height: $paragraph-line-height; $list-margin-bottom: $paragraph-margin-bottom; $list-style-position: outside; $list-side-margin: 1.1rem; $list-ordered-side-margin: 1.4rem; $list-side-margin-no-bullet: 0; $list-nested-margin: rem-calc(20); $definition-list-header-weight: $font-weight-bold; $definition-list-header-margin-bottom: .3rem; $definition-list-margin-bottom: rem-calc(12); // We use these to style blockquotes $blockquote-font-color: scale-color($header-font-color, $lightness: 35%); $blockquote-padding: rem-calc(9 20 0 19); $blockquote-border: 1px solid #ddd; $blockquote-cite-font-size: rem-calc(13); $blockquote-cite-font-color: scale-color($header-font-color, $lightness: 23%); $blockquote-cite-link-color: $blockquote-cite-font-color; // Acronym styles $acronym-underline: 1px dotted #ddd;