.post {
@media (max-width: $container-width) { padding-left: 1em; padding-right: 1em; } h1, h2, h3, h3, h4, p, ul, ol, figcaption, pre, blockquote, .playlist, table, .footnotes { margin-left: auto; margin-right: auto; } ol, ul { max-width: $container-width - ($body-font-size * 2); } li { margin-bottom: 0.7em; ul { margin-top: 0.7em; } } blockquote { max-width: $container-width - ($body-font-size * 10); } p, pre, .playlist, figcaption, .caption, h1, h2, h3, h4, .footnotes { max-width: $container-width - ($body-font-size * 2); } // scss-lint:disable SelectorFormat .photos, .cp_embed_iframe, embed, .gist, iframe, .media, table { @extend %clearfix; border: 0; display: block; margin-bottom: 1em; margin-left: auto; margin-right: auto; max-width: $media-max; position: relative; @media (max-width: $media-max) and (min-width: $container-width) { padding-left: 1em; padding-right: 1em; } picture, img, video { margin-bottom: 0.5em; margin-top: 0; } picture ~ .caption, img ~ .caption { margin: 0; } .caption ~ picture, .caption ~ img { margin-top: 1em; } [data-src] { opacity: 0; transition: opacity 0.3s ease-in; } } // scss-lint:disable PropertySortOrder, DeclarationOrder .photos { @include breakpoint(medium) { -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: left; -webkit-justify-content: left; -ms-flex-pack: left; justify-content: left; } } table { border: 1px solid darken($light-accent, 10%); border-collapse: collapse; border-spacing: 0; empty-cells: show; caption { color: $text-color; font: italic 85%/1 arial, sans-serif; padding: 1em 0; text-align: center; } td { background-color: $white; } td, th { border-left: 1px solid darken($light-accent, 10%); border-width: 0 0 0 1px; font-size: inherit; margin: 0; overflow: visible; padding: 0.5em 1em; } td:first-child, th:first-child { border-left-width: 0; } thead { background-color: $light-accent; color: $text-color; text-align: left; vertical-align: bottom; } } .note { background: $light-accent; border-left: 0.25em solid darken($light-accent, 10%); padding: 1em; } .instagram-media { margin: 1em auto; width: 100%; @include breakpoint(medium) { width: 65%; } }
}
.post-header {
position: relative; .container { z-index: 1; }
}
.post-header-no-map {
h1 { margin-bottom: 0.5em; }
}
.post-footer {
margin-top: 2em;
}
.post-locations, .post-twitter {
margin-bottom: 1em; .icon { margin-right: 0.5em; }
}
.post-footer-meta {
margin-bottom: 2em;
}
.tag {
display: inline-block; margin-bottom: 0.25em; &:hover { text-decoration: none; }
}
.post-date-updated {
display: block; font-size: $font-xs; text-align: inherit;
}
.post-page {
.post-meta { color: $text-color-light; margin-bottom: 2em; } .post-meta-emoji { margin-right: 0.2em; vertical-align: middle; }
}
.post-location {
min-height: 1px;
}
.post-prev-next {
@extend %flex-container; @extend %flex-space-between; margin-top: 1em; @include breakpoint(small) { // scss-lint:disable ImportantRule display: block !important; }
}
.post-prev, .post-next {
@extend %flex-center; position: relative; transition: $link-transition; @include breakpoint(medium) { min-height: 2em; } &:hover { text-decoration: none; transition: $link-transition; }
}
.post-next {
@include breakpoint(small) { margin-top: 1em; } @include breakpoint(medium) { text-align: right; }
}
.post-prev-title, .post-next-title {
display: block; @include breakpoint(medium) { width: 100%; }
}
.post-prev-title {
padding-left: 0.5em;
}
.post-next-title {
padding-right: 0.5em;
}
figure {
margin: 0 auto;
}
figcaption {
color: lighten($text-color, 20%); font-size: $font-xs; margin-bottom: 2em; margin-top: -1em;
}
.caption {
color: lighten($text-color, 20%); font-size: $font-xs; margin: -2.5em auto 0;
}
.footnotes {
margin-top: 4em; ol { padding-left: 1em; } li { font-size: $font-xs; &:target { color: $fancy-accent; } }
}
.reversefootnote {
background: $white; border-radius: 0.1em; color: $text-color; display: inline-block; margin-left: 0.5em; padding: 0.2em; &:hover { text-decoration: none; }
}
.badge {
@extend %xs; background: $white; border-radius: 1em; padding: 0 0.5em;
}