moonleerecords/moonlee-website

.post-image {
  background-position: 50%;
  background-size: cover;
  height: 0;
  padding-bottom: 100%;
  position: relative;
  width: 100%;

  .post-with-video {
    @include vertical-align(40px);
    color: $color-white;
    position: absolute;
    text-align: center;
    width: 100%;
  }
}

.post-title {
  color: $color-limed-spruce;
  display: block;
}

.post-date {
  color: $color-tower-grey;
  display: block;
  font-size: 18px;
  font-weight: lighter;
}

.posts-boxes {
  .more-posts {
    @include vertical-align(25px);
    box-shadow: inset 0 0 0 0 $color-gold;
    position: absolute;
    right: 0;

    &:hover {
      box-shadow: inset 0 100px 0 0 $color-gold;
    }
  }

  .post-title {
    padding-left: 25px;
    padding-right: 25px;
    padding-top: 25px;
  }

  .post-date {
    padding-bottom: 25px;
    padding-left: 25px;
    padding-top: 10px;
  }
}

.posts-list {
  &.narrower {
    padding-top: 0;
  }

  .post-item {
    padding-top: 25px;

    &.painted {
      background-color: $color-gold;
      //TODO: add better transition or fix it somehow
      //-webkit-transition: padding 1s ease-in-out;
      //-moz-transition: padding 1s ease-in-out;
      //-o-transition: padding 1s ease-in-out;
      //transition: padding 1s ease-in-out;

      .post-date {
        color: $color-white;
      }

      .post-body {
        &:before {
          background-image: linear-gradient(to right, $color-transparent-rgba, $color-gold);
        }
      }
    }

    .column-2-3 {
      box-sizing: border-box;
      ms-box-sizing: border-box;
      webkit-box-sizing: border-box;
      moz-box-sizing: border-box;
      padding-right: 50px;
    }

    .post-body {
      margin-right: -1em;
      margin-top: 30px;
      max-height: 176px;
      overflow: hidden;
      padding-right: 1em;
      position: relative;

      p {
        margin: 0;
      }
    }
  }
}

.post-show {
  .post-main {
    .post-title {
      height: 500px;
    }

    .post-date {
      margin: 0;
      position: absolute;
      top: 460px;
    }

    .hr-style-1 {
      margin: 0;
      position: absolute;
      top: 498px;
    }

    .post-body {
      margin-top: 50px;
    }
  }

  .post-side {
    position: relative;

    .fb-page {
      background-position: center center;
      height: 500px;
      width: 100%;
    }

    h4 {
      margin: 50px 0;
    }

    .latest-news {
      .hr-style-1 {
        margin: 20px 0;
      }
      article {
        .post-date {
          margin-top: 10px;
        }

        a {
          font-weight: lighter;
        }
      }
    }

    .more-posts {
      box-shadow: inset 0 0 0 0 $color-gold;
      margin-top: 30px;

      &:hover {
        box-shadow: inset 0 100px 0 0 $color-gold;
      }
    }
  }
}

@include respond-to(small) {
  .posts-list {
    .post-item {
      .column-2-3 {
        padding-right: 0;
      }
    }
  }

  .post-show {
    .post-main {
      .post-title {
        height: auto;
        margin-top: 10px;
      }

      .post-date {
        margin-top: 20px;
        position: relative;
        top: 0;
      }

      .hr-style-1 {
        margin-top: 10px;
        position: relative;
        top: 0;
      }

      .post-body {
        margin-top: 0;
      }
    }

    .post-side {
      display: none;
    }
  }
}