.post-index, .post, .site-footer {

display: grid;
grid-template-columns:
    0.2fr
    #{"min(65ch, 100%)"}
    1fr;

@include media-query-small-screen() {min-width: $mobile-width;}

> * {
    grid-column: 2;

    margin-right: $spacing-unit;
    margin-left: $spacing-unit;
}

}

.post .full-bleed {

// correct to match exact 100vw
width: calc(
        100vw
        - 2 * #{$spacing-micro-unit}
        - 1.5px
);

/*
.post-content margin
*/
margin-left: calc(
        (-1)
        * (100vw - #{"min(65ch, 100vw)"}) * (.2/1.2)
        - #{$spacing-unit}
);

}

/* Header

*/

.site-header {

// Positioning context for the mobile navigation icon
position: relative;

#banner {
    font-size: 1.6em;
    text-align: center;
    margin-top : $spacing-unit;
    margin-bottom : $spacing-unit/3;

    h1 {
        margin-bottom: 0;
        font-size: 0.8em;
        text-align: left;
    }

    .site-title {
        font-family: $header-font-family;
        font-weight: normal;
        color: $color-text2;

        &:hover {
          color: $color-link;
        }

    }
}

}

/* Content

*/

/* Post metadata section

*/

.post-meta {

margin-top: $spacing-micro-unit;
padding: 2px 4px 0 0;

margin-top: 0;
padding: 0;
text-transform: none;

div {
    margin: $spacing-micro-unit 0 $spacing-micro-unit 0;
}

.post-permalink {
    border-top: 1px solid $color-text;
    width: 20%;
    padding-top: 1em;

    a {
        color: $color-text2;

        &:hover {
            color: $color-link;
        }
    }
}

.post-date { color: $color-text; }

.post-categories {
    margin: auto;
    margin: 1em 0 1.5em 0;
    display: flex;
    justify-content: flex-start;
}

.post-related {

    border: 3px solid $color-textunderline;
    padding: 1em;
    margin-top: $spacing-unit * 3;

        h4 { font-family: $header-2-font-family; }

        &:hover {
            color: $color-text2;
            border-color: $color-text2;
        }

        a {
            color: inherit;
            text-decoration: none;
            &:hover { color: $color-link; }
        }
}

.post-category {
    border: 2px solid;
    margin-right: 1em;
    padding: $spacing-micro-unit $spacing-micro-unit*2;
    text-align: center;
    font-family: $fixed-width-font-family;
    font-size: 0.8em;

    &:hover {
        color: $color-link;
        border-color: $color-link;
    }

    a {
        text-decoration: none;
        color: inherit;
        &:hover { color: inherit; }
    }
}

}

.post-link {

display: block;
float: left;
font-size: $font-size-regular + 2px;

@include media-query-small-screen() {
    font-size: $font-size-small;
}

.linklog {
    color: $color-link;
    font-family: $fixed-width-font-family;
    text-decoration: none;

    &:hover {
        color: $color-text;
    }
}

}

.draft {

background-color: $color-link;
border-radius: $spacing-unit / 2;
border: 2px solid #000;
color: black;
font-size: $font-size-small * .89;
font-weight: bold;
padding: $spacing-micro-unit;
text-transform: uppercase;
vertical-align: middle;
font-family: $fixed-width-font-family;

margin-left: $spacing-unit / 4;

}

/* Landing posts - grouped by year

*/
h2.post-list-header {
    color: $color-header-index;
    font-family: $fixed-width-font-family;
    font-size: $font-size-regular * 1.25;
    font-weight: normal;
}
h2.post-list-header:first-child {
    margin-top: $spacing-unit;
}

h2.post-list-header.post-list-category {

    &:hover {
        color: $color-text;
        border-color: $color-text;
    }
}

ul.post-list-content {

    float: left;
    list-style: none;

    .post-link {
        font-family: $header-font-family;

        clear: left;
        margin: $spacing-micro-unit 0;

        @include media-query-small-screen() {
            margin: ($spacing-micro-unit - 2) 0;
        }

        .post-link-date {
            display: inline;
            color: darken($color-textunderline, 8%);
            margin: 0;
            clear: left;
            white-space: nowrap;

            font-size: $font-size-medium;
            @include media-query-small-screen() {
                font-size: $font-size-small;
            }
        }

        a.post-link-url {
            color: $color-text2;
            text-decoration: none;
            padding-right: $spacing-micro-unit;

            &:hover { text-decoration: $color-textunderline underline; }
        }
    }
}

/* Post content section

*/

.post {

padding-top: $spacing-unit/2;

@include media-query-small-screen() {
    margin: 0 auto;
    font-size: $font-size-medium;
}

.post-header {

    margin-top: $spacing-unit * 4;

    @include media-query-small-screen() {
        margin-top: $spacing-unit * 1.5;
        float: none;
    }

    .post-author {
        font-weight: normal;
        font-style: italic;
    }

    .post-title {
        color: $color-text2;
        margin: $spacing-unit 0 $spacing-unit/2 0;
        font-size: $font-size-xlarge + 10px;
        font-weight: bold;
        font-family: $header-2-font-family;

        .article-link  {

          color: $color-text2;
          text-decoration: none;

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

        @include media-query-small-screen() {
            font-size: $font-size-large + 5px;
            margin-top: 0;
        }
    }

}

}

.post-content {

clear: left;
margin: $spacing-unit;
line-height: 1.5;

font-size: $font-size-regular;

@include media-query-small-screen() {
    font-size: $font-size-medium;
}

p { margin-bottom: $spacing-unit; }
p + ul { margin-top: -0.5 * $spacing-unit; }

a {
    text-decoration-color: $color-textunderline;
    text-underline-offset: $spacing-micro-unit;
    &:hover { text-decoration: none; }
}

hr {
    border: 1px solid #d8d8d8;
    margin: 1em 0;
    width: 100%;
}

h1 {
    font-size: $font-size-xlarge;
    @include media-query-small-screen() {
        font-size: $font-size-large;
    }

    margin: 1.8em 0 0.8em 0em;
}

> h1:first-child {
    margin-top: 1em;
}

h2 {
    font-size: $font-size-large;
    font-style: italic;

    @include media-query-small-screen() {
        font-size: $font-size-medium + 2px;
    }

    margin: 2em 0 0.4em 0em;
}

h3 {
    font-size: 1.0em;
    font-style: italic;
    font-weight: normal;

    @include media-query-small-screen() {
        font-size: $font-size-medium;
    }
}

}

figure { text-align: left; } figcaption {

font-size: 0.8em;
font-family: $header-font-family;
text-align: center;
margin-bottom: $spacing-unit;
margin-top: -1 * $spacing-unit / 2;

}

/**

* Blockquotes
*/

blockquote {

border-left: 4px solid $color-textunderline;
padding-left: $spacing-unit / 2;
padding-top: $spacing-unit / 3;
padding-bottom: $spacing-unit / 3;
margin-bottom: $spacing-unit;
font-style: italic;

code {
    font-size: 0.8em
}

> :last-child {
    margin-bottom: 0;
}

}

.callout {

border: 2px solid $color-textunderline;
padding: 1em;
margin-bottom: $spacing-unit;
text-align: center;

}

ul.callout {

margin-left: 0;
padding-left: 30px; // reset

}

/* sidenote

*/

.sidenote {

padding-left: 20px;
margin-bottom: 1.5em;
border-left: 1px solid $color-textunderline;

color: $color-textunderline;
font-style: italic;
font-size: 0.8em;

}

.sidenote-hover {

color: #F99B6D;;
border-color: #F99B6D;

}

/* footnotes

*/

.footnotes {

border-bottom: 1px solid $color-textunderline;
border-top: 1px solid $color-textunderline;
padding: 1em 0;

}

a.footnote {

text-decoration: none;
&:hover {
    color: $color-link;
}

}

/* Code snippets

*/

code {

font-family: $fixed-width-font-family;

}

article.post-content {

pre {
    font-size: 0.75em;
    padding: 1em;
    line-height: 1.4em;
    overflow: auto;
}

ol code, ul code, p>code {
    font-size: 0.85em;
}
p>code {
    color: $color-code;
}

}

.site-footer {

padding: $spacing-unit 0;

@include media-query-laptop() {
    margin-top: 2em;
}

.newsletter {

    grid-column: 2;

    display: grid;
    grid-gap: $spacing-micro-unit;

    margin-bottom: $spacing-unit * 2;

    @include media-query-small-screen() {
        padding: 0 $spacing-micro-unit * 2;
    }

    @include media-query-laptop() {
        grid-template-columns: 48% 1fr 48%;
    }

    input {
        text-align: center;
        padding: 0.5em;
        font-family: $font-family-base;
        font-size: 0.8em;
    }

    input[type=text] {
        border: 1px solid $color-divider;

        @include media-query-laptop() {
            grid-column-start: 1;
        }
    }

    input[type=submit] {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background-color: lightgray;

        @include media-query-laptop() {
                grid-column-start: 3;
        }
    }
}

}

.site-nav {

ul {
    display: grid;
    row-gap: $spacing-unit / 2;
    grid-template-columns: repeat(auto-fit, minmax((7 * $font-size-regular), 1fr));
    @include media-query-small-screen() {
        grid-template-columns: repeat(auto-fit, minmax((4 * $font-size-regular), 1fr));
    }

    list-style-type: none;
    margin-left: 0;
    text-align: center;

    .nav-link {
        display: block;

        padding-top: $spacing-micro-unit;
        padding-bottom: $spacing-micro-unit;
        text-decoration: none;

        @include media-query-small-screen() {
            font-size: $font-size-small;
        }

        border-top: 2px solid transparent;
        border-bottom: 2px solid transparent;

        &:hover {
            border-top: 2px solid $color-link;
            border-bottom: 2px solid $color-link;
        }
    }
}

}