Changeset 43892 for branches/5.0/src/wp-content/themes/twentynineteen/sass/site/header/_site-featured-image.scss

Timestamp:

11/12/2018 11:19:13 PM (6 years ago)

Author:

allancole

Message:

Updating Twenty Nineteen, our new default theme for 2019, set for 5.0.

This update applies the following changes:

• Improve menu UI to support keyboard, click and touch interactions
• Improve variable scoping and js performance in menu interaction javascript
• Improve custom-colors for selected text, buttons and menu hover styles
• Improve margins structure for more consistency between editor and frontend
• Improve discussion avatars for simpler wording and better performance
• Improve fonts in list widgets and list blocks
• Improve comment responsive spacing and avatar display
• Improve various block styles to make them consistent between the editor and frontend
• Add tabbed browsing support for ie11
• Add backwards compatibility support for older versions of WordPress
• Add fallback styles for older versions of WP where Gutenberg is activated and then deactivated (backwards compatibility)
• Add sizes attribute for featured images to improve responsive performance
• Add focus-within polyfill
• Add a footer menu for secondary page links
• Fix editor styles to prevent conflicts with plugins that add meta boxes to the editor
• Fix columns block issues on small screens
• Fix empty-space font text cursor issue in Gutenberg editor
• Fix RTL floating styles so that left/right floats are honored
• Fix cover image block margins/padding
• Fix invalid rgba style
• Fix php warning when returning attributes
• Fix gallery widget margins to improve gallery grids
• Fix .entry-content selectors to prevent shortcodes, plugins and other unknown content from breaking the layout
• Remove translation escaping to follow code standards in previous default themes
• Remove custom color output in the fronten header when default color is selected
• Remove fly-out sub-sub-sub-menu behavior on desktop to prevent sub-menus from falling off the screen
• General code clean up and coding standards improvements

Initial development occurred on GitHub. See: ​https://github.com/WordPress/twentynineteen

Props allancole, karmatosed, kjellr, yingling017, mrasharirfan, milana_cap, fabiankaegy, westonruter, aaronjorbin, netweb, b-07, khleomix, blowery, dereksmart, jasmussen, audrasjb, nielslange, mmaumio, dimadin, joyously, anevins12, peterwilsoncc, dannycooper, icaleb, siriokun, technosiren, travel_girl, azchughtai, ianbelanger, nadim1992, ismailelkorchi, nativeinside, chetan200891, icaleb, grapplerulrich, ocean90, joshfeck, frankew, abdulwahab610, mendezcode, eliorivero, melchoyce, joen, laurelfulford, mdawaffe, kraftbj, dsmart, mukeshpanchal27, burhandodhy, crunnells, Ismail-elkorchi, aryaprakasa, @tlxo, @themeroots, @whizbangik, @yingles, @youthkee, @brentswisher, @smy315, @ahmadawais, @desi-developer.

File:

• branches/5.0/src/wp-content/themes/twentynineteen/sass/site/header/_site-featured-image.scss (modified) (9 diffs)

branches/5.0/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. */
@@ -55 +58 @@
     .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) );
+        -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 .entry-header {
-        margin-top: calc( 4 * #{$size__spacing-unit});
-        margin-bottom: 0;
-        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: $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 {
+    .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) {
 
-                .entry-meta {
-                    display: flex;
+                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;
-                }
-
-                .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%;
+                    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%;
+                    }
                 }
             }
@@ -171 +205 @@
 
     /* Set up image filter layer positioning */
-    .site-branding-container:before,
     .site-branding-container:after,
     .site-featured-image:before,
@@ -185 +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;
@@ -191 +224 @@
 
     /* 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;
-        z-index: 1;
-
-        /* When image filters are active, make it grayscale to colorize it blue. */
-        .image-filters-enabled & {
-            filter: grayscale(100%);
-        }
-    }
 
     /* Second layer: screen. */
@@ -213 +233 @@
 
     /* Third layer: multiply. */
-    /* When image filters are inactive, a black overlay is added. */
-    .site-featured-image:after {
+    /* When image filters are inactive, a black overlay is added. */
+    .site-featured-image:after {
         background: #000;
         mix-blend-mode: multiply;
@@ -234 +254 @@
     /* Fourth layer: overlay. */
     .image-filters-enabled & .site-branding-container:after {
-        background: rgba(#000, 0.35);
+        background: rgba(0, 0, 0, 0.35);
         mix-blend-mode: overlay;
         opacity: 0.5;
@@ -253 +273 @@
          */
         transition: opacity 1200ms ease-in-out;
-        opacity: 0.7;
+        opacity: 0.7;
         z-index: 5;