laipower/wp-content/themes/twentynineteen/sass/site/primary/_posts-and-pages.scss

305 lines
5.1 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;
&.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;
}
}
}
}