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 1.36 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");
        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;
    }