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:              2.5em;
    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:             30%;

    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_main.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 {
        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:                3em 100px;

    font-size:              1.2em;
}
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=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;
    }
}
#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;
        }
    }
}
.flex-auto {
    flex:                   auto;
}
.item_toggler {
    font-size:              1.2em;
    font-weight:            400;
    list-style:             none;

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

    .toggle_item {
        display:            none;
        margin:             1ex 0;
        padding:            1ex 2em;
        background:         rgba(240, 240, 240, 1);

        font-size:          0.83em;
        font-weight:        100;
    }
    input:checked ~ .toggle_item {
        display:            block;
    }
}