kspace-wordpress-theme/scss/components/_previews.scss

/*
 * 4. Previews
 * Special style for previews cards
 *
*/
$preview-height: 8*$lineheight;
$preview-content-height:165px;
$comment-peek-height:0px;

.preview-grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-gap: $lineheight;
  padding-bottom: $lineheight;
  
  @include md() {
    grid-template-columns: 1fr 1fr;
  }
}

.preview-grid-3 {
  
  @include xl() {
    grid-template-columns: 1fr 1fr 1fr;
  }

}

.preview-container {
  width:100%;
}

@media(max-width:767px){}
@media(min-width:768px){}
@media(min-width:992px){

  .prev-col-2 .preview-container {
    width:50%;
  }

  .prev-col-3 .preview-container {
    width:33%;
  }

  .prev-col-4 .preview-container {
    width:25%;
  }

}

.card-preview {
  padding:0;
  width:100%;
  margin:auto;
  box-shadow: $large-shadow, $inset-shadow;
  max-width:360px;
}

.preview-link {
  padding:0;
  background-color: transparent;
  margin:0!important;
  text-decoration: none;
  position:relative;
  height: $preview-height;

  .card-header {
    font-family: $basefont;
    font-size: 1em;
    @include panel-header($lineheight_half);
    @include colorize-shape($color-primary);
    color: getTextColorFromBackground($color-primary);
    font-weight: $fontweight_bold;
    position:absolute;
    margin:0;
    top:0.5rem;
    z-index:1;
    min-height:2.8rem;
    display:flex;
    flex-direction: column;
    justify-content: center;
  }
}

.preview-content {
  font-size:0.9rem;
  height: 100%;
  width: 100%;
	line-height: $lineheight !important;
  text-align:justify;
  background-color:rgba(0,0,0,0.00);
  color: transparentize($color-font, 0.3);
	position: relative;
  overflow:hidden;

  .preview-overlay {
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    position: absolute;
    padding-top: $card-header-vmargin/2;
    backdrop-filter: none;
    transition: background-color 0.3s, backdrop-filter 0.3s;
    @include border-radius($card-radius);
  }

  &:hover {
    .preview-overlay {
      backdrop-filter: blur(2px);
      background-color:rgba(0,0,0,0.4);

      .metadata-pills {
        opacity: .9;
        transition: opacity .5s, height .5s;
      }

      .comment-text {
        bottom:0px;
      }
    }
  }
}

.preview-exerpt {
  max-height: $preview-height;
  overflow:hidden;
  background-size: cover;
  min-height:100%;
  min-width:100%;
  @include border-radius($card-radius);
  font-size:0.85rem;
  line-height:1.25rem;

  display: flex;
  -ms-flex-align: center !important;
  align-items: center !important;
  justify-content: center;

  h1, h2, h3, h4, h5, h6 {
    margin-bottom:0px;
    max-width:100%;
    display:none;
  }

  & > p {
    width:100%;
    margin:auto;

    &:not(.p-img) {
      position:absolute;
      top:3rem;
      padding:0.5rem;
    }

    & > img {
      max-width:100%;
      height:auto;
      vertical-align:middle;
      margin:auto;
      text-align:center;
    }

    &.p-img {
      text-align:center;
      margin:auto;
      padding:auto;
      display: block;
      width:100%;
    }
  }
}

.preview-metadata {
  color: $color-font-light;
  height:100%;
  overflow: hidden;
  @include border-radius($card-radius);

  .metadata-pills {
  	opacity: 0;
    transition: opacity .3s, height .3s;
    display:flex;
    justify-content:space-between;
    padding-left: $lineheight/2;
    padding-right: $lineheight/2;
    font-size:0.9em;
    padding-top:3rem;
  }
}

.card-preview.head-info {
  .comment-text {
    @include angled-edge('outside top', 'upper left', $color-secondary, 16);
    background-color:$color-secondary;
  }
}

.card-preview.card-grey {
  .comment-text {
    @include angled-edge('outside top', 'upper left', $color-muted, 16);
    background-color:$color-muted;
  }
}

.comment-text {
  color: $color-font-light;
  background-color:$color-primary;
  @include angled-edge('outside top', 'upper left', $color-primary, 16);
  text-align: center;
  position:absolute;
  bottom:-$lineheight;
  width:100%;
  transition: bottom 0.3s;
}

.card-preview time {
  margin-bottom:0.4em;
  display:block;
}

// Author area

.author-area {
  display:flex;

  img.author-avatar, img.avatar {
    display:block;
    height: $lineheight*3;
    width:auto;
    border-radius:100%;
    padding:0;
    margin:0;
    margin-right:$lineheight;
  }

  .author-metadata {
    align-items:center;
    display:flex;
    flex-direction:column;
    justify-content: center;
    align-items: flex-start;
  }

  .author-date {
    font-style:italic;
  }

  &:not(:last-child) {
    margin-bottom:$lineheight;
  }
}

.pigimg {
  display:block;
  max-width: 100%;
  height:auto;
  margin:auto;
}

.avatar {
  background: transparent;
}

.mwarea {
  padding-bottom: $lineheight;
  .avatar {
    width:80%;
    height:auto;
    display:block;
    margin:auto;
  }
}

.cover {
  width:100%;
  height:auto;
  @include border-radius($card-radius);
}

.roman {
  @include md() {
      width:80%;
      position:relative;
      top:-240px;
      margin:auto;
  }
}