306 lines
4.9 KiB
SCSS
306 lines
4.9 KiB
SCSS
|
.sticky {
|
||
|
display: block;
|
||
|
}
|
||
|
|
||
|
.sticky-post {
|
||
|
background: $color__background-button;
|
||
|
color: #fff;
|
||
|
display: inline-block;
|
||
|
font-weight: bold;
|
||
|
line-height: 1;
|
||
|
padding: .25rem;
|
||
|
position: absolute;
|
||
|
text-transform: uppercase;
|
||
|
top: -$size__spacing-unit;
|
||
|
z-index: 1;
|
||
|
}
|
||
|
|
||
|
.updated:not(.published) {
|
||
|
display: none;
|
||
|
}
|
||
|
|
||
|
.page-links {
|
||
|
clear: both;
|
||
|
margin: 0 0 calc(1.5 * #{$size__spacing-unit});
|
||
|
}
|
||
|
|
||
|
.entry {
|
||
|
|
||
|
margin-top: calc(6 * #{$size__spacing-unit});
|
||
|
|
||
|
&:first-of-type {
|
||
|
margin-top: 0;
|
||
|
}
|
||
|
|
||
|
.entry-header {
|
||
|
|
||
|
margin: calc(3 * #{ $size__spacing-unit}) $size__spacing-unit $size__spacing-unit;
|
||
|
position: relative;
|
||
|
|
||
|
@include media(tablet) {
|
||
|
margin: calc(3 * #{ $size__spacing-unit}) $size__site-margins $size__spacing-unit;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.entry-title {
|
||
|
|
||
|
@include post-section-dash;
|
||
|
margin: 0;
|
||
|
|
||
|
a {
|
||
|
color: inherit;
|
||
|
|
||
|
&:hover {
|
||
|
color: $color__text-hover;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.entry-meta,
|
||
|
.entry-footer {
|
||
|
|
||
|
color: $color__text-light;
|
||
|
font-weight: 500;
|
||
|
|
||
|
> span {
|
||
|
|
||
|
margin-right: $size__spacing-unit;
|
||
|
display: inline-block;
|
||
|
|
||
|
&:last-child {
|
||
|
margin-right: 0;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
a {
|
||
|
|
||
|
@include link-transition;
|
||
|
color: currentColor;
|
||
|
|
||
|
&:hover {
|
||
|
text-decoration: none;
|
||
|
color: $color__link;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.svg-icon {
|
||
|
position: relative;
|
||
|
display: inline-block;
|
||
|
vertical-align: middle;
|
||
|
margin-right: 0.5em;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.entry-meta {
|
||
|
margin: $size__spacing-unit 0;
|
||
|
}
|
||
|
|
||
|
.entry-footer {
|
||
|
|
||
|
margin: calc(2 * #{$size__spacing-unit}) $size__spacing-unit $size__spacing-unit;
|
||
|
|
||
|
@include media(tablet) {
|
||
|
margin: $size__spacing-unit $size__site-margins calc(3 * #{$size__spacing-unit});
|
||
|
max-width: $size__site-tablet-content;
|
||
|
}
|
||
|
|
||
|
@include media(tablet) {
|
||
|
max-width: $size__site-desktop-content;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.post-thumbnail {
|
||
|
|
||
|
margin: $size__spacing-unit;
|
||
|
|
||
|
@include media(tablet) {
|
||
|
margin: $size__spacing-unit $size__site-margins;
|
||
|
}
|
||
|
|
||
|
&:focus {
|
||
|
outline: none;
|
||
|
}
|
||
|
|
||
|
.post-thumbnail-inner {
|
||
|
display: block;
|
||
|
|
||
|
img {
|
||
|
position: relative;
|
||
|
display: block;
|
||
|
width: 100%;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.image-filters-enabled & {
|
||
|
|
||
|
.post-thumbnail {
|
||
|
position: relative;
|
||
|
display: block;
|
||
|
|
||
|
.post-thumbnail-inner {
|
||
|
filter: grayscale(100%);
|
||
|
|
||
|
&:after {
|
||
|
background: rgba(0, 0, 0, 0.35);
|
||
|
content: "";
|
||
|
display: block;
|
||
|
height: 100%;
|
||
|
opacity: .5;
|
||
|
pointer-events: none;
|
||
|
position: absolute;
|
||
|
top: 0;
|
||
|
width: 100%;
|
||
|
z-index: 4;
|
||
|
|
||
|
@supports (mix-blend-mode: multiply) {
|
||
|
display: none;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
&:before,
|
||
|
&:after {
|
||
|
position: absolute;
|
||
|
display: block;
|
||
|
width: 100%;
|
||
|
height: 100%;
|
||
|
top: 0; left: 0;
|
||
|
content: "\020";
|
||
|
pointer-events: none;
|
||
|
}
|
||
|
|
||
|
@include filter-duotone;
|
||
|
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.entry-content,
|
||
|
.entry-summary {
|
||
|
max-width: calc(100% - (2 * #{ $size__spacing-unit }));
|
||
|
margin: 0 $size__spacing-unit;
|
||
|
|
||
|
@include media(tablet) {
|
||
|
max-width: 80%;
|
||
|
margin: 0 10%;
|
||
|
padding: 0 60px;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.entry-content {
|
||
|
|
||
|
p {
|
||
|
word-wrap: break-word;
|
||
|
}
|
||
|
|
||
|
.more-link {
|
||
|
@include link-transition;
|
||
|
display: inline;
|
||
|
color: inherit;
|
||
|
|
||
|
&:after {
|
||
|
content: "\02192";
|
||
|
display: inline-block;
|
||
|
margin-left: 0.5em;
|
||
|
}
|
||
|
|
||
|
&:hover {
|
||
|
color: $color__link;
|
||
|
text-decoration: none;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
a {
|
||
|
text-decoration: underline;
|
||
|
text-decoration-thickness: 2px;
|
||
|
|
||
|
&.button,
|
||
|
&:hover {
|
||
|
text-decoration: none;
|
||
|
}
|
||
|
|
||
|
&.button {
|
||
|
display: inline-block;
|
||
|
}
|
||
|
|
||
|
&.button:hover {
|
||
|
background: $color__background-button-hover;
|
||
|
color: $color__background-body;
|
||
|
cursor: pointer;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
// Overwrite iframe embeds that have inline styles.
|
||
|
> iframe[style] {
|
||
|
|
||
|
margin: 32px 0 !important;
|
||
|
max-width: 100% !important;
|
||
|
|
||
|
@include media(tablet) {
|
||
|
max-width: $size__site-tablet-content !important;
|
||
|
}
|
||
|
|
||
|
@include media(desktop) {
|
||
|
max-width: $size__site-desktop-content !important;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
// Page links
|
||
|
.page-links a {
|
||
|
margin: calc(0.5 * #{$size__spacing-unit});
|
||
|
text-decoration: none;
|
||
|
}
|
||
|
|
||
|
// Classic editor audio embeds.
|
||
|
.wp-audio-shortcode {
|
||
|
max-width: calc(100vw - (2 * #{ $size__spacing-unit }));
|
||
|
|
||
|
@include media(tablet) {
|
||
|
max-width: $size__site-tablet-content;
|
||
|
}
|
||
|
|
||
|
@include media(desktop) {
|
||
|
max-width: $size__site-desktop-content;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
/* Author description */
|
||
|
|
||
|
.author-bio {
|
||
|
margin: calc(2 * #{$size__spacing-unit}) $size__spacing-unit $size__spacing-unit;
|
||
|
|
||
|
@include postContentMaxWidth();
|
||
|
|
||
|
@include media(tablet) {
|
||
|
margin: calc(3 * #{$size__spacing-unit}) $size__site-margins;
|
||
|
}
|
||
|
|
||
|
@include media(desktop) {
|
||
|
margin: calc(3 * #{$size__spacing-unit}) $size__site-margins;
|
||
|
}
|
||
|
|
||
|
.author-title {
|
||
|
@include post-section-dash;
|
||
|
display: inline;
|
||
|
}
|
||
|
|
||
|
.author-description {
|
||
|
|
||
|
display: inline;
|
||
|
color: $color__text-light;
|
||
|
font-size: $font__size-md;
|
||
|
line-height: $font__line-height-heading;
|
||
|
|
||
|
.author-link {
|
||
|
display: inline-block;
|
||
|
|
||
|
&:hover {
|
||
|
color: $color__link-hover;
|
||
|
text-decoration: none;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
}
|