Changeset 44149 for trunk/src/wp-content/themes/twentynineteen/sass/site/header/_site-featured-image.scss

Timestamp:

12/14/2018 02:32:33 AM (8 years ago)

Author:

pento

Message:

Default Themes: Import Twenty Nineteen from the 5.0 branch.

Merges [43808,43821,43842,43860,43892,43904,43909,43926-43929,43956,43961-43963] from the 5.0 branch to trunk.

Props allancole, karmatosed, kjellr, yingling017, mrasharirfan, milana_cap, fabiankaegy, westonruter, jorbin, netweb, b-07, khleomix, audrasjb, nielslange, mmaumio, richsalvucci, littlebigthing, dimadin, joyously, anevins, peterwilsoncc, dannycooper, iCaleb, siriokun, technosiren, travel_girl, azchughtai, ianbelanger, nadim1992, ismailelkorchi, nativeinside, chetan200891, grapplerulrich, ocean90, joshfeck, frankew, AbdulWahab610, mendezcode, eliorivero, melchoyce, joen, laurelfulford, mdawaffe, kraftbj, dsmart, nao, mayukojpn, enodekciw, ketuchetan, atanasangelovdev, poena, sharaz, artisticasad, mukesh27, burhandodhy, crunnells, aprakasa, themeroots, imonly_ik, tlxo, youthkee, brentswisher, smyoon315, mrahmadawais, desideveloper, Kau-Boy, mor10, mikeyarce, dingo_bastard, xkon, twoabove.

Fixes #45424.

Location:

trunk

Files:

• . (modified) (1 prop)
• src/wp-content/themes/twentynineteen (copied) (copied from branches/5.0/src/wp-content/themes/twentynineteen )
• src/wp-content/themes/twentynineteen/sass/site/header/_site-featured-image.scss (modified) (7 diffs)

trunk/src/wp-content/themes/twentynineteen/sass/site/header/_site-featured-image.scss

@@ -2 +2 @@
 
 .site-header.featured-image {
+
+        /* Hide overflow for overflowing featured image */
+        overflow: hidden;
 
         /* Need relative positioning to properly align layers. */
@@ -7 +10 @@
 
         /* Add text shadow to text, to increase readability. */
-        text-shadow: 0 1px 2px rgba(black, 0.35);
+        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
 
         /* Set white text color when featured image is set. */
@@ -18 +21 @@
         .entry-meta,
         .entry-title {
-                color: white;
+                color: $color__background-body;
         }
 
         .main-navigation a,
+        .main-navigation a + svg,
         .social-navigation a,
         .site-title a,
-        .hentry a {
-                color: white;
+        .site-featured-image a {
+                color: $color__background-body;
                 transition: opacity $link_transition ease-in-out;
 
                 &:hover,
-                &:active {
-                        color: white;
+                &:active,
+                &:hover + svg,
+                &:active + svg {
+                        color: $color__background-body;
                         opacity: 0.6;
                 }
 
-                &:focus {
-                        color: white;
-                }
-        }
-
-        // add focus state to social media icons
+                &:focus,
+                &:focus + svg {
+                        color: $color__background-body;
+                }
+        }
+
+        /* add focus state to social media icons */
         .social-navigation a {
                 &:focus {
-                        color: white;
+                        color: $color__background-body;
                         opacity: 1;
-                        border-bottom: 1px solid white;
+                        border-bottom: 1px solid $color__background-body;
                 }
         }
 
         .social-navigation svg,
-        .hentry 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(black, 0.35) );
-                        filter: drop-shadow(0 1px 2px rgba(black, 0.35) );
-        }
-
-        /* Post header styles */
-        .hentry .entry-header {
-
-                margin-left: 0;
-                margin-right: 0;
-
-                @include media (tablet) {
-
-                        margin-left: calc(2 * (100vw / 12));
-                        margin-right: calc(2 * (100vw / 12));
-                }
-
-                .entry-title {
-
-                        &:before {
-                                background: white;
+                -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%;
+                                        }
+                                }
                         }
                 }
@@ -79 +183 @@
         .custom-logo-link {
 
-                background: white;
-                box-shadow: 0 0 0 0 rgba(white, 0);
+                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(white, 1);
+                        box-shadow: 0 0 0 2px rgba($color__background-body, 1);
                 }
         }
 
         /* Make sure important elements are above pseudo elements used for effects. */
-        .site-branding,
-        .hentry .entry-header {
+        .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:before,
         .site-branding-container:after,
-        .hentry:before,
-        .hentry:after,
+        .site-featured-image:before,
+        .site-featured-image:after,
         &:after {
                 display: block;
@@ -110 +218 @@
 
         /* Background & Effects */
-        /* Shared background settings between pseudo elements. See .site-branding-container */
+        /* Shared background settings between pseudo elements. */
         background-position: center;
         background-repeat: no-repeat;
@@ -117 +225 @@
         /* The intensity of each blend mode is controlled via layer opacity. */
 
-        /* First layer: grayscale. */
-        .site-branding-container:before {
-                background-position: center;
-                background-repeat: no-repeat;
-                background-size: cover;
-                filter: grayscale(100%);
-                z-index: 1;
-        }
-
         /* Second layer: screen. */
-        .hentry:before {
+        .image-filters-enabled & .site-featured-image:before {
                 background: $color__link;
                 mix-blend-mode: screen;
                 opacity: 0.1;
-                z-index: 2;
         }
 
         /* Third layer: multiply. */
-        .hentry:after {
-                background: $color__link;
+        /* When image filters are inactive, a black overlay is added. */
+        .site-featured-image:after {
+                background: #000;
                 mix-blend-mode: multiply;
-                opacity: 1;
-                z-index: 3;
+                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. */
-        .site-branding-container:after {
-                background: rgba(white, 0.35);
+        .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: mix($color__link, black, 12%);
-
+                background: #000;
                 /**
                  * Add a transition to the readability overlay, to add a subtle
@@ -159 +273 @@
                  */
                 transition: opacity 1200ms ease-in-out;
-
+                opacity: 0.7;
                 z-index: 5;
-                opacity: 0.38;
-
-                @include media(tablet) {
-                        opacity: 0.18;
-                }
-
-                @include media(desktop) {
-                        opacity: 0.1;
-                }
-        }
+
+                /* 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(white, 0.17);
+                background: rgba($color__background-body, 0.17);
         }
 
         ::selection {
-                background: rgba(white, 0.17);
+                background: rgba($color__background-body, 0.17);
         }
 }