/* Copyright 2018 Oliver Smith
   SPDX-License-Identifier: GPL-3.0-or-later */

/* LINKS */
a {
    color: black;
}

a:hover {
   color: #0d8000;
}

/* GRID: OUTER */
body {
    display: grid;
    grid-template-areas: ". header ."
                         ". main   ."
                         ". footer .";
    grid-template-columns: auto minmax(340px, 1024px) auto;
    margin: 0px;

    background: #f5f5f5;
    font-family: sans-serif;
    line-height: 2;
    font-size: 13pt;
}

/* MAIN */
main {
    grid-area: main;
    background: white;
}

h1 {
    font-size: 25pt;
}

.content {
    padding: 10px 30px 40px;
}

.content.alt {
    background: #eee;
}

.codehilite pre {
    font-size: 10pt;
    overflow: auto;
}

.separator {
    background-image: url(/static/img/header.jpg);
    height: 10px;
}

/* GRID: HEADER */
.header {
    grid-area: header;
    display: grid;
    grid-template-areas: "logo   . nav"
                         ".      . nav"
                         "slogan . ."
                         "slogan . disclaimer"
                         "slogan . latest-news";
    grid-template-columns: auto 1fr auto;

    background-image: url(/static/img/header.jpg);
    background-repeat: no-repeat;
    background-position: left bottom;
}

/* SLOGAN AND DISCLAIMER */
.slogan,
.slogan-smallwidth {
    grid-area: slogan;

    color: white;
    font-weight: bold;
    text-shadow: 0px 0px 3px black;
}
.slogan {
    padding: 30px;

    font-size: 25pt;
    line-height: 35pt;
}
.slogan-smallwidth {
    /* displayed instead of .slogan for small screen width, see below */
    display: none;
    font-size: 12pt;
    line-height: 17pt;

    padding: 5px 20px;
}

.slogan small {
    font-size: 15pt;
    line-height: 1;
}

.disclaimer {
    grid-area: disclaimer;
    text-align: right;
}
.disclaimer-text {
    background: #000000d1;
    margin: 15px 30px 10px;
    padding: 5px 10px;
    color: white;
    font-weight: bold;
    font-size: 10pt;
}
.disclaimer .green {
    color: #090;
}
.latest-news {
    grid-area: latest-news;
    background: #000000d1;
    color: white;
    font-size: 9pt;
    font-weight: bold;
    margin: 5px 30px 15px;
    padding: 2px 10px;
    text-align: right;
}
.latest-news a {
    color: white;
    margin: 15px 0px;
}
.latest-news a:hover {
   color: #0d8000;
}

/* GRID: LOGO */
.logo {
    grid-area: logo;
    display: grid;
    align-items: center;
    grid-template-areas: "logo-img logo-span";
    grid-template-columns: 90px 1fr;
    padding: 10px 0px 0px;
    margin-left: 30px;
    min-height: 90px;

    text-decoration: none;
}

.logo img {
    grid-area: logo-img;

    width: 75px;
    height: 75px;
    filter: drop-shadow(0px 0px 3px black);
}

.logo span {
    grid-area: logo-span;
    font-size: 25pt;

    text-shadow: 0px 0px 3px black;
    color: white;
}

/* GRID: NAVIGATION */
.nav {
    grid-area: nav;
    display: grid;
    grid-template-areas: "nav-row1"
                         "."
                         "nav-row2"
                         "."
                         "nav-row3"
                         "."
                         "nav-row4";
    grid-template-rows: auto
                        6px
                        auto
                        6px
                        auto
                        6px
                        1fr;
    text-align: right;
    margin: 15px 30px;
}

.nav-row1 {
    grid-area: nav-row1;
}

.nav-row2 {
    grid-area: nav-row2;
}

.nav-row3 {
    grid-area: nav-row3;
}

.nav-row4 {
    grid-area: nav-row4;
}

.nav a {
    font-size: 14pt;
    background: #ffffffcf;
    padding: 5px 4px;
    margin-left: 1px;
    text-decoration: none;
}

#nav-download {
    background: #009900bf;
}
#nav-download:hover {
    color: white;
}

/* GRID: FOOTER */
footer {
    grid-area: footer;
    display: grid;
    grid-template-areas: "contribute . nav-bottom"
                         "contribute . copyright";
    grid-template-columns: auto 1fr auto;
    align-items: center;

    background-image: url(/static/img/header.jpg);
}

.nav-bottom {
    grid-area: nav-bottom;
    margin: 15px 30px 0px;
    text-align: right;
}

/* GRID: ICON BUTTON */
.icon-button {
    display: inline-grid;
    grid-template-areas: "icon-button-icon icon-button-label";
    grid-template-columns: auto auto;
    padding: 0px 10px;
    align-items: center;
    background: white;
    text-decoration: none;
    margin-left: 2px;
}

.icon-button img {
    grid-area: icon-button-icon;
    width: 16px;
    height: 16px;
    margin-right: 5px;
}

.icon-button span {
    grid-area: icon-button-label;
    text-decoration: none;
}

.icon-button:hover img {
    /* Obviously this changes the color to green */
    filter: sepia(1) saturate(5) hue-rotate(80deg);
}

.contribute {
    grid-area: contribute;
    font-size: 20pt;
    padding: 10px 20px;
    margin: 0px 30px;
}
.contribute span {
    text-decoration: none;
}

.contribute img {
    width: 48px;
    height: 48px;
    margin-right: 10px;
}

.copyright {
    grid-area: copyright;

    color: white;
    margin: 5px 30px 15px;
    font-size: 11pt;
    text-align: right;
}

/* RESPONSIVENESS */
@media screen and (max-width: 800px) {
    /* HEADER */
    .header {
        grid-template-areas: "logo       nav        nav"
                             ".          nav        nav"
                             "slogan     slogan     slogan"
                             "disclaimer disclaimer disclaimer"
                             "latest-news latest-news latest-news";
    }
    .logo span {
        font-size: 20pt;
    }
    .disclaimer {
        text-align: left;
    }
    .latest-news {
        margin-right: auto;
        text-align: left;
    }

    /* MAIN */
    .codehilite pre {
        font-size: 8pt;
    }

    /* FOOTER */
    footer {
        grid-template-areas: "contribute"
                             "nav-bottom"
                             "copyright";
        grid-template-columns: 100%;
    }
    .nav-bottom {
        text-align: center;
    }
    .nav-bottom .icon-button {
        margin: 0px 2px 10px;
    }
    .nav-bottom .icon-button img {
        margin-right: 10px;
    }
    .contribute {
        margin: 15px auto 0px;
    }
    .copyright {
        text-align: center;
    }
}
@media screen and (max-width: 600px) {
    /* HEADER */
    .header {
        grid-template-areas: "logo"
                             "slogan"
                             "nav"
                             "disclaimer"
                             "latest-news";
        grid-template-columns: 100%;
    }
    .slogan-smallwidth {
        display: block;
    }
    .slogan {
        display: none;
    }
    .logo {
        margin-left: 0px;
        padding-left: 20px;
    }
    .nav {
        text-align: left;
        margin-left: 20px;
    }
    .nav a {
        margin-left: 0px;
        margin-right: 5px;
    }
    .latest-news,
    .disclaimer-text {
        margin-left: 20px;
    }
}