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);/**/
}
img {
    margin:                 1ex 1em;

    border-radius:          4px;
    box-shadow:             0 1px 3px rgba(0, 0, 0, 0.6);
}
h1 {
    margin:                 0;

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

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

    img {
        display:            block;
        height:             5em;
        margin:             auto;
        padding:            0 1ex;

        border-bottom:      4px solid black;
        box-shadow:         none;
    }

    input {
        height:             1em;
    }
}
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%;
}
header {
    display:                flex;
    position:               relative;
    overflow:               hidden;
    min-height:             40%;

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

//    .hero {
//        position: absolute;
//        z-index: -2;
//        left: 0;
//        right: 0;
//        top: 0;
//        bottom: 0;
//
//        .img {
//            position: absolute;
//            top: 0;
//            left: 0;
//            bottom: 0;
//            right: 0;
//            margin: 0;
//
//            background-color:   black;
//            background-size:    cover !important;
//            background:         url('../img/hero_main.jpg') center top;
//        }
//    }
//    &[data-hero=ios] .img {
//                background:         url('../img/hero_ios.jpg') center center;
//            }
//    &[data-hero=android] .img {
//                background:         url('../img/hero_android.jpg') center center;
//            }
//    &[data-hero=mac] .img {
//                background:         url('../img/hero_mac.jpg') center top;
//            }
//    &[data-hero=desktop] .img {
//                background:         url('../img/hero_desktop.jpg') center bottom;
//            }
//    &[data-hero=cli] .img {
//                background:         url('../img/hero_cli.jpg') center bottom;
//            }
//    &[data-hero=web] .img {
//                background:         url('../img/hero_web.jpg') center center;
//            }
//    .hero img.main {
//        display: block;
//        z-index: -1;
//    }
//    &[data-hero=ios] .hero img.ios {
//        display: block;
//    }
//    &[data-hero=android] .hero img.android {
//        display: block;
//    }
//    &[data-hero=mac] .hero img.mac {
//        display: block;
//    }
//    &[data-hero=desktop] .hero img.desktop {
//        top: auto;
//        bottom: -90px;
//        display: block;
//    }
//    &[data-hero=cli] .hero img.cli {
//        display: block;
//    }
//    &[data-hero=web] .hero img.web {
//        display: block;
//    }


        background-color:   black;
        background-size:    cover !important;
        background:         url('../img/hero_main.jpg') center top;
    &[data-hero=ios] {
        background:         url('../img/hero_ios.jpg') center center;
    }
    &[data-hero=android] {
        background:         url('../img/hero_android.jpg') center center;
    }
    &[data-hero=mac] {
        background:         url('../img/hero_mac.jpg') center top;
    }
    &[data-hero=desktop] {
        background:         url('../img/hero_desktop.jpg') center bottom;
    }
    &[data-hero=cli] {
        background:         url('../img/hero_cli.jpg') center bottom;
    }
    &[data-hero=web] {
        background:         url('../img/hero_web.jpg') center center;
    }
    h1 {
        height:             1em;

        color:              white;
        text-align:         center;
    }
    nav:first-child {
        position:           fixed;
        padding:            0 2em;
        margin:             0;
        left:               0;
        right:              0;

        background:         rgba(0, 0, 0, 0.8);
        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: black;
        color:              white;
        text-shadow:        0 1px 1px white;
        text-shadow:        0 1px 1px black;
        background: rgba(0, 0, 0, 0.6);
        background: rgba(255, 255, 255, 0.4);

        &>*.active, &>*:hover, &:hover>*:hover {
            background:     rgba(255, 255, 255, 0.6);
            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;
        }
    }
}
header.large, section {
    min-height:             90%;
}
section {
    box-sizing:             border-box;
    padding:                2em 100px;

    font-size:              1.2em;
}
footer {
    padding:                2em 100px;

    background:             rgba(240, 240, 240, 1);

    & > div {
        display:                flex;

        & > div {
            flex:               1;

            ul {
                list-style:     none;
            }
        }
    }

    p {
        font-size:          smaller;
        color:             rgba(180, 180, 180, 1);
    }
}
input {
    margin:                 0 0.3ex;

    font:                   inherit;
    background:             rgba(240, 240, 240, 1);
    box-shadow:             0 0 1px black;
    border-radius:          4px;
    border:                 none;
    outline:                none;
}
input:hover {
    background:             rgba(200, 200, 200, 1);
}
input[type=button] {
                cursor:             pointer;
}
input[type=checkbox] {
    display:                none;

    & + label::before {
        display:            inline-block;
        content:            '';
        margin:             0 1ex;

        background:         rgba(240, 240, 240, 1);
        box-shadow:         0 0 1px black;
        border-radius:      4px;
        width:              1ex;
        height:             1ex;
    }
    &:checked + label::before {
        background:         black;
    }
}
.widget_calculator table {
    height:                 200px;
    padding:                4px;
    margin:                 1em auto;

    background:             rgba(200, 200, 200, 1);
    box-shadow:             0 1px 3px black;
    border-radius:          4px;

    tr {
        height:             20%;

        td, th {
            padding:        4px;
        }
        input {
            display:        block;
            width:          100%;
            height:         100%;
            padding:        0 1ex;
            margin:         0;
            box-sizing:     border-box;
        }
    }
}
.widget_gallery {
    box-shadow:                 0 0 1px black;
    border-radius:              4px;

    & > ul {
        display:                flex;
        list-style:             none;
        justify-content:        space-around;

        li {
            height:                 100px;

            label {
                display:            block;
                box-sizing:         border-box;
                width:              100%;
                height:             100%;
                padding:            1em;

                background:         rgba(240, 240, 240, 1);
                box-shadow:         0 0 2px black;
                border-radius:      4px;

                cursor:             pointer;

                &:hover {
                    background:     rgba(200, 200, 200, 1);
                }

                img {
                    display:        block;
                    width:          100%;
                    height:         100%;
                    margin:         0;
                    box-shadow:     none;
                }
            }
        }
    }
    input[type=radio] {
        display: none;

        & + div {
            display:none;
            margin: 1px;
            padding:                2em;
            background:         rgba(240, 240, 240, 1);
        }
        &:checked + div {
            display:block;
        }
    }
}
.widget_test ul {
    list-style:             none;

    li {
        border-left:            4px solid rgba(200, 200, 200, 1);
    }

    label {
        font-size:              1.2em;
        font-weight:            400;
    }

    input[type=checkbox] {
        & + label + div {
            display:none;
            margin:             1ex 0;
            padding:            1ex 2em;
            background:         rgba(240, 240, 240, 1);

            font-weight:        100;
        }
        &:checked + label + div {
            display:block;
        }
    }
}
.flex-auto {
    flex:                   auto;
}