_site-featured-image.scss (6035B)
1 // Featured image styles 2 3 .site-header.featured-image { 4 5 /* Hide overflow for overflowing featured image */ 6 overflow: hidden; 7 8 /* Need relative positioning to properly align layers. */ 9 position: relative; 10 11 /* Add text shadow to text, to increase readability. */ 12 text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); 13 14 /* Set white text color when featured image is set. */ 15 .site-branding .site-title, 16 .site-branding .site-description, 17 .main-navigation a:after, 18 .main-navigation .main-menu > li.menu-item-has-children:after, 19 .main-navigation li, 20 .social-navigation li, 21 .entry-meta, 22 .entry-title { 23 color: $color__background-body; 24 } 25 26 .main-navigation a, 27 .main-navigation a + svg, 28 .social-navigation a, 29 .site-title a, 30 .site-featured-image a { 31 color: $color__background-body; 32 transition: opacity $link_transition ease-in-out; 33 34 &:hover, 35 &:active, 36 &:hover + svg, 37 &:active + svg { 38 color: $color__background-body; 39 opacity: 0.6; 40 } 41 42 &:focus, 43 &:focus + svg { 44 color: $color__background-body; 45 } 46 } 47 48 .main-navigation .sub-menu a { 49 opacity: inherit; 50 } 51 52 /* add focus state to social media icons */ 53 .social-navigation a { 54 &:focus { 55 color: $color__background-body; 56 opacity: 1; 57 border-bottom: 1px solid $color__background-body; 58 } 59 } 60 61 .social-navigation svg, 62 .site-featured-image svg { 63 /* Use -webkit- only if supporting: Chrome < 54, iOS < 9.3, Android < 4.4.4 */ 64 -webkit-filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35) ); 65 filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35) ); 66 } 67 68 /* Entry header */ 69 .site-featured-image { 70 71 /* First layer: grayscale. */ 72 .post-thumbnail img { 73 height: auto; 74 left: 50%; 75 max-width: 1000%; 76 min-height: 100%; 77 min-width: 100vw; 78 position: absolute; 79 top: 50%; 80 transform: translateX(-50%) translateY(-50%); 81 width: auto; 82 z-index: 1; 83 84 @supports ( object-fit: cover ) { 85 height: 100%; 86 left: 0; 87 object-fit: cover; 88 top: 0; 89 transform: none; 90 width: 100%; 91 } 92 93 /* When image filters are active, make it grayscale to colorize it blue. */ 94 .image-filters-enabled & { 95 filter: grayscale(100%); 96 } 97 } 98 99 .entry-header { 100 101 margin-top: calc( 4 * #{$size__spacing-unit}); 102 margin-bottom: 0; 103 margin-left: 0; 104 margin-right: 0; 105 106 @include media (tablet) { 107 108 margin-left: $size__site-margins; 109 margin-right: $size__site-margins; 110 } 111 112 .entry-title { 113 114 &:before { 115 background: $color__background-body; 116 } 117 } 118 119 /* Entry meta */ 120 121 .entry-meta { 122 123 font-weight: 500; 124 125 > span { 126 127 margin-right: $size__spacing-unit; 128 display: inline-block; 129 130 &:last-child { 131 margin-right: 0; 132 } 133 } 134 135 a { 136 137 @include link-transition; 138 color: currentColor; 139 140 &:hover { 141 text-decoration: none; 142 } 143 } 144 145 .svg-icon { 146 position: relative; 147 display: inline-block; 148 vertical-align: middle; 149 margin-right: 0.5em; 150 } 151 152 .discussion-avatar-list { 153 display: none; 154 } 155 } 156 157 &.has-discussion { 158 159 @include media (tablet) { 160 161 .entry-meta { 162 display: flex; 163 position: relative; 164 } 165 166 .entry-title { 167 padding-right: calc(1 * (100vw / 12) + #{$size__spacing-unit}); 168 } 169 170 .entry-meta .comment-count { 171 position: absolute; 172 right: 0; 173 } 174 175 .entry-meta .discussion-avatar-list { 176 display: block; 177 position: absolute; 178 bottom: 100%; 179 } 180 } 181 } 182 } 183 } 184 185 /* Custom Logo Link */ 186 187 .custom-logo-link { 188 189 background: $color__background-body; 190 box-shadow: 0 0 0 0 rgba($color__background-body, 0); 191 192 &:hover, 193 &:active, 194 &:focus { 195 box-shadow: 0 0 0 2px rgba($color__background-body, 1); 196 } 197 } 198 199 /* Make sure important elements are above pseudo elements used for effects. */ 200 .site-branding { 201 position: relative; 202 z-index: 10; 203 } 204 205 .site-featured-image .entry-header { 206 position: relative; 207 z-index: 9; 208 } 209 210 /* Set up image filter layer positioning */ 211 .site-branding-container:after, 212 .site-featured-image:before, 213 .site-featured-image:after, 214 &:after { 215 display: block; 216 position: absolute; 217 top: 0; left: 0; 218 content: "\020"; 219 width: 100%; 220 height: 100%; 221 } 222 223 /* Background & Effects */ 224 /* Shared background settings between pseudo elements. */ 225 background-position: center; 226 background-repeat: no-repeat; 227 background-size: cover; 228 229 /* The intensity of each blend mode is controlled via layer opacity. */ 230 231 /* Second layer: screen. */ 232 .image-filters-enabled & .site-featured-image:before { 233 background: $color__link; 234 mix-blend-mode: screen; 235 opacity: 0.1; 236 } 237 238 /* Third layer: multiply. */ 239 /* When image filters are inactive, a black overlay is added. */ 240 .site-featured-image:after { 241 background: #000; 242 mix-blend-mode: multiply; 243 opacity: .7; 244 245 /* When image filters are active, a blue overlay is added. */ 246 .image-filters-enabled & { 247 background: $color__link; 248 opacity: .8; 249 z-index: 3; 250 251 /* Browsers supporting mix-blend-mode don't need opacity < 1 */ 252 @supports (mix-blend-mode: multiply) { 253 opacity: 1; 254 } 255 } 256 } 257 258 /* Fourth layer: overlay. */ 259 .image-filters-enabled & .site-branding-container:after { 260 background: rgba(0, 0, 0, 0.35); 261 mix-blend-mode: overlay; 262 opacity: 0.5; 263 z-index: 4; 264 265 /* Browsers supporting mix-blend-mode can have a light overlay */ 266 @supports (mix-blend-mode: overlay) { 267 background: rgba($color__background-body, 0.35); 268 } 269 } 270 271 /* Fifth layer: readability overlay */ 272 &:after { 273 background: #000; 274 /** 275 * Add a transition to the readability overlay, to add a subtle 276 * but smooth effect when resizing the screen. 277 */ 278 transition: opacity 1200ms ease-in-out; 279 opacity: 0.7; 280 z-index: 5; 281 282 /* When image filters are active, a blue overlay is added. */ 283 .image-filters-enabled & { 284 background: mix($color__link, black, 12%); 285 opacity: 0.38; 286 287 @include media(tablet) { 288 opacity: 0.18; 289 } 290 } 291 } 292 293 294 ::-moz-selection { 295 background: rgba($color__background-body, 0.17); 296 } 297 298 ::selection { 299 background: rgba($color__background-body, 0.17); 300 } 301 }