Changed home page to card design

app/views/welcome/home.slim

@@ -24,43 +24,46 @@
               input.button.postfix type="submit" value="Search"
 
 - if @newest_upload
-  .grid-container
+
-  .grid-x.align-spaced
+  .grid-x.grid-padding-x
-    .large-3.medium-12.small-12.cell.text-center
+    .small-12.medium-4.cell
-      h2 Newest upload
+      h2.text-center Newest upload
-      .thumb-height
+      .pkgcard
-        a href=package_path(@newest_upload.package.name)
+        .image
-          = small_img(@newest_upload)
+          a href=package_path(@newest_upload.package.name)
-      p
+            = small_img(@newest_upload)
-        strong
+        .text
           =@newest_upload.package.name
-          ' :
+            ' :
-        =@newest_upload.package.description
+          =@newest_upload.package.description
-    .large-3.medium-12.small-12.cell.text-center
+
-      h2 Most popular
+
-      .thumb-height
+    .small-12.medium-4.cell
-        - if @most_popular_package
+      h2.text-center Most popular
-          a href=package_path(@most_popular_package.name)
+      .pkgcard
-            = small_img(@most_popular_package.screenshots.first)
+        .image
-        - else
+          - if @most_popular_package
-          'No uploaded screenshots yet.
+            a href=package_path(@most_popular_package.name)
-      p
+              = small_img(@most_popular_package.screenshots.first)
-        strong
+          - else
-          =@most_popular_package.name
+            'No uploaded screenshots yet.
-          ' :
+        .text
-        =@most_popular_package.description
+          =@newest_upload.package.name
-    .large-3.medium-12.small-12.cell.text-center
+            ' :
-      h2 Contribute
+          =@newest_upload.package.description
-      .thumb-height
+
-        - if @most_wanted_package.name
+    .small-12.medium-4.cell
-          a href=upload_path(@most_wanted_package.name)
+      h2.text-center Your help needed
-            img src="/images/dummy/no-screenshots-upload-one.svg" width="160"
+      .pkgcard
-        - else
+        .image
-          'No uploaded screenshots yet.
+          - if @most_wanted_package.name
-      p
+            a href=upload_path(@most_wanted_package.name)
-        / TODO: Randomly choose one of ~30 packages
+              img src="/images/dummy/no-screenshots-upload-one.svg" width="160"
-        ' We lack a screenshot for the
+          - else
-        strong =>@most_wanted_package.name
+            'No uploaded screenshots yet.
-        ' package. Can you
+        .text
-        a href=package_path(@most_wanted_package.name) provide one
+          ' We lack a screenshot for the
-        ' ?
+          strong =>@most_wanted_package.name
+          ' package. Can you
+          a href=upload_path(@most_wanted_package.name) provide one
+          ' ?