source/sass/components/_post-list.scss

   1 /*
   2 |-------------------------------------------------------------------------------
   3 | Post list
   4 |-------------------------------------------------------------------------------
   5 */
   6 // Wrapper
   7 .c-post-list {
   8   @extend .clear;
   9 }
  10
  11 // Article item
  12 .c-post-list__item {
  13   margin-bottom: 35px;
  14   padding-bottom: 20px;
  15   border-bottom: 1px solid $c-gray;
  16
  17   @media (min-width: 1200px) {
  18     @include post3Col();
  19   }
  20
  21   @media (max-width: 1199px) and (min-width: 880px) {
  22     @include post2Col();
  23   }
  24 }
  25
  26 // Image and image link
  27 .c-post-list__image {
  28   display: block;
  29   margin-bottom: 15px;
  30
  31   &:hover {
  32     opacity: 0.8;
  33   }
  34 }
  35
  36 .c-post-list__image__img {
  37   width: 100%;
  38   display: block;
  39 }
  40
  41 // Title
  42 .c-post-list__title {
  43   font-size: 1.1em;
  44   line-height: 1.4;
  45   margin-bottom: 10px;
  46 }
  47
  48 // Meta info
  49 .c-post-list__meta {
  50   font-size: 0.9em;
  51   font-style: italic;
  52   color: $c-grayDark;
  53 }
  54
  55 .c-post-list__meta__tags {
  56   text-transform: lowercase;
  57 }