From fe4b4d66a156cd3dcb548298fc5cbcbda5400373 Mon Sep 17 00:00:00 2001
From: dnoneill <noneill@stanford.edu>
Date: Wed, 30 Oct 2024 12:37:54 -0400
Subject: [PATCH] update header, footer, remove css, point to component library

---
 app/assets/stylesheets/application.sass.scss  |   8 +-
 app/assets/stylesheets/base.scss              |   9 --
 app/assets/stylesheets/layout.scss            |  39 ------
 app/assets/stylesheets/library_hours.scss     |   5 -
 .../stylesheets/library_hours_mixins.scss     |   4 -
 app/assets/stylesheets/palette.scss           |  12 --
 app/assets/stylesheets/sul-footer.scss        |  88 -------------
 app/assets/stylesheets/top-navbar.scss        |  73 -----------
 app/assets/stylesheets/variables.scss         |  26 ----
 app/views/layouts/application.html.erb        |  21 ++-
 app/views/libraries/_range.html.erb           |   2 +-
 app/views/shared/_global_footer.html.erb      |  32 -----
 app/views/shared/_nav_link_list.html.erb      |  16 ++-
 app/views/shared/_sul_footer.html.erb         | 120 +++++++++++++++---
 app/views/shared/_top_navbar.html.erb         |  60 +++++----
 bin/dev                                       |   2 +
 16 files changed, 163 insertions(+), 354 deletions(-)
 delete mode 100644 app/assets/stylesheets/library_hours_mixins.scss
 delete mode 100644 app/assets/stylesheets/palette.scss
 delete mode 100644 app/assets/stylesheets/sul-footer.scss
 delete mode 100644 app/assets/stylesheets/top-navbar.scss
 delete mode 100644 app/views/shared/_global_footer.html.erb

diff --git a/app/assets/stylesheets/application.sass.scss b/app/assets/stylesheets/application.sass.scss
index 2aad7a54..c471e9f3 100644
--- a/app/assets/stylesheets/application.sass.scss
+++ b/app/assets/stylesheets/application.sass.scss
@@ -1,11 +1,8 @@
 // Entry point for your Sass build
 
-@import 'palette';
-
 // Custom bootstrap variables must be set or imported *before* bootstrap.
 @import 'variables';
 @import 'bootstrap/scss/bootstrap';
-@import 'library_hours_mixins';
 @import 'library_hours';
 @import 'global_alert';
 
@@ -35,7 +32,6 @@
 
 .editable-error-block {
   // position: absolute;
-  background-color: $color-cardinal-red;
   color: #fff;
   z-index: 1000;
 }
@@ -45,3 +41,7 @@
   padding-top: 1rem;
   padding-bottom: 1rem;
 }
+
+header {
+  --bs-dark-rgb: 130, 0, 0;
+}
\ No newline at end of file
diff --git a/app/assets/stylesheets/base.scss b/app/assets/stylesheets/base.scss
index 57614872..5fe671c4 100644
--- a/app/assets/stylesheets/base.scss
+++ b/app/assets/stylesheets/base.scss
@@ -30,15 +30,6 @@ label {
   font-weight: normal;
 }
 
-button:focus,
-embed:focus,
-input:focus,
-object:focus,
-select:focus,
-textarea:focus {
-  @include focus-outline;
-}
-
 .location-and-access {
   padding-right: 1ch;
 }
diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss
index 80d811bd..98424d46 100644
--- a/app/assets/stylesheets/layout.scss
+++ b/app/assets/stylesheets/layout.scss
@@ -1,48 +1,9 @@
-#outer-container,
-#topnav-container,
-#top-nav-bar {
-  border: 0;
-  margin: 0;
-  padding: 0;
-  width: 100%;
-}
-
-.header-logo > a {
-  border-bottom: 0;
-}
-
 #main-container {
   #main-flashes {
     min-height: 0;
   }
 }
 
-#sul-logo {
-  border-bottom: 0;
-  float: left;
-}
-
-@media (min-width: 768px) {
-  #topnav,
-  #main-container {
-    width: 750px;
-  }
-}
-
-@media (min-width: 980px) {
-  #topnav,
-  #main-container {
-    width: 970px;
-  }
-}
-
-@media (min-width: 1200px) {
-  #topnav,
-  #main-container {
-    width: 1170px;
-  }
-}
-
 @media only screen and (max-width: 768px) {
   #main-container {
     padding: 0 15px;
diff --git a/app/assets/stylesheets/library_hours.scss b/app/assets/stylesheets/library_hours.scss
index 3c6c922b..71bf5a40 100644
--- a/app/assets/stylesheets/library_hours.scss
+++ b/app/assets/stylesheets/library_hours.scss
@@ -2,12 +2,7 @@
 @import "base";
 @import "layout";
 
-@import "top-navbar";
-@import "sul-footer";
-
 .date-range {
-  background-color: $color-beige-10;
-
   @include media-breakpoint-up(sm) {
     .date-input {
       padding-right: ($spacer * 0.75);
diff --git a/app/assets/stylesheets/library_hours_mixins.scss b/app/assets/stylesheets/library_hours_mixins.scss
deleted file mode 100644
index 2354d077..00000000
--- a/app/assets/stylesheets/library_hours_mixins.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-@mixin focus-outline {
-  outline: 5px auto $sul-focus-outline !important;
-  outline-offset: -2px;
-}
diff --git a/app/assets/stylesheets/palette.scss b/app/assets/stylesheets/palette.scss
deleted file mode 100644
index 27bc6458..00000000
--- a/app/assets/stylesheets/palette.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-// Extracted from:
-//   https://github.com/sul-dlss/sul_styles/blob/master/app/assets/stylesheets/sul-styles/su_web_colors.scss
-//   https://github.com/sul-dlss/sul_styles/blob/master/app/assets/stylesheets/sul-styles/su_primary_colors.scss
-$color-cardinal-red: #8c1515;
-$color-dark-red: #820000;
-$color-gray: #3f3c30;
-// $color-black: #000;
-// $color-beige-40: #d5d0c0;
-$color-beige-30: #e3dfd5;
-$color-beige-10: #f2f1eb;
-$color-beige-05: #fbfbf9;
-// $color-pantone-401: #b6b1a9;
diff --git a/app/assets/stylesheets/sul-footer.scss b/app/assets/stylesheets/sul-footer.scss
deleted file mode 100644
index 51ee9abb..00000000
--- a/app/assets/stylesheets/sul-footer.scss
+++ /dev/null
@@ -1,88 +0,0 @@
-$stanford-footer-height: 250px;
-$stanford-footer-md-height: 140px;
-$sul-footer-height: 80px;
-
-#su-content {
-  padding-bottom: $stanford-footer-height + $sul-footer-height !important;
-
-  @media (min-width: 768px) {
-    padding-bottom: $stanford-footer-md-height + $sul-footer-height !important;
-  }
-}
-
-#sul-footer-container {
-  background-color: $sul-footer-bg-color;
-  box-shadow: inset 0 4px 8px -8px $sul-shadow-color;
-  clear: both;
-  margin-top: -1 * ($stanford-footer-height + $sul-footer-height);
-  min-height: $stanford-footer-height + $sul-footer-height;
-
-  @media (min-width: 768px) {
-    margin-top: -1 * ($stanford-footer-md-height + $sul-footer-height);
-    min-height: $stanford-footer-md-height + $sul-footer-height;
-  }
-
-  padding: 0;
-  position: relative;
-}
-
-#sul-footer {
-  display: table;
-  height: $sul-footer-height;
-  padding: 0;
-}
-
-#sul-footer-img {
-	display: table-cell;
-	vertical-align: middle;
-	width: 162px;
-}
-
-#sul-footer-links {
-	display: table-cell;
-	vertical-align: middle;
-	text-align: left;
-	padding-left: 15px;
-	font-size: small;
-}
-
-#sul-footer {
-  display: table;
-  height: $sul-footer-height;
-  padding: 0;
-
-  ul {
-    list-style-type: none;
-    margin: 0;
-    padding: 0;
-    li {
-      display: inline;
-      margin: 0 13px 3px 0;
-      padding: 0;
-      a {
-        white-space: nowrap;
-      }
-    }
-  }
-  #sul-footer-img {
-    display: table-cell;
-    vertical-align: middle;
-    width: 162px;
-  }
-  #sul-footer-links {
-    display: table-cell;
-    font-size: small;
-    padding-left: 15px;
-    text-align: left;
-    vertical-align: middle;
-  }
-}
-
-#global-footer {max-width: 100%;}
-#global-footer p {max-width: 100%; width: auto;}
-#global-footer #bottom-text {margin-right: 6px;}
-#global-footer {
-  .vcard {
-    margin-left: 2rem;
-  }
-}
diff --git a/app/assets/stylesheets/top-navbar.scss b/app/assets/stylesheets/top-navbar.scss
deleted file mode 100644
index cbd8802e..00000000
--- a/app/assets/stylesheets/top-navbar.scss
+++ /dev/null
@@ -1,73 +0,0 @@
-#top-nav-bar {
-  height: $top-nav-bar-height;
-
-  ul {
-    margin: 0;
-    padding: 0;
-  }
-
-  li {
-    align-items: center;
-    display: flex;
-    height: $top-nav-bar-height;
-  }
-}
-
-#topnav-container {
-  background-color: $brand-primary;
-  height: $brandbar-height;
-
-  .row {
-    width: 100%;
-  }
-
-  @include media-breakpoint-down(sm) {
-    height: $brandbar-collapsed-height;
-  }
-
-  .navbar-brand {
-    height: $brandbar-height;
-    margin-left: 0;
-    padding: 0;
-
-    @include media-breakpoint-down(sm) {
-      height: $brandbar-collapsed-height;
-    }
-
-    img {
-      height: $brandbar-height;
-
-      @include media-breakpoint-down(sm) {
-        height: $brandbar-collapsed-height;
-      }
-    }
-
-    @include media-breakpoint-down(sm) {
-      margin-left: 15px;
-    }
-  }
-
-  .navbar-collapse {
-    background-color: $brand-primary;
-    z-index: $zindex-dropdown;
-
-    a {
-      color: lighten($gray-base, 86%);
-    }
-  }
-
-  .navbar-nav {
-    @include media-breakpoint-up(lg) {
-      > li {
-        > a {
-          padding-bottom: $brandbar-padding-vertical;
-          padding-top: $brandbar-padding-vertical;
-        }
-      }
-    }
-
-    .nav-item {
-      padding: $spacer * 0.5;
-    }
-  }
-}
diff --git a/app/assets/stylesheets/variables.scss b/app/assets/stylesheets/variables.scss
index 0530befc..68de587b 100644
--- a/app/assets/stylesheets/variables.scss
+++ b/app/assets/stylesheets/variables.scss
@@ -1,15 +1,9 @@
-$sul-footer-bg-color: $color-beige-10;
-
 $gray-base: #000;
-$gray-dark: lighten($gray-base, 20%);
-$link-color: $gray-dark;
 $nav-color: #fbfbf9;
 
-$brand-primary: $color-cardinal-red;
 $pagination-active-bg: #696969;
 $pagination-active-border: #696969;
 
-$primary: $color-cardinal-red;
 /* $theme-colors: (
   "primary": $color-cardinal-red,
   "secondary": #6c757d,
@@ -21,14 +15,7 @@ $primary: $color-cardinal-red;
 $font-size-base: 0.94rem;
 $line-height-base: 1.5;
 
-$btn-default-color: $color-gray;
-$btn-default-bg: $color-beige-10;
-$btn-default-border: $color-beige-30;
-
-$link-color: #a26624;
-$link-hover-color: #a26624;
 $link-hover-decoration: none;
-$sul-link-color-border: #a26624;
 
 $font-size-h1: floor(($font-size-base * 2.986));
 $font-size-h2: floor(($font-size-base * 2.074));
@@ -36,20 +23,13 @@ $font-size-h3: floor(($font-size-base * 1.728));
 $font-size-h4: floor(($font-size-base * 1.2));
 $headings-font-weight: 100;
 
-$body-bg: $color-beige-05;
 $font-family-sans-serif: "Source Sans Pro", "Arial Unicode MS", Helvetica,
   sans-serif;
 $txt-color: $gray-base;
 
 $gray-41-percent: #696969;
-$sul-focus-outline: #eaab00;
-
-$navbar-default-link-color: $color-cardinal-red;
 
 //@at-root: $brand-primary;
-$navbar-inverse-border: $color-dark-red;
-$navbar-inverse-link-color: $link-color;
-$navbar-inverse-link-hover-color: $link-color;
 
 $global-alert-color: rgb(204, 0, 0);
 
@@ -57,10 +37,4 @@ $global-alert-color: rgb(204, 0, 0);
 @import "bootstrap/scss/functions";
 @import "bootstrap/scss/variables";
 
-$top-nav-bar-height: 35px;
-$brandbar-collapsed-height: 50px;
-$brandbar-height: 100px;
-$brandbar-padding-vertical: (($brandbar-height - $line-height-base) * 0.5);
-$sul-shadow-color: rgba(0, 0, 0, 0.2);
-
 $input-height-base: $input-height;
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index 6164856c..88b4e4d6 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -14,6 +14,7 @@
     <%= csrf_meta_tags %>
     <%= content_for(:head) %>
     <%= stylesheet_link_tag "application" %>
+    <%= stylesheet_link_tag "https://cdn.jsdelivr.net/gh/sul-dlss/component-library@v2024-09-04/styles/sul.css" %>
     <%= javascript_importmap_tags %>
     <!-- Google tag (gtag.js) -->
     <script async src="https://www.googletagmanager.com/gtag/js?id=G-B544ZKTH0M"></script>
@@ -29,19 +30,13 @@
   </head>
 
   <body>
-    <div id="su-wrap"> <!-- #su-wrap start -->
-      <div id="su-content"> <!-- #su-content start -->
-        <div id="outer-container" class="container-fluid">
-          <%= render 'shared/top_navbar' %>
-          <section id="main-container" role="main" class="container pt-2 pb-3">
-            <%= breadcrumbs style: :bootstrap5 %>
-            <%= render 'shared/global_alert' %>
-            <%= render 'shared/flashes' %>
-            <%= yield %>
-          </section>
-        </div>
-      </div>
-    </div>
+    <%= render 'shared/top_navbar' %>
+    <main id="main-container" class="container pt-2 pb-3">
+      <%= breadcrumbs style: :bootstrap5 %>
+      <%= render 'shared/global_alert' %>
+      <%= render 'shared/flashes' %>
+      <%= yield %>
+    </main>
     <%= render 'shared/sul_footer' %>
   </body>
 </html>
diff --git a/app/views/libraries/_range.html.erb b/app/views/libraries/_range.html.erb
index b7d55807..791f20bf 100644
--- a/app/views/libraries/_range.html.erb
+++ b/app/views/libraries/_range.html.erb
@@ -26,7 +26,7 @@
 
         <div class="col-xs-12 d-flex" id="jump-term-group">
           <h3 class="visually-hidden">Jump to quarters &amp; holidays</h3>
-          <button id="jump-term" type="button" class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
+          <button id="jump-term" type="button" class="btn btn-outline-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
             Quarters &amp; holidays <span class="caret"></span>
           </button>
           <ul class="dropdown-menu dropdown-menu-right" role="menu">
diff --git a/app/views/shared/_global_footer.html.erb b/app/views/shared/_global_footer.html.erb
deleted file mode 100644
index db7b2d76..00000000
--- a/app/views/shared/_global_footer.html.erb
+++ /dev/null
@@ -1,32 +0,0 @@
-<!-- Global footer snippet start -->
-<div id="global-footer" role="contentinfo">
-  <div class="container">
-    <div class="row">
-      <div id="bottom-logo" class="col-sm-2">
-        <a href="https://www.stanford.edu">
-          <img src="https://www-media.stanford.edu/su-identity/images/footer-stanford-logo@2x.png" alt="Stanford University" width="105" height="49"/>
-        </a>
-      </div>
-      <!-- #bottom-logo end -->
-      <div id="bottom-text" class="col-sm-8">
-        <ul>
-          <li class="home"><a href="https://www.stanford.edu">Stanford Home</a></li>
-          <li class="maps alt"><a href="https://visit.stanford.edu/plan/">Maps & Directions</a></li>
-          <li class="search-stanford"><a href="https://www.stanford.edu/search/">Search Stanford</a></li>
-          <li class="emergency alt"><a href="https://emergency.stanford.edu">Emergency Info</a></li>
-        </ul>
-        <ul id="policy-links">
-          <li><a href="https://www.stanford.edu/site/terms/" title="Terms of use for sites">Terms of Use</a></li>
-          <li><a href="https://www.stanford.edu/site/privacy/" title="Privacy and cookie policy">Privacy</a></li>
-          <li><a href="https://uit.stanford.edu/security/copyright-infringement" title="Report alleged copyright infringement">Copyright</a></li>
-          <li><a href="https://adminguide.stanford.edu/chapter-1/subchapter-5/policy-1-5-4" title="Ownership and use of Stanford trademarks and images">Trademarks</a></li>
-          <li><a href="http://exploredegrees.stanford.edu/nonacademicregulations/nondiscrimination/" title="Non-discrimination policy">Non-Discrimination</a></li>
-          <li><a href="https://www.stanford.edu/site/accessibility" title="Report web accessibility issues">Accessibility</a></li>
-        </ul>
-      </div> <!-- .bottom-text end -->
-      <div class="clear"></div>
-      <p class="copyright vcard offset-sm-2">&copy; <span class="fn org">Stanford University</span>, <span class="adr"> <span class="locality">Stanford</span>, <span class="region">California</span> <span class="postal-code">94305</span></span>.
-      </p>
-    </div> <!-- .row end -->
-  </div> <!-- .container end -->
-</div> <!-- global-footer end -->
diff --git a/app/views/shared/_nav_link_list.html.erb b/app/views/shared/_nav_link_list.html.erb
index d0dbfb7e..709c8700 100644
--- a/app/views/shared/_nav_link_list.html.erb
+++ b/app/views/shared/_nav_link_list.html.erb
@@ -1,13 +1,19 @@
 <!-- item_class is passed down from parent template. BS4 list items use specific classes. -->
 
 <% if current_user %>
-  <li class=<%= local_assigns[:item_class] ? item_class : '' %>><%= link_to "#{current_user.id}: Logout", logout_path(referrer: root_path) %></li>
+  <li class="nav-item">
+    <%= link_to "#{current_user.id}: Logout", logout_path(referrer: root_path), class: "nav-link" %>
+  </li>
 
   <% if can? :manage, Spreadsheet %>
-    <li class=<%= local_assigns[:item_class] ? item_class : '' %>><%= link_to 'Export Hours', spreadsheet_libraries_url %></li>
-    <li class=<%= local_assigns[:item_class] ? item_class : '' %>><%= link_to 'Import Hours', new_spreadsheet_url %></li>
+    <li class="nav-item">
+      <%= link_to 'Export Hours', spreadsheet_libraries_url, class: "nav-link" %>
+    </li>
+    <li class="nav-item">
+      <%= link_to 'Import Hours', new_spreadsheet_url, class: "nav-link" %>
+    </li>
   <% end %>
 <% end %>
-<li class=<%= local_assigns[:item_class] ? item_class : '' %>>
-  <%= link_to 'Feedback', feedback_path, data: { bs_toggle: 'collapse', bs_target: '#feedback-form' } %>
+<li class="nav-item">
+  <%= link_to 'Feedback', feedback_path, data: { bs_toggle: 'collapse', bs_target: '#feedback-form' }, class: "nav-link" %>
 </li>
diff --git a/app/views/shared/_sul_footer.html.erb b/app/views/shared/_sul_footer.html.erb
index 9239c02b..e711adb3 100644
--- a/app/views/shared/_sul_footer.html.erb
+++ b/app/views/shared/_sul_footer.html.erb
@@ -1,22 +1,108 @@
 <footer role="contentinfo">
-  <div id="sul-footer-container">
-    <div id="sul-footer" class="container">
-      <div id="sul-footer-img" class="span2">
-        <%= link_to 'https://library.stanford.edu' do %>
-          <%= image_tag "sul-logo-stacked.svg", alt: "Stanford Libraries", height: 45 %>
-        <% end %>
+  <section id="pre-footer" class="pt-3 pb-2">
+    <div class="container">
+      <div class="row">
+        <div id="sul-footer-img"
+          class="col-sm-12 col-md-5 col-lg-4 col-xl-3 d-flex justify-content-center justify-content-md-start">
+          <a href="https://library.stanford.edu">
+            <img alt="Stanford Libraries" height="45"
+              src="https://cdn.jsdelivr.net/gh/sul-dlss/component-library@v2024-09-04/styles/StanfordLibraries-logo-whitetext.svg">
+          </a>
+        </div>
+        <div class="col d-flex justify-content-md-start justify-content-center">
+          <ul class="list-unstyled d-flex mt-3 mt-md-1 mt-lg-3 ms-xl-3 text-center">
+            <li class="mx-2 mx-md-3">
+              <a href="https://library.stanford.edu/libraries-0/branches-and-centers">Hours &amp; locations</a>
+            </li>
+            <li class="mx-2 mx-md-3">
+              <a href="https://mylibrary.stanford.edu">My Account</a>
+            </li>
+            <li class="mx-2 mx-md-3">
+              <a href="https://library.stanford.edu/contact-us">Contact us</a>
+            </li>
+            <li class="mx-2 mx-md-3">
+              <a href="https://library-status.stanford.edu/">System status</a>
+            </li>
+          </ul>
+        </div>
       </div>
-      <div id="sul-footer-links" class="span2">
-        <ul>
-          <li><a href="https://library-hours.stanford.edu/">Hours &amp; locations</a></li>
-          <li><a href="https://mylibrary.stanford.edu/">My Account</a></li>
-          <li><a href="https://library.stanford.edu/contact-us">Ask us</a></li>
-          <li><a href="https://library-status.stanford.edu/">System status</a></li>
-          <li><%= link_to "Staff login", login_path(referrer: request.original_url) %></li>
-        </ul>
+    </div>
+  </section>
+  <div id="su-footer" class="text-white bg-dark pt-4 pb-4">
+    <div class="container d-flex flex-column flex-lg-row align-items-center align-md-normal"
+      title="Common Stanford resources">
+      <div class="mt-1 mb-2 align-self-lg-start">
+        <a class="su-logo" href="https://www.stanford.edu">Stanford<br><span
+            class="su-logo-university">University</span></a>
+      </div>
+      <div class="ms-lg-5">
+        <nav aria-label="global footer menu"
+          class="d-flex flex-row gap-4 gap-sm-0 flex-sm-column justify-content-center justify-content-lg-start align-items-start align-items-sm-center align-items-lg-start">
+          <ul
+            class="justify-content-center justify-content-lg-start fw-semibold gap-sm-2 gap-md-3 gap-lg-4 list-unstyled d-flex flex-column flex-sm-row">
+            <li>
+              <a href="https://www.stanford.edu">
+                Stanford Home<span class="visually-hidden">(link is external)</span>
+              </a>
+            </li>
+            <li>
+              <a href="https://visit.stanford.edu/plan/">
+                Maps &amp; Directions<span class="visually-hidden">(link is external)</span>
+              </a>
+            </li>
+            <li>
+              <a href="https://www.stanford.edu/search/">
+                Search Stanford<span class="visually-hidden">(link is external)</span>
+              </a>
+            </li>
+            <li>
+              <a href="https://emergency.stanford.edu">
+                Emergency Info<span class="visually-hidden">(link is external)</span>
+              </a>
+            </li>
+          </ul>
+          <ul
+            class="justify-content-center justify-content-lg-start gap-sm-2 gap-md-3 gap-lg-4 list-unstyled d-flex flex-column flex-sm-row">
+            <li>
+              <a href="https://www.stanford.edu/site/terms/" title="Terms of use for sites">
+                Terms of Use<span class="visually-hidden">(link is external)</span>
+              </a>
+            </li>
+            <li>
+              <a href="https://www.stanford.edu/site/privacy/" title="Privacy and cookie policy">
+                Privacy<span class="visually-hidden">(link is external)</span>
+              </a>
+            </li>
+            <li>
+              <a href="https://uit.stanford.edu/security/copyright-infringement"
+                title="Report alleged copyright infringement">
+                Copyright<span class="visually-hidden">(link is external)</span>
+              </a>
+            </li>
+            <li>
+              <a href="https://adminguide.stanford.edu/chapter-1/subchapter-5/policy-1-5-4"
+                title="Ownership and use of Stanford trademarks and images">
+                Trademarks<span class="visually-hidden">(link is external)</span>
+              </a>
+            </li>
+            <li>
+              <a href="https://studentservices.stanford.edu/more-resources/student-policies/non-academic/non-discrimination"
+                title="Non-discrimination policy">
+                Non-Discrimination<span class="visually-hidden">(link is external)</span>
+              </a>
+            </li>
+            <li>
+              <a href="https://www.stanford.edu/site/accessibility" title="Report web accessibility issues">
+                Accessibility<span class="visually-hidden">(link is external)</span>
+              </a>
+            </li>
+          </ul>
+        </nav>
+        <div class="text-center text-lg-start copyright">
+          <span class="text-nowrap">© Stanford University.</span><span class="text-nowrap">&nbsp; Stanford, California
+            94305.</span>
+        </div>
       </div>
     </div>
   </div>
-</footer>
-
-<%= render 'shared/global_footer' %>
+</footer>
\ No newline at end of file
diff --git a/app/views/shared/_top_navbar.html.erb b/app/views/shared/_top_navbar.html.erb
index 9e0e17ec..49239085 100644
--- a/app/views/shared/_top_navbar.html.erb
+++ b/app/views/shared/_top_navbar.html.erb
@@ -1,34 +1,42 @@
-<% unless current_page? feedback_path %>
-<div id="feedback-form" class="feedback-form-container collapse">
-  <%= render "shared/feedback_forms/form" %>
-</div>
-<% end %>
-
-<nav id="top-nav-bar" class="d-none d-sm-block">
-  <div class="container">
-    <ul class="d-flex justify-content-end">
-      <%= render 'shared/nav_link_list', item_class: "list-inline-item" %>
-    </ul>
+<nav id="skip-link" role="navigation" aria-label="Skip links">
+  <div class="container-xl">
+    <a class="visually-hidden-focusable element-invisible element-focusable d-inline-flex m-1 py-2 px-3"
+      data-turbolinks="false" href="#main-container">Skip to main content</a>
   </div>
 </nav>
-
-<nav id="topnav-container" class="navbar navbar-expand-sm navbar-light">
+<header>
   <div class="container">
-    <%= link_to 'http://library.stanford.edu', class: 'navbar-brand' do %>
-    <%= image_tag 'logo.svg', alt: 'Stanford University Libraries' %>
-    <% end %>
-    <button class="btn-light navbar-toggler bg-light me-1" type="button" data-bs-toggle="collapse"
-      data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
-      aria-label="Toggle navigation">
-      <span class="navbar-toggler-icon me-auto"></span>
-    </button>
+    <a class="su-brand-bar__logo" href="https://www.stanford.edu">Stanford University</a>
+  </div>
+  <nav class="navbar navbar-expand-md bg-dark" role="navigation">
+    <div class="container">
+      <a class="mb-0 navbar-brand navbar-logo" href="https://library.stanford.edu">Stanford Libraries</a>
+      <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-bs-toggle="collapse"
+        data-target="#user-util-collapse" data-bs-target="#user-util-collapse" aria-controls="user-util-collapse"
+        aria-expanded="false" aria-label="Toggle navigation">
+        <span class="navbar-toggler-icon"></span>
+      </button>
 
-    <div class="collapse navbar-collapse" id="navbarSupportedContent">
-      <div class="d-block d-sm-none">
-        <ul class="navbar-nav me-auto ps-3">
-          <%= render "shared/nav_link_list", item_class: "nav-item" %>
+      <div class="collapse navbar-collapse justify-content-md-end" id="user-util-collapse">
+        <ul class="navbar-nav">
+          <%= render 'shared/nav_link_list' %>
         </ul>
       </div>
     </div>
+  </nav>
+
+  <div class="masthead bg-dark">
+    <div class="container">
+      <div class="row align-items-center">
+        <div class="col-md-8 d-flex justify-content-center justify-content-md-start">
+          <div class="h1 my-3"><a href="/">Library Hours</a></div>
+        </div>
+      </div>
+    </div>
   </div>
-</nav>
+  <% unless current_page? feedback_path %>
+    <div id="feedback-form" class="feedback-form-container collapse">
+      <%= render "shared/feedback_forms/form" %>
+    </div>
+  <% end %>
+</header>
\ No newline at end of file
diff --git a/bin/dev b/bin/dev
index 74ade166..299056ef 100755
--- a/bin/dev
+++ b/bin/dev
@@ -1,5 +1,7 @@
 #!/usr/bin/env sh
 
+yarn build:css
+
 if ! gem list foreman -i --silent; then
   echo "Installing foreman..."
   gem install foreman