update header to stanford header

Gemfile.lock

@@ -1,6 +1,6 @@
 GIT
   remote: https://github.com/geoblacklight/geoblacklight.git
-  revision: d9a35353a61f06c89af24fbc1e2e4da036b6457b
+  revision: d5ff4ea72a4c61d3f53a5ed6190268344b7720cf
   branch: blacklight8
   specs:
     geoblacklight (4.4.0)
@@ -209,7 +209,7 @@ GEM
     factory_bot_rails (6.2.0)
       factory_bot (~> 6.2.0)
       railties (>= 5.0.0)
-    faraday (2.10.0)
+    faraday (2.10.1)
       faraday-net_http (>= 2.0, < 3.2)
       logger
     faraday-net_http (3.1.1)
@@ -368,7 +368,7 @@ GEM
     public_suffix (6.0.1)
     puma (6.4.2)
       nio4r (~> 2.0)
-    racc (1.8.0)
+    racc (1.8.1)
     rack (3.1.7)
     rack-attack (6.7.0)
       rack (>= 1.0, < 4)
@@ -569,7 +569,7 @@ GEM
       chronic (>= 0.6.3)
     xpath (3.2.0)
       nokogiri (~> 1.8)
-    zeitwerk (2.6.16)
+    zeitwerk (2.6.17)
 
 PLATFORMS
   aarch64-linux

app/assets/stylesheets/application.scss

@@ -0,0 +1,18 @@
+// EarthWorks modules, sul style, variables/mixins
+
+// Import font first
+@import url(https://fonts.googleapis.com/css?family=SourceSansPro);
+
+@import 'sul-variables';
+:root {
+  /* https://identity.stanford.edu/design-elements/color/primary-colors/ */
+  --stanford-cardinal: #{$cardinal-red};
+  --stanford-palo-alto-dark-rgb: 23, 94, 84;
+  --stanford-digital-blue-rgb: 0, 108, 184;
+}
+@import 'blacklight';
+@import 'blacklight-range-limit/vendor/assets/stylesheets/slider';
+@import 'blacklight-range-limit/app/assets/stylesheets/blacklight_range_limit/blacklight_range_limit';
+@import 'geoblacklight';
+@import 'header';
+@import 'links';

app/assets/stylesheets/bootstrap-variables.scss

@@ -0,0 +1,30 @@
+// Bootstrap Overrides
+
+// Colors
+$primary: #006CB8;
+$success: $pantone-334;
+
+$link-hover-color: #00548f;
+// Typography
+$font-family-sans-serif: 'Source Sans Pro', 'Arial Unicode MS', Helvetica, sans-serif;
+$small-font-size: 90%;
+
+// Dropdowns
+$dropdown-link-hover-color: #fff;
+$dropdown-link-hover-bg: $cardinal-red;
+
+// Navbar
+.bg-beige {
+  background-color: $light-sandstone;
+}
+
+.bg-cardinal-red {
+  background-color: $cardinal-red;
+}
+
+$navbar-dark-color: #fff;
+$navbar-dark-hover-color: #fff;
+$navbar-brand-height: 1rem * 1.25 * 1.5 * 1.5 * 2 !default; // Bootstrap variables are not availabe so hardcoding
+
+// Jumbotron
+$jumbotron-bg: $light-sandstone;

app/assets/stylesheets/geoblacklight.scss

@@ -1,3 +1,6 @@
+@import 'sul_variables';
 @import 'bootstrap/scss/bootstrap';
 @import 'blacklight-frontend/app/assets/stylesheets/blacklight/blacklight';
 @import '@geoblacklight/frontend/app/assets/stylesheets/geoblacklight/geoblacklight';
+@import 'links';
+@import 'header';

app/assets/stylesheets/header.scss

@@ -0,0 +1,78 @@
+.su-brand-bar__logo {
+  --stanford-stripe-color: var(--stanford-cardinal);
+  --bs-link-hover-decoration: none;
+  color: var(--stanford-stripe-color);
+  display: block;
+  font-size: 1rem;
+  font-family: var(--font-family-serif);
+  font-weight: 400;
+  font-variant-ligatures: discretionary-ligatures;
+  font-feature-settings: "liga";
+  height: 1.875em;
+  margin-top: 0.125rem;
+  white-space: nowrap;
+}
+
+.navbar-logo {
+  height: 41px;
+  width: 258px;
+  background: transparent no-repeat url(StanfordLibraries-logo-whitetext.svg) 0
+    0 / 258px auto;
+  overflow: hidden;
+  text-indent: 100%;
+  white-space: nowrap;
+}
+
+.bg-dark.navbar,
+.bg-dark .navbar {
+  --bs-navbar-color: white;
+  --bs-navbar-hover-color: rgba(255, 255, 255, 1);
+  --bs-nav-link-color: white;
+  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
+  --bs-navbar-toggler-border-color: rgba(255, 255, 255, 0.1);
+}
+
+#feedback {
+  label {
+    text-align: right;
+    font-weight: bold;
+  }
+}
+
+.masthead {
+  .navbar-nav {
+    --bs-nav-link-font-weight: 700;
+
+    li.active a {
+      color: $navbar-dark-color;
+    }
+
+    li {
+      display: inline-block;
+      position: relative;
+    }
+
+    li:not(:last-child) {
+      margin-right: 1rem;
+    }
+
+    li:not(:first-child)::before {
+      color: white;
+      content: "•";
+      position: absolute;
+      left: -1.165rem;
+      top: 0.25rem;
+    }
+  }
+
+  .h1 {
+    font-size: 2.25rem;
+    a {
+      --bs-link-hover-decoration: none;
+    }
+  }
+}
+
+.palo-alto-dark {
+  --bs-dark-rgb: var(--stanford-palo-alto-dark-rgb);
+}

app/assets/stylesheets/links.scss

@@ -0,0 +1,43 @@
+:root {
+  --sul-link-font-weight: 450;
+  --sul-link-color-rgb: var(--stanford-digital-blue-rgb);
+
+  --bs-link-color: rgb(var(--sul-link-color-rgb), 1); /* for .btn-link */
+  --bs-link-color-rgb: var(--sul-link-color-rgb);
+  --bs-link-hover-color: rgb(var(--sul-link-color-rgb), 1); /* for .btn-link */
+  --bs-link-hover-color-rgb: var(--sul-link-color-rgb);
+  --bs-link-decoration: none;
+  --bs-link-hover-decoration: underline;
+}
+
+a {
+  /* for some reason this doesn't work: */
+  /* --bs-body-font-weight: var(--sul-link-font-weight) */
+  font-weight: var(--sul-link-font-weight);
+}
+
+.btn-link {
+  --bs-btn-font-weight: var(--sul-link-font-weight);
+}
+
+.su-underline {
+  --underline-color: var(--bs-gray-500);
+  --bs-link-hover-decoration: var(--bs-link-decoration);
+  --bs-link-decoration: underline dotted var(--underline-color) 1px;
+}
+
+/* This may be unnecessary in Bootstrap 5.4+ https://github.com/twbs/bootstrap/pull/39098 */
+a:not(.btn),
+.btn-link {
+  text-decoration: var(--bs-link-decoration);
+  text-underline-position: under;
+
+  &:hover,
+  &:focus-visible {
+    text-decoration: var(--bs-link-hover-decoration);
+  }
+}
+
+.bg-dark a {
+  --bs-link-color-rgb: 255, 255, 255;
+}

app/assets/stylesheets/sul_variables.scss

@@ -0,0 +1,9 @@
+
+$cardinal-red: #8C1515;
+
+:root {
+  /* https://identity.stanford.edu/design-elements/color/primary-colors/ */
+  --stanford-cardinal: #{$cardinal-red};
+  --stanford-palo-alto-dark-rgb: 23, 94, 84;
+  --stanford-digital-blue-rgb: 0, 108, 184;
+}