Viewing File: /home/maglabs/bambinos/wp-content/themes/juliette/assets/addon/css/posts.scss

@import "../mixins";
@import '../../../../SCSS_JS_Source/_vendor/foundation/scss/foundation';
.novaworks-posts {

  &__item {
    outline: none;
  }

  &__inner-box {
    min-height: 100%;
    position: relative;
  }

  .novaworks-more {
    overflow: hidden;
    color: initial;
  }
  .novaworks-more-icon {
    margin-left: 5px;
    &.no-icon{
      display: none;
    }
  }
  .post-thumbnail {
    overflow: hidden;
  }

  &.novaworks-equal-cols {
    .slick-track {
      @include ad_display;
      @include align-items(stretch);
      .novaworks-posts__item {
        @include ad_flex(0 0 auto);
      }
    }

    .novaworks-posts__item {
      height: auto;
      @include ad_display;
      @include flex-direction(column);

      .novaworks-posts__inner-box {
        @include ad_display;
        @include flex-direction(column);
        @include flex-grow(1);
        width: 100%;
        box-sizing: border-box;
      }

      .novaworks-posts__inner-content {
        @include flex-grow(1);
      }
    }
  }
  .slick-slide {
    .novaworks-posts__item {
      width: 100%;
      @include ad_flex(0 0 100%);
      max-width: 100%;
    }
  }
}

.post-meta{
  font-size: 11px;
  text-transform: uppercase;
  margin-bottom: 15px;
  &__item {
    display: inline-block;
    &:not(:first-child):before {
      content: "|";
      display: inline-block;
      margin-left: 10px;
      margin-right: 10px;
      opacity: .5;
      position: relative;
      top: -1px;
    }
  }
  &--top {
    font-size: 12px;
    color: var(--site-accent-color);
    margin-bottom: 5px;
  }
}

.novaworks-posts .post-thumbnail{
  a {
    display: inline-block;
    vertical-align: middle;
    width: 100%;
  }
  > a{
    position: relative;
  }
}

.novaworks-posts{
  .novaworks-more-wrap{
    .novaworks-more{
      display: inline-block;
      border-radius: 0;
      background-color: transparent;
      color: var(--site-text-color);
      padding: 10px 22px 9px;
      font-size: 12px;
      line-height: 24px;
      vertical-align: middle;
      border: 1px solid var(--site-border-color);
      &:hover{
        background-color: var(--site-accent-color);
        border-color: var(--site-accent-color);
        color: #fff;
      }
    }
  }

  .post-meta__item {
    i{
      margin-top: -2px;
      vertical-align: middle;
      padding-right: 5px;
      &.novaworksicon-b-meeting{
        margin-top: -5px;
      }
    }
    a:hover{
      text-decoration: underline;
    }
  }
  .loop__item{
    padding-bottom: 30px;
  }
  .entry-excerpt{
    margin-bottom: 2em;
    font-size: .875em;
    line-height: 2;
  }
  .entry-title{
    font-size: 28px;
    margin-bottom: 14px;
  }
  .post-meta + .novaworks-more-wrap {
    padding-top: 10px;
  }
}
.novaworks-posts__inner-content{
  padding: 20px 0;
  width: 770px;
  max-width: 100%;
  margin: 0 auto;
  &:only-child{
    padding-top: 0;
  }
}
.novaworks-posts {
  &.layout-type-grid {
    &.type-grid-1 {
      &.novaworks-posts--grid {
        .post-meta--top{
          position: relative;
          margin-bottom: 5px;
          a {
            display: inline-block;
            background-color: var(--site-accent-color);
            color: #fff;
            padding: 5px;
            margin-right: 5px;
            border-radius: 3px;
            &:hover {
              color: #fff;
              text-decoration: none;
            }
          }
        }
        .post-meta--top {
          top: -13px;
          padding-left: rem-calc(16);
        }
      }
      .novaworks-posts__inner-content {
        padding-top: 0;
      }
    }
  }
}
/*
$PRESET_POST_GRID_02
*/
.novaworks-posts {
  &.layout-type-grid {
    &.type-grid-2 {
      .novaworks-posts__inner-content{
        position: absolute;
        bottom: 0;
        left: 0;
        color: #fff;
        width: 100%;
        padding: 30px;
        max-width: 500px;
      }
      .post-thumbnail
       {
         .post-thumbnail__img {
            transition: all 2s ease-out;
         }
         > a{
          &:after{
            content: '';
            background: linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,.65) 56%,rgba(0,0,0,.65) 100%);
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
          }
        }
        &:hover {
          .post-thumbnail__img {
            -webkit-transform: scale(1.2);
            transform: scale(1.2);
          }
        }
       }
      .entry-title {
        position: relative;
        color: #fff;
        font-size: 24px;
        font-family: inherit;
        line-height: 1.5;
        margin: rem-calc(20) 0 0;
        padding-top: rem-calc(10);
        &:before {
          position: absolute;
          background-color: var(--site-accent-color);
          top: 0;
          width: 80px;
          height: 2px;
          left: 0;
          display: block;
          content: '';
        }
      }
      .entry-excerpt {
        margin-bottom: 0;
      }
      .post-meta {
        display: inline;
      }
      .post-meta-p,
      .novaworks-more-wrap{
        display: none;
      }
      .post-meta--top{
        position: absolute;
        top: 20px;
        left: 20px;
        z-index: 1;
        .post-terms{
          a {
            font-size: rem-calc(11);
            &:hover {
              text-decoration: none;
            }
          }
        }
      }
    }
  }
}
/*
$PRESET_POST_GRID_03
*/
.novaworks-posts {
  &.layout-type-grid {
    &.type-grid-3 {
      .post-meta--top {
        a {
          font-size: rem-calc(12);
          font-weight: 600;
          text-transform: uppercase;
        }
      }
    }
  }
}
/*
$PRESET_POST_LIST
*/
.novaworks-posts {
  &.layout-type-list {
    .novaworks-posts__item {
      padding-bottom: rem-calc(60);
      @include breakpoint(small only) {
        padding-bottom: rem-calc(30);
      }
      .novaworks-posts__inner-box {
        display: flex;
        flex-direction: row;
        @include breakpoint(1000px down) {
          display: block;
        }
        .post-thumbnail {
          width: 50%;
          @include breakpoint(1000px down) {
            width: 100%;
          }
        }
        .novaworks-posts__inner-content {
          position: absolute;
          width: 50%;
          left: 40%;
          top: 50%;
          background-color: var(--site-accent-color-90);
          padding: rem-calc(45);
          transform: translateY(-50%);
          @include breakpoint(1100px down) {
            position: static;
            transform: translateY(0%);
            &:before {
              display: none;
            }

          }
          @include breakpoint(small only) {
            padding: rem-calc(15);
          }
          &:before {
            position: absolute;
            top: 30px;
            left: -30px;
            content: "";
            width: 100%;
            height: 100%;
            border: 2px solid var(--site-accent-color-90);
            z-index: -1;
          }
          .post-meta {
            position: relative;
            margin-bottom: rem-calc(40);
            font-size: rem-calc(13);
            text-transform: uppercase;
            letter-spacing: 1px;

            &:before {
              position: absolute;
              top: 30px;
              content: "";
              width: 128px;
              height: 1px;
              background-color: var(--site-accent-color);
            }
          }
          @include breakpoint(1000px down) {
            width: 100%;
          }
        }
      }
      &:nth-child(even) {
        .post-thumbnail {
          order:2;
          margin-left: auto;
        }
        .novaworks-posts__inner-content {
          order: 1;
          left: auto;
          right: 40%;
          text-align: right;
          &:before {
            left: 30px;
          }
          .post-meta {
            &:before {
              right: 0;
            }
          }
        }
      }
    }
  }
}
Back to Directory File Manager