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 page-contents-center {
    width: $page_contents_center_width;
    max-width: 100%;
    margin: 0 auto;
}

@mixin page-header {
    background-image: url("/assets/images/wallpaper_binary.png");
    padding: 10px 0;
    h1 {
        padding: 15px 40px 0;
        font-size: 25px;
        color: $blue_2;
        margin: 0 auto;
    }
    p {
        color: $blue_3;
        * {
            color: $blue_3;
        }
        font-style: italic;
        padding: 15px 40px 15px 100px;
        margin: 0 auto;
    }
    @media screen and (max-width: $screen_s) {
        h1 {
            padding: 15px 20px 0;
        }
        p {
            padding: 15px;
        }
    }
}

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

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