name : _site-featured-image.scss // 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); } }