[Summary view] [Print] [Text view]

   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  }