🐛 Fixes header color change and footer height

This commit:
- adds in the classes to the header that allowed for custom colorization
and refined the responsive layout
- Removes some of the padding in the footer to make it more compact in
mobile view to account for the height of the body being set in Hyrax
which assumes a footer height of 118px

Ref:
- notch8/palni_palci_knapsack#142

app/assets/stylesheets/themes/institutional_repository.scss

@@ -41,12 +41,10 @@
 
   // styles the top nav menu application name
   .institutional-repository-application-name {
-    span {
-      color: #fff;
-      font-size: 20px;
-      line-height: 50px !important;
-      vertical-align: middle;
-    }
+    color: #fff;
+    font-size: 20px;
+    line-height: 50px !important;
+    vertical-align: middle;
   }
 
   // styles the search bar label in the navbar

app/views/shared/_footer.html.erb

@@ -8,16 +8,16 @@
   <div class="row navbar-text text-center">
 
     <div class="col-12 col-lg-6 text-lg-left">
-      <div class="p-2"><%= t('hyrax.footer.service_html') %></div>
-      <div class="p-2">Hyku v<%= Hyku::VERSION %> with Hyrax v<%= Hyrax::VERSION %></div>
+      <div class="p-1 p-lg-2"><%= t('hyrax.footer.service_html') %></div>
+      <div class="p-1 p-lg-2">Hyku v<%= Hyku::VERSION %> with Hyrax v<%= Hyrax::VERSION %></div>
     </div>
 
     <div class="col-12 col-lg-6 text-lg-right">
-      <div class="p-2">
+      <div class="p-1 p-lg-2">
         <%= t('hyrax.footer.copyright_html', current_year: current_year) %>
         <%= t('hyrax.background_attribution_html') %>
       </div>
-      <div class="p-2">
+      <div class="p-1 p-lg-2">
         <% if user_signed_in? %>
           <%= link_to t('hyrax.toolbar.profile.logout'), main_app.destroy_user_session_path, class: 'navbar-link' %>
         <% else %>

app/views/themes/institutional_repository/_masthead.html.erb

@@ -1,21 +1,21 @@
 <% # OVERRIDE: Hyrax v5.0.0rc2 - added the search bar and removed the /login and locale nav menu and moved to the /controls partial for theming %>
 <header aria-label="header" class="top-header">
-  <nav id="masthead" class="navbar-dark bg-dark institutional-repository-nav container-fluid py-2<%= placement_class %>" role="navigation" aria-label="masthead">
+  <nav id="masthead" class="navbar navbar-expand-lg navbar-dark bg-dark institutional-repository-nav container-fluid d-block py-2<%= placement_class %>" role="navigation" aria-label="masthead">
+
+    <div class="row align-items-center">
+      <div class="col-lg-6 col-md-5 col-sm-12">
+        <div class="row justify-content-start">
+          <div class="ml-2"><%= render '/logo' %>
+            <span class="institutional-repository-application-name"><%= application_name %></span>
+          </div>
 
-    <div class="row align-items-center justify-content-end">
-      <div class="col-12 col-md-6 pb-2 pb-md-0">
-        <div class="row align-items-center justify-content-start">
-          <div class="ml-2"><%= render '/logo' %></div>
-          <div class="institutional-repository-application-name col-10 text-center text-md-left">
-          <span><%= application_name %></span>
-        </div>
         </div>
       </div>
-
-      <div class="col-12 col-sm-10 col-md-6">
+      <div class="col-lg-6 col-md-7 col-sm-12">
         <%= render partial: 'catalog/search_form' %>
       </div>
     </div>
+
   </nav>
 </header>
 <%= render '/controls' %>