_header.scss in blacklight-spotlight-3.0.0.alpha.1

- old
+ new

@@ -5,57 +5,35 @@
   display: block;
   width: auto;
   height: inherit;
 }
 
-@mixin transparent-masthead-navigation-menu() {
-  @extend .navbar-transparent;
-
-  border: 0;
-  border-radius: 0;
-
-  ul.nav.navbar-nav {
-    > li {
-      text-transform: uppercase;
-
-      a {
-        letter-spacing: 1.2px;
-      }
-    }
-
-    .dropdown-menu {
-      text-transform: none;
-    }
-  }
-}
-
 .navbar-static-top {
   margin-bottom: 0;
 }
 
 .masthead {
   background-color: $masthead-bg;
-  border-bottom: 1px solid $navbar-default-border;
+  border-bottom: 1px solid $border-color;
   margin-bottom: $padding-large-vertical * 2.5;
   padding: 0;
   position: relative;
-  // allow dropdowns in the top nav to stack above the masthead
-  z-index: $zindex-navbar - 1;
 
 
   .site-title {
-    padding-bottom: $padding-base-vertical;
+    margin-top: $padding-large-vertical;
+    padding-bottom: $padding-base-vertical / 2;
     position: relative;
     white-space: nowrap;
   }
 
   small {
-    @extend .hidden-xs;
+    @extend .d-none;
+    @extend .d-md-block;
+    @extend .py-2;
 
-    display: block;
-    padding-bottom: $padding-base-vertical;
-    padding-top: $padding-base-vertical;
+    font-size: $h4-font-size;
   }
 
   .navbar {
     &:last-child {
       margin-bottom: 0;
@@ -86,24 +64,29 @@
     display: none;
   }
 }
 
 .site-title-container {
-  max-height: $masthead-height - $navbar-height;
-  padding-bottom: $padding-large-vertical;
-  padding-top: $padding-large-vertical;
+  @extend .px-4;
+  @extend .py-2;
+
+  max-height: $masthead-height - $navbar-brand-height;
 }
 
 .image-masthead {
   .navbar {
-    @include transparent-masthead-navigation-menu();
+    @extend .navbar-dark;
     background-color: $navbar-transparent-page-bg;
+    text-transform: uppercase;
+    .dropdown-menu {
+      text-transform: none;
+    }
   }
 
-  .h1 {
+  .h2 {
     color: $white;
-    text-shadow: 1px 1px 0 $black;
+    text-shadow: 1px 1px 0 $gray-900;
   }
 
   small {
     color: $white;
   }
@@ -156,11 +139,7 @@
     height: 1px;
     margin: -1px;
     overflow: hidden;
     position: absolute;
     width: 1px;
-  }
-
-  .glyphicon-search {
-    line-height: $line-height-computed;
   }
 }