Skip to content

Instantly share code, notes, and snippets.

@4aficiona2
Last active September 15, 2020 13:18
Show Gist options
  • Save 4aficiona2/85ccb04e31c34d994e5619dffba89bc3 to your computer and use it in GitHub Desktop.
Save 4aficiona2/85ccb04e31c34d994e5619dffba89bc3 to your computer and use it in GitHub Desktop.
$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);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment