@import "../../engineer/baseline.less";
@import "_mixins.less";
@import "_colors.less";
@import "_typography.less";
@import "../../engineer/_solarized.less";

.replace_me {
    background-color: yellow;
}

// Max width for the site
.row {
    max-width: 1000px;
}

// Variables //
@border: 5px solid @purple;

////////////////////
// ELEMENT STYLES //
////////////////////
.link-color(@green, @orange)

;

body {
    background-color: @bg;
    border-top: @border;
    border-bottom: @border;
    color: @blue;
    font-family: @font-main;
    .font-size-default();
    margin: 0;
}

header,
h1, h2, h3, h4, h5, h6 {
    font-family: @font-heading;
}

p, p + div, blockquote {
    .font-size-default();
}

ul + p, ol + p {
    .font-size-default(1, 1);
}

ul {
    padding-left: 21px;
    li {
        text-indent: -9px;
    }
}

ol {
    padding-left: 21px;
}

hr {
    border-top: none;
    border-bottom: 3px dotted @purple;
    border-left: none;
    border-right: none;
    clear: both;
    width: 20%;
}

blockquote {
    padding: 0 10px 0 20px;
    margin-left: 15px;
    border-left: @border;

    p, div {
        font-style: italic;

        strong {
            font-weight: bold;
        }

        em {
            font-weight: bold;
            font-style: normal;
        }
    }
}

table {
    border: 1px solid @bg-accent;
    border-collapse: separate;
    border-spacing: 0;
    .border-radius(4px);
    .margin-calc(@line-height-default, 0, 1, -1px, -1px);
    width: 100%;
    max-width: 100%;
}

th {
    font-weight: bold;
}

th, td {
    border-left: 1px solid @bg-accent;
    border-top: 1px solid @bg-accent;
    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;
        }
    }
}

sup {
    .font-size-tiny();
    vertical-align: baseline;
    position: relative;
    top: -.99ex;
}

dl {
    dt {
        font-weight: bold;
        .font-size-default(0, 0);
    }

    dd {
        margin-left: 25px;
        .font-size-default();
    }
}

article {
    .bulleted-list();

    h1, h2, h3, h4, h5, h6 {
        color: @green;
    }

    h1 {
        .font-size-large(.8, .2);
    }

    header h1 {
        .font-size-large(.5, .5);
    }

    h2 {
        .font-size-medium(.8, .2);
    }

    h3, h4, h5, h6 {
        .font-size-default(.8, .2);
    }

    p:first-child {
        .font-size-default(1, 1);
    }
}

.post-links ul.block-grid {
    &.two-up, &.three-up {
        li:first-child {
            text-align: left;
            a {
                margin-left: -4%;
            }
        }

        li:last-child {
            text-align: right;
        }
    }
}

.image {
    .border-radius(5px);
    background-color: @bg-accent;
    padding: 10px 10px 0 10px;
    width: 500px;

    &.caption {
        padding: 10px 10px 0 10px;
        p {
            font-size: 1.5rem;
            padding-bottom: 8px;
        }
    }
}

.button {
    .border-radius(2px);
    background-color: @bg-accent;
    padding: 10px;

    &:hover {
        background-color: @orange;
        color: @bg-accent;
    }
}

// PYGMENTS / CODE
.linenodiv {
    color: @light;
    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: @bg-accent;
    }

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

pre {
    border: 1px solid @bg-accent;
    border-left: 10px solid @bg-accent;
    padding-left: 5px;
    margin: 0 0 0 -15px;
}

pre, code {
    .font-size-small();
    font-family: @font-mono;
    overflow: auto;
}

p > code, em > code, strong > code {
    white-space: nowrap;
    .font-size-default();
    margin: 0;
}

div.codehilite {
    .margin-calc(@line-height-default, 0, 1, -1px, -1px);
}

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

// TOP HEADER
header#primary {
    h1 {
        .font-size-xxl(1, 0);
        .margin-calc(@line-height-double, .9, .1, -5px, -5px);
        .link-color-single(@strong-blue);
    }

    nav {
        .font-size-xl(1, 0);
        .margin-calc(@line-height-double, .9, .1, -1px, -5px);
        .link-color(@strong-blue, @orange);
        .horizontal-list(0, 16px);
        text-align: right;

        ul {
            li.current {
                .link-color(@orange-burnt, @orange);
            }
        }
    }

    span.highlight {
        color: @orange-burnt;
    }

    padding-bottom: 20px;
    border-bottom: @border;
}

// SECTION HEADER
header#secondary {
    h1 {
        .font-size-large(.5, .5);
        color: @green;
    }

    nav {
        .font-size-medium(1, 1);
        float: right;
        text-align: right;
        .horizontal-list(0, 16px);
    }

    border-bottom: 2px dotted @purple;
}

// POSTS
@media only screen and (min-width: 767px) {
    .post-info {
        font-family: museo-slab;
        text-align: center;

        .post-date {
            .font-size-default(1, 0);
            text-transform: uppercase;
            @calendar-border: 1px dotted @purple;
            border-bottom: @calendar-border;

            .day {
                font-family: kulturista-web, museo-sans, deva-ideal, obliqua;
                font-style: normal;
                font-weight: 700;
                font-size: 72px;
                line-height: 75px;
            }
        }
    }
}

// SIDEBAR
#sidebar {
    section {
        .border-radius();
        background-color: lighten(@bg, 7%);
        .font-size-default(.5, .5);
        .text-center;
        padding: .5em;
        overflow: hidden;
        p {
            .font-size-default(0, 0);
            .bulleted-list();
        }

        .horizontal-list(5px, 0);
        ul li {
            padding-right: 0;
        }
        ul li:not(:last-child) {
            &:after {
                content: "/";
                padding-left: 9px;
                padding-right: 5px;
            }
        }

        &.twitter {
            .text-left;

            h1 {
                .text-center;
                .font-size-medium(0, .5);
            }

            ul {
                li {
                    text-indent: 0;
                    padding-right: 0;
                    display: block;
                }

                li:not(:last-child):after {
                    height: 0px;
                    border-bottom: 3px dotted @purple;
                    width: 20%;
                    display: block;
                    margin: .5em auto;
                    content: "";
                }
            }

            .tweet_time {
                display: block;
                .font-size-tiny(0, 0);
                .text-right;
                text-transform: uppercase;
            }
        }
    }
}

// FOOTER
footer {
    border-top: 3px dotted @purple;
    padding-top: .5 * @line-height-default;
    .font-size-small(.5, .5);
    margin-top: .5 * @line-height-default !important;
    text-align: center;
}

.archives {
    h2 {
        .font-size-large(.2, 0);
    }
    article {
        border-bottom: 1px dotted @purple;
        .post-date {
            .font-size-default(.7, .3);
        }
        h1 {
            .font-size-medium(.7, .3);
        }
    }
}

div.row.archives {
    .font-size-default(2, 0);
}

// MISCELLANEOUS
.permalink {
    a {
        font-family: Verdana, sans-serif;
    }
    .link-color(@purple, @orange);
    font-size: 26px;
}

.attribution {
    .link-color(@purple, @orange);
}

.arrow {
    .font-size-xl();
    color: @bg-accent;
}

ul.tags {
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: left;
    overflow: hidden;

    li {
        display: inline-block;
        height: @line-height-default;
        line-height: @line-height-default;
    }

    .link-color(@light-blue, @orange);

    a {
        position: relative;
        text-indent: 0;
        text-transform: uppercase;
        font-family: @font-main;
        .font-size-tiny();
        margin-left: 20px;
        padding: 2px 10px 3px 10px;
        background: @bg-accent;
        text-decoration: none;
        .border-radius(0px 2px 2px 0px);

        &:before {
            content: "";
            float: left;
            position: absolute;
            left: -10px;
            top: 0;
            width: 0;
            height: 0;
            border-color: transparent @bg-accent transparent transparent;
            border-style: solid;
            border-width: 10px 10px 10px 0;
        }

        &:after {
            content: "";
            position: absolute;
            top: 8px;
            left: 0;
            float: left;
            width: 4px;
            height: 4px;
            background: @bg;
        }
    }
}

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

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

        h1 {
            margin-top: 0;
            margin-bottom: 0;
        }

        nav {
            margin-top: 0;
            text-align: left;

            ul li {
                padding-left: 0;
                padding-right: 16px;
            }
        }
    }

    .post-info {
        .margin-calc(@line-height-default, .5, .5, 0px, 0px);
        padding-bottom: @line-height-default * .5;
        border-bottom: 1px dotted @purple;
        margin-bottom: 0;

        .post-date, .post-date div, div.attribution {
            display: inline;
        }

        ul.tags {
            display: none;
        }

        .post-date {
            font-family: @font-heading;

            .day {
                font-size: @font-size-base;
                line-height: @line-height-default;
            }
        }

        .permalink, .attribution {
            font-size: @font-size-base;

            &:before {
                content: " / ";
            }
        }
    }

    article {
        header {
            border-bottom: 1px dotted @purple;
            h1 {
                .font-size-xl(.5, .5);
                .link-color(@green, @orange);
            }
        }
    }
}

///////////////////////////////
// TABLET LAYOUT ADJUSTMENTS //
///////////////////////////////
@media only screen and (max-width: 950px) and (min-width: 767px) {
    .post-info .post-date .day {
        font-size: 50px;
        line-height: 50px;
    }
}
