variables.sass

// Colors
$plum:           hsl(204, 77%, 12%)
$plum-invert:    #fff
$plum-dark:      hsl(204, 77%, 32%)
$plum-light:     hsl(204, 77%, 72%)

$orange:         hsl(14, 100%, 53%)
$orange-light:   hsl(14, 100%, 93%)
$orange-dark:    hsl(14, 100%, 33%)
$yellow:         hsl(48, 100%, 67%)
$green:          hsl(141, 71%, 48%)
$blue:           hsl(217, 71%, 53%)
$purple:         hsl(271, 100%, 71%)
$purple-dark:    hsl(271, 100%, 51%)
$purple-light:   hsl(271, 100%, 91%)
$red:            hsl(4, 100%, 61%)

$orange-invert:  findColorInvert($orange)
$yellow-invert:  findColorInvert($yellow)
$green-invert:   findColorInvert($green)
$blue-invert:    findColorInvert($blue)
$purple-invert:  findColorInvert($purple)
$red-invert:     findColorInvert($red)

$html5: #FD4011
$html5-bis: #FF7D45
$html5-invert: findColorInvert($html5)

// Social
$facebook:    #3b5998
$github:      #333333
$instagram:   #3f729b
$hacker-news: #ff6600
$soundcloud:  #ff8800
$twitter:     #55acee
$rss:         #f26522

// Inferred
$text:         hsl(0, 0%, 30%)
$text-lighter: hsl(0, 0%, 70%)
$text-light:   hsl(0, 0%, 50%)
$text-strong:  hsl(0, 0%, 20%)

$primary: $orange
$primary-invert: $orange-invert
$primary-light: $orange-light
$primary-invert: $orange-invert

$link: $blue
$link-invert: $blue-invert

$background: hsl(0, 0%, 95%)
$border: hsl(0, 0%, 90%)

// Typography
$family-primary: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif
$family-monospace: "Inconsolata", "Source Code Pro", "Consolas", "Monaco", "Courier", monospace

$weight-light: 300
$weight-normal: 400
$weight-bold: 700

// Dimensions
$logo-width: 190px
$menu-width: $logo-width + (2 * 18px)
// $menu-width: 240px
$header-height: calc(100vh - #{$menu-width})

// Miscellaneous
$shadow: 0 0 1rem rgba(#000, 0.1)
$speed: 300ms