// 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 }
}