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
style.scss 5.46 KiB
Newer Older
  • Learn to ignore specific revisions
  • @import "./theme.scss";
    
    
    peter_rabbit's avatar
    peter_rabbit committed
    body {
    
    peter_rabbit's avatar
    peter_rabbit committed
        * {
            box-sizing: border-box;
    
            color: $dark_1;
    
    peter_rabbit's avatar
    peter_rabbit committed
        }
        font-family: Arial, Helvetica, sans-serif;
    
    peter_rabbit's avatar
    peter_rabbit committed
        margin: 0;
    
        ul {
            margin: 0;
            padding: 0;
            list-style-type: none;
        }
    
        a {
            color: $blue_2;
            text-decoration: none;
            &:hover {
                color: $blue_3;
            }
        }
    
        blue {
            color: $blue_2;
        }
    
    peter_rabbit's avatar
    peter_rabbit committed
    }
    
    main {
    
    peter_rabbit's avatar
    peter_rabbit committed
        background: url("../assets/images/wallpaper_binary_white.png");
    
        display: flex;
        flex-direction: column;
        align-items: center;
        min-height: 100vh;
        header {
            width: 100%;
            nav {
    
                display: flex;
                align-items: center;
                height: $navbar_height;
    
    peter_rabbit's avatar
    peter_rabbit committed
                background-color: #fffb;
    
                .home {
                    margin: 0 10px;
                    img {
                        width: 40px;
                    }
                }
    
                ul {
                    display: flex;
                    padding: 0;
                    margin: 0;
                    list-style-type: none;
                    li {
    
    peter_rabbit's avatar
    peter_rabbit committed
                        position: relative;
    
                        a {
                            display: flex;
    
    peter_rabbit's avatar
    peter_rabbit committed
                            align-items: center;
                            height: 100%;
    
                            padding: 10px 20px;
    
    peter_rabbit's avatar
    peter_rabbit committed
                            color: $light_1;
                            font-weight: 800;
    
                            text-decoration: none;
                        }
    
    peter_rabbit's avatar
    peter_rabbit committed
    
                        .submenu {
                            visibility: hidden;
    
    peter_rabbit's avatar
    peter_rabbit committed
                            overflow: hidden;
    
    peter_rabbit's avatar
    peter_rabbit committed
                            position: absolute;
                            height: auto;
                            max-height: 0;
    
                            transition: max-height 0.6s;
    
    peter_rabbit's avatar
    peter_rabbit committed
                            top: 100%;
                            left: 50%;
                            flex-direction: column;
    
    peter_rabbit's avatar
    peter_rabbit committed
                            background-color: white;
    
    peter_rabbit's avatar
    peter_rabbit committed
                            white-space: nowrap;
                        }
    
                        &.active {
                            a {
    
    peter_rabbit's avatar
    peter_rabbit committed
                                color: $dark_2;
                                border-bottom: 1px solid;
    
    peter_rabbit's avatar
    peter_rabbit committed
                        &:hover {
    
    peter_rabbit's avatar
    peter_rabbit committed
                                color: $dark_2;
    
    peter_rabbit's avatar
    peter_rabbit committed
                            .submenu {
                                visibility: unset;
                                max-height: 1000px;
    
    peter_rabbit's avatar
    peter_rabbit committed
                                a {
    
    peter_rabbit's avatar
    peter_rabbit committed
                                    color: $light_1;
                                    border: none;
    
    peter_rabbit's avatar
    peter_rabbit committed
                                }
                                li {
                                    &:hover {
                                        a {
    
    peter_rabbit's avatar
    peter_rabbit committed
                                            color: $dark_2;
    
    peter_rabbit's avatar
    peter_rabbit committed
                                        }
                                    }
                                }
    
    peter_rabbit's avatar
    peter_rabbit committed
                            }
                        }
    
                .burger {
                    display: none;
                }
                @media screen and (max-width: $screen_s) {
                    justify-content: space-between;
                    .burger {
                        display: flex;
                        font-weight: bold;
                        border: 1px solid;
                        margin: 0 20px;
                        cursor: pointer;
                        flex-direction: column;
                        align-items: center;
                        justify-content: center;
                        border-radius: 100%;
                        width: 25px;
                        height: 25px;
                        color: $dark_3;
                        font-size: 20px;
                    }
                    ul {
                        display: none;
                        &.responsive-show {
                            display: flex;
                            position: absolute;
                            right: 0;
                            max-width: 100vw;
                            min-width: 50vw;
                            top: $navbar_height;
                            flex-direction: column;
                            background-color: white;
                            box-shadow: 0 4px 6px 2px #0000000a;
                            li {
                                &.active {
                                    a {
                                        border: none;
                                    }
                                }
                                .submenu {
                                    display: flex;
                                    visibility: visible;
                                    position: relative;
                                    height: unset;
                                    max-height: unset;
                                    transition: max-height 0.6s;
                                    top: unset;
                                    left: unset;
                                    li {
                                        a {
                                            font-weight: 400;
                                            font-size: 12px;
                                            color: $light_1;
                                        }
                                    }
                                    margin-left: 20px;
                                }
                            }
                        }
                    }
                }
    
            }
        }
        #page-container {
            background-color: white;
            width: 1200px;
            max-width: 100%;
            flex: 1;
    
    peter_rabbit's avatar
    peter_rabbit committed
            @import "./pages/education/education.scss";
    
        }
        footer {
            width: 100%;
    
    peter_rabbit's avatar
    peter_rabbit committed
            background-color: #fff1;
            padding: 20px;
    
    peter_rabbit's avatar
    peter_rabbit committed
    }