Merge pull request #58 from MITLibraries/gdt-124-platform-name-in-header

Allow for optional platform names in header

Author: jazairi

app/views/layouts/_site_header.html.erb

@@ -7,6 +7,9 @@
             <span class="sr">MIT Libraries home</span>
             <img src="https://cdn.libraries.mit.edu/files/branding/local/mitlib-wordmark.svg" height="35" alt="MIT Libraries logo">
           </a>
+          <% if ENV['PLATFORM_NAME'] %>
+            <a href="/" class="platform-name"><%= ENV.fetch('PLATFORM_NAME') %></a>
+          <% end %>
         </h1>
       </div>
       <div class="wrap-header-supp">

vendor/assets/stylesheets/elements/_header.scss

@@ -40,6 +40,21 @@
     }
   }
 
+  .platform-name {
+    color: #fff;
+    font-size: 2.8rem;
+    text-decoration: none;
+    vertical-align: middle;
+    border-left: 1px solid #fff;
+    padding-left: 2rem;
+    margin-left: 2rem;
+
+    &:hover,
+    &:focus {
+      text-decoration: underline;
+    }
+  }
+
   .link-logo-mit {
     color: $white;
 
@@ -53,6 +68,21 @@
   }
 }
 
+@media (max-width: $bp-screen-md) {
+  .wrap-header {
+    .platform-name {
+      border-left: none;
+      padding: 0;
+      margin: 2rem 0 0 0;
+      display: block;
+    }
+  }
+  
+  .wrap-header-supp {
+    vertical-align: top;
+  }
+}
+
 // local header and nav
 .wrap-outer-header-local {
   border-bottom: 1px solid $gray-l2;