@import "fonts";
@import "normalize";
@import "global";
@import "960-responsive";
@import "syntax";

body {
    font-family: $serif;
    font-size: 20px;
    color: $black;
}

h1, h2, h3, h4, h5, h6 {
    font-family: $sans;
    font-weight: 200;
    margin-top: 1em;
    margin-bottom: 0.5em;
    text-align: center;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

a {
    color: $red;
    text-decoration: none;
    @include transition(color, $link-fade-time, ease);

    &:hover {
        color: darken($red, $link-darken-amount);
    }

    &.project {
        color: $blue;
        &:hover {
            color: darken($blue, $link-darken-amount);
        }
    }

    &.post {
        color: $magenta;
        &:hover {
            color: darken($magenta, $link-darken-amount);
        }
    }
}

p {
    line-height: 2em;
    margin-bottom: 2em;
    margin-top: 2em;
}

pre {
    margin-bottom: 1.5em;
    border-left: 3px solid $base1;
    padding-left: 1em;
}

blockquote {
    width: 80%;
    margin-right: auto;
    margin-left: auto;
    margin-top: 0;
    margin-bottom: 0;
    position: relative;

    quotes: "\201C""\201D""\2018""\2019";

    &:before {
        content: open-quote;
        color: $base1;
        font-size: 4em;
        margin: 0;
        padding: 0;
        line-height: 0;
        position: absolute;
        left: -0.7em;
        top: 0.5em;
        font-family: $monospace;
    }
}

table {
    margin-top: 1em;
    margin-bottom: 1em;
}

td {
    font-size: 0.8em;
    padding: 0.5em;
    vertical-align: top;
}

ul {
    list-style-type: square;
}

ul, ol {
    margin-left: 2em;
    margin-bottom: 1em;
}

li {
    margin-bottom: 1em;
}

code {
    font-family: $monospace;
    font-size: 0.8em;
    color: $base01;
}

footer {
    font-family: $monospace;
    text-align: center;
    border-top: 2px solid $red;
    padding-top: 1em;
    padding-bottom: 1em;
    font-size: 0.8em;
    @include transition(color, $link-fade-time, ease);
    color: $base1;

    a {
        color: $base1;
    }

    &:hover {
        color: $black;

        a {
            color: $red;
            &:hover {
                color: darken($red, $link-darken-amount);
            }
        }
    }
}

header {

    font-family: $sans;

    a {
        font-weight: 200;
        color: $white;
        display: block;
        border: none;
        text-align: center;
        padding: 0.5em;
        @include transition(all, $link-fade-time, ease);

        &:hover {
            color: $white;
        }
    }

    .projects {
        @include nav_button($blue);
    }

    .posts {
        @include nav_button($magenta);
    }

    .github {
        @include nav_button($green);
    }

    .resume {
        @include nav_button($orange);
    }
}

.about {
    p {
        text-align: center;
    }
    
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

.portrait {
    width: 220px;
    height: 220px;
    margin-top: 2em;
    margin-left: auto;
    margin-right: auto;
    background-image: url('/assets/images/ben_circle.png');
    background-repeat: no-repeat;
}

.right {
    text-align: right;
}

.arrow {
    color: $base1;
    font-family: $monospace;
    font-size: 2em;
}

.article {

    .date {
        // margin-bottom: 1em;
        font-family: $monospace;
        // font-weight: 200;
        color: $base1;
        text-align: center;
    }

    img {
        max-width: 100%;
    }
}

@media print {
    body {
        color: #000;
    }

    a {
        color: #000;
    }

    code {
        color: #999;
    }

    header, footer {
        display: none;
        visibility: hidden;
    }

    .social-buttons {
        display: none;
    }
}