/** * Heading * * * @author Björn Hase, Tentakelfabrik * @license http://opensource.org/licenses/MIT The MIT License * @link https://github.com/tentakelfabrik/crispy-css * */ /** * add font-size for heading as class and element * * */ @mixin heading-font-size($h, $font-size) { #{$h}, .#{$h} { font-size: $font-size; } } $heading__font-sizes: ( 'h1': 2.5rem, 'h2': 2rem, 'h3': 1.75rem, 'h4': 1.5rem, 'h5': 1.25rem, 'h6': 1rem ) !default; $heading__font-sizes-breakpoints: ( $grid__md: ( 'h1': 2.75rem, 'h2': 2.5rem, 'h3': 2rem, 'h4': 1.75rem, 'h5': 1.5rem, 'h6': 1.2rem ) ) !default; $heading__font-weight: bold!default; $heading__font-family: $font-family !default; $heading__line-height: 1.2 !default; $heading__margin: $margin !default; $heading__margin-breakpoints: margin-breakpoints !default; h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { font-family: $heading__font-family; font-weight: $heading__font-weight; line-height: $heading__line-height; margin: $heading__margin; @include breakpoints('margin', $heading__margin-breakpoints); &.highlight { display: table; } } // adding font-size for each @each $h, $font-size in $heading__font-sizes { @include heading-font-size($h, $font-size); } // adding breakpoints for each breakpoint and each heading @each $breakpoint, $headings in $heading__font-sizes-breakpoints { @media only screen and (min-width: $breakpoint) { @each $h, $font-size in $headings { @include heading-font-size($h, $font-size); } } }