first
This commit is contained in:
27
wp-content/themes/twentynineteen/sass/site/_site.scss
Normal file
27
wp-content/themes/twentynineteen/sass/site/_site.scss
Normal file
@ -0,0 +1,27 @@
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
## Header
|
||||
--------------------------------------------------------------*/
|
||||
@import "header/site-header";
|
||||
@import "header/site-featured-image";
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
## Posts and pages
|
||||
--------------------------------------------------------------*/
|
||||
@import "primary/posts-and-pages";
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
## Comments
|
||||
--------------------------------------------------------------*/
|
||||
@import "primary/comments";
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
## Archives
|
||||
--------------------------------------------------------------*/
|
||||
@import "primary/archives";
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
## Footer
|
||||
--------------------------------------------------------------*/
|
||||
@import "footer/site-footer";
|
||||
|
||||
@ -0,0 +1,53 @@
|
||||
/* Site footer */
|
||||
|
||||
#colophon {
|
||||
|
||||
.widget-area,
|
||||
.site-info {
|
||||
margin: calc(2 * #{$size__spacing-unit}) $size__spacing-unit;
|
||||
|
||||
@include media(tablet) {
|
||||
margin: calc(3 * #{$size__spacing-unit}) $size__site-margins;
|
||||
}
|
||||
}
|
||||
|
||||
.widget-column {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
.widget {
|
||||
-webkit-hyphens: auto;
|
||||
-moz-hyphens: auto;
|
||||
-ms-hyphens: auto;
|
||||
hyphens: auto;
|
||||
width: 100%;
|
||||
word-wrap: break-word;
|
||||
@include media(desktop) {
|
||||
margin-right: calc(3 * #{$size__spacing-unit});
|
||||
width: calc(50% - (3 * #{$size__spacing-unit}));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.site-info {
|
||||
color: $color__text-light;
|
||||
-webkit-hyphens: auto;
|
||||
-moz-hyphens: auto;
|
||||
-ms-hyphens: auto;
|
||||
hyphens: auto;
|
||||
word-wrap: break-word;
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
color: $color__link;
|
||||
}
|
||||
}
|
||||
|
||||
.imprint,
|
||||
.privacy-policy-link {
|
||||
margin-right: $size__spacing-unit;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,301 @@
|
||||
// Featured image styles
|
||||
|
||||
.site-header.featured-image {
|
||||
|
||||
/* Hide overflow for overflowing featured image */
|
||||
overflow: hidden;
|
||||
|
||||
/* Need relative positioning to properly align layers. */
|
||||
position: relative;
|
||||
|
||||
/* Add text shadow to text, to increase readability. */
|
||||
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
|
||||
|
||||
/* Set white text color when featured image is set. */
|
||||
.site-branding .site-title,
|
||||
.site-branding .site-description,
|
||||
.main-navigation a:after,
|
||||
.main-navigation .main-menu > li.menu-item-has-children:after,
|
||||
.main-navigation li,
|
||||
.social-navigation li,
|
||||
.entry-meta,
|
||||
.entry-title {
|
||||
color: $color__background-body;
|
||||
}
|
||||
|
||||
.main-navigation a,
|
||||
.main-navigation a + svg,
|
||||
.social-navigation a,
|
||||
.site-title a,
|
||||
.site-featured-image a {
|
||||
color: $color__background-body;
|
||||
transition: opacity $link_transition ease-in-out;
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:hover + svg,
|
||||
&:active + svg {
|
||||
color: $color__background-body;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:focus + svg {
|
||||
color: $color__background-body;
|
||||
}
|
||||
}
|
||||
|
||||
.main-navigation .sub-menu a {
|
||||
opacity: inherit;
|
||||
}
|
||||
|
||||
/* add focus state to social media icons */
|
||||
.social-navigation a {
|
||||
&:focus {
|
||||
color: $color__background-body;
|
||||
opacity: 1;
|
||||
border-bottom: 1px solid $color__background-body;
|
||||
}
|
||||
}
|
||||
|
||||
.social-navigation svg,
|
||||
.site-featured-image svg {
|
||||
/* Use -webkit- only if supporting: Chrome < 54, iOS < 9.3, Android < 4.4.4 */
|
||||
-webkit-filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35) );
|
||||
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35) );
|
||||
}
|
||||
|
||||
/* Entry header */
|
||||
.site-featured-image {
|
||||
|
||||
/* First layer: grayscale. */
|
||||
.post-thumbnail img {
|
||||
height: auto;
|
||||
left: 50%;
|
||||
max-width: 1000%;
|
||||
min-height: 100%;
|
||||
min-width: 100vw;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
width: auto;
|
||||
z-index: 1;
|
||||
|
||||
@supports ( object-fit: cover ) {
|
||||
height: 100%;
|
||||
left: 0;
|
||||
object-fit: cover;
|
||||
top: 0;
|
||||
transform: none;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* When image filters are active, make it grayscale to colorize it blue. */
|
||||
.image-filters-enabled & {
|
||||
filter: grayscale(100%);
|
||||
}
|
||||
}
|
||||
|
||||
.entry-header {
|
||||
|
||||
margin-top: calc( 4 * #{$size__spacing-unit});
|
||||
margin-bottom: 0;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
|
||||
@include media (tablet) {
|
||||
|
||||
margin-left: $size__site-margins;
|
||||
margin-right: $size__site-margins;
|
||||
}
|
||||
|
||||
.entry-title {
|
||||
|
||||
&:before {
|
||||
background: $color__background-body;
|
||||
}
|
||||
}
|
||||
|
||||
/* Entry meta */
|
||||
|
||||
.entry-meta {
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
.svg-icon {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
|
||||
.discussion-avatar-list {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.has-discussion {
|
||||
|
||||
@include media (tablet) {
|
||||
|
||||
.entry-meta {
|
||||
display: flex;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.entry-title {
|
||||
padding-right: calc(1 * (100vw / 12) + #{$size__spacing-unit});
|
||||
}
|
||||
|
||||
.entry-meta .comment-count {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.entry-meta .discussion-avatar-list {
|
||||
display: block;
|
||||
position: absolute;
|
||||
bottom: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Custom Logo Link */
|
||||
|
||||
.custom-logo-link {
|
||||
|
||||
background: $color__background-body;
|
||||
box-shadow: 0 0 0 0 rgba($color__background-body, 0);
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
box-shadow: 0 0 0 2px rgba($color__background-body, 1);
|
||||
}
|
||||
}
|
||||
|
||||
/* Make sure important elements are above pseudo elements used for effects. */
|
||||
.site-branding {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.site-featured-image .entry-header {
|
||||
position: relative;
|
||||
z-index: 9;
|
||||
}
|
||||
|
||||
/* Set up image filter layer positioning */
|
||||
.site-branding-container:after,
|
||||
.site-featured-image:before,
|
||||
.site-featured-image:after,
|
||||
&:after {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0; left: 0;
|
||||
content: "\020";
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* Background & Effects */
|
||||
/* Shared background settings between pseudo elements. */
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
|
||||
/* The intensity of each blend mode is controlled via layer opacity. */
|
||||
|
||||
/* Second layer: screen. */
|
||||
.image-filters-enabled & .site-featured-image:before {
|
||||
background: $color__link;
|
||||
mix-blend-mode: screen;
|
||||
opacity: 0.1;
|
||||
}
|
||||
|
||||
/* Third layer: multiply. */
|
||||
/* When image filters are inactive, a black overlay is added. */
|
||||
.site-featured-image:after {
|
||||
background: #000;
|
||||
mix-blend-mode: multiply;
|
||||
opacity: .7;
|
||||
|
||||
/* When image filters are active, a blue overlay is added. */
|
||||
.image-filters-enabled & {
|
||||
background: $color__link;
|
||||
opacity: .8;
|
||||
z-index: 3;
|
||||
|
||||
/* Browsers supporting mix-blend-mode don't need opacity < 1 */
|
||||
@supports (mix-blend-mode: multiply) {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Fourth layer: overlay. */
|
||||
.image-filters-enabled & .site-branding-container:after {
|
||||
background: rgba(0, 0, 0, 0.35);
|
||||
mix-blend-mode: overlay;
|
||||
opacity: 0.5;
|
||||
z-index: 4;
|
||||
|
||||
/* Browsers supporting mix-blend-mode can have a light overlay */
|
||||
@supports (mix-blend-mode: overlay) {
|
||||
background: rgba($color__background-body, 0.35);
|
||||
}
|
||||
}
|
||||
|
||||
/* Fifth layer: readability overlay */
|
||||
&:after {
|
||||
background: #000;
|
||||
/**
|
||||
* Add a transition to the readability overlay, to add a subtle
|
||||
* but smooth effect when resizing the screen.
|
||||
*/
|
||||
transition: opacity 1200ms ease-in-out;
|
||||
opacity: 0.7;
|
||||
z-index: 5;
|
||||
|
||||
/* When image filters are active, a blue overlay is added. */
|
||||
.image-filters-enabled & {
|
||||
background: mix($color__link, black, 12%);
|
||||
opacity: 0.38;
|
||||
|
||||
@include media(tablet) {
|
||||
opacity: 0.18;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
::-moz-selection {
|
||||
background: rgba($color__background-body, 0.17);
|
||||
}
|
||||
|
||||
::selection {
|
||||
background: rgba($color__background-body, 0.17);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,139 @@
|
||||
// Site header
|
||||
|
||||
.site-header {
|
||||
padding: 1em;
|
||||
|
||||
&.featured-image {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
min-height: 90vh;
|
||||
|
||||
.site-branding-container {
|
||||
margin-bottom: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@include media(tablet) {
|
||||
margin: 0;
|
||||
padding: 3rem 0;
|
||||
|
||||
&.featured-image {
|
||||
min-height: 100vh;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Site branding
|
||||
|
||||
.site-branding {
|
||||
|
||||
color: $color__text-light;
|
||||
-webkit-hyphens: auto;
|
||||
-moz-hyphens: auto;
|
||||
-ms-hyphens: auto;
|
||||
hyphens: auto;
|
||||
position: relative;
|
||||
word-wrap: break-word;
|
||||
|
||||
@include media(tablet) {
|
||||
margin: 0 $size__site-margins;
|
||||
}
|
||||
}
|
||||
|
||||
// Site logo
|
||||
|
||||
.site-logo {
|
||||
|
||||
position: relative;
|
||||
z-index: 999;
|
||||
margin-bottom: calc(.66 * #{$size__spacing-unit});
|
||||
|
||||
@include media(tablet) {
|
||||
margin-bottom: 0;
|
||||
position: absolute;
|
||||
right: calc(100% + (1.25 * #{$size__spacing-unit}));
|
||||
top: 4px; // Accounts for box-shadow widths
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.custom-logo-link {
|
||||
border-radius: 100%;
|
||||
box-sizing: content-box;
|
||||
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
|
||||
display: block;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
overflow: hidden;
|
||||
transition: box-shadow $background_transition ease-in-out;
|
||||
|
||||
.custom-logo {
|
||||
min-height: inherit;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
box-shadow: 0 0 0 2px rgba(0, 0, 0, 1);
|
||||
}
|
||||
|
||||
@include media(tablet) {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Site title
|
||||
|
||||
.site-title {
|
||||
margin: auto;
|
||||
display: inline;
|
||||
color: $color__text-main;
|
||||
|
||||
a {
|
||||
color: $color__text-main;
|
||||
|
||||
&:link,
|
||||
&:visited {
|
||||
color: $color__text-main;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $color__text-hover;
|
||||
}
|
||||
}
|
||||
|
||||
.featured-image & {
|
||||
margin: 0;
|
||||
|
||||
@include media(tablet) {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
/* When there is no description set, make sure navigation appears below title. */
|
||||
+ .main-navigation {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@include media(tablet) {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
&:not(:empty) + .site-description:not(:empty):before {
|
||||
content: "\2014";
|
||||
margin: 0 .2em;
|
||||
}
|
||||
}
|
||||
|
||||
// Site description
|
||||
|
||||
.site-description {
|
||||
|
||||
display: inline;
|
||||
color: $color__text-light;
|
||||
font-weight: normal;
|
||||
margin: 0;
|
||||
}
|
||||
@ -0,0 +1,65 @@
|
||||
.archive .page-header,
|
||||
.search .page-header,
|
||||
.error404 .page-header {
|
||||
|
||||
margin: $size__spacing-unit $size__spacing-unit calc(3 * #{$size__spacing-unit});
|
||||
|
||||
@include media(tablet) {
|
||||
margin: 0 $size__site-margins calc(3 * #{$size__spacing-unit});
|
||||
}
|
||||
|
||||
.page-title {
|
||||
|
||||
color: $color__text-light;
|
||||
display: inline;
|
||||
letter-spacing: normal;
|
||||
|
||||
&:before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.search-term,
|
||||
.page-description {
|
||||
display: inherit;
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
||||
.archive .page-header .page-description,
|
||||
.search .page-header .page-description {
|
||||
display: block;
|
||||
color: $color__text-main;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.hfeed .entry .entry-header {
|
||||
|
||||
@include media(tablet) {
|
||||
margin: calc(3 * #{$size__spacing-unit}) $size__site-margins calc(#{ $size__spacing-unit } / 2);
|
||||
}
|
||||
}
|
||||
|
||||
/* 404 & Not found */
|
||||
|
||||
.error-404.not-found,
|
||||
.no-results.not-found {
|
||||
|
||||
.page-content {
|
||||
|
||||
margin: calc(3 * #{$size__spacing-unit}) #{$size__spacing-unit};
|
||||
|
||||
@include media(tablet) {
|
||||
margin: calc(3 * #{$size__spacing-unit}) $size__site-margins calc(#{ $size__spacing-unit } / 2);
|
||||
}
|
||||
}
|
||||
|
||||
.search-submit {
|
||||
vertical-align: middle;
|
||||
margin: $size__spacing-unit 0;
|
||||
}
|
||||
|
||||
.search-field {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,415 @@
|
||||
.comment-content a {
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.bypostauthor {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.comments-area {
|
||||
-webkit-hyphens: auto;
|
||||
-moz-hyphens: auto;
|
||||
-ms-hyphens: auto;
|
||||
hyphens: auto;
|
||||
margin: calc(2 * #{$size__spacing-unit}) $size__spacing-unit;
|
||||
word-wrap: break-word;
|
||||
@include postContentMaxWidth();
|
||||
|
||||
@include media(tablet) {
|
||||
margin: calc(3 * #{$size__spacing-unit}) $size__site-margins;
|
||||
}
|
||||
|
||||
& > * {
|
||||
margin-top: calc(2 * #{$size__spacing-unit});
|
||||
margin-bottom: calc(2 * #{$size__spacing-unit});
|
||||
|
||||
@include media(tablet) {
|
||||
margin-top: calc(3 * #{$size__spacing-unit});
|
||||
margin-bottom: calc(3 * #{$size__spacing-unit});
|
||||
}
|
||||
}
|
||||
|
||||
/* Add extra margin when the comments section is located immediately after the
|
||||
* post itself (this happens on pages).
|
||||
*/
|
||||
.entry + & {
|
||||
margin-top: calc(3 * #{$size__spacing-unit});
|
||||
}
|
||||
|
||||
.comments-title-wrap {
|
||||
|
||||
@include media(tablet) {
|
||||
align-items: baseline;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.comments-title {
|
||||
@include post-section-dash;
|
||||
margin: 0;
|
||||
|
||||
@include media(tablet) {
|
||||
flex: 1 0 calc(3 * (100vw / 12));
|
||||
}
|
||||
}
|
||||
|
||||
.discussion-meta {
|
||||
@include media(tablet) {
|
||||
flex: 0 0 calc(2 * (100vw / 12));
|
||||
margin-left: #{$size__spacing-unit};
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#comment {
|
||||
max-width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#respond {
|
||||
position: relative;
|
||||
|
||||
.comment-user-avatar {
|
||||
margin: $size__spacing-unit 0 -#{$size__spacing-unit};
|
||||
}
|
||||
|
||||
.comment .comment-form {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
> small {
|
||||
display: block;
|
||||
font-size: $font__size_base;
|
||||
position: absolute;
|
||||
left: calc(#{$size__spacing-unit} + 100%);
|
||||
top: calc(-3.5 * #{$size__spacing-unit});
|
||||
width: calc(100vw / 12 );
|
||||
}
|
||||
}
|
||||
|
||||
#comments {
|
||||
|
||||
> .comments-title:last-child {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.comment-form-flex {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.comments-title {
|
||||
display: none;
|
||||
margin: 0;
|
||||
order: 1;
|
||||
}
|
||||
|
||||
#respond {
|
||||
order: 2;
|
||||
|
||||
+ .comments-title {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.comment-form-wrapper,
|
||||
.comment-form-wrapper .comments-title {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.comment-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
|
||||
.children {
|
||||
margin: 0;
|
||||
padding: 0 0 0 $size__spacing-unit;
|
||||
}
|
||||
|
||||
> .comment:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.pingback,
|
||||
.trackback {
|
||||
|
||||
.comment-body {
|
||||
color: $color__text-light;
|
||||
@include font-family( $font__heading );
|
||||
font-size: $font__size-xs;
|
||||
font-weight: 500;
|
||||
margin-top: $size__spacing-unit;
|
||||
margin-bottom: $size__spacing-unit;
|
||||
|
||||
a:not(.comment-edit-link) {
|
||||
font-weight: bold;
|
||||
font-size: $font__size-base / (1 * $font__size-ratio);
|
||||
line-height: 1.5;
|
||||
padding-right: #{0.5 * $size__spacing-unit};
|
||||
display: block;
|
||||
}
|
||||
|
||||
.comment-edit-link {
|
||||
color: $color__text-light;
|
||||
@include font-family( $font__heading );
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.comment-reply {
|
||||
|
||||
#respond + & {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.comment-reply-link {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.comment {
|
||||
list-style: none;
|
||||
position: relative;
|
||||
|
||||
@include media(tablet) {
|
||||
padding-left: calc(.5 * (#{$size__spacing-unit} + calc(100vw / 12 )));
|
||||
|
||||
&.depth-1,
|
||||
.children {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
&.depth-1 {
|
||||
margin-left: calc(3.25 * #{$size__spacing-unit});
|
||||
}
|
||||
}
|
||||
|
||||
.comment-body {
|
||||
margin: calc(2 * #{$size__spacing-unit}) 0 0;
|
||||
}
|
||||
|
||||
|
||||
.comment-meta {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.comment-author {
|
||||
|
||||
.avatar {
|
||||
float: left;
|
||||
margin-right: $size__spacing-unit;
|
||||
position: relative;
|
||||
|
||||
@include media(tablet) {
|
||||
float: inherit;
|
||||
margin-right: inherit;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: calc(100% + #{$size__spacing-unit});
|
||||
}
|
||||
}
|
||||
|
||||
.fn {
|
||||
position: relative;
|
||||
display: block;
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
|
||||
&:hover {
|
||||
color: $color__link-hover;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.post-author-badge {
|
||||
border-radius: 100%;
|
||||
display: block;
|
||||
height: 18px;
|
||||
position: absolute;
|
||||
background: lighten( $color__link, 8% );
|
||||
right: calc(100% - #{$size__spacing-unit * 2.5});
|
||||
top: -3px;
|
||||
width: 18px;
|
||||
|
||||
@include media(tablet) {
|
||||
right: calc(100% + #{$size__spacing-unit * .75});
|
||||
}
|
||||
|
||||
svg {
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
display: block;
|
||||
fill: white;
|
||||
transform: scale(0.875);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.comment-metadata {
|
||||
|
||||
> a,
|
||||
.comment-edit-link {
|
||||
display: inline;
|
||||
font-weight: 500;
|
||||
color: $color__text-light;
|
||||
vertical-align: baseline;
|
||||
|
||||
time {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $color__link-hover;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
> * {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.edit-link-sep {
|
||||
color: $color__text-light;
|
||||
margin: 0 0.2em;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
.edit-link {
|
||||
color: $color__text-light;
|
||||
|
||||
svg {
|
||||
transform: scale(0.8);
|
||||
vertical-align: baseline;
|
||||
margin-right: 0.1em;
|
||||
}
|
||||
}
|
||||
|
||||
.comment-edit-link {
|
||||
position: relative;
|
||||
padding-left: $size__spacing-unit;
|
||||
margin-left: -#{$size__spacing-unit};
|
||||
z-index: 1;
|
||||
|
||||
&:hover {
|
||||
color: $color__link;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.comment-content {
|
||||
|
||||
margin: $size__spacing-unit 0;
|
||||
|
||||
@include media(desktop) {
|
||||
padding-right: $size__spacing-unit;
|
||||
}
|
||||
|
||||
> *:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
> *:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: underline;
|
||||
text-decoration-thickness: 2px;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.comment-reply-link,
|
||||
#cancel-comment-reply-link {
|
||||
font-weight: 500;
|
||||
|
||||
&:hover {
|
||||
color: $color__link-hover;
|
||||
}
|
||||
}
|
||||
|
||||
.discussion-avatar-list {
|
||||
@include clearfix;
|
||||
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
li {
|
||||
position: relative;
|
||||
list-style: none;
|
||||
margin: 0 -8px 0 0;
|
||||
padding: 0;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.comment-user-avatar {
|
||||
|
||||
img {
|
||||
height: calc(1.5 * #{$size__spacing-unit});
|
||||
width: calc(1.5 * #{$size__spacing-unit});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.discussion-meta {
|
||||
|
||||
.discussion-meta-info {
|
||||
margin: 0;
|
||||
|
||||
.svg-icon {
|
||||
vertical-align: middle;
|
||||
fill: currentColor;
|
||||
transform: scale( 0.6 ) scaleX(-1) translateY(-0.1em);
|
||||
margin-left: -#{.25 * $size__spacing-unit}; // Align icon with avatars above.
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.comment-form {
|
||||
|
||||
.comment-notes,
|
||||
label {
|
||||
@include font-family( $font__heading );
|
||||
font-size: $font__size-xs;
|
||||
color: $color__text-light;
|
||||
}
|
||||
|
||||
#wp-comment-cookies-consent {
|
||||
margin: 0 10px 0 0;
|
||||
}
|
||||
|
||||
.comment-form-author,
|
||||
.comment-form-email {
|
||||
@include media(tablet) {
|
||||
width: calc(50% - #{$size__spacing-unit / 2});
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
|
||||
.comment-form-email {
|
||||
@include media(tablet) {
|
||||
margin-left: $size__spacing-unit;
|
||||
}
|
||||
}
|
||||
|
||||
input[name="author"],
|
||||
input[name="email"],
|
||||
input[name="url"] {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,305 @@
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,107 @@
|
||||
.widget {
|
||||
margin: 0 0 #{$size__spacing-unit};
|
||||
|
||||
.widget-title {
|
||||
font-size: $font__size-lg;
|
||||
}
|
||||
|
||||
/* Make sure select elements fit in widgets. */
|
||||
select {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $color__link;
|
||||
|
||||
&:hover {
|
||||
color: $color__link-hover;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.widget_archive,
|
||||
.widget_categories,
|
||||
.widget_meta,
|
||||
.widget_nav_menu,
|
||||
.widget_pages,
|
||||
.widget_recent_comments,
|
||||
.widget_recent_entries,
|
||||
.widget_rss {
|
||||
|
||||
ul {
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
|
||||
li {
|
||||
color: $color__text-light;
|
||||
@include font-family( $font__heading );
|
||||
font-size: calc(#{$font__size_base} * #{$font__size-ratio});
|
||||
font-weight: 700;
|
||||
line-height: $font__line-height-heading;
|
||||
margin-top: #{0.5 * $size__spacing-unit};
|
||||
margin-bottom: #{0.5 * $size__spacing-unit};
|
||||
}
|
||||
|
||||
@include nestedSubMenuPadding();
|
||||
}
|
||||
}
|
||||
|
||||
.widget_tag_cloud {
|
||||
|
||||
.tagcloud {
|
||||
@include font-family( $font__heading );
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.widget_search {
|
||||
|
||||
.search-field {
|
||||
width: 100%;
|
||||
|
||||
@include media(mobile) {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.search-submit {
|
||||
display: block;
|
||||
margin-top: $size__spacing-unit;
|
||||
}
|
||||
}
|
||||
|
||||
.widget_calendar .calendar_wrap {
|
||||
text-align: center;
|
||||
|
||||
table td,
|
||||
table th {
|
||||
border: none;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: underline;
|
||||
text-decoration-thickness: 2px;
|
||||
}
|
||||
|
||||
.wp-calendar-table {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.wp-calendar-nav {
|
||||
margin: 0 0 $size__spacing-unit;
|
||||
display: table;
|
||||
width: 100%;
|
||||
@include font-family( $font__heading );
|
||||
|
||||
span {
|
||||
display: table-cell;
|
||||
padding: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
.wp-calendar-nav-prev,
|
||||
.wp-calendar-nav-next {
|
||||
width: 40%;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user