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

Timestamp:

12/14/2018 02:32:33 AM (6 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);
     }
 }