poly-fluid-sizing--bump.scss

$mq-mobile-portrait    	: 400px !default;
$mq-mobile-narrow      	: 580px !default;
$mq-mobile             	: 750px !default;
$mq-tablet-portrait    	: 1000px !default;
$mq-tablet             	: 1200px !default;
$mq-desktop            	: 1382px !default;
$mq-desktop-wide       	: 1920px !default;
$mq-desktop-wider      	: 2560px !default;

$base-font__size--min			: 12px;
$base-font__size--intermediate	: 18px;
$base-font__size--wide			: 20px;
$base-font__size--max			: 22px;

//===========================
//
// Font size curve, smallish, bigger for tablet, again smaller for desktops due to layout switch and bigger again for wider screens
//
//                ↓ big / wide screen font size
//                ____
//               /
//           /| /
//          / |/
//      ___/   ← layout switch, smaller font size again
//
//         ↑ mobile screen font size
//
//===========================
$display-font-important-map__layout-switch--before: (
	$mq-mobile-portrait:	$display-font--important__size--min,
	$mq-mobile-narrow: 	$display-font--important__size--intermediate,
	$mq-mobile: 		$display-font--important__size--wide
);
@include poly-fluid-sizing('font-size', $display-font-important-map__layout-switch--before);
	
// smaller font size again due to layout switch
@include above-tablet-portrait {
	$display-font-important-map__layout-switch--after: (
		$mq-desktop: 		$display-font--important__size--intermediate,
		$mq-desktop-wide: 	$display-font--important__size--wide,
		$mq-desktop-wider: 	$display-font--important__size--max
	);
	@include poly-fluid-sizing('font-size', $display-font-important-map__layout-switch--after);
}