_frankly.scss

//  ––––––––––––––––––––––––––––––––––––––––––––––––––
//  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); }