weewx-sofaskin/css/scss/_site.scss

/* ==========================================================================
   Website Style
   by Sven Reifschneider
   ========================================================================== */

body {
    background: $main-bg;
}

body {
    text-align: center;
    width: 100%;
}

header {
    background: $header-bg;
    width: 100%;
    color: #fff;
    font-weight: 300;
    padding: 1em 0 0 0;
    
    a { color: $nav-link-color; transition: all 0.2s; }
    a:hover { color: $nav-link-color-hover; }
    
    h1 {
        font-size: 1.8em;
        font-weight: normal;
        margin: 0.1em 0em;
        padding: 0;
    }
    
    h2 {
        font-size: 1.4em;
        font-weight: normal;
        margin: 0.1em 0;
        padding: 0;
    }
    
    p {
        margin: 0.1em 0 0.2em 0;
        padding: 0;
    }
    
    .h-left {
        display: inline-block;
        width: 48%;
        text-align: left;
    }
    
    .h-right {
        display: inline-block;
        width: 48%;
        text-align: right;
        
        table {
            float: right;
            border: none;
            
            td {
                padding: 0.1em 0.4em;
            }
        }
    }
    
    nav {
        display: inline-block;
        text-align: left;
        width: 100%;
        font-size: 1.4em;
        font-weight: 400;
        margin: 2em 0 0 0;
        
        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }

        li {
            display: inline-block;
            padding: 0.3em 0;
            margin: 0 0.4em;
        }

        a {
            display: block;
        }
        
        select {
            display: block;
            font-size: 0.8em;
            font-weight: 300;
            border: none;
            outline: none;
            -webkit-appearance:none;
            -moz-appearance:none;
            appearance:none;
            cursor:pointer;
            background: $header-bg;
            color: #fff;
        }
        
        a {
            color: $nav-link-color;
            transition: all 0.2s;
        }
        a:hover {
            color: $nav-link-color-hover;
        }
        
        li.active {
            border-bottom: 3px solid $active-color;
            a {
                color: #fff;
            }
        }
    }
}

.container {
    display: inline-block;
    width: 1500px;
    
    .left {
        display: inline-block;
        width: 590px;
        vertical-align: top;
        margin-right: 1.5em;
    }
    
    .right {
        display: inline-block;
        width: 860px;
    }
}

.container-fix {
    display: inline-block;
    text-align: left;
    width: 980px;
}

.card {
    background: #fff;
    padding: 0.2em 1.5em 1em 1.5em;
    margin: 2em 0;
    box-sizing: border-box;
    width: 100%;
    text-align: left;
    
-webkit-box-shadow: 0px 0px 6px 0px rgba(201,201,201,1);
-moz-box-shadow: 0px 0px 6px 0px rgba(201,201,201,1);
box-shadow: 0px 0px 6px 0px rgba(201,201,201,1);
    
    img {
        max-width: 98%;
    }
    
    h1 {
        width: 100%;
        text-align: left;
        font-size: 1.5em;
        font-weight: normal;
        color: $dunkelgrau;
        padding: 0;
        border-bottom: 1px solid $hellgrau;
    }
    
    h3 {
        margin: 0.4em 0;
        padding: 0;
        color: $dunkelgrau;
    }
    
    table {
        border: none;
        width: 100%;
        
        td {
            margin: 0.2em;
            padding: 0.2em 0;
        }
    }
    
    a {
        color: $normal-link-color;
        transition: all 0.2s;
    }
    a:hover { color: $normal-link-color-hover; }
}

.cc {
    text-align: center;
}

.haelfte {
    width: 48%;
    display: inline-block;
}

footer {
    width: 100%;
    background: $header-bg;
    color: #fff;
    padding: 1.5em 0;
    
    a { color: $footer-link-color; transition: all 0.2s; }
    a:hover { color: $footer-link-color-hover; }
}

// Images
img.space {
    margin-top: 1.3em;
}

.graphs {
    img {
        margin: 0.4em 0;
        max-width: 800px;
    }
}

img.small {
    max-width: 550px;
}

.cpointer {
    cursor: pointer;
}

// Table with more padding
table.tablespacer {
    td {
        padding: 0.3em 0;
    }
    
    tr:not(:last-child)  {
        border-bottom: 1px solid $hellgrau;
    }
}

// Custom text colors
.m-grau { color: #8a8a8a; }
.m-orange { color: #f7cd35; }
.m-gruen { color: #6cc99f; }
.m-rot { color: #e6766b; }
.m-blau { color: #0ea5e6; }

// ---
// RESPONSIVE
// ---
@media (max-width: 1550px) and (min-width: 1210px) { 
    .container {
        width: 1200px!important;
        
        .left {
            width: 450px!important;
            margin-right: 0.8em!important;
        }
        
        .right {
            width: 700px!important;
        }
    }
    
    .graphs {
        img {
            margin: 0.3em 0!important;
            max-width: 100%!important;
        }
    }
    
    img.small {
        max-width: 100%!important;
    }
    
}

@media (max-width: 1209px) and (min-width: 1010px) { 
    .container {
        width: 920px!important;
        
        .left {
            width: 290px!important;
            margin-right: 0.8em!important;
        }
        
        .right {
            width: 580px!important;
        }
    }
    
    .graphs {
        img {
            margin: 0.3em 0!important;
            max-width: 100%!important;
        }
    }
    
    img.small {
        max-width: 100%!important;
    }
}

@media (max-width: 1009px) {
    .container {
        width: 100%!important;
        
        .left {
            width: 100%!important;
            margin: 0!important;
        }
        
        .right {
            width: 100%!important;
        }
    }
    
    .container-fix {
        width: 100%;
    }
    
    .graphs {
        img {
            margin: 0.2em 0!important;
            max-width: 100%!important;
        }
    }
    
    img.small {
        max-width: 100%!important;
    }
    
    .haelfte {
        width: 100%!important;
    }
    
    .card {
        margin: 1em 0;
    }
    
    header {
        width: 100%;
        box-sizing: border-box;
        padding: 0 1.5em;

        .h-left {
            display: inline-block;
            width: 100%;
        }

        .h-right {
            display: none!important;
        }

        nav {
            display: inline-block;
            width: 100%;
            font-size: 1.2em;
            margin: 0.5em 0 0 0;

            ul {
                list-style-type: none;
                margin: 0;
                padding: 0;
            }

            li {
                display: block;
                padding: 0.1em 0;
                margin: 0;
            }

            li.active {
                border-bottom: 3px solid $active-color;
                a {
                    color: #fff;
                }
            }
        }
    }
}