Sven Budak SvenBudak
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // https://material.angular.io/cdk/layout/overview#predefined-breakpoints | |
| $res-xs: 0 !default; // Smartphone | |
| $res-sm: 600px !default; // Tablet | |
| $res-md: 960px !default; // Large Tablet | |
| $res-lg: 1280px !default; // Large Tablet and Notebooks | |
| $res-xl: 1920px !default; // Desktop + | |
| $breakpoints: ( | |
| 'xs': $res-xs, | |
| 'sm': $res-sm, |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .test { | |
| color:blue; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $breakpoints: ('xs': 0, 'sm': 600px) !default; | |
| @mixin media-min($var) {@media only screen and (min-width: $var) {@content;}} | |
| @mixin media-max($var) {@media only screen and (max-width: $var - 1px) {@content;}} | |
| @mixin media-from-to($var1, $var2) {@media only screen and (min-width: $var1) and (max-width: $var2 - 1px) {@content;}} | |
| $spacings: ( | |
| 'margin': ( | |
| 'shorten-class-names': false, |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $breakpoints: ('xs': 0, 'sm': 600px) !default; | |
| // $breakpoints: ('xs': 0,'sm': 600px,'md': 960px,'lg': 1280px,'xl': 1920px) !default; | |
| $spacings: 4px, 8px !default; | |
| // $spacings: 4px, 8px, 12px, 16px, 24px, 32px, 40px, 48px, 56px, 64px !default; | |
| $types: 'margin', 'padding'; | |
| @mixin media-min($var) {@media only screen and (min-width: $var) {@content;}} | |
SvenBudak
/ input.scss
Last active
February 5, 2022 21:39
Medium Article - Responsive Font Size - SassMeister.com
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $_browser-context: 16px; // Default | |
| @function em($pixels, $context: $_browser-context) { | |
| @return ($pixels / $context); | |
| } | |
| @function rem($pixels, $context: $_browser-context) { | |
| @return ($pixels / $context) * 1rem; | |
| } | |
SvenBudak
/ _typography.scss
Last active
February 5, 2022 21:36
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @use 'sass:map'; | |
| @use 'variables'; | |
| @use 'functions'; | |
| @use 'mixins'; | |
| // RFS Config (Defines from which resolution the fonts should not scale further) | |
| $rfs-breakpoint: 1200px !default; | |
| @import 'vendor/rfs'; // https://github.com/twbs/rfs/blob/main/scss.scss | |
| // Defines which breakpoints should be created for typographies |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $headline-variants: ( | |
| 'h1': ( | |
| 'font-size': 64px, | |
| 'font-weight': 700, | |
| 'line-height': 70px, | |
| ), | |
| 'h2': ( | |
| 'font-size': 44px, | |
| 'font-weight': 700, | |
| 'line-height': 52px, |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // https://material.angular.io/cdk/layout/overview#predefined-breakpoints | |
| $res-xs: 0 !default; // Smartphone | |
| $res-sm: 600px !default; // Tablet | |
| $res-md: 960px !default; // Large Tablet | |
| $res-lg: 1280px !default; // Large Tablet and Notebooks | |
| $res-xl: 1920px !default; // Desktop + | |
| @function em($pixels, $context: 16px) { | |
| @return ($pixels / $context); | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // https://material.angular.io/cdk/layout/overview#predefined-breakpoints | |
| $res-xs: 0 !default; // Smartphone | |
| $res-sm: 600px !default; // Tablet | |
| $res-md: 960px !default; // Large Tablet | |
| $res-lg: 1280px !default; // Large Tablet and Notebooks | |
| $res-xl: 1920px !default; // Desktop + | |
| @function em($pixels, $context: 16px) { | |
| @return ($pixels / $context); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // https://material.angular.io/cdk/layout/overview#predefined-breakpoints | |
| $res-xs: 0 !default; // Smartphone | |
| $res-sm: 600px !default; // Tablet | |
| $res-md: 960px !default; // Large Tablet | |
| $res-lg: 1280px !default; // Large Tablet and Notebooks | |
| $res-xl: 1920px !default; // Desktop + | |
| @function em($pixels, $context: 16px) { | |
| @return ($pixels / $context); |
NewerOlder