MasterPassword/public/site/2015-05/_sass/_layout.scss

@import url('https://fonts.googleapis.com/css?family=Rubik:300,400|Rubik+Mono+One');

html, body {
    width:                  100%;
    height:                 100%;

    font-family:            'Rubik', sans-serif;
    font-weight:            300;
    text-align:             justify;
}
body * {
    /*outline: 1px solid rgba(255, 0, 0, 0.5);/**/
}
h1 {
    margin:                 0;

    font-family:            'Rubik Mono One', sans-serif;
    font-size:              4em;
    text-align:             center;
}
h2 {
    margin:                 3em 0 2em;

    font-size:              2em;
    font-weight:            400;
    text-align:             center;

    img {
        display:            block;
        height:             4em;
        margin:             auto;
    }
}
h3 {
    margin:                 2em 0 1em;

    font-size:              1.5em;
    font-weight:            400;
}
hr {
    margin:                 2em -2em 1em;
}
a, a:link, a:visited, a:hover {
    color:                  inherit;
}
q {
    font-style:             italic;
}
nav {
    display:                flex;

    font-size:              1.8em;
    font-weight:            400;
    text-align:             center;

    &>* {
        flex:               1;
        border:             0 solid transparent;
        border-width:       0 0.5ex;

        .popup {
            display:        none;
        }
    }
}
header, section {
    width:                  100%;
    min-height:             90%;
}
header {
    display:                flex;
    position:               relative;
    overflow:               hidden;

    flex-direction:         column;
    justify-content:        stretch;
    align-items:            stretch;

    &::before, &::after {
        position:           absolute;
    background-size:        cover !important;
    opacity: 0;
    transition: 0.3s opacity;
        z-index: -1;
        width: 100%;
        height: 100%;
        content: " ";
    }
    &::after {
        z-index: -2;
    background:             url('../img/hero_ios.jpg') center top;
    opacity: 1;
    }
    &.hero_ios::before {
        background:   url('../img/hero_ios.jpg') center top;
    opacity: 1;
    }
    &.hero_android::before {
        background:   url('../img/hero_android.jpg') center center;
    opacity: 1;
    }
    &.hero_mac::before {
        background:   url('../img/hero_mac.jpg') center center;
    opacity: 1;
    }
    &.hero_desktop::before {
        background:   url('../img/hero_desktop.jpg') center bottom;
    opacity: 1;
    }
    &.hero_cli::before {
        background:   url('../img/hero_cli.jpg') center center;
    opacity: 1;
    }
    &.hero_web::before {
        background:   url('../img/hero_web.jpg') center center;
    opacity: 1;
    }
    h1 {
        height:             1em;

        color:              white;
        text-align:         center;
    }
    nav:first-child {
        margin:             0 2em;

        color:              white;

        &>*:first-child {
            text-align:     left;
            font-variant:   small-caps;
            font-weight:    300;
        }
        &>*:last-child {
            text-align:     right;
            font-variant:   small-caps;
            font-weight:    300;
        }
    }
    nav:last-child {
        align-content:      space-evenly;

        color:              white;
        background: rgba(255, 255, 255, 0.1);

        &>*.active, &>*:hover, &:hover>*:hover {
            background:     rgba(255, 255, 255, 0.1);
            border-bottom:  3px solid;
        }
        &>*, &:hover>* {
            transition:     all 0.3s;
            background:     rgba(255, 255, 255, 0.0);
            border-bottom:  3px solid transparent;
            border-radius:  6px 6px 0 0;
        }
    }
}
section {
    box-sizing:             border-box;
    padding:                3em 100px;

    font-size:              1.2em;
}
.flex-auto {
    flex:                   auto;
}
.item_toggler {
    .toggle_item {
        display:            none;
    }
    input:checked ~ .toggle_item {
        display:            block;
    }
}