body {
    font-family: sans-serif;
    font-size: 1rem;
    line-height: 1.3;
    max-width: 920px;
    margin: 0 auto;
    padding: 1rem;
}

/* General */

pre code {
    border: 1px solid black;
    background-color: lightgrey;
    display: block;
    font-size: smaller;
    padding: 10px;
    white-space: pre-wrap;
}

/* Home */
.home {
    display: flex;
    flex-direction: row;
}
.about {
    margin-left: 20px;
}
@media only screen and (max-width: 650px) {
    .about {
        display: none;
    }
}
.about .avatar {
    width: 128px;
    height: 128px;
    border-radius: 4px;
}
.about dt {
    font-size: .9rem;
}
.about dd {
    margin-left: 0;
    margin-bottom: 1rem;
}
.post-list {
    flex: 1;
}
.post-list > h1 {
    font-size: 1.5rem;
}
.post-list > .post-item:not(:last-child) {
    margin-bottom: 10px;
}
.post-item > .post-link {
    font-size: 1rem;
}
.post-item > .post-date {
    color: grey;
    font-size: smaller;
}

/* Post */
.home-link {
    margin-bottom: 1rem;
}
.post {
    display: grid;
    grid-template-areas:
        "title title"
        "content toc";
}
.post > .post-title {
    grid-area: title;
}
.post > .post-title > h1 {
    margin: 0;
    font-size: 1.5rem;
}
.post > .post-title > .post-date {
    color: grey;
    font-size: smaller;
}
.post > .post-content {
    grid-area: content;
    max-width: 600px;
}
.post > .post-content img {
    width: 100%;
}
.post > .post-content > p > img + em {
    /* caption */
    margin-top: 4px;
    display: inherit;
    text-align: center;
    font-size: .9rem;
}
.post > .post-toc {
    grid-area: toc;
    position: sticky;
    top: 0;
    align-self: start;
}
.post > .post-toc ul {
    list-style-type: none;
    line-height: 1.5rem;
}
@media only screen and (max-width: 650px) {
    .post {
        display: grid;
        grid-template-areas:
            "title"
            "content";
    }
    .post > .post-toc {
        display: none;
    }
}