body {
display: flex; flex-flow: column nowrap; min-height: 100vh; max-width: var(--container); margin: var(--gap) auto; padding-left: calc(var(--gap) / 2); padding-right: calc(var(--gap) / 2);
}
/*
Site Header
*/
.masthead {
margin-bottom: calc(var(--gap) * 2); .site-title { font-size: 2rem; font-weight: bold; line-height: 1.2; margin-bottom: var(--gap); text-align: center; color: var(--color-link); overflow: visible; .logo { display: inline-block; max-width: 250px; margin: calc(var(--gap) / 4); box-shadow: none; filter: drop-shadow(0 0 var(--gap) var(--color-details-lighter)); } &:hover, &:focus { text-decoration: none; } }
}
.site-menu {
display: flex; flex-flow: row wrap; justify-content: center; @media screen and (max-width: 600px) { flex-flow: row nowrap; justify-content: flex-start; overflow-x: auto; margin-left: calc(var(--gap) / -2); margin-right: calc(var(--gap) / -2); -webkit-overflow-scrolling: touch; -ms-overflow-style: -ms-autohiding-scrollbar; &::-webkit-scrollbar { display: none; } } &::before, &::after { content: " "; display: block; } &::before { margin-left: auto; padding-left: calc(var(--gap) / 2); } &::after { margin-right: auto; padding-right: calc(var(--gap) / 2); }
}
.menu-item {
flex: 0 0 auto; color: rgba(255, 255, 255, 0.7); background-color: var(--color-link); border-radius: 1.5rem; font-weight: bolder; padding: 0.5rem 1rem; &:not(:last-child) { margin-right: var(--gap); @media screen and (max-width: 600px) { margin-right: calc(var(--gap) / 2); } } &:hover, &:focus { color: rgba(255, 255, 255, 1); text-decoration: none; }
}
/*
Content
*/
.content {
background-color: var(--color-bg); padding: calc(var(--gap) * 2); margin-bottom: var(--gap); @media screen and (max-width: 600px) { padding-left: var(--gap); padding-right: var(--gap); } & > *:last-child { margin-bottom: 0; }
}
.content-header {
margin-bottom: var(--gap); text-align: center; .content-title { font-size: 2rem; a { color: var(--color-text); } } .content-meta { font-size: 0.75rem; a { color: var(--color-details); display: inline-block; &:not(:last-child) { margin-right: calc(var(--gap) / 2); } } }
}
.content-body > :last-child {
margin-bottom: 0;
}
.content-footer {
margin-top: var(--gap); font-size: 0.75rem; color: var(--color-details); .content-tags { display: block; list-style: none; margin-left: 0; li { display: inline-block; font-size: 0.875rem; &:not(:last-child) { &::after { padding-left: calc(var(--gap) / 4); padding-right: calc(var(--gap) / 4); content: "/"; color: var(--color-details-lighter); } } a { color: var(--color-details-darker); } } }
}
.content-navigation {
display: flex; align-items: center; @media screen and (max-width: 600) { flex-flow: column nowrap; } .nav-link { background: var(--color-bg); padding: calc(var(--gap) / 2) var(--gap); @media screen and (max-width: 600px) { width: 100%; margin-bottom: var(--gap); } &.prev-link { justify-self: flex-start; margin-right: auto; } &.next-link { justify-self: flex-end; margin-left: auto; text-align: right; } }
}
// The Blog Layout .layout-blog, .layout-post, .layout-archive, .layout-home {
.container { display: grid; gap: var(--gap); grid-template-columns: 2fr 1fr; grid-template-areas: "content sidebar" "content sidebar" "content ."; @media screen and (max-width: 600px) { grid-template-columns: 100%; grid-template-areas: "search" "content" "sidebar"; } }
}
.blog-page {
grid-area: content; min-width: 0;
}
// The Archive Layout .archive-header {
padding: var(--gap); background: var(--color-bg); margin-bottom: var(--gap); h1 { font-size: 0.75rem; font-weight: normal; color: var(--color-details); strong { font-size: 1.75rem; color: var(--color-text); text-transform: uppercase; } }
}
// Sidebar .widget {
background-color: var(--color-bg); padding: var(--gap);
}
.-search {
grid-area: sidebar; grid-row: 1; @media screen and (max-width: 600px) { grid-area: search; }
}
.-sidebar {
grid-area: sidebar; grid-row: 2; @media screen and (max-width: 600px) { grid-row: auto; } & > *:not(:last-child) { margin-bottom: calc(var(--gap) * 2); }
}
.social-links {
margin-left: 0; list-style: none; display: flex; flex-flow: row wrap; justify-content: center; align-items: center; .link { display: inline-block; margin: calc(var(--gap) / 2); margin-top: 0; svg { width: 1.5rem; height: 1.5rem; } }
}
.blogroll {
.blogroll-title { font-weight: normal; margin-bottom: calc(var(--gap) / 2); } .blogroll-list { list-style: none; margin-left: 0; .link { padding-top: calc(var(--gap) / 2); padding-bottom: calc(var(--gap) / 2); border-bottom: 1px solid var(--color-details-lighter); &:first-child { border-top: 1px solid var(--color-details-lighter); } a { color: var(--color-details); &:hover, &:focus { color: var(--color-details-darker); } } } }
}
// Search Form
label {
display: inline-block; margin-bottom: calc(var(--gap) / 2);
}
.search-controls {
display: flex; flex-flow: row nowrap; font-size: 0.75rem; input[name="q"] { max-width: 400px; width: 100%; }
}
// Comments
.comments-title {
margin-bottom: var(--gap);
}
.comments-notice {
margin-top: calc(var(--gap) / 2); margin-bottom: calc(var(--gap) / 2); color: var(--color-details-darker);
}
.comments-list {
list-style: none; margin-left: 0; margin-bottom: var(--gap); .comment-item { margin-bottom: var(--gap); padding-bottom: var(--gap); border-bottom: 3px dotted var(--color-details-lighter); }
}
.comment {
font-size: 95%; .comment-meta { margin-bottom: 1rem; } .author-avatar { width: 2.5rem; border-radius: 5px; box-shadow: 0 0 2px var(--color-details); float: left; margin-right: 1rem; } .comment-body > *:not(:last-child) { margin-bottom: 0.5rem; }
}
.comment-message-area {
margin-bottom: calc(var(--gap) / 2);
}
.message-area {
width: 100%; resize: vertical;
}
.comment-fields {
display: grid; grid-template-columns: 1fr 1fr 1fr; gap: calc(var(--gap) / 2); margin-bottom: calc(var(--gap) / 2); @media screen and (max-width: 800px) { grid-template-columns: 1fr; flex-flow: column nowrap; } input { min-width: 0; width: auto; }
}
.comment-actions {
display: flex; justify-content: flex-end;
}
/*
Site Footer
*/
.colophon {
margin-top: calc(var(--gap) * 2); font-size: 0.875rem; h5 { a { color: currentColor; } } .site-info { text-align: center; } .external-links { text-align: center; list-style: none; margin: calc(var(--gap) / 2) 0; .link { display: inline-block; a { color: var(--color-details-darker); display: inline-block; } &:not(:last-child) { &::after { content: "/"; color: var(--color-details-lighter); display: inline-block; margin-left: calc(var(--gap) / 4); margin-right: calc(var(--gap) / 4); } } } }
}