[Summary view] [Print] [Text view]

   1  .sticky {
   2      display: block;
   3  }
   4  
   5  .sticky-post {
   6      background: $color__background-button;
   7      color: #fff;
   8      display: inline-block;
   9      font-weight: bold;
  10      line-height: 1;
  11      padding: .25rem;
  12      position: absolute;
  13      text-transform: uppercase;
  14      top: -$size__spacing-unit;
  15      z-index: 1;
  16  }
  17  
  18  .updated:not(.published) {
  19      display: none;
  20  }
  21  
  22  .page-links {
  23      clear: both;
  24      margin: 0 0 calc(1.5 * #{$size__spacing-unit});
  25  }
  26  
  27  .entry {
  28  
  29      margin-top: calc(6 * #{$size__spacing-unit});
  30  
  31      &:first-of-type {
  32          margin-top: 0;
  33      }
  34  
  35      .entry-header {
  36  
  37          margin: calc(3 * #{ $size__spacing-unit}) $size__spacing-unit $size__spacing-unit;
  38          position: relative;
  39  
  40          @include media(tablet) {
  41              margin: calc(3 * #{ $size__spacing-unit}) $size__site-margins $size__spacing-unit;
  42          }
  43      }
  44  
  45      .entry-title {
  46  
  47          @include post-section-dash;
  48          margin: 0;
  49  
  50          a {
  51              color: inherit;
  52  
  53              &:hover {
  54                  color: $color__text-hover;
  55              }
  56          }
  57      }
  58  
  59      .entry-meta,
  60      .entry-footer {
  61  
  62          color: $color__text-light;
  63          font-weight: 500;
  64  
  65          > span {
  66  
  67              margin-right: $size__spacing-unit;
  68              display: inline-block;
  69  
  70              &:last-child {
  71                  margin-right: 0;
  72              }
  73          }
  74  
  75          a {
  76  
  77              @include link-transition;
  78              color: currentColor;
  79  
  80              &:hover {
  81                  text-decoration: none;
  82                  color: $color__link;
  83              }
  84          }
  85  
  86          .svg-icon {
  87              position: relative;
  88              display: inline-block;
  89              vertical-align: middle;
  90              margin-right: 0.5em;
  91          }
  92      }
  93  
  94      .entry-meta {
  95          margin: $size__spacing-unit 0;
  96      }
  97  
  98      .entry-footer {
  99  
 100          margin: calc(2 * #{$size__spacing-unit}) $size__spacing-unit $size__spacing-unit;
 101  
 102          @include media(tablet) {
 103              margin: $size__spacing-unit $size__site-margins calc(3 * #{$size__spacing-unit});
 104              max-width: $size__site-tablet-content;
 105          }
 106  
 107          @include media(tablet) {
 108              max-width: $size__site-desktop-content;
 109          }
 110      }
 111  
 112      .post-thumbnail {
 113  
 114          margin: $size__spacing-unit;
 115  
 116          @include media(tablet) {
 117              margin: $size__spacing-unit $size__site-margins;
 118          }
 119  
 120          &:focus {
 121              outline: none;
 122          }
 123  
 124          .post-thumbnail-inner {
 125              display: block;
 126  
 127              img {
 128                  position: relative;
 129                  display: block;
 130                  width: 100%;
 131              }
 132          }
 133      }
 134  
 135      .image-filters-enabled & {
 136  
 137          .post-thumbnail {
 138              position: relative;
 139              display: block;
 140  
 141              .post-thumbnail-inner {
 142                  filter: grayscale(100%);
 143  
 144                  &:after {
 145                      background: rgba(0, 0, 0, 0.35);
 146                      content: "";
 147                      display: block;
 148                      height: 100%;
 149                      opacity: .5;
 150                      pointer-events: none;
 151                      position: absolute;
 152                      top: 0;
 153                      width: 100%;
 154                      z-index: 4;
 155  
 156                      @supports (mix-blend-mode: multiply) {
 157                          display: none;
 158                      }
 159                  }
 160              }
 161  
 162              &:before,
 163              &:after {
 164                  position: absolute;
 165                  display: block;
 166                  width: 100%;
 167                  height: 100%;
 168                  top: 0; left: 0;
 169                  content: "\020";
 170                  pointer-events: none;
 171              }
 172  
 173              @include filter-duotone;
 174  
 175          }
 176      }
 177  
 178      .entry-content,
 179      .entry-summary {
 180          max-width: calc(100% - (2 * #{ $size__spacing-unit }));
 181          margin: 0 $size__spacing-unit;
 182  
 183          @include media(tablet) {
 184              max-width: 80%;
 185              margin: 0 10%;
 186              padding: 0 60px;
 187          }
 188      }
 189  
 190      .entry-content {
 191  
 192          p {
 193              word-wrap: break-word;
 194          }
 195  
 196          .more-link {
 197              @include link-transition;
 198              display: inline;
 199              color: inherit;
 200  
 201              &:after {
 202                  content: "\02192";
 203                  display: inline-block;
 204                  margin-left: 0.5em;
 205              }
 206  
 207              &:hover {
 208                  color: $color__link;
 209                  text-decoration: none;
 210              }
 211          }
 212  
 213          a {
 214              text-decoration: underline;
 215              text-decoration-thickness: 2px;
 216  
 217              &.button,
 218              &:hover {
 219                  text-decoration: none;
 220              }
 221  
 222              &.button {
 223                  display: inline-block;
 224              }
 225  
 226              &.button:hover {
 227                  background: $color__background-button-hover;
 228                  color: $color__background-body;
 229                  cursor: pointer;
 230              }
 231          }
 232  
 233          // Overwrite iframe embeds that have inline styles.
 234          > iframe[style] {
 235  
 236              margin: 32px 0 !important;
 237              max-width: 100% !important;
 238  
 239              @include media(tablet) {
 240                  max-width: $size__site-tablet-content !important;
 241              }
 242  
 243              @include media(desktop) {
 244                  max-width: $size__site-desktop-content !important;
 245              }
 246          }
 247  
 248          // Page links
 249          .page-links a {
 250              margin: calc(0.5 * #{$size__spacing-unit});
 251              text-decoration: none;
 252          }
 253  
 254          // Classic editor audio embeds.
 255          .wp-audio-shortcode {
 256              max-width: calc(100vw - (2 * #{ $size__spacing-unit }));
 257  
 258              @include media(tablet) {
 259                  max-width: $size__site-tablet-content;
 260              }
 261  
 262              @include media(desktop) {
 263                  max-width: $size__site-desktop-content;
 264              }
 265          }
 266      }
 267  }
 268  
 269  /* Author description */
 270  
 271  .author-bio {
 272      margin: calc(2 * #{$size__spacing-unit}) $size__spacing-unit $size__spacing-unit;
 273  
 274      @include postContentMaxWidth();
 275  
 276      @include media(tablet) {
 277          margin: calc(3 * #{$size__spacing-unit}) $size__site-margins;
 278      }
 279  
 280      @include media(desktop) {
 281          margin: calc(3 * #{$size__spacing-unit}) $size__site-margins;
 282      }
 283  
 284      .author-title {
 285          @include post-section-dash;
 286          display: inline;
 287      }
 288  
 289      .author-description {
 290  
 291          display: inline;
 292          color: $color__text-light;
 293          font-size: $font__size-md;
 294          line-height: $font__line-height-heading;
 295  
 296          .author-link {
 297              display: inline-block;
 298  
 299              &:hover {
 300                  color: $color__link-hover;
 301                  text-decoration: none;
 302              }
 303          }
 304      }
 305  }