[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          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      /* Make sure important elements are above pseudo elements used for effects. */
 198      .site-branding {
 199          position: relative;
 200          z-index: 10;
 201      }
 202  
 203      .site-featured-image .entry-header {
 204          position: relative;
 205          z-index: 9;
 206      }
 207  
 208      /* Set up image filter layer positioning */
 209      .site-branding-container:after,
 210      .site-featured-image:before,
 211      .site-featured-image:after,
 212      &:after {
 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      /* The intensity of each blend mode is controlled via layer opacity. */
 228  
 229      /* Second layer: screen. */
 230      .image-filters-enabled & .site-featured-image:before {
 231          background: $color__link;
 232          mix-blend-mode: screen;
 233          opacity: 0.1;
 234      }
 235  
 236      /* Third layer: multiply. */
 237      /* When image filters are inactive, a black overlay is added. */
 238      .site-featured-image:after {
 239          background: #000;
 240          mix-blend-mode: multiply;
 241          opacity: .7;
 242  
 243          /* When image filters are active, a blue overlay is added. */
 244          .image-filters-enabled & {
 245              background: $color__link;
 246              opacity: .8;
 247              z-index: 3;
 248  
 249              /* Browsers supporting mix-blend-mode don't need opacity < 1 */
 250              @supports (mix-blend-mode: multiply) {
 251                  opacity: 1;
 252              }
 253          }
 254      }
 255  
 256      /* Fourth layer: overlay. */
 257      .image-filters-enabled & .site-branding-container:after {
 258          background: rgba(0, 0, 0, 0.35);
 259          mix-blend-mode: overlay;
 260          opacity: 0.5;
 261          z-index: 4;
 262  
 263          /* Browsers supporting mix-blend-mode can have a light overlay */
 264          @supports (mix-blend-mode: overlay) {
 265              background: rgba($color__background-body, 0.35);
 266          }
 267      }
 268  
 269      /* Fifth layer: readability overlay */
 270      &:after {
 271          background: #000;
 272          /**
 273           * Add a transition to the readability overlay, to add a subtle
 274           * but smooth effect when resizing the screen.
 275           */
 276          transition: opacity 1200ms ease-in-out;
 277          opacity: 0.7;
 278          z-index: 5;
 279  
 280          /* When image filters are active, a blue overlay is added. */
 281          .image-filters-enabled & {
 282              background: mix($color__link, black, 12%);
 283              opacity: 0.38;
 284  
 285              @include media(tablet) {
 286                  opacity: 0.18;
 287              }
 288          }
 289      }
 290  
 291  
 292      ::-moz-selection {
 293          background: rgba($color__background-body, 0.17);
 294      }
 295  
 296      ::selection {
 297          background: rgba($color__background-body, 0.17);
 298      }
 299  }