Switch to new library logo in header and footer

app/assets/stylesheets/application.sass.scss

@@ -4,7 +4,6 @@
 @import 'bootstrap/scss/bootstrap';
 @import 'bootstrapOverrides';
 
-$logo-image: url(StanfordLibraries-logo-whitetext.svg);
 $logo-width: 200px;
 $logo-height: 35px;
 
@@ -37,6 +36,23 @@ main {
   }
 }
 
+// Adds the new library logo to the header & footer
+// until we can update VT to use the component library
+.navbar-logo, .prefooter-logo {
+  background-color: white;
+  mask-image: url("https://cdn.jsdelivr.net/gh/sul-dlss/component-library@v2025-01-10/styles/StanfordLibraries-logo.svg");
+  mask-repeat: no-repeat;
+  mask-position: 0 center;
+  overflow: hidden;
+  text-indent: 100%;
+  white-space: nowrap;
+  width: 280px;
+}
+
+.prefooter-logo {
+  background-color: black;
+}
+
 .al-masthead h1,
 .al-masthead .h1 {
   padding-bottom: 1.25rem;

app/views/shared/_footer.html.erb

@@ -2,13 +2,11 @@
       <section id="pre-footer" class="py-4">
         <div class="container">
           <div class="row">
-          <div id="sul-footer-img" class="col-lg-2 col-md-3">
-            <%= link_to 'https://library.stanford.edu' do %>
-              <%= image_tag "sul-logo-stacked.svg", alt: "Stanford Libraries", height: 45 %>
-            <% end %>
-          </div>
+            <div id="sul-footer-img" class="d-flex w-auto">
+              <a href="https://library.stanford.edu" class="prefooter-logo">Stanford University Libraries</a>
+            </div>
           <div class="col">
-            <ul class="list-unstyled d-flex mt-3">
+            <ul class="list-unstyled d-flex mt-3 pt-1">
               <li><a href="https://library-hours.stanford.edu/" class="px-2">Hours &amp; locations</a></li>
               <li><a href="https://mylibrary.stanford.edu/" class="px-2">My Account</a></li>
               <li><a href="https://library.stanford.edu/contact-us" class="px-2">Ask us</a></li>