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
$type-scale-ratio: 1.125; | |
$type-scales: ( | |
'sm': ( | |
1: 10px, | |
2: 12px, | |
3: 14px | |
), | |
'md': ( | |
1: 16px, | |
2: 18px, |
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
$colors-primitives: ( | |
brand-navy-800: #0E162F, | |
brand-navy-700: #1B2A58, | |
brand-navy-600: #394876, | |
brand-navy-500: #616A85, | |
brand-navy-400: #868A97, | |
brand-navy-300: #A8ACBB, | |
brand-navy-200: #C1C5D0, | |
brand-navy-100: #D7DAE4, | |
brand-navy-50: #E9EDF3, |
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
$colors-primitives: ( | |
brand-navy-800: #0E162F, | |
brand-navy-700: #1B2A58, | |
brand-navy-600: #394876, | |
brand-navy-500: #616A85, | |
brand-navy-400: #868A97, | |
brand-navy-300: #A8ACBB, | |
brand-navy-200: #C1C5D0, | |
brand-navy-100: #D7DAE4, | |
brand-navy-50: #E9EDF3, |
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
// TYPE MAPS | |
$type-families: ( | |
'body': ( | |
"'proxima-nova', sans-serif" | |
), | |
'heading': ( | |
"'museo-slab', serif" | |
) | |
); |
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
$type-stack: ( | |
// Sans-serif | |
helvetica: ( | |
light: ( | |
family: (Helvetica Neue, Helvetica, Arial, sans-serif), | |
weight: 200, | |
style: normal, | |
font-face: ( | |
family: 'Helvetica Neue', | |
path: 'HelveticaNeue/HelveticaNeue-Light', |
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
// | |
// Defining global values | |
// Font sizes are divided in 4 scales: | |
// - Small: 10px, 12px, 14px | |
// - Medium: 16px, 18px, 20px | |
// - Large: 22px, 24px, 32px | |
// - Extra large: 48px, 60px, 72px | |
// Sass values are transformed into | |
// CSS variables through a sass function | |
// |
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
// Mixin | |
.retina-image(@file-1x, @file-2x, @width-1x, @height-1x) { | |
background-image: url("@{file-1x}"); | |
@media | |
only screen and (-webkit-min-device-pixel-ratio: 2), | |
only screen and ( min--moz-device-pixel-ratio: 2), | |
only screen and ( -o-min-device-pixel-ratio: 2/1), | |
only screen and ( min-device-pixel-ratio: 2), | |
only screen and ( min-resolution: 192dpi), |