source/stylesheets/refills/_cards.scss in refills-0.0.1 vs source/stylesheets/refills/_cards.scss in refills-0.0.2

@@ -1,64 +1,132 @@
 .cards {
+  @include clearfix;
+}
+
+.card {
   $card-border-color: $base-border-color;
   $card-border: 1px solid $card-border-color;
-  $card-color: lighten($card-border-color, 10);
-  $card-header-color: $card-color;
-  $card-hover-color: darken($card-color, 5);
+  $card-background: lighten($card-border-color, 10);
+  $card-header-background: $card-background;
+  $card-hover-background: lighten($card-background, 5);
+  $card-image-background: #DBD199;
+  $card-image-hover-background: lighten($card-image-background, 5);
+  $card-stats-color: lighten($base-accent-color, 10);
 
-  @include clearfix;
+  @include transition (all 0.2s ease-in-out);
+  background-color: $card-background;
+  border-radius: $base-border-radius;
+  border: $card-border;
+  margin-bottom: $base-line-height;
   cursor: pointer;
-  margin-bottom: 1em;
+  box-shadow: 0 2px 4px darken($base-body-color, 10);
+  position: relative;
 
-  .card {
-    height: 190px;
-    border: $card-border;
-    background-color: $card-color;
-    border-radius: $base-border-radius;
-    margin-bottom: $base-line-height;
+  @include media($large-screen) {
+    @include span-columns(4);  
+    @include omega(3n);
+  }
 
-    @include media($medium-screen) {
-      @include span-columns(4 of 12);
-    }
+  .card-image {
+    overflow: hidden;
+    max-height: 150px;
 
-    .card-header {
-      background-color: $card-header-color;
-      border-bottom: $card-border;
+    img {
+      width: 100%;
+      @include transition (all 0.2s ease-in-out);
+      background: $card-image-background;
       border-top-left-radius: $base-border-radius;
       border-top-right-radius: $base-border-radius;
-      font-weight: bold;
-      padding: 0.5em 1em;
     }
+  }
 
-    .card-content {
-      padding-left: 1em;
-      padding-right: 1em;
-      padding-top: 1em;
-      
-      p {
-        overflow: hidden;
-        text-overflow: ellipsis;
-        display: -webkit-box;
-        -webkit-line-clamp: 4;
-        -webkit-box-orient: vertical;
-      }  
-    }
+  .ribbon-wrapper {
+    $ribbon-size: 85px;
+    $ribbon-background: $base-accent-color;
+    @include size($ribbon-size);
+    overflow: hidden;
+    position: absolute;
+    top: -1px;
+    right: -1px;
 
-    h3 {
+    .ribbon {
+      font-size: .8em;
       font-weight: 800;
+      text-align: center;
+      @include transform(rotate(45deg));
+      position: relative;
+      padding: 2px 7px;
+      left: -5px;
+      top: 15px;
+      width: 120px;
+      background-color: $ribbon-background;
+      color: white;
+      box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
     }
+  }
 
-    &:hover {
-      background-color: $card-hover-color;
-      .card-header {
-        background-color: $card-hover-color;
+  .card-header {
+    @include transition (all 0.2s ease-in-out);
+    background-color: $card-header-background;
+    border-bottom: $card-border;
+    border-radius: $base-border-radius $base-border-radius 0 0;
+    font-weight: bold;
+    padding: $base-line-height/3 $gutter/2;
+  }
+
+  .card-copy {
+    padding: $base-line-height/2 $gutter/2;
+    font-size: .9em;
+    line-height: 1.5em;
+  }
+
+  .card-stats {
+    padding: $base-line-height/2 $gutter/2;
+    overflow: auto;
+
+    ul li {
+      display: inline;
+      color: $card-stats-color;
+      font-weight: 800;
+      font-size: 1.2em;
+      float: left;
+      border-right: 1px solid transparentize($base-font-color, .8);
+      line-height: 1.1em;
+      padding: 0 .7em 0 .7em;
+
+      &:first-child {
+        padding-left: 0;
       }
-    }
 
-    &:active {
-      background-color: $card-color;
-      .card-header {
-        background-color: $card-color;
+      &:last-child {
+        border-right: 0;
       }
+
+      span {
+        color: $base-font-color;
+        font-size: .7em;
+        display: block;
+        font-weight: normal;
+      }
     }
   }
-}
\ No newline at end of file
+
+  &:hover {
+    background-color: $card-hover-background;
+    
+    .card-image img {
+      background: $card-image-hover-background;
+    }
+  
+    .card-header {
+      background-color: $card-hover-background;
+    }
+  }
+
+  &:active {
+    background-color: $card-background;
+
+    .card-header {
+      background-color: $card-background;
+    }
+  }
+}