WebJamApps/breakpointministries

.blog {
  background-color: rgba($color-white-2, .95);
  padding: .6rem;
  display: grid;
  grid-row-gap: 3rem;
  box-shadow:
    .5rem .5rem .9rem 0 rgba($color-black, 0.25);
  border: .2rem solid rgba($sand-3, .3);
  border-radius: 1.1rem;
  grid-row: 1 / 2;

  height: 85vh;

  overflow-y: auto;

  @include scrollbarOverride;

  @media only screen and (max-width: $bp-ipad-land) {
    height: 90vh;
  }

  @media only screen and (max-width: $bp-med) {
    height: 78vh;

    @media only screen and (orientation: landscape) {
      height: 47vh; 
    }
  }

  @media only screen and (max-width: $bp-ipad) {
    height: 54vh;
  }
  
  
  @media only screen and (max-width: $bp-moto-g4) {
    height: 50vh;
  }

  @media only screen and (max-width: $bp-ipad) and (max-height: $bp-ipad-land) {
      height: 80vh;
  }
  
  @media only screen and (max-width: $bp-sm) {
    height: 76vh;
  }

  @media only screen and (max-width: $bp-mobile-l) {
    width: 100%;
    height: 80vh;
  }

  @media only screen and (max-width: $bp-mobile-m) {
    height: 82vh;
  }

  &__entry {
    margin: 1rem 1rem 0;

    &--paragraph {
      grid-column: 1 / end;

      @media only screen and (max-width: $bp-header-fix) {
        grid-row: 3 / 4;
      }

      & > p:nth-child(1) > iframe {
        @media only screen and (min-width: calc($bp-large + 1px)) {
          width: 56rem;
        }

        width: 100%;
      }
    }

    &--body {
      display: grid;
      grid-template-columns: auto 1fr 1fr;

      @media only screen and (max-width: $bp-header-fix) {
        grid-template-columns: auto 1fr;
      }

      p {
        font-size: 1.8rem;
        margin-bottom: .5rem;

        @media only screen and (min-width: $bp-4k) {
          font-size: 4rem;
        }
      }
    }

    &--button-container {
      display: grid;
      grid-template-columns: repeat(3, min-content);
      grid-column-gap: 1rem;
      margin-right: 2rem;
      margin-top: 1.5rem;
      margin-bottom: 1.5rem;

      @media only screen and (max-width: $bp-header-fix) {
        grid-row: 2 / 3;
        margin-top: 1rem;
        margin-bottom: 1rem;
      }

      @media only screen and (max-width: $bp-sm) {
        grid-column-gap: 1rem;
        margin-right: 0;

        &__add-blog {
          grid-column: 1;
        }
        &__delete-blog {
          grid-column: 2;
        }
        &__edit-blog {
          grid-column: 3;
        }
      }
    }

    &--header {
      font-weight: $font-weight-heavy;
      font-size: 2rem;
      color: rgba($color-black, .9);
      align-content: center;
      padding-right: 10px;

      @media only screen and (min-width: $bp-4k) {
        font-size: 8rem;
      }
      @media only screen and (max-width: $bp-med) {
        font-size: 2.88rem;
      }

      @media only screen and (max-width: $bp-header-fix) {
        grid-row: 1 / 2;
      }

      @media only screen and (max-width: $bp-mobile-s) {
        font-size: 2.5rem;
      }

      @media only screen and (max-width: $bp-galaxy-fold) {
        font-size: 2.2rem;
      }

      & a {
        color: rgba($color-black, 0.7);
      }
    }
  }

  &__link {
    text-decoration: none;
  }

  &__ender {
    margin-top: .7rem;
    width: 100%;
    border-top: .1rem solid $color-black;
    display: grid;
    grid-row: 3 / 3;
    grid-column: 1 / end;

    @media only screen and (max-width: $bp-header-fix) {
      grid-row: 4 / 4;
    }
  }

  &__time-stamp {
    margin-left: 2rem;
    font-size: 1.28rem;
    font-weight: $font-weight-light;

    @media only screen and (min-width: $bp-4k) {
      font-size: 3rem;
    }
  }

  &__social-media {
    height: min-content;
    list-style: none;
    display: inline-flex;
    position: relative;
    top: 16%;
      grid-template-columns: repeat(auto-fill, 28px);
    @include socialMedia;

    @media only screen and (max-width: $bp-extra-some) {
      padding-left: 0;
    }
  }
}

.blog-container {
  padding: 3rem;
  display: grid;
  grid-column: 2 / end;
  background: linear-gradient(rgba($color-white-2, 1), rgba($color-white-2, .5), rgba($color-white-2, .3), rgba($logo-blue, .3), rgba($logo-blue, .9));
  grid-row-gap: 1rem;

  @media only screen and (max-width: $bp-med) {
    grid-column: 1 / end;
    height: auto;
    grid-row-gap: .5rem;
  }

  @media only screen and (max-width: $bp-mobile-m) {
    padding: 1rem;
  }
}