---
---

@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;
    padding-left: 10%;
    padding-right: 10%;
}

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: 2em;
    margin-top: 2em;
}

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;
}

table.data-table 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: $base1;
}

kbd {
  font-size: 0.7em;
  border: 1px solid $base1;
  border-radius: 3px;
  padding: 1px 5px;
  border-bottom-width: 2px;
  color: $base01;
  font-family: $monospace;
}

footer {
    font-family: $monospace;
    text-align: center;
    border-top: 2px solid $base1;
    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 {
    a {
        font-family: $sans;
        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 {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

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

.center {
    text-align: center;
}

.right {
    text-align: right;
}

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

article {
    img {
        max-width: 100%;
    }
}

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

    a {
        color: #000;
    }

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