Change header/footer logo and styles

app/assets/config/manifest.js

@@ -2,5 +2,6 @@
 //= link_tree ../fonts
 //= link application.js
 //= link application.css
+//= link component-library-overrides.css
 //= link print.css
 //= link_tree ../builds

app/assets/stylesheets/component-library-overrides.css

@@ -0,0 +1,59 @@
+/* These are styles mostly copied from the component library. They can be removed once we fully move over. */
+.navbar-logo-cl,
+.prefooter-logo-cl {
+  mask-image: url("https://cdn.jsdelivr.net/gh/sul-dlss/component-library@v2025-02-20/styles/StanfordLibraries-logo.svg");
+  mask-repeat: no-repeat;
+  mask-position: 0 center;
+  overflow: hidden;
+  text-indent: 100%;
+  white-space: nowrap;
+  width: 250px;
+
+  &.polychrome {
+    background-color: transparent;
+    mask-image: none;
+    background-image: url("https://cdn.jsdelivr.net/gh/sul-dlss/component-library@v2025-02-20/styles/StanfordLibraries-logo-poly.svg");
+    background-repeat: no-repeat;
+    background-position: 0 center;
+  }
+}
+
+.prefooter-logo-cl {
+  background-color: white;
+}
+
+@media (max-width: 768px) {
+  .prefooter-logo {
+    min-height: 30px;
+  }
+}
+
+#sul-footer-links a {
+  color: white;
+  &:hover,
+  &:focus,
+  &:active {
+    border-bottom: none;
+    text-decoration: underline;
+  }
+}
+
+/* These are technically su-identity overrides, but for the same transitional phase before we move to the component library */
+#global-footer {
+  margin-top: -220px;
+}
+
+@media screen and (min-width: 768px) {
+  #global-footer {
+    margin-top: -124px;
+    height: 150px;
+  }
+}
+
+@media screen and (min-width: 992px) {
+  #global-footer {
+    margin-top: -164px;
+    height: 164px;
+  }
+}
+

app/assets/stylesheets/sul-variables.scss

@@ -23,11 +23,12 @@ $poppy: #e98300;
 $citrine-white: #faf8d2;
 $sandstone: #d2c295;
 $stone-dark: #544948;
+$stanford-black: #2e2d29;
 $teal: #00505c;
 $warm-grey: #3f3c30;
 $white: #ffffff;
 
-$sul-footer-bg-color: $light-sandstone;
+$sul-footer-bg-color: $stanford-black;
 $sul-topnav-bg-color: $cardinal-red;
 $sul-subnavbar-bg-color: $legacy-toolbar;
 $sul-navbar-brand-color: $cardinal-red;

app/views/layouts/searchworks.html.erb

@@ -20,6 +20,7 @@
     <%= stylesheet_link_tag "application", media: "all" %>
     <%= stylesheet_link_tag 'print', media: 'print' %>
     <link href="https://www-media.stanford.edu/su-identity/css/su-identity.css" rel="stylesheet">
+    <%= stylesheet_link_tag "component-library-overrides", media: "all" %>
     <link href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap4.css" rel="stylesheet">
     <%= stylesheet_link_tag "https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;400;700&display=swap
 " %>

app/views/shared/_su_footer.html.erb

@@ -1,18 +1,18 @@
 <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 %>
-      </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>
-        </ul>
+    <div class="container pt-3">
+      <div class="row">
+        <div id="sul-footer-img" class="col-sm-12 col-lg-4 col-xl-3 d-flex justify-content-sm-center justify-content-lg-start mb-3 mb-lg-0">
+          <a href="https://library.stanford.edu" class="prefooter-logo-cl">Stanford University Libraries</a>
+        </div>
+        <div id="sul-footer-links" class="col d-flex justify-content-sm-center justify-content-lg-start align-items-center">
+          <ul class="list-unstyled d-flex text-center my-0">
+            <li class="mr-3"><a href="https://library-hours.stanford.edu/">Hours &amp; locations</a></li>
+            <li class="mr-3"><a href="https://mylibrary.stanford.edu/">My Account</a></li>
+            <li class="mr-3"><a href="https://library.stanford.edu/contact-us">Ask us</a></li>
+            <li class="mr-3"><a href="https://library-status.stanford.edu/">System status</a></li>
+          </ul>
+        </div>
       </div>
     </div>
   </div>

app/views/shared/_top_navbar.html.erb

@@ -1,19 +1,22 @@
 <div id="topnav-container">
   <header id="topnav" class="header-logo" role="banner">
-    <%= link_to 'https://library.stanford.edu' do %>
-      <%= image_tag "sul-logo.svg", class: "su-logo d-none d-sm-inline-block", alt: "Stanford Libraries", height: 25 %>
-      <%= image_tag "sul-logo-stacked.svg", class: "su-logo d-inline-block d-sm-none", alt: "Stanford Libraries", height: 25 %>
-    <% end %>
-    <div class="header-links">
-      <% if current_user %>
+    <div class="d-flex flex-wrap align-items-center justify-content-between">
+      <a
+        class="mb-0 navbar-brand navbar-logo-cl polychrome"
+        href="https://library.stanford.edu"
+        >Stanford University Libraries</a
+      >
+      <div class="header-links">
+        <% if current_user %>
         <%= link_to "#{current_user.sunet}: Logout", destroy_user_session_path, class: 'first' %>
-      <% else %>
+        <% else %>
         <%= link_to 'Login', new_user_session_path(referrer: request.original_url), class: 'first', data: { turbo: false } %>
-      <% end %>
-      <%= link_to "My Account", "https://mylibrary.stanford.edu/" %>
-      <%= link_to feedback_path, data: {toggle:"collapse", target:"#feedback-form"} do %>
+        <% end %>
+        <%= link_to "My Account", "https://mylibrary.stanford.edu/" %>
+        <%= link_to feedback_path, data: {toggle:"collapse", target:"#feedback-form"} do %>
         Feedback
-      <% end %>
+        <% end %>
+      </div>
     </div>
   </header>
 </div>