// stylelint-disable declaration-no-important, selector-list-comma-newline-after // // Headings // h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { margin-bottom: $headings-margin-bottom; font-family: $headings-font-family; font-weight: $headings-font-weight; line-height: $headings-line-height; color: $headings-color; } @function strip-unit($value) { @return $value / ($value * 0 + 1); } @mixin fluid-type($min-vw, $max-vw, $min-font-size, $max-font-size) { $u1: unit($min-vw); $u2: unit($max-vw); $u3: unit($min-font-size); $u4: unit($max-font-size); @if $u1 == $u2 and $u1 == $u3 and $u1 == $u4 { & { font-size: $min-font-size; @media screen and (min-width: $min-vw) { font-size: calc(#{$min-font-size} + #{strip-unit($max-font-size - $min-font-size)} * ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)})); } @media screen and (min-width: $max-vw) { font-size: $max-font-size; } } } } $big-screen: 1; $small-screen: 0.6; h1, .h1 { $average_font: 40px; $max_font: $average_font*$big-screen ; $min_font: $average_font*$small-screen ; @include fluid-type($min_width, $max_width, $min_font, $max_font); } h2, .h2 { $average_font: 32px; $max_font: $average_font*$big-screen ; $min_font: $average_font*$small-screen ; @include fluid-type($min_width, $max_width, $min_font, $max_font); } h3, .h3 { $average_font: 28px; $max_font: $average_font*$big-screen ; $min_font: $average_font*$small-screen ; @include fluid-type($min_width, $max_width, $min_font, $max_font); } h4, .h4 { $average_font: 24px; $max_font: $average_font*$big-screen ; $min_font: $average_font*$small-screen ; @include fluid-type($min_width, $max_width, $min_font, $max_font); } h5, .h5 { $average_font: 20px; $max_font : $average_font*$big-screen ; $min_font: $average_font*$small-screen ; @include fluid-type($min_width, $max_width, $min_font, $max_font); } h6, .h6 { $average_font: 16px; $max_font: $average_font*$big-screen ; $min_font: $average_font*$small-screen ; @include fluid-type($min_width, $max_width, $min_font, $max_font); } .lead { font-size: $lead-font-size; font-weight: $lead-font-weight; } // Type display classes .display-1 { font-size: $display1-size; font-weight: $display1-weight; line-height: $display-line-height; } .display-2 { font-size: $display2-size; font-weight: $display2-weight; line-height: $display-line-height; } .display-3 { font-size: $display3-size; font-weight: $display3-weight; line-height: $display-line-height; } .display-4 { font-size: $display4-size; font-weight: $display4-weight; line-height: $display-line-height; } // // Horizontal rules // hr { margin-top: $hr-margin-y; margin-bottom: $hr-margin-y; border: 0; border-top: $hr-border-width solid $hr-border-color; } // // Emphasis // small, .small { font-size: $small-font-size; font-weight: $font-weight-normal; } mark, .mark { padding: $mark-padding; background-color: $mark-bg; } // // Lists // .list-unstyled { @include list-unstyled; } // Inline turns list items into inline-block .list-inline { @include list-unstyled; } .list-inline-item { display: inline-block; &:not(:last-child) { margin-right: $list-inline-padding; } } // // Misc // // Builds on `abbr` .initialism { font-size: 90%; text-transform: uppercase; } // Blockquotes .blockquote { margin-bottom: $spacer; font-size: $blockquote-font-size; } .blockquote-footer { display: block; font-size: 80%; // back to default font-size color: $blockquote-small-color; &::before { content: "\2014 \00A0"; // em dash, nbsp } }