Vulcan/packages/nova-base-styles/lib/stylesheets/_posts.scss

//////////////////////////////////////////////////////
// Post List                                        //
//////////////////////////////////////////////////////

.post-list-header{
  @include medium-large{
    @include flex-center;
    justify-content: space-between;
  }
  margin-bottom: $vmargin;
}

.post-list-categories{
  @include small{
    margin: 0 auto;
    margin-bottom: $vmargin;
    text-align: center;
  }
}

.post-views{
  @include small{
    margin-bottom: $vmargin;
  }
  a{
    @include border;
    // @include border-radius;
    // padding: 3px 5px;
    // margin-right: 5px;
    &.post-view-inactive{
      @include activeHover;
    }
    &.post-view-active{
      background: $light-blue;
    }
  }
  .btn-group{
    margin-right: $hmargin;
  }
}

.post-list-content{
  border-top: $border;
  // padding-top: 15px;
  // margin-top: 15px;
  margin-bottom: $vmargin;
}

.post-load-more{
  display: block;
  text-align: center;
  @include border;
  @include border-radius;
  font-size: $large-font;
  padding: 10px 20px;
  @include activeHover;
  width: 100%;
  background: $white;
  color: $blue;
}

//////////////////////////////////////////////////////
// Post Item                                        //
//////////////////////////////////////////////////////

.post-item{
  @include medium-large{
    @include flex-center;
  }
  border-bottom: $border;
  padding: $vmargin 5px;
  // margin-bottom: 15px;
  &.post-sticky{
    background: $light-yellow;

  }
}

.post-vote{
  @include small{
    float: right;    
  }
  @include medium-large{
    margin-right: $hmargin;
  }
}

.upvote-button{
  @include border;
  @include border-radius;
  @include flex-center;
  flex-direction: column;
  justify-content: center;
  padding: 3px 5px;
  .icon{
    text-align: center;
    display: block;
  }
  .vote-count{
    text-align: center;
    display: block;
  }
  .voted &{
    color: $light-text;
  }
  @include activeHover;
  &, &:active, &:hover{
    text-decoration: none;
  }
}

.post-content{
  flex-grow: 1;
}

.post-title{
  @include small{
    margin-right: 40px;
    font-size: $large-font;
    margin-bottom: $vmargin/2;
  }
  @include medium-large{
    @include flex-center;
    font-size: $larger-font;
    margin-bottom: 5px;
  }
  .post-title-link{
    @include small{
      display: block;
      margin-bottom: $vmargin/2;
    }
    color: $black;
    &, &:active, &:hover{
      text-decoration: none;
    }
  }
}

.post-categories{
  @include medium-large{
    margin-left: 5px;
  }
  @include flex-center;
  a{
    display: block;
    font-size: $small-font;
    @include border;
    @include border-radius;
    margin-right: 5px;
    padding: 2px 6px;
    @include activeHover;
  }
}

.post-meta{
  @include medium-large{
    @include flex-center;
  }
  font-size: $small-font;
  .user-avatar{
    margin-right: 5px;
  }
  .user-name, .post-date, .post-comments, .post-stats, .post-actions{
    margin-right: $hmargin;
  }
}

.post-user{
  @include small{
    margin-bottom: $vmargin/2;
  }
  @include flex-center;
}

.post-date, .post-comments{
  @include small{
    margin-bottom: $vmargin/2;
  }
  color: $medium-text;
}

.post-stats{
  @include small{
    margin-bottom: $vmargin/2;
    display: inline-block;
  }
  @include border;
  @include border-radius;
  font-size: $smaller-font;
  .post-stat{
    border-right: $border;
    padding: 2px 5px;
    display: inline-block;
    &:last-child{
      border: none;
    }
  }
}

.post-actions{
  @include flex-center;
}

.post-commenters{
  @include small{
    display: none;
  }
  @include flex-center;
}

.post-commenters-avatars{
  .user-avatar{
    margin-right: $hmargin;
  }
}

.post-thumbnail{
  @include small{
    float: left;
  }
  display: block;
  margin-right: $hmargin;
  img{
    display: block;
    height: 50px;
    width: auto;
  }
}

//////////////////////////////////////////////////////
// Post Page                                        //
//////////////////////////////////////////////////////

.post-page{
  .post-item{
    @include border-radius;
    border: $border;
    padding: $hmargin;
    margin-bottom: $vmargin;
  }
}

.post-body{
  font-size: $large-font;
  margin-bottom: $hmargin;
}

//////////////////////////////////////////////////////
// Other Elements                                   //
//////////////////////////////////////////////////////

.post-day{
  margin-bottom: $vmargin;
  .post-load-more{
    border: none;
    padding: 0;
    &:hover{
      background: inherit;
      color: inherit;
      border: inherit;      
    }
  }
}

.edit-post-form-header{
  @include flex-center;
  justify-content: space-between;
}