Thumbnail grid fixed for Foundation 6

app/assets/stylesheets/_settings.scss

@@ -54,8 +54,8 @@ $debian-color: #c70338;
 $global-font-size: 100%;
 $global-width: rem-calc(1200);
 $global-lineheight: 1.5;
-//$primary-color: #2199e8;
+$primary-color: #808080;
-$primary-color: $debian-color;
+//$primary-color: $debian-color;
 $secondary-color: #777;
 $success-color: #3adb76;
 $warning-color: #ffae00;
@@ -378,7 +378,8 @@ $mediaobject-image-width-stacked: 100%;
 
 $menu-margin: 0;
 $menu-margin-nested: 1rem;
-$menu-item-padding: 0.7rem 1rem;
+//$menu-item-padding: 0.7rem 1rem;
+$menu-item-padding: 1.2rem 1rem;
 $menu-icon-spacing: 0.25rem;
 $menu-expand-max: 6;
 
@@ -518,7 +519,8 @@ $tab-content-padding: 1rem;
 $thumbnail-border: solid 4px $white;
 $thumbnail-margin-bottom: $global-margin;
 $thumbnail-shadow: 0 0 0 1px rgba($black, 0.2);
-$thumbnail-shadow-hover: 0 0 6px 1px rgba($primary-color, 0.5);
+// $thumbnail-shadow-hover: 0 0 6px 1px rgba($primary-color, 0.5);
+$thumbnail-shadow-hover: 0 0 6px 3px rgba($primary-color, 0.5);
 $thumbnail-transition: box-shadow 200ms ease-out;
 $thumbnail-radius: $global-radius;
 
@@ -601,6 +603,11 @@ $footer-text-color: #b3b3b3;
 
 $menu-item-background-active: $primary-color;
 
+header
+{
+  background-color: $light-gray;
+}
+
 body
 {
   background-color: $page-background;
@@ -623,7 +630,7 @@ body
   // Display the site name in a larger font
   font-size: 26px;
   padding: 8px 5px 3px 0;
-  color: #babdb6;
+  color: $dark-gray;
 
   // Extra space around the Linux distribution's logo
   img
@@ -683,28 +690,38 @@ html, body {
 }
 
 // Screenshot thumbnail image with name and description
-.thumbnail
+// .thumbnail
+// {
+//   padding-top: 5px !important;
+//   padding-bottom: 5px !important;
+  // border-radius: 10px;
+//   margin-bottom: 10px;
+//   text-align: center;
+//   line-height: 120%;
+
+//   &:hover
+//   {
+//     background-color: #d0d0d0;
+//   }
+
+//   .pkgname
+//   {
+//     font-weight: 700;
+//   }
+//   .pkgdescription
+//   {
+//     font-size: 80%;
+//   }
+// }
+
+.grid-thumbnails .column
 {
-  padding-top: 5px !important;
+  // border: 5px solid green;
-  padding-bottom: 5px !important;
   border-radius: 10px;
-  margin-bottom: 10px;
+  // border: 2px solid $light-gray;
+  // height: 300px;
+  padding: 5px 5px 50px 5px;
   text-align: center;
-  line-height: 120%;
-
-  &:hover
-  {
-    background-color: #d0d0d0;
-  }
-
-  .pkgname
-  {
-    font-weight: 700;
-  }
-  .pkgdescription
-  {
-    font-size: 80%;
-  }
 }
 
 // Vertical icon bar in package view
@@ -751,13 +768,13 @@ html, body {
   }
 }
 
-.row .gridview
+// .row .gridview
-{
+// {
-  img.screenshot
+//   img.screenshot
-  {
+//   {
-    width: 100%;
+//     width: 100%;
-  }
+//   }
-}
+// }
 
 .pkgname
 {
@@ -798,7 +815,8 @@ html, body {
 */
 .grid-thumbnail
 {
-  height: 125px;
+  // Pretend that all thumbnails are 120 pixels high to align the captions properly
+  height: 130px;
 }
 
 // Avoid painting links to detail packages in the primary color
@@ -887,6 +905,7 @@ a.black
   }
 }
 
+
 // .ratingbar
 // {
 //   background-color: $progress-bar-color;
@@ -921,3 +940,4 @@ a.black
   margin-left: 2em;
   margin-bottom: 0.5em;
 }
+

app/views/packages/index-grid.slim

@@ -12,9 +12,9 @@
 .row
   .small-9.large-10.columns
     - if @packages.length>0
-      ul.small-block-grid-1.medium-block-grid-3.large-block-grid-4
+      .row.small-up-1.medium-up-3.large-up-4.grid-thumbnails
         - @packages.all.each do |pkg|
-          li.thumbnail
+          .column
             = render partial: 'packages/grid_thumbnail', locals: { pkg: pkg }
 
     - else