header#banner {
    max-width: 750px;
    margin: 1em auto;
    padding: 0 2.5em 0 2.5em;
    display: grid;
    column-gap: 1em;
    grid-template-columns: min-content auto min-content;
    grid-template-areas:
        "logo nav actions";

    a.logo {
        grid-area: logo;
        place-self: center;
    }

    section.navbar {
        grid-area: nav;
        margin-left: 1em;

        ul {
            list-style: none;
            padding: 0;

            li {
                display: inline;
                line-height: 2;
                width: 100%;

                a {
                    display: inline-block;
                    padding: 0 1em;
                    margin: 0;
                    font-family: $font-main;

                    &.active {
                        background-color: rgba($color-link, 0.1);
                    }
                    &:active {
                        background-color: rgba($color-link-hover, 0.2);
                    }
                }
            }

            li.sub > a {
                padding-left: 1.5rem;
            }
        }
    }

    section.actions {
        grid-area: actions;
        justify-self: end;
        align-self: center;
        display: flex;

        a {
            margin-left: 1em;
        }

        a svg {
            fill: $logo-color;
        }

        a.navbar-toggle {
            display: none;
        }
    }
}

main {
    margin: 0 2.5em;
    color: $color-text;
    transition: color 0.2s ease;
}

content {
    font-family: $font-read;
    padding: 0.5em 2.5em 0 2.5em;
    overflow-x: auto;
    overflow-y: visible;
    transition: background-color 0.2s ease;

    // TODO: update this
    margin: 0 auto;
    max-width: 750px;
    display: block;

    #{headings(1,6,"header >")} {
        margin: 0;
        padding-bottom: 0.3em;
        border-bottom: 0;
    }
}

content > header {
    margin: 0;
    transition: border 0.2s ease;

    #{headings(1,6)} {
        margin: 0;
    }
}

content ul,
content ol {
    padding-left: 1em;
    line-height: 1.5;
}
content ul {
    list-style-type: disclosure-closed;
}

article {
    padding: 1em 0 2em 0;
    transition: border 0.2s ease;

    // Hack to fix <pre> overflow
    width: 100%;
    display: table;
    table-layout: fixed;

    p {
        text-align: justify;

    }

    a {
        text-decoration: underline;
    }

    #{headings(1,6)} {
        a {
            text-decoration: none;
        }
    }
}

article.single {
    padding: 0;
}

footer {
    font-family: $font-main;
}

body > footer {
    max-width: 750px;
    padding: 0 2.5em;
    margin: 0 auto 3em auto;

    line-height: 1.5;

    ul {
        display: inline;
        list-style: none;
        margin-top: 0;
        margin-left: 0.5em;
        padding: 0;

        li {
            display: inline;
            margin-right: 0.5em;
        }
    }
}