Merge pull request #2694 from consul/homepage-design

Homepage design

app/assets/stylesheets/admin.scss

@@ -58,10 +58,6 @@ $sidebar-active: #f4fcd0;
       box-shadow: 0 2px 2px #eee;
     }
 
-    [class^="icon-"]:not(.icon-circle) {
-      font-size: $base-font-size;
-    }
-
     @include breakpoint(small only) {
 
       .top-bar-left ul {
@@ -96,6 +92,10 @@ $sidebar-active: #f4fcd0;
         display: none;
       }
     }
+
+    [class^="icon-"]:not(.icon-circle) {
+      font-size: $base-font-size;
+    }
   }
 
   .menu .menu-text {

app/assets/stylesheets/layout.scss

@@ -2655,6 +2655,28 @@ table {
 
   .card {
     border: 0;
+    overflow: visible;
+
+    a {
+
+      img {
+        transition-duration: 0.3s;
+        transition-property: transform;
+      }
+    }
+
+    a:hover {
+      box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.2);
+      text-decoration: none;
+
+      img {
+        transform: scale(1.1);
+      }
+    }
+
+    p {
+      padding: 0 $line-height / 4;
+    }
   }
 
   h3 {
@@ -2667,6 +2689,21 @@ table {
       padding: $line-height / 2 0;
     }
   }
+
+  .figure-card {
+
+    figcaption {
+      z-index: 3;
+    }
+
+    .gradient {
+      background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.01) 1%, rgba(0, 0, 0, 1) 100%);
+      height: 100%;
+      position: absolute;
+      width: 100%;
+      z-index: 2;
+    }
+  }
 }
 
 .feeds-list {

app/views/welcome/_card.html.erb

@@ -1,6 +1,7 @@
 <div id="<%= dom_id(card) %>" class="card small-12 medium-6 column margin-bottom end <%= 'large-4' unless feed_processes_enabled? %>" data-equalizer-watch>
   <%= link_to card.link_url do %>
     <figure class="figure-card">
+      <div class="gradient"></div>
       <% if card.image.present? %>
         <%= image_tag(card.image_url(:large), alt: card.image.title) %>
       <% end %>