zhdk/madek

/* Colour Palette
 *-----------------------------------------

@import "config/defaults/*"

@import "config/local/*" 

+colour-palette

/* Typography
 *-----------------------------------------

// Font sizes
$font-h               : 48px
$font-xxl             : 40px
$font-xl              : 17px
$font-l               : 15px
$font-m               : 13px
$font-s               : 12px
$font-xs              : 11px

$line-height-xl       : 2.2
$line-height-l        : 2
$line-height-m        : 1.68
$line-height-s        : 1.4
$line-height-xs       : 1.25

$default-font-family  : "Open Sans", sans-serif
$default-transition-duration : 0.5s

/* Shadows and flairs
 *-----------------------------------------
$darken-strong        : rgba(0, 0, 0, $opacity-strong)
$darken-more          : rgba(0, 0, 0, $opacity-heavy)
$darken               : rgba(0, 0, 0, $opacity-medium)
$darken-less          : rgba(0, 0, 0, $opacity-light)
$darken-subtle        : rgba(0, 0, 0, $opacity-weak)

$lighten-strong       : rgba(255, 255, 255, $opacity-strong)
$lighten-more         : rgba(255, 255, 255, $opacity-heavy)
$lighten              : rgba(255, 255, 255, $opacity-medium)
$lighten-less         : rgba(255, 255, 255, $opacity-light)
$lighten-subtle       : rgba(255, 255, 255, $opacity-weak)

/* Border radii
 *-----------------------------------------
$border-radius-s        : 3px
$border-radius-m        : 5px
$border-radius-absolute : 1000px

/* Spaces
 *-----------------------------------------
$space-x              : 5px
$space-s              : 10px
$space-m              : 20px
$space-l              : 40px
$space-h              : 60px

/* Media query variables
 *-----------------------------------------
$screen-size-xs-s     : "only screen and (max-width: 1151px)"
$screen-size-m-l      : "only screen and (min-width: 1152px) and (max-width: 1399px)"
$screen-size-xl-xxl   : "only screen and (min-width: 1400px)"
$screen-size-xxl-plus : "only screen and (min-width: 1680px)"

$screen-size-xs       : "only screen and (max-width: 1023px)"
$screen-size-s        : "only screen and (min-width: 1024px) and (max-width: 1151px)"
$screen-size-m        : "only screen and (min-width: 1152px) and (max-width: 1279px)"
$screen-size-l        : "only screen and (min-width: 1280px) and (max-width: 1399px)"
$screen-size-xl       : "only screen and (min-width: 1400px) and (max-width: 1599px)"
$screen-size-xxl      : "only screen and (min-width: 1600px)"