theme.scss

$dark_1: #35393c;
$dark_2: #3c4144;
$dark_3: #555d61;
$medium_grey: #6b7880;
$light_0: #d4d9dd;
$light_1: #96a5ae;
$light_2: #aabbc8;
$magenta: #ff00ff;
$purple: #902f90;
$green: #00ff00;
$kaki: #368736;
$blue_1: #1c3db2;
$blue_2: #4baabb;
$blue_3: #72e3f0;
$red_1: #9c3030;
$red_2: #e74949;
$yellow_1: #e5a002;
$yellow_2: #ffd000;

// screen thresholds
$screen_l: 900px;
$screen_m: 780px;
$screen_s: 560px;
$screen_xs: 480px;

// constants
$navbar_height: 60px;
$page_contents_center_width: 1300px;

// mixins

@mixin flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
}

@mixin flex-center-col {
    @include flex-center;
    flex-direction: column;
}

@mixin page-contents-center {
    width: $page_contents_center_width;
    max-width: 100%;
    margin: 0 auto;
    @media screen and (max-width: $page_contents_center_width) {
        padding: 20px 20px 0;
    }
}