Skip to content

Instantly share code, notes, and snippets.

@jakob-e
Last active June 20, 2018 22:03
Show Gist options
  • Save jakob-e/e74b3a7cae16680bac8a02be0148fb34 to your computer and use it in GitHub Desktop.
Save jakob-e/e74b3a7cae16680bac8a02be0148fb34 to your computer and use it in GitHub Desktop.
// ––––––––––––––––––––––––––––––––––––––––––––––––––
// frankly
//
// font-smoothing
// font-size
//
// ––––––––––––––––––––––––––––––––––––––––––––––––––
// font smoothing
@mixin font-smoothing($on: true){
-webkit-font-smoothing: if($on or $on == on, antialiased, auto);
-moz-osx-font-smoothing: if($on or $on == on, grayscale, auto);
}
// font-size
@mixin font-size(
$min, // font-size
$max: null, // optional maximum font size
$lock-min: $font-lock-min, // optional minimum viewport width
$lock-max: $font-lock-max // optional maximum viewport width
){
& { font-size: $min; }
@if $max {
@media (min-width: $lock-min) and (max-width: $lock-max){
& { font-size: calc(#{$min} + #{num($max) - num($min)} * (100vw - #{$lock-min}) / #{num($lock-max) - num($lock-min)}); }
}
@media (min-width: $lock-max){ & { font-size: $max; } }
}
}
$font-lock-min: $layout-min-width or 320px !default;
$font-lock-max: $layout-max-width or 1280px !default;
@function num($input){ @return $input/($input * 0 + 1); }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment