Pour tout problème contactez-nous par mail : support@froggit.fr | La FAQ :grey_question: | Rejoignez-nous sur le Chat :speech_balloon:

Skip to content
Snippets Groups Projects
theme.scss 2.99 KiB
Newer Older
  • Learn to ignore specific revisions
  • $dark_1: #35393c;
    $dark_2: #3c4144;
    $dark_3: #555d61;
    
    peter_rabbit's avatar
    peter_rabbit committed
    $medium_grey: #6b7880;
    
    peter_rabbit's avatar
    peter_rabbit committed
    $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;
    
    peter_rabbit's avatar
    peter_rabbit committed
    $yellow_2: #ffd000;
    
    
    // screen thresholds
    $screen_l: 900px;
    $screen_m: 780px;
    $screen_s: 560px;
    $screen_xs: 480px;
    
    
    peter_rabbit's avatar
    peter_rabbit committed
    // constants
    
    peter_rabbit's avatar
    peter_rabbit committed
    $navbar_height: 60px;
    
    peter_rabbit's avatar
    peter_rabbit committed
    $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");
    
    peter_rabbit's avatar
    peter_rabbit committed
        padding: 50px 0;
    
    peter_rabbit's avatar
    peter_rabbit committed
        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;
    
    peter_rabbit's avatar
    peter_rabbit committed
            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: 200px;
            }
    
    peter_rabbit's avatar
    peter_rabbit committed
        }
        @media screen and (max-width: $screen_s) {
            h1 {
                padding: 15px 20px 0;
            }
            p {
    
    peter_rabbit's avatar
    peter_rabbit committed
                padding: 20px 20px 30px 40px;
                text-align: justify;
    
    peter_rabbit's avatar
    peter_rabbit committed
            }
    
    peter_rabbit's avatar
    peter_rabbit committed
            .big-logo {
                flex-direction: column;
            }
        }
        &.logo-left {
    
    peter_rabbit's avatar
    peter_rabbit committed
    
    
    peter_rabbit's avatar
    peter_rabbit committed
            .grid-wrapper {
    
    peter_rabbit's avatar
    peter_rabbit committed
                h1 {
                    width: 100%;
                }
    
    peter_rabbit's avatar
    peter_rabbit committed
                display: grid;
                grid-template-columns: auto 1fr;
                grid-template-rows: auto 1fr;
                .logo {
                    grid-column: 1;
                    grid-row: 1 / span 2;
                }
    
    peter_rabbit's avatar
    peter_rabbit committed
                p {
                    margin: 0;
                }
    
    peter_rabbit's avatar
    peter_rabbit committed
            }
            @media screen and (max-width: $screen_m) {
                .grid-wrapper {
                    grid-template-columns: 1fr;
                    .logo {
                        padding: 0 20px;
                        img {
                            width: 400px;
                            max-width: 100%;
                        }
                    }
                }
            }
        }
    }
    
    @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;
    
    peter_rabbit's avatar
    peter_rabbit committed
            color: $light_2;
    
    peter_rabbit's avatar
    peter_rabbit committed
            * {
    
    peter_rabbit's avatar
    peter_rabbit committed
                color: $light_2;
    
    peter_rabbit's avatar
    peter_rabbit committed
            }
            text-align: center;
            font-style: italic;
            font-weight: bold;
    
    peter_rabbit's avatar
    peter_rabbit committed
        }
    }
    
    @mixin flex-center {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: row;
    }
    
    @mixin flex-center-col {
        @include flex-center;
        flex-direction: column;
    }