MasterPassword/_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:              2em;
    text-align:             center;
}
h2 {
    margin:                 2em 0 1em;

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

    img {
        display:            block;
        width:              auto;
        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;
}
h4 {
}
h5 {
    margin:                 0;

    font-size:              0.8em;
    text-align:             center;
    color:                  rgba(200, 200, 200, 1);
}
hr {
    margin:                 2em -2em 1em;
}
a, a:link, a:visited, a:hover {
    color:                  inherit;
}
q {
    font-style:             italic;
}
nav {
    display:                flex;

    font-weight:            400;
    text-align:             center;

    @media screen and (min-width: 1024px) {
        font-size:          1.8em;
    }

    &>* {
        flex:               2;

        .popup {
            display:        none;
        }
    }
}
#spectre {
    display:                flex;
    align-items:            center;
    justify-content:        center;
    height:                 2em;
    transition:             all .38s ease-in 0s;
    background:             #0E3345 url("https://spectre.app/images/iphone.png") no-repeat 107% 53%;
    color:                  #41A0A0;
    border-bottom:          1px solid #173D50;

    &:hover {
        height:             5em;
    }

    p {
        margin:             0;
    }

    a, a:link, a:visited, a:hover {
        color:              #F0FFFF;
    }
}
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:            -1;
        left:               0;
        right:              0;
        top:                0;
        bottom:             -70px; /* This is to deal with some kind of weird paroller bug that gives us blank space at the bottom otherwise. */

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

        color:              white;
        text-align:         center;
    }
    nav:first-child {
        position:           absolute;
        padding:            0 20px;
        margin:             0;
        left:               0;
        right:              0;

        background:         rgba(0, 0, 0, 0.8);
        color:              white;

        @media screen and (min-width: 1024px) {
            padding:        0 100px;
        }

        &>*: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;
        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 20px;

    font-size:              1.2em;

    video {
        margin:                 1ex 2%;
        width:                  96%;

        border-radius:          4px;
        box-shadow:             0 1px 3px rgba(0, 0, 0, 0.6);
        object-fit: contain;
        box-sizing:             border-box;
    }

    @media screen and (min-width: 1024px) {
        padding:            2em 100px;
    }
}
footer {
    padding:                2em 20px;

    border-top:             1px solid rgba(200, 200, 200, 1);
    background:             rgba(240, 240, 240, 1);

    @media screen and (min-width: 1024px) {
        padding:            2em 100px;
    }

    & > 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 {
    margin:         0 8px;

    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;

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

            font-weight:        100;

            @media screen and (min-width: 1024px) {
                padding:        1ex 2em;
            }
        }
        &:checked + label + div {
            display:block;
        }
    }
}
.flex-auto {
    flex:                   auto;
}