pogodevorg/blog.pogodev.org

$base-hue: 220;
$base-header-hue: 1;
$base-font-size: 16px;
$header-font-size: 13px;

// breakpoints
$small-screen: 735px;     // small: 735x*
$medium-screen: 1068px;   // medium: 1068x890
// large is default
$xlarge-screen: 1442px;   // xlarge: 1442x1050

// main
$main-bg-color:       hsl($base-hue, 6%, 10%);
$main-bg-color-shade: darken($main-bg-color, 2%);;
$main-color-subtle:   hsl($base-hue, 12%, 54%);
$main-color:          hsl($base-hue, 3%, 40%);
$main-color-strong:   hsl($base-hue, 0%, 80%);

$main-border-color:   hsl($base-hue, 12%, 84%);
$main-link-color:     hsl($base-header-hue, 86%, 63%);

// site header
$header-bg-color:     hsl($base-hue, 6%, 10%);
$header-color-subtle: hsl($base-header-hue, 24%, 52%);
$header-color:        hsl($base-header-hue, 86%, 63%);
$header-color-strong: hsl($base-header-hue, 76%, 90%);

// hero
$hero-bg-color:     darken($header-bg-color, 2%);
$hero-color:        $header-color;

// base
$body-color:    $main-color;
$heading-color: $main-color-strong;
$border-color:  $main-border-color;
$link-color:    $main-link-color;

// Sections
$page-header-bg-color: $main-bg-color-shade;