.container {
max-width: $md-screen; padding-left: var(--spacer); padding-right: var(--spacer); margin-left: auto; margin-right: auto;
}
@media screen and (min-width: $md-screen) {
.container { padding-left: var(--spacer-2); padding-right: var(--spacer-2); }
}
/**
* Header */
.masthead {
padding-top: var(--spacer); padding-bottom: var(--spacer); margin-bottom: var(--spacer-3);
}
.masthead-title {
font-size: 1.5em; font-weight: bold; a { color: inherit; text-decoration: none; } .tagline { opacity: .5; }
}
.nav-list {
padding: 0; margin: var(--spacer) 0 0 0; border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); list-style: none; li { display: inline-block; margin: 0 .4em; } a { color: inherit; text-decoration: none; &:hover, &:focus { text-decoration: line-through; } } a.current { text-decoration: line-through; }
}
/**
* Post */
.posts {
.post { padding: var(--spacer); margin-bottom: var(--spacer); border: 1px solid var(--border-color); border-radius: var(--border-radius); .post-excerpt { margin-bottom: 0; } }
}
.page, .post {
margin-bottom: var(--spacer-2);
}
.page-title, .post-title {
margin-top: 0; color: var(--heading-color); a { color: inherit; text-decoration: none; &:hover, &:focus { text-decoration: underline; } }
}
.post-meta {
display: block; margin-top: -.5em; margin-bottom: var(--spacer); opacity: .5;
}
.post-categories, .post-tags {
display: inline-block; list-style: none; padding: 0; margin: 0; li { display: inline-block; &:not(:last-child) { margin-right: .4em; } }
}
.post-category {
border-bottom: 2px dotted var(--border-color);
}
a.post-category {
color: inherit; text-decoration: none; &:hover, &:focus { border-bottom-style: solid; }
}
.post-tag {
padding: .1em .5em; border: 1px solid var(--border-color); border-radius: var(--border-radius); background-color: rgba(var(--link-color-rgb), .3);
}
a.post-tag {
color: inherit; text-decoration: none; &:hover, &:focus { background-color: rgba(var(--link-color-rgb), .6); }
}
// Footnote number within body text a, // Back to footnote link a {
display: inline-block; margin-left: .1em; font-weight: bold;
} // List of footnotes .footnotes {
margin-top: var(--spacer-2); font-size: 85%;
}
.related {
padding-top: var(--spacer-2); padding-bottom: var(--spacer-2); margin-bottom: var(--spacer-2); border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color);
}
.related-title {
margin-top: 0;
}
.related-posts {
padding-left: 0; list-style: none; a { text-decoration: none; } small { opacity: .5; }
}
/**
* Code */
.highlight {
border-radius: var(--border-radius); background-color: var(--code-bg-color);
}
.rouge-table {
margin: 0; font-size: 100%; &, td, th { border: 0; padding: 0; } pre { padding: 0; margin: 0; } .gutter { vertical-align: top; user-select: none; opacity: .25; padding-right: var(--spacer); }
}
/**
* Pagination */
.pagination {
display: flex; text-align: center; margin-top: var(--spacer-2);
}
.pagination-item {
float: left; width: 50%; text-decoration: none; padding: var(--spacer); border: 1px solid var(--border-color); &:first-child { border-right-width: 0; border-top-left-radius: var(--border-radius); border-bottom-left-radius: var(--border-radius); } &:last-child { border-top-right-radius: var(--border-radius); border-bottom-right-radius: var(--border-radius); }
}
a.pagination-item:hover {
background-color: var(--border-color);
}
/**
* Footer */
.footer {
padding-top: var(--spacer); padding-bottom: var(--spacer); margin-top: var(--spacer-3); p { margin: 0; }
}
.social-icons {
list-style: none; padding: 0; margin: var(--spacer) 0; height: calc(var(--body-line-height) * var(--body-font-size));
} .social-icon-item {
float: left; margin-right: var(--spacer);
}
@media screen and (min-width: $md-screen) {
.footer { display: flex; } .footer-column { width: 100%; } .social-icons { margin: 0; }
}
/**
* Message -- Show different levels of alert messages to users. */
.message-info, .message-warning, .message-danger {
padding: var(--spacer); border-radius: var(--border-radius); color: var(--body-bg-color);
}
.message-info {
background-color: var(--info-color);
}
.message-warning {
background-color: var(--warning-color);
}
.message-danger {
background-color: var(--danger-color);
}
/**
* Archive */
.taxonomies-wrapper {
margin-bottom: var(--spacer-2);
}
.taxonomies {
list-style: none; display: grid; grid-column-gap: 2em; grid-template-columns: repeat(2, 1fr); margin: 0; padding: 0; font-weight: bold; .taxonomy { display: flex; padding: 0.25em 0; justify-content: space-between; text-decoration: none; border-bottom: 1px solid; margin-bottom: var(--spacer); }
}
.post-list-by-taxonomy {
time { font-family: monospace; }
}
.back-to-top {
display: block; font-size: 0.8em; text-transform: uppercase; text-align: right; text-decoration: none;
}
@media (min-width: $sm-screen) {
.taxonomies { grid-template-columns: repeat(3, 1fr); }
}
/**
* Markdown TOC */
markdown-toc {
padding: var(--spacer-2) var(--spacer-3); margin: var(--spacer-2) 0; border: solid var(--border-color); border-width: 1px 0; &::before { display: block; margin-left: calc(var(--spacer-3) * -1); content: "Contents"; font-size: 85%; font-weight: 500; }
}