.container
  //- Pen Info
  .info
    h1 Article News Card
    span Made with <i class='fa fa-heart animated infinite pulse'></i> by <a href='http://andy.design'>Andy Tran</a> | Designed by <a href='http://justinkwak.com'>JustinKwak</a>

  // Normal Demo
  .column
    .demo-title Normal

    // Post
    .post-module

      // Thumbnail
      .thumbnail
        .date
          .day 27
          .month Mar
        img(src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/169963/photo-1429043794791-eb8f26f44081.jpeg')

      // Post Content
      .post-content
        .category Photos
        h1.title City Lights in New York
        h2.sub_title The city that never sleeps.
        p.description New York, the largest city in the U.S., is an architectural marvel with plenty of historic monuments, magnificent buildings and countless dazzling skyscrapers.
        .post-meta
          span.timestamp
            i.fa.fa-clock- o
            |  6 mins ago
          span.comments
            i.fa.fa-comments
            a(href='#')  39 comments

  // Hover Demo
  .column
    .demo-title Hover

    // Post
    .post-module.hover

      // Thumbnail
      .thumbnail
        .date
          .day 27
          .month Mar
        img(src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/169963/photo-1429043794791-eb8f26f44081.jpeg')

      // Post Content
      .post-content
        .category Photos
        h1.title City Lights in New York
        h2.sub_title The city that never sleeps.
        p.description New York, the largest city in the U.S., is an architectural marvel with plenty of historic monuments, magnificent buildings and countless dazzling skyscrapers.
        .post-meta
          span.timestamp
            i.fa.fa-clock-o
            |  6 mins ago
          span.comments
            i.fa.fa-comments
            a(href='#')  39 comments

@import 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-97/variables.less';
@import 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/169963/mixins.less';
@accent: #e74c3c;

@container_width: 800px;

body {
  background: darken(@white, 5%);
  font-family: 'proxima-nova-soft', sans-serif;
  font-size: 14px;
  .font-smoothing;
}

.post-module {
  position: relative;
  z-index: 1;
  display: block;
  background: @white;
  min-width: 270px;
  height: 470px;
  .box-shadow;
  .transitions;
  &:hover {
    .box-shadow(@blur: 35px; @color: fade(@black, 30%););
    .thumbnail {
      img {
        -webkit-transform: scale(1.1);
        -moz-transform: scale(1.1);
        transform: scale(1.1);
        opacity: .6;
      }
    }
    .post-content {
    }
  }
  .thumbnail {
    background: @black;
    height: 400px;
    overflow: hidden;
    .date {
      position: absolute;
      top: 20px;
      right: 20px;
      z-index: 1;
      background: @accent;
      width: 55px;
      height: 55px;
      padding: 12.5px 0;
      .border-radius(100%);
      color: @white;
      font-weight: 700;
      text-align: center;
      .box-size;
      .day {
        font-size: 18px;
      }
      .month {
        font-size: 12px;
        text-transform: uppercase;
      }
    }
    img {
      display: block;
      width: 120%;
      .transitions;
    }
  }
  .post-content {
    position: absolute;
    bottom: 0;
    background: @white;
    width: 100%;
    padding: 30px;
    .box-size;
    .transitions(@timing: cubic-bezier(.37,.75,.61,1.05));
    .category {
      position: absolute;
      top: -34px;
      left: 0;
      background: @accent;
      padding: 10px 15px;
      color: @white;
      font-size: 14px;
      font-weight: 600;
      text-transform: uppercase;
    }
    .title {
      margin: 0;
      padding: 0 0 10px;
      color: @dark_gray;
      font-size: 26px;
      font-weight: 700;
    }
    .sub_title {
      margin: 0;
      padding: 0 0 20px;
      color: @accent;
      font-size: 20px;
      font-weight: 400;
    }
    .description {
      display: none;
      color: @gray;
      font-size: 14px;
      line-height: 1.8em;
    }
    .post-meta {
      margin: 30px 0 0;
      color: @light_gray;
      .timestamp {
        margin: 0 16px 0 0;
      }
      a {
        color: @light_gray;
        text-decoration: none;
      }
    }
  }
}

.hover {
  &:extend(.post-module:hover all);
  .post-content {
    .description {
      display: block !important;
      height: auto !important;
      opacity: 1 !important;
    }
  }
}



.container {
  max-width: @container_width;
  min-width: 640px;
  margin: 0 auto;
  &:before,
  &:after {
    content: '';
    display: block;
    clear: both;
  }
  .column {
    width: 50%;
    padding: 0 25px;
    .box-size;
    float: left;
    .demo-title {
      margin: 0 0 15px;
      color: @gray;
      font-size: 18px;
      font-weight: bold;
      text-transform: uppercase;
    }
  }
  .info {
    width: 300px;
    margin: 50px auto;
    text-align: center;
    h1 {
      margin: 0 0 15px;
      padding: 0;
      font-size: 24px;
      font-weight: bold;
      color: @dark_gray;
    }
    span {
      color: @gray;
      font-size: 12px;
      a {
        color: @black;
        text-decoration: none;
      }
      .fa {
        color: @accent;
      }
    }
  }
}

$(window).load(function() {
  $('.post-module').hover(function() {
    $(this).find('.description').stop().animate({
      height: "toggle",
      opacity: "toggle"
    }, 300);
  });
});