Skip to content

Instantly share code, notes, and snippets.

@droid001
Last active February 1, 2018 07:25
Show Gist options
  • Save droid001/5f4aadb22f0d003ca2ee189e12da80a1 to your computer and use it in GitHub Desktop.
Save droid001/5f4aadb22f0d003ca2ee189e12da80a1 to your computer and use it in GitHub Desktop.
Responsive header with sliding font-size scale
@mixin responsive-header($size-min, $size-max, $lineheight:false, $marginbottom:false, $breakMinTypoWidth:$break-min-typo-width, $breakMaxTypoWidth:$break-max-typo-width, $font-weight:bold ) {
$breakmin: strip-unit($breakMinTypoWidth);
$breakmax: strip-unit($breakMaxTypoWidth);
@include font-size($size-min);
@include break-sliding-typo-size($size-min, $size-max, $breakmin, $breakmax);
@media only screen and (min-width: #{$breakmax}px - 1px) {
font-size: #{$size-max}px;
}
@if $lineheight {
line-height: $lineheight;
}
margin: 0;
@if $marginbottom {
margin-bottom: $marginbottom;
}
@if $font-weight {
font-weight: $font-weight;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment