@import "./shared/_base_mixins.less";
@import "_colors.less";
@import "_typography.less";
@import "_element_styles.less";

///////////////////
// HEADER STYLES //
///////////////////

//noinspection CssOverwrittenProperties
header#primary {
    margin-bottom: 3rem;
    padding-bottom: 2rem;
    .dotted-border(bottom, @grey-light);
    margin-bottom: 1rem;

    h1 {
        font-size: @font-size-xxl;

        a {
            text-decoration: none;
            color: inherit;

            &:hover {
                background-color: transparent;
            }
        }
    }

    nav {
        .horizontal-list(1rem, 1rem);
        font-size: @font-size-large;
        margin-top: 1px;

        li {
            &:first-child {
                margin-left: -1rem
            }

            a {
                .border-radius();
                padding: .4rem 1rem;
                margin-left: -.7em;
            }
        }

        li.current a {
            color: @red;
            &:hover {
                color: @red;
                background-color: transparent;
            }
        }
    }
}

header#secondary {
    margin-bottom: 2rem;
    h1 {
        font-size: @font-size-xxxl;
    }
}

////////////////////
// ARTICLE STYLES //
////////////////////

.post-content {
    h1, h2, h3, h4, h5, h6 {
        a {
            text-decoration: none;
        }
    }

    h2, h3, h4, h5, h6 {
        margin-top: 1.5em;
        margin-bottom: .5rem;
    }

    h1 {
        font-size: @font-size-xxxl;
        margin-bottom: 1.5rem;
        margin-top: 1.5rem;
    }

    h2 {
        font-size: @font-size-xl;
    }

    h3 {
        font-size: @font-size-medium;
    }

    h4, h5, h6 {
        font-size: @font-size-normal;
    }

    hr {
        margin: 1rem 0;
    }

    a {
        text-decoration: underline;

        &:hover {
            text-decoration: none;
        }
    }

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

        li {
            margin: 0.5rem 0;
        }

        & > li:before {
            content: "»";
            padding-right: .5rem;
            margin-left: -1rem;
        }
    }

    sup a {
        text-decoration: none;
    }

    .permalink, .attribution {
        font-size: @font-size-small;
        color: @grey;

        &:not(:first-child):before {
            content: " | ";
        }

        a {
            text-decoration: none;
        }
    }

    time {
        font-size: @font-size-default;
        font-weight: bold;
        color: @red;
    }

    table {
        border: 1px solid @grey-light;
        border-collapse: separate;
        border-spacing: 0;
        .border-radius(4px);
        margin-bottom: .5rem;
        width: 100%;
        max-width: 100%;
    }

    th {
        font-weight: bold;
    }

    th, td {
        border-left: 1px solid @grey-light;
        border-top: 1px solid @grey-light;
        vertical-align: top;
        padding: 8px;
        text-align: left;
    }

    thead {
        tr:first-child {
            td, th {
                border-top: none;
                &:first-child {
                    border-left: none;
                }
            }
        }
    }

    tbody {
        tr {
            td:first-child {
                border-left: none;
            }
        }
    }
}

.rollup {
    margin-bottom: 2.5rem;

    h1 {
        margin: 0;
        font-size: @font-size-xxl;
    }

    time {
        color: @grey;
        font-weight: normal;
        font-size: @font-size-small;
    }
}

.footnote {
    font-size: @font-size-small;
    color: @grey;

    hr {
        width: 100%;
    }
}

.image {
    .border-radius(5px);
    border: 1px solid @grey-light;
    background-color: @accent;
    width: 500px;
    padding: 10px 10px 5px 10px;

    p {
        font-size: 1rem;
        margin-bottom: 0;
    }
}

.tags {
    .horizontal-list();
    font-size: @font-size-small;
    color: @grey;
    font-style: italic;

    a {
        text-decoration: none;
    }

    ul {
        display: inline;
        list-style: none;

        & > li:before {
            content: "";
            margin-left: 0;
            padding-right: 0;
        }

        & > li:not(:last-child):after {
            content: ", ";
        }
    }
}

.arrow {
    font-size: @font-size-xl;
}

a.button {
    .border-radius();
    border: solid 1px @grey-light;
    background-color: @accent;
    padding: 10px;
    text-decoration: none;
    margin-left: 0;
    display: inline-block;

    &:hover {
        border-color: @blue;
        background-color: @blue;
        color: @white;
    }

    .arrow {
        font-size: @font-size-medium;
    }
}

.archives {
    h1.year {
        font-size: @font-size-xxl;
        color: @red;
        .dotted-border(bottom, @grey-light);
        padding-bottom: .25rem;
        margin-bottom: 1rem;
    }

    h1.month {
        font-size: @font-size-large;
        margin-bottom: 1rem;
    }

    article {
        margin-bottom: 1.5rem;
        &:not(:last-child) {
            margin-bottom: .5rem
        }

        h1 {
            font-weight: normal;
        }

        time.one.column {
            margin-left: 1.5rem;
            margin-right: -1.5rem;
            text-align: right;
            color: @grey;
        }
    }
}

.post-nav {
    ul {
        padding-left: 0;
    }
}

#comments {
    .dotted-border(top, @grey-light);
    padding-top: .5rem;

    h1 {
        font-size: @font-size-xl;
        line-height: 4rem;
    }
}

/////////////////////
// PYGMENTS / CODE //
/////////////////////

.linenodiv {
    color: inherit;
    font-weight: normal;
    padding-right: 10px;
}

pre, code, div.codehilite {
    // nice scrollbars in webkit
    ::-webkit-scrollbar {
        height: 10px;
        width: 10px;
    }

    ::-webkit-scrollbar-button:start:decrement, ::-webkit-scrollbar-button:end:increment {
        background: transparent;
        display: none;
    }

    ::-webkit-scrollbar-track-piece {
        background: #d0d0d0;
    }

    ::-webkit-scrollbar-thumb:vertical, ::-webkit-scrollbar-thumb:horizontal {
        background: #999;
        .border-radius(5px);
        display: block;
        height: 50px;
    }
}

pre {
    border: 1px solid @grey-light;
    .border-radius(2px);
    padding: .5rem;
    margin-left: -.5rem;
}

pre, code {
    font-size: @font-size-tiny;
    font-family: @font-mono;
    background-color: @accent;
    overflow: auto;
}

p > code, em > code, strong > code, li > code {
    .border-radius(2px);
    font-size: @font-main;
    white-space: nowrap;
    margin: 0;
    padding-left: .15rem;
    padding-right: .15rem;
    border: 1px solid @grey-light;
}

div.codehilite {
}

div.codehilite, table.codehilitetable {
    td {
        padding: 5px;
    }
}

/////////////
// SIDEBAR //
/////////////

#sidebar section {
    background-color: @accent;
    border: 1px solid @grey-light;
    .border-radius(10px);
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.4);
    margin-bottom: 2em;
    padding: 1em 20px;
    .text-center;
    overflow: hidden;

    p {
        font-size: @font-size-default;
    }

    .horizontal-list(5px, 0);

    ul li {
        padding-right: 0;
    }

    ul li:not(:last-child):after {
        content: "/";
        padding-left: 9px;
        padding-right: 5px;
    }

    hr + h1, hr + h2 {
        margin-top: 1rem;
    }
}

////////////
// SEARCH //
////////////

section#search {
    font-size: @font-size-default;
}

input.search {
    .border-radius(5px);
    font-family: @font-main;
    font-size: @font-size-default;
    margin: auto;
    width: 90%;
    background-color: @white;
    border: 1px solid @grey-light;
    padding: .2em .3em;
    color: @black;
}

input::-webkit-input-placeholder {
    color: @black;
}

input:-moz-placeholder {
    color: @black;
}

input:-ms-input-placeholder {
    color: @black;
}

////////////
// FOOTER //
////////////

footer {
    .dotted-border(top, @grey-light);
    padding-top: .5rem;
    margin-top: 1.5rem;
    font-size: @font-size-small;

    p {
        margin-bottom: 0;
    }
}

//////////////////////////////
// PHONE LAYOUT ADJUSTMENTS //
//////////////////////////////

@media only screen and (max-width: 767px) {
    header#primary {
        padding-bottom: .75rem;

        nav ul li {
            padding-right: 0;
        }
    }
}

//////////////////////////
// TEMPLATE PAGE STYLES //
//////////////////////////

.template-page {
    h1 {
    }
}
