Redesign of story items

Author: melledijkstra

_includes/story_item.html

@@ -1,37 +1,43 @@
 <div class="grid-item col-xs-12 col-sm-12 col-md-6 col-lg-4">
     <div class="story-item card margin-15">
-        <a href="{{ include.story.url }}">
-            <div class="trim">
-                <img class="image center-block img-responsive"
-                     src="{{ include.story.image }}"
-                     alt="story image"/>
-            </div>
-        </a>
-        <div class="card-content">
-            {% if include.story.language != nil %}
-            <small class="programming-language-tooltip"
-            >{{ include.story.language.name }}</small>
-            {% endif %}
-            <h2 class="title serif">
-                <a href="{{ include.story.url }}">{{ include.story.title }}</a>
-            </h2>
+        <div class="card-header">
             <div class="info">
-                <span class="time">
-                    <span class="mdi mdi-clock"></span> {{ include.story.date | date: '%e %b %Y' }}
-                </span>
-                <span><i class="mdi mdi-book-open-page-variant"></i> {{ include.story.content | number_of_words | divided_by: 225 | floor }} min</span>
+                <div class="margin-b-5">
+                    {% if include.story.author %}
+                        <span class="author">{{ include.story.author }}</span>
+                    {% endif %}
+                    <span class="badge date">{{ include.story.date | date: '%e %b, %Y' }}</span>
+                    <span>{{ include.story.content | number_of_words | divided_by: 225 | floor }} min</span>
+                </div>
                 {% if include.story.tags %}
                 <div class="categories">
-                    <span class="mdi mdi-tag"></span>
                     <small>
                         {{ include.story.tags | join: ', ' }}
                     </small>
                 </div>
                 {% endif %}
             </div>
-            <p class="sneak-peek serif softcolor">
-                {{ include.story.excerpt | strip_html }}
-            </p>
+        </div>
+        <div class="move-up">
+            <a href="{{ include.story.url }}">
+                <div class="trim">
+                    <img class="image center-block img-responsive"
+                        src="{{ include.story.image }}"
+                        alt="story image"/>
+                </div>
+            </a>
+            <div class="card-content">
+                {% if include.story.language != nil %}
+                <small class="programming-language-tooltip"
+                >{{ include.story.language.name }}</small>
+                {% endif %}
+                <h2 class="title serif">
+                    <a href="{{ include.story.url }}">{{ include.story.title }}</a>
+                </h2>
+                <p class="sneak-peek serif softcolor">
+                    {{ include.story.excerpt | strip_html }}
+                </p>
+            </div>
         </div>
     </div>
 </div>

_sass/_helpers.scss

@@ -47,6 +47,14 @@
   margin: 20px;
 }
 
+.margin-b-5 {
+  margin-bottom: 5px;
+}
+
+.margin-b-10 {
+  margin-bottom: 10px;
+}
+
 .margin-tb-5 {
   margin-top: 5px;
   margin-bottom: 5px;

_sass/_story-items.scss

@@ -63,10 +63,18 @@
   .image {
     width: 100%;
     height: auto;
+
+    @include prefix(filter, none, webkit moz ms);
+
+    @include prefix(transition, (all .45s ease-out), moz ms o);
   }
 
   &:hover .image {
+    width: 105%;
 
+    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */    
+    filter: gray; /* IE 6-9 */
+    @include prefix(filter, grayscale(100%), webkit moz ms o);
   }
 
   /* this class makes sure the story image doesn't get to big */
@@ -82,6 +90,12 @@
   color: #868686;
 }
 
+.badge {
+  padding: 5px 10px;
+  background-color: $primary-color;
+  color: #ffffff;
+}
+
 /***************
  *  Cards
  ***************/
@@ -100,21 +114,48 @@
     margin: 0;
   }
 
+  .info {
+    text-align: center;
+    margin: 0 auto;
+    color: #727272;
+    opacity: 0;
+
+    transform: translateY(20px);
+
+    @include prefix(transition, (all 0.3s ease-out), webkit moz o);
+
+    padding-bottom: 15px;
+
+    .date {
+      text-transform: uppercase;
+      margin: 0 5px;
+    }
+  }
+
+  &:hover .info {
+    opacity: 1;
+    transform: translateY(0px);
+  }
+
+  .move-up {
+    transform: translateY(-30px);
+    @include prefix(transition, (all 0.3s ease-out), webkit moz o);
+  }
+
+  &:hover .move-up {
+    transform: translateY(0px);
+  }
+
   .card-content {
     $left: 5%;
     $border-color: #ad9977;
 
     position: relative;
     background-color: white;
-    top: -3vh;
-    margin-left: $left;
-    margin-right: 2%;
-    padding: 25px 16px 15px 25px;
+    padding: 25px 15px 10px 20px;
 
     border-top: 2px solid $border-color;
 
-    @include prefix(box-shadow, (0 0 4px rgba(0,0,0,0.3)), webkit moz o);
-
     .title {
       width: 100%;
       margin-bottom: 15px;
@@ -134,10 +175,6 @@
       margin: 10px 0 13px 0;
     }
 
-    .info {
-      color: #727272;
-    }
-
     .programming-language-tooltip {
       background-color: $border-color;
       font-size: 15px;
@@ -149,8 +186,6 @@
 
       top: -20px;
       right: 15px;
-
-      @include prefix(box-shadow, (0 1px 4px 0 rgba(0, 0, 0, 0.2)), webkit moz);
     }
 
   }