_browse.scss in blacklight-spotlight-0.4.1

- old
+ new
@@ -1,5 +1,93 @@
-.blacklight-browse {
-  .index-document-functions {
-    display: none;
+$image-overlay-max-height: 300px;
+$image-overlay-bottom-margin: $padding-large-vertical * 3;
+
+@function category-min-height($overlay-max-height) {
+  @return $overlay-max-height + $image-overlay-bottom-margin;
+}
+
+.long-description-text {
+  column-width: 20em;
+  column-gap: 3em;
+  margin: ($padding-base-vertical * 2) 0;
+}
+
+.browse-landing {
+  text-align: center;
+  // Placeholder for vertically alignment - might already be available from use in another feature
+  %vertical-align {
+    position: relative;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  .category {
+    min-height: category-min-height($image-overlay-max-height);
+  }
+
+  .image-overlay {
+    img {width: 100%;}
+    position: relative;
+    margin-bottom: $image-overlay-bottom-margin;
+    max-height: 240px;
+    border-radius: $border-radius-large;
+    border: 2px solid $gray-light;
+    overflow: hidden;
+  }
+
+  .text-overlay {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, .2), rgba(0, 0, 0, .4));
+    color: $white;
+    padding: 8%;
+    text-align: center;
+    text-shadow: 0 1px 0 $black;
+    // prevents potential blur caused by the vertical-align technique
+    transform-style: preserve-3d;
+
+    .browse-category-title {
+      font-size: $font-size-h3;
+      @extend %vertical-align;
+
+      small {
+        display: block;
+        color: $white;
+        margin-top: $padding-large-vertical;
+        text-transform: uppercase;
+      }
+    }
+
+    &:hover {
+      background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.7));
+    }
+  }
+
+  @media screen and (max-width: $screen-xs-max) {
+    .image-overlay {
+      margin: 10px auto;
+      max-width: 350px;
+    }
+    .text-overlay .browse-category-title {font-size: $font-size-h3;}
+  }
+  @media screen and (min-width: $screen-sm-min) and (max-width: $screen-md-max) {
+    $image-overlay-max-height: 250px;
+    .category {min-height: category-min-height($image-overlay-max-height);}
+    .text-overlay .browse-category-title {font-size: $font-size-h4;}
+  }
+  @media screen and (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
+    $image-overlay-max-height: 180px;
+    .category {min-height: category-min-height($image-overlay-max-height);}
+    .image-overlay {max-height: $image-overlay-max-height;}
+  }
+  @media screen and (max-width: $screen-sm-min) {
+    $image-overlay-max-height: 180px;
+    .category {min-height: category-min-height($image-overlay-max-height);}
+  }
+  @media screen and (min-width: $screen-lg-min) {
+    .category {min-height: category-min-height($image-overlay-max-height);}
+    .image-overlay {max-height: $image-overlay-max-height;}
   }
 }