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: 50px 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;
        font-size: 18px;
    }
    .big-logo {
        @include flex-center;
        gap: 20px;
        padding: 20px;
        img {
            width: 200px;
            max-width: 100%;
            &.logo-text {
                width: 300px;
                max-width: 100%;
            }
        }
    }
    .logo {
        padding-left: 30px;
        @include flex-center;
        img {
            width: 100%;
        }
    }
    @media screen and (max-width: $screen_s) {
        h1 {
            padding: 15px 20px 0;
        }
        p {
            padding: 20px 20px 30px 40px;
            text-align: justify;
        }
        .big-logo {
            flex-direction: column;
        }
    }
    &.logo-left {
        .grid-wrapper {
            h1 {
                width: 100%;
            }
            display: grid;
            grid-template-columns: 120px 1fr;
            grid-template-rows: auto 1fr;
            .logo {
                grid-column: 1;
                grid-row: 1;
                width: 100%;
            }
            p {
                margin: 0;
                grid-column: 1 / span 2;
            }
        }
        @media screen and (max-width: $screen_m) {
            .grid-wrapper {
                h1 {
                    padding: 0 20px;
                }
                .logo {
                    padding: 0 20px;
                }
            }
        }
    }
}

@mixin page-philo {
    background-image: url("/assets/images/wallpaper_binary.png");
    padding: 120px 30px;
    margin: 40px 0;
    p {
        width: 100%;
        max-width: 600px;
        font-size: 18px;
        color: $light_2;
        * {
            color: $light_2;
        }
        text-align: center;
        font-style: italic;
        font-weight: bold;
    }
}

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

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