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

Timestamp:

10/30/2018 02:13:07 AM (7 years ago)

Author:

allancole

Message:

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

Let Gutenberg shine with this simple, fast, and powerful theme. 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.

File:

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

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

@@ -18 +18 @@
     .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 {
-
+                filter: drop-shadow(0 1px 2px rgba(black, 0.35) );
+    }
+
+    /* Entry header */
+
+    .site-featured-image .entry-header {
+
+        margin-bottom: 0;
         margin-left: 0;
         margin-right: 0;
@@ -70 +76 @@
 
             &:before {
-                background: white;
+                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 +149 @@
     .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;
     }
 
@@ -98 +173 @@
     .site-branding-container:before,
     .site-branding-container:after,
-    .hentry:before,
-    .hentry:after,
+    .site-featured-image:before,
+    .site-featured-image:after,
     &:after {
         display: block;
@@ -118 +193 @@
 
     /* First layer: grayscale. */
-    .site-branding-container:before {
+    .site-branding-container:before {
         background-position: center;
         background-repeat: no-repeat;
         background-size: cover;
-        filter: grayscale(100%);
         z-index: 1;
+
+        /* When image filters are active, make it grayscale to colorize it blue. */
+        .image-filters-enabled & {
+            filter: grayscale(100%);
+        }
     }
 
     /* 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(#000, 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 +253 @@
          */
         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);
     }
 }