/*
Contents: Base Site container Masthead Thumbnail Post Pagination Footer Menu Tables
*/
/*
Base
*/
body {
font-family: $body-font-family; font-size: $body-font-size; color: $body-color; line-height: $body-line-height; background-color: $background-color;
}
@media (max-width: $rescale-content-mobile-breakpoint) {
body { font-size: 14px; line-height: 1.5rem; } body h1 { font-size: 1.5rem; }
}
h1{
font-size: 2rem;
}
h1 a {
text-decoration: none;
}
h1, h2, h3, h4, h5, h6 {
font-family: $heading-font-family; color: $heading-color; line-height: $heading-line-height;
}
a {
text-decoration: underline; color: $link-color; transition: color 0.35s ease;
}
a:hover {
color: $link-hover-color; border-bottom: none;
}
img {
max-width: 100%; height: auto; border-radius: 5px;
}
blockquote {
margin: 10px 20px 10px; padding: 0px 15px; border-left: 0.25em solid $blockquote-indent-color; color: $blockquote-color; line-height: $body-line-height;
}
hr {
border-top: 1px solid $horizontal-rule-color; border-left: none; border-right: none; border-bottom: none;
}
sup {
font-size: small; line-height: 1;
}
/*
Site container
*/
.container {
margin-left: auto; margin-right: auto; width: $content-width;
}
/48em/
@media (max-width: $fill-width-mobile-breakpoint) {
.container { width: 90vw; }
}
/*
Masthead
*/
.masthead {
padding-top: 0.5rem; padding-bottom: 0.5rem; margin-bottom: 4rem; font-family: $heading-font-family;
}
.masthead a:hover {
color:black;
}
.masthead-title a {
font-size: 2rem; text-decoration: none; color: $masthead-title-color;
}
.masthead-subtitle {
color: $masthead-subtitle-color;
}
/*
Thumbnail
*/
.thumbnail-container {
max-width: 100%; overflow: hidden; border-radius: 5px; margin-bottom: 25px;
}
.thumbnail-container img{
margin-top: -11.5%; margin-bottom: -11.5%;
}
/*
Post
*/
.post-container {
margin-bottom: 4rem;
}
.posts {
margin-bottom: 5rem; padding: 0px; list-style: none;
}
.post-date {
display: block; margin-top:3px; margin-bottom: 1rem; color: $back-matter-color; font-family: $back-matter-font-family; font-size:0.8rem; a { color: inherit; text-decoration: none; } a:hover { color: $back-matter-color-link-hover-color; text-decoration: underline; }
}
@media (max-width: $rescale-content-mobile-breakpoint) {
.posts h1 { font-size: 1.5rem; }
}
.related {
padding-bottom: 2rem;
}
.posts-list {
padding-left: 0px; list-style: none; h3 { margin-top: 0; } small { font-size: 75%; color: $back-matter-color; white-space: nowrap; } a:hover { color: $link-hover-color; text-decoration: none; small { color: inherit; } }
}
.category-navigation {
display: flex; flex-direction: row; justify-content: space-between; align-items: stretch; margin-top: 16px; padding: 8px 0px 6px 0px; width: 100%; font-family: $heading-font-family; font-size: 1em; a { color: $page-matter-light-color; text-decoration: none; &:hover { color: inherit; } }
}
.category-navigation-prev {
margin-right: 5px; flex-grow: 1; &:before { content: "← "; color: $body-color; }
}
.category-navigation-next {
margin-left: 5px; text-align: right; flex-grow: 1; &:after { content: " →"; color: $body-color; }
}
@media (max-width: $relayout-in-page-nav-mobile-breakpoint) {
.category-navigation { flex-direction: column; } .category-navigation-prev { margin-bottom: 4px; margin-right: 0px; } .category-navigation-next { margin-top: 4px; margin-left: 0px; }
}
.footnotes {
border-top: 1px solid $horizontal-rule-color; font-size: 0.8rem; margin-bottom: 24px; line-height: $body-line-height;
}
/*
Pagination
*/
.pagination {
overflow: hidden; font-family: $pagination-font-family; text-align: center;
}
.pagination a {
text-decoration: none;
}
.pagination-button {
color: $pagination-inactive-color; border: 1px solid $pagination-border-color; padding: 15px 45px; display: inline-block; font-size: 16px; font-weight: bold; transition: color 0.35s ease, background-color 0.35s ease;
}
.pagination-active {
color: $pagination-active-color;
}
.pagination-active:hover {
background-color: $pagination-hover-background-color;
}
/*
Footer
*/
.footer {
color: $footer-text-color; text-align: center; margin: 2rem;
}
.footer a {
color: $footer-link-color; padding: 10px; text-decoration: none;
}
.footer a:hover {
color: $footer-link-hover-color;
}
/*
Menu
*/
.menu {
padding-top: 0.5rem; display: block;
}
.menu-content {
float: left;
}
.menu-content a {
color: $menu-text-color; font-size: 1rem; padding-right: 10px;
}
.social-icons {
float: right;
}
.social-icons a {
color: $menu-icon-color; font-size: 1rem;
}
@media (max-width: $rescale-content-mobile-breakpoint) {
.social-icons { float: left; padding-top: 0px; } .menu-content { margin-bottom: 5px; }
}
/*
Tables
*/
table {
border-collapse: collapse; margin-bottom: 30px; width: 100%;
}
table, th, td {
border: 1px solid $table-border-color;
}
th, td {
padding: 15px; text-align: left;
}