| 1 |
@use 'sass:math'; |
| 2 |
@use 'variables'; |
| 3 |
|
| 4 |
// @see https://css-tricks.com/linearly-scale-font-size-with-css-clamp-based-on-the-viewport/ |
| 5 |
@function scaleBetween($minFontSize, $maxFontSize) { |
| 6 |
$maxWidth: variables.$containerMaxWidth; |
| 7 |
$minWidth: variables.$desktopMinWidth; |
| 8 |
$slope: math.div(($maxFontSize - $minFontSize), ($maxWidth - $minWidth)); |
| 9 |
$yAxisIntersection: -$minWidth * $slope + $minFontSize; |
| 10 |
|
| 11 |
@return clamp($minFontSize, $yAxisIntersection + ($slope * 100vw), $maxFontSize); |
| 12 |
} |
| 13 |
|
