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