html {
    font-size: $global-font-size;
}

body {
    line-height: 1.8em;
    color: $primary-color;
    background: $background-color;
}

.post-title, .date-label {
    letter-spacing: 0.025rem;
}

p, sub, nav{
    letter-spacing: 0.05rem;
}

.title-wrapper, .title {
    letter-spacing: 0.075rem;
}

a {
    text-decoration: none;
}

.brand-icon {
    color: $post-link-color;
    display: inline-flex;
}

.brand-icon:hover {
    border-bottom: 1px solid;
}

.layout {
    .title-wrapper {
        @include flex-column;
        margin-bottom: 0.5rem;
    }
    .title {
        color: $primary-color;
        text-align: left;
        display: block;
        font-size: $title-font-size;
        //font-weight: bold;
        margin: 0;
    }
    max-width: $layout-max-width;
    margin-left: auto;
    margin-right: auto;
    padding: $vertical-layout-padding $horizontal-layout-padding;
}

nav {
    font-size: $nav-font-size;
    text-align: center;
    ul {
        display: block;
        padding: 0;
        //margin: 0.5rem;
        li {
            display: inline;
            list-style-type: none;
            a {
                color: $primary-color;
                display: inline-block;
                padding-top: 0.5rem;
                padding-bottom: 0.5rem;
                border-bottom: 1px solid $background-color;
            }
            a:hover {
                color: $post-link-color;
                border-bottom: 1px solid;
            }
        }
        li:not(:last-child) {
            padding: 0 1rem 0 0;
        }
    }
}

.slim-description {
    margin-bottom: calc(#{$global-font-size} * 2);
    color: $subscript-color;
}


.blog-post-content {
    a {
        color: $post-link-color;
        text-decoration: none;
        border-bottom: 1px solid;
    }
    a:hover {
        border-bottom: none;
    }
}



.blog-list {
    .list-item {
        display: flex;
        flex-direction: column-reverse;
        align-items: baseline;
        padding: 0.5rem 0.5rem 0.5rem 0;
    }
    .post-title {
        a {
            text-decoration: none;
            color: $post-title-color;
            //font-weight: 600;
            border-bottom: none;
            //transition: border-bottom .3s;
        }
        a:hover {
            //border-bottom: 1px solid $post-link-color;
            color: $post-link-color;
        }
    }

    .date-label {
        font-size: 80%;
        margin-right: 1rem;
    }
}

.content {
    .title {
        font-size: $content-title-font-size;
    }
}

.blog-post-content {
    a {
        color: $post-link-color;
        text-decoration: none;
        border-bottom: 1px solid;
    }
    a:hover {
        border-bottom: none;
    }

    img {
        width:100%;
    }
}

.post-image {
    @include full-width-mobile

    img {
        width:100%;
    }
}


.tags {
    font-size: .9em;
    text-align: left;
    ul {
        display: block;
        padding: 0;
        //margin: 0.5rem;
        li {
            display: inline;
            list-style-type: none;
            text-align: center;
            a {
                border: 1px solid $post-link-color;
                border-radius: 3px;
                background: $post-link-color;
                padding: 0.2em;
                color: #fff;
                // color: $primary-color;
                margin: 10px 2px 10px 0;
                line-height: 1em;
            }
            a:hover {
                background: $background-color;
                color: $post-link-color;
            }
        }
        li:not(:last-child) {
            padding: 0 0.1rem 0 0;
        }
    }
}

.highlight {
    @include full-width-mobile
    pre {
        line-height: 1.2rem;
        border: 1px solid #ddd;
        border-radius: 5px;
        overflow: auto;
        padding: $horizontal-layout-padding;
        margin: 0;
        code[class*=language-] {
            font-size: 0.9em;
        }

        .token.comment {
            font-style: italic;
        }
    }
}

// Style blockquotes
// https://css-tricks.com/snippets/css/simple-and-nice-blockquote-styling/
// Worth looking at
// https://codepen.io/frxnz/pen/IvBCr
blockquote {
    background: $blockquote-background-color;
    border-left: 5px solid $primary-color;
    margin: 1.5em 10px;
    padding: 0.5em 10px;
    quotes: "\201C""\201D""\2018""\2019";
}

blockquote:before {
    color: $primary-color;
    content: open-quote;
    font-size: 4em;
    line-height: 0.1em;
    margin-right: 0.25em;
    vertical-align: -0.4em;
}

blockquote p {
    display: inline;
}

time {
    font-size: 80%;
    margin-right: 1rem;
}