lbry.com/web/scss/_blog.scss

@import "global";

.prev-next
{
  margin-top: $spacing-vertical * 2.5;
  margin-bottom: $spacing-vertical * 2.5;

  .prev-next-label
  {
    font-weight: bold;
  }
  .next
  {
    text-align: right;
  }
}


.post-header
{
  margin-bottom: $spacing-vertical * 2;

  &.no-cover1 { // diagonal stripes
    background-color: $color-primary;
    background-image: repeating-linear-gradient(45deg, transparent, transparent 35px, rgba(255,255,255,.08) 35px, rgba(255,255,255,.08) 70px);
  }
  &.no-cover2 { // argyle
    background-color: $color-primary;
    background-image:
    repeating-linear-gradient(120deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 1px, transparent 1px, transparent 60px),
    repeating-linear-gradient(60deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 1px, transparent 1px, transparent 60px),
    linear-gradient(60deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1)),
    linear-gradient(120deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1));
    background-size: 70px 120px;
  }
  &.no-cover3 { // polka dots
    background-color: $color-primary;
    background-image: radial-gradient(rgba(255,255,255,.1) 15%, transparent 16%),
    radial-gradient(rgba(255,255,255,.1) 15%, transparent 16%);
    background-size:60px 60px;
    background-position: 0 0, 30px 30px;
  }
  &.no-cover4 { // pluses
    background:
      radial-gradient(circle, transparent 17%, $color-primary 17%, $color-primary 83%, transparent 83%, transparent),
      radial-gradient(circle, transparent 17%, $color-primary 17%, $color-primary 83%, transparent 83%, transparent) 50px 50px,
      linear-gradient(lighten($color-primary, 7%) 6px, transparent 6px) 0 -3px,
      linear-gradient(90deg, lighten($color-primary, 7%) 6px, transparent 6px) -3px 0;
    background-color: $color-primary;
    background-size:100px 100px, 100px 100px, 50px 50px, 50px 50px;
  }
  &.with-cover {
    @include background-size (cover);
    background-repeat: no-repeat;
    background-position: center center;
  }

  @include absolute-center();

  .post-header-inner
  {
    margin: auto;
    font-size: 1.5em;
    text-align: center;
    font-weight: bold;

    &.content-dark
    {
      text-shadow: 2px 2px 3px rgba(0,0,0,0.4), -1px -1px 0 rgba(0,0,0,0.4), 1px -1px 0 rgba(0,0,0,0.4), -1px 1px 0 rgba(0,0,0,0.4), 1px 1px 0 rgba(0,0,0,0.4);
    }
    &.content-light
    {
      text-shadow: 2px 2px 3px rgba(255,255,255,0.4), -1px -1px 0 rgba(255,255,255,0.4), 1px -1px 0 rgba(255,255,255,0.4), -1px 1px 0 rgba(255,255,255,0.4), 1px 1px 0 rgba(255,255,255,0.4);
    }
  }
}

@media (min-height: 500px) {
  .post-header {
    min-height: 500px;
    &:not(.with-cover)
    {
      min-height: 250px;
    }
  }
}
@media (max-height: 500px) {
  .post-header {
    min-height: 100vh;
  }
}


.post-content
{
  margin-left: auto;
  margin-right: auto;
  max-width: $max-post-content-width;
  margin-bottom: $spacing-vertical * 2;
  padding-left: $content-side-padding;
  padding-right: $content-side-padding;

  a[href]:not([class])
  {
    @include anchor($color-primary);
  }
  img + p, video + p
  {
    margin-top: $spacing-vertical;
  }
  img, video {
    max-height: 75vh;
  }
  .focus-text {
    font-size: $font-size-h2;
    font-style: italic;
    margin: $spacing-vertical * 1.5 $spacing-vertical * 2;
    line-height: 1.1;
    color: $color-meta-light;
  }
}
.post-content table, table.post-content-table
{
  margin-bottom: $spacing-vertical;
  word-wrap: break-word;
  max-width: 100%;

  thead th, > tr:first-child th
  {
    border-bottom: 1px solid #e2e2e2;
    vertical-align: bottom;
    font-weight: bold;
    font-size: 0.9em;
    padding: $spacing-vertical/4+1 8px $spacing-vertical/4-2;
    text-align: left;
    img
    {
      vertical-align: text-bottom;
    }
  }
  tr.thead:not(:first-child) th
  {
    border-top: 1px solid #e2e2e2;
  }

  th, td
  {
    padding: $spacing-vertical/2 8px;
  }
  th
  {
    font-weight: bold;
    font-size: 0.9em;
  }
  td
  {
    vertical-align: top;
  }

  td.center
  {
    vertical-align: middle;
  }
  tfoot td
  {
    padding: $spacing-vertical / 2 8px;
    font-size: .85em;
  }

  &:last-child
  {
    margin-bottom: 0;
  }

  &.full-table
  {
    width: 100%;
  }

  tbody
  {
    tr
    {
      &.thead
      {
        background: none;
      }
      td
      {
        border: 0 none;
      }
      &:nth-child(even):not(.odd)
      {
        background-color: #f4f4f4;
      }
      &:nth-child(odd):not(.even)
      {
        background-color: white;
      }
    }
  }
}

.post-author-spotlight
{
  h3 { text-transform: uppercase; margin-top: $spacing-vertical / 4 !important; margin-bottom: 0;}
}