From 8a3484c11f4d22519a99c3cac9fd1390c765f984 Mon Sep 17 00:00:00 2001
From: Justin Coyne <jcoyne@justincoyne.com>
Date: Wed, 5 Jun 2024 09:55:16 -0700
Subject: [PATCH] Prune away unnecessary sass

---
 app/assets/stylesheets/application.sass.scss  | 106 +++++++++--
 .../stylesheets/bootstrapVariables.scss       |  26 ---
 .../stylesheets/{cards.scss => cards.css}     |  59 +++---
 ...emTeasers.scss => featuredItemTeasers.css} |   4 +-
 app/assets/stylesheets/palette.css            |  18 ++
 app/assets/stylesheets/palette.scss           |  33 ----
 ...stanfordStripe.scss => stanfordStripe.css} |  10 +-
 .../stylesheets/{sulBase.scss => sulBase.css} |  15 +-
 .../{sulCollection.scss => sulCollection.css} | 133 ++++++--------
 .../{sulFacets.scss => sulFacets.css}         |   6 +-
 .../{sulFooter.scss => sulFooter.css}         |  24 +--
 app/assets/stylesheets/sulHeader.css          | 169 ++++++++++++++++++
 app/assets/stylesheets/sulHeader.scss         | 160 -----------------
 .../{sulLanding.scss => sulLanding.css}       |  49 +++--
 .../blacklight/top_navbar_component.html.erb  |   4 +-
 app/views/landing_page/_cards.html.erb        |   4 +-
 16 files changed, 426 insertions(+), 394 deletions(-)
 delete mode 100644 app/assets/stylesheets/bootstrapVariables.scss
 rename app/assets/stylesheets/{cards.scss => cards.css} (61%)
 rename app/assets/stylesheets/{featuredItemTeasers.scss => featuredItemTeasers.css} (79%)
 create mode 100644 app/assets/stylesheets/palette.css
 delete mode 100644 app/assets/stylesheets/palette.scss
 rename app/assets/stylesheets/{stanfordStripe.scss => stanfordStripe.css} (63%)
 rename app/assets/stylesheets/{sulBase.scss => sulBase.css} (66%)
 rename app/assets/stylesheets/{sulCollection.scss => sulCollection.css} (61%)
 rename app/assets/stylesheets/{sulFacets.scss => sulFacets.css} (74%)
 rename app/assets/stylesheets/{sulFooter.scss => sulFooter.css} (64%)
 create mode 100644 app/assets/stylesheets/sulHeader.css
 delete mode 100644 app/assets/stylesheets/sulHeader.scss
 rename app/assets/stylesheets/{sulLanding.scss => sulLanding.css} (63%)

diff --git a/app/assets/stylesheets/application.sass.scss b/app/assets/stylesheets/application.sass.scss
index 74607310..0933a383 100644
--- a/app/assets/stylesheets/application.sass.scss
+++ b/app/assets/stylesheets/application.sass.scss
@@ -1,26 +1,110 @@
 // Entry point for your Sass build
 
-@import "palette";
-@import "bootstrapVariables";
+@import url("palette");
 @import "bootstrap/scss/bootstrap";
 
-$logo-image: url(StanfordLibraries-logo-whitetext.svg);
-$logo-width: 200px;
-$logo-height: 35px;
-
-$link-light-color: $stanford-white;
-$link-dark-color: $stanford-digital-blue;
+@import url("https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap");
 @import url("https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&display=swap");
-$font-family-serif: "Source Serif 4", serif;
+
 :root {
+  --font-family-serif: "Source Serif 4", serif;
   --sul-link-color-rgb: 0, 108, 184; /* Digital blue #006CB8; */
-  --bs-link-color: #006cb8; /* for .btn-link */
-  --bs-link-hover-color: #006cb8; /* for .btn-link */
+  --stanford-palo-alto-dark: #014240;
+  --stanford-digital-blue: #006cb8;
+  --bs-dark-rgb: 1, 66, 64; // same as stanford-palo-alto-dark
+
+  --bs-border-radius: 0;
+  --bs-font-sans-serif: "Source Sans 3", "Source Sans Pro", "Helvetica Neue",
+    Helvetica, Arial, sans-serif;
+  --bs-link-color: var(--stanford-digital-blue); /* for .btn-link */
   --bs-link-color-rgb: var(--sul-link-color-rgb);
+  --bs-link-hover-color: var(--stanford-digital-blue); /* for .btn-link */
   --bs-link-hover-color-rgb: var(--sul-link-color-rgb);
   --bs-link-decoration: none;
   --bs-link-hover-decoration: underline;
+
+  --bs-dropdown-link-active-color: var(--stanford-palo-alto-dark);
+
+  --bs-info-text-emphasis: #002b4a;
+  --bs-info-bg-subtle: #cce2f1;
+  --bs-info-border-subtle: #99c4e3;
+
+  --bs-secondary-rgb: var(--bs-dark-rgb);
+  --btn-secondary-bg: var(--stanford-palo-alto-dark);
+  --btn-secondary-hover-bg: color-mix(
+    in srgb,
+    var(--stanford-palo-alto-dark) 85%,
+    white
+  );
+  --btn-secondary-hover-border-color: color-mix(
+    in srgb,
+    var(--stanford-palo-alto-dark) 90%,
+    white
+  );
+  --btn-secondary-active-bg: color-mix(
+    in srgb,
+    var(--stanford-palo-alto-dark) 80%,
+    white
+  );
+}
+
+.btn-dark,
+.btn-secondary {
+  --bs-btn-color: #fff;
+  --bs-btn-bg: var(--btn-secondary-bg);
+  --bs-btn-border-color: var(--btn-secondary-bg);
+  --bs-btn-hover-color: #fff;
+  --bs-btn-hover-bg: var(--btn-secondary-hover-bg);
+  --bs-btn-hover-border-color: var(--btn-secondary-hover-border-color);
+  --bs-btn-focus-shadow-rgb: 39, 94, 93;
+  --bs-btn-active-color: #fff;
+  --bs-btn-active-bg: var(--btn-secondary-hover-border-color);
+  --bs-btn-active-border-color: var(--btn-secondary-hover-border-color);
+  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+  --bs-btn-disabled-color: #fff;
+  --bs-btn-disabled-bg: var(--stanford-palo-alto-dark);
+  --bs-btn-disabled-border-color: var(--stanford-palo-alto-dark);
+}
+
+.btn-secondary {
+  --bs-btn-color: #fff;
+  --bs-btn-bg: var(--btn-secondary-bg);
+  --bs-btn-border-color: var(--btn-secondary-bg);
+  --bs-btn-hover-color: #fff;
+  --bs-btn-hover-bg: var(--btn-secondary-hover-bg);
+  --bs-btn-hover-border-color: var(--btn-secondary-hover-border-color);
+  --bs-btn-focus-shadow-rgb: 39, 94, 93;
+  --bs-btn-active-color: #fff;
+  --bs-btn-active-bg: var(--btn-secondary-hover-border-color);
+  --bs-btn-active-border-color: var(--btn-secondary-hover-border-color);
+  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+  --bs-btn-disabled-color: #fff;
+  --bs-btn-disabled-bg: var(--stanford-palo-alto-dark);
+  --bs-btn-disabled-border-color: var(--stanford-palo-alto-dark);
 }
+
+.btn-outline-secondary,
+.applied-filter .remove:hover {
+  --bs-btn-color: var(--btn-secondary-bg);
+  --bs-btn-border-color: var(--btn-secondary-bg);
+  --bs-btn-hover-color: #fff;
+  --bs-btn-hover-bg: var(--btn-secondary-bg);
+  --bs-btn-hover-border-color: var(--btn-secondary-bg);
+  --bs-btn-focus-shadow-rgb: 1, 66, 64;
+  --bs-btn-active-color: #fff;
+  --bs-btn-active-bg: var(--btn-secondary-bg);
+  --bs-btn-active-border-color: var(--btn-secondary-bg);
+  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+  --bs-btn-disabled-color: var(--btn-secondary-bg);
+  --bs-btn-disabled-bg: transparent;
+  --bs-btn-disabled-border-color: var(--btn-secondary-bg);
+  --bs-gradient: none;
+}
+.navbar-dark {
+  --bs-navbar-color: #fff;
+  --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");
+}
+
 @import "blacklight-frontend/app/assets/stylesheets/blacklight/blacklight";
 @import "arclight/app/assets/stylesheets/arclight/application";
 @import "stanfordStripe";
diff --git a/app/assets/stylesheets/bootstrapVariables.scss b/app/assets/stylesheets/bootstrapVariables.scss
deleted file mode 100644
index a30b094c..00000000
--- a/app/assets/stylesheets/bootstrapVariables.scss
+++ /dev/null
@@ -1,26 +0,0 @@
-// This file overrides variables set by Bootstrap (see https://github.com/twbs/bootstrap/blob/main/scss/_variables.scss)
-
-// Colors
-$primary: $stanford-cardinal;
-$danger: $stanford-digital-red;
-$info: $stanford-digital-blue;
-$success: $stanford-fog;
-$dark: $stanford-palo-alto-dark;
-$secondary: $stanford-palo-alto-dark;
-
-// Components
-$border-radius: 0;
-
-// Typography
-$headings-color: $stanford-white;
-
-// Fonts
-@import url("https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap");
-$font-family-base: "Source Sans 3", "Source Sans Pro", "Helvetica Neue",
-  Helvetica, Arial, sans-serif;
-
-// Navbar
-$navbar-padding-y: 0;
-$navbar-dark-color: white;
-$navbar-background-color: $stanford-black;
-$nav-link-padding-y: 0.3rem;
diff --git a/app/assets/stylesheets/cards.scss b/app/assets/stylesheets/cards.css
similarity index 61%
rename from app/assets/stylesheets/cards.scss
rename to app/assets/stylesheets/cards.css
index 53fbc741..5c9bafed 100644
--- a/app/assets/stylesheets/cards.scss
+++ b/app/assets/stylesheets/cards.css
@@ -9,10 +9,6 @@
   padding-right: 20px;
   border: none;
 
-  a.btn {
-    color: $link-light-color;
-  }
-
   .card-img-top,
   .card-body {
     width: 100%;
@@ -22,9 +18,9 @@
   }
 
   .card-img-top {
-    // to make the image sizes consistent:
+    /* to make the image sizes consistent: */
     height: 230px;
-    // Crop the image to cover the specified height without changing aspect ratio
+    /* Crop the image to cover the specified height without changing aspect ratio */
     object-fit: cover;
   }
 
@@ -36,37 +32,40 @@
     }
   }
 
-  ul {
-    padding-left: 1.25rem;
-  }
-
-  li::marker {
-    color: $link-dark-color;
+  h2,
+  h3 {
+    font-weight: bold;
   }
+}
 
-  h2 {
-    font-size: calc(1.3rem + 0.6vw);
-    @include media-breakpoint-up(xxl) {
+@media (min-width: 1400px) {
+  .blacklight-landing_page,
+  .al-repositories {
+    .card h2 {
       font-size: 1.75rem;
     }
   }
+}
 
-  h2,
-  h3 {
-    font-weight: bold;
+.blacklight-landing_page {
+  ul.locations {
+    padding-left: 1.25rem;
+    li::marker {
+      color: var(--stanford-digital-blue);
+    }
   }
 }
 
 .blacklight-landing_page .card-container,
 .al-repositories .card-container {
-  // this centers the cards if there are less than 3 in a row
+  /* this centers the cards if there are less than 3 in a row */
   justify-content: center;
 }
 
 /* specific to repositories page */
 .al-repositories .card-container {
-  // this margin counteracts the negative margin on the cards to create spacing between multiple rows of card-containers.
-  // On the landing page there is only one row of card-containers so this is not needed
+  /* this margin counteracts the negative margin on the cards to create spacing between multiple rows of card-containers. */
+  /* On the landing page there is only one row of card-containers so this is not needed */
   margin-top: 2rem;
 
   &:last-child {
@@ -77,14 +76,6 @@
     margin-bottom: 2rem;
   }
 
-  // for single stacked cards on small screen
-  @include media-breakpoint-down(lg) {
-    margin-top: 0;
-    .card-col {
-      margin-top: 5rem;
-    }
-  }
-
   .card-text {
     text-overflow: ellipsis;
     overflow: hidden;
@@ -93,3 +84,13 @@
     -webkit-box-orient: vertical;
   }
 }
+
+/* for single stacked cards on small screen */
+@media (max-width: 991.98px) {
+  .al-repositories .card-container {
+    margin-top: 0;
+    .card-col {
+      margin-top: 5rem;
+    }
+  }
+}
diff --git a/app/assets/stylesheets/featuredItemTeasers.scss b/app/assets/stylesheets/featuredItemTeasers.css
similarity index 79%
rename from app/assets/stylesheets/featuredItemTeasers.scss
rename to app/assets/stylesheets/featuredItemTeasers.css
index 4d67f0a9..22bed1f3 100644
--- a/app/assets/stylesheets/featuredItemTeasers.scss
+++ b/app/assets/stylesheets/featuredItemTeasers.css
@@ -1,4 +1,4 @@
-// this css copies from bootstrap's carousel component
+/* this css copies from bootstrap's carousel component */
 .featured-item {
   position: relative;
   float: left;
@@ -18,7 +18,7 @@
   color: #fff;
 
   a {
-    color: $white;
+    color: var(--bs-white);
     font-weight: 600;
   }
 }
diff --git a/app/assets/stylesheets/palette.css b/app/assets/stylesheets/palette.css
new file mode 100644
index 00000000..ee619206
--- /dev/null
+++ b/app/assets/stylesheets/palette.css
@@ -0,0 +1,18 @@
+:root {
+  /* https://identity.stanford.edu/design-elements/color/primary-colors/ */
+  --stanford-cardinal: #8c1515;
+  --stanford-black: #2e2d29; /* "100% black" in Stanford brand identity*/
+  --stanford-white: #ffffff;
+
+  /* https://identity.stanford.edu/design-elements/color/web/ */
+  --stanford-palo-alto-light: #2d716f;
+  --stanford-digital-red: #b1040e;
+
+  /* https://identity.stanford.edu/design-elements/color/accent-colors/ */
+  --stanford-illuminating: #fedd5c;
+
+  /* Non-Stanford identity colors */
+  --grey-lighter: #ededed;
+  --whisper: #eaeaea;
+  --green-white: #ebf5f1;
+}
diff --git a/app/assets/stylesheets/palette.scss b/app/assets/stylesheets/palette.scss
deleted file mode 100644
index 47636d62..00000000
--- a/app/assets/stylesheets/palette.scss
+++ /dev/null
@@ -1,33 +0,0 @@
-// https://identity.stanford.edu/design-elements/color/primary-colors/
-$stanford-cardinal: #8c1515;
-$stanford-cool-grey: #53565a; // used in SDR header (not yet added)
-$stanford-black: #2e2d29; // "100% black" in Stanford brand identity
-$tapa: #767674; // "60% black" in Stanford brand identity
-$silver-sand: #c0c0bf; // "30% black" in Stanford brand identity
-$stanford-black-20: #d5d5d4; // "20% black" in Stanford brand identity
-$stanford-white: #ffffff;
-$whisper: #eaeaea; // "10% black" in Stanford brand identity, used as modal bg color
-
-// https://identity.stanford.edu/design-elements/color/web/
-$stanford-digital-blue: #006cb8;
-$stanford-digital-blue-dark: #00548f;
-$stanford-digital-green: #008566;
-$stanford-digital-red: #b1040e;
-
-// https://identity.stanford.edu/design-elements/color/accent-colors/
-$stanford-fog: #dad7cb;
-$stanford-fog-light: #f4f4f4;
-$stanford-illuminating: #fedd5c;
-$stanford-illuminating-dark: #fec51d;
-$stanford-palo-alto-light: #2d716f;
-$stanford-palo-alto-dark: #014240;
-$stanford-stone: #7f7776;
-$stanford-stone-light: #d4d1d1;
-
-// Non-Stanford identity colors
-$cyan-blue-light: #f8f9fa;
-$gray-light: #fafafa;
-$green-white: #ebf5f1;
-:root {
-  --grey-lighter: #ededed;
-}
diff --git a/app/assets/stylesheets/stanfordStripe.scss b/app/assets/stylesheets/stanfordStripe.css
similarity index 63%
rename from app/assets/stylesheets/stanfordStripe.scss
rename to app/assets/stylesheets/stanfordStripe.css
index c50ecc76..11e920cc 100644
--- a/app/assets/stylesheets/stanfordStripe.scss
+++ b/app/assets/stylesheets/stanfordStripe.css
@@ -1,5 +1,4 @@
-// Stanford Stripe
-$stanford-stripe-color: $stanford-black;
+/* Stanford Stripe */
 
 .su-brand-bar {
   width: 100%;
@@ -7,10 +6,11 @@ $stanford-stripe-color: $stanford-black;
 }
 
 .su-brand-bar__logo {
-  color: $stanford-stripe-color;
+  --stanford-stripe-color: var(--stanford-black);
+  color: var(--stanford-stripe-color);
   display: inline-block;
   font-size: 1rem;
-  font-family: $font-family-serif;
+  font-family: var(--font-family-serif);
   font-weight: 400;
   font-variant-ligatures: discretionary-ligatures;
   font-feature-settings: "liga";
@@ -20,7 +20,7 @@ $stanford-stripe-color: $stanford-black;
   &:hover,
   &:active,
   &:focus {
-    color: $stanford-stripe-color;
+    color: var(--stanford-stripe-color);
     text-decoration: none;
   }
 }
diff --git a/app/assets/stylesheets/sulBase.scss b/app/assets/stylesheets/sulBase.css
similarity index 66%
rename from app/assets/stylesheets/sulBase.scss
rename to app/assets/stylesheets/sulBase.css
index e7653a62..0e2fa2ff 100644
--- a/app/assets/stylesheets/sulBase.scss
+++ b/app/assets/stylesheets/sulBase.css
@@ -1,9 +1,4 @@
-body {
-  --bs-heading-color: $primary;
-}
-
-a,
-.btn-link {
+a {
   text-decoration: var(--bs-link-decoration);
   font-weight: 450;
   &:hover,
@@ -17,18 +12,18 @@ a,
 }
 
 .form-control:focus {
-  border-color: $link-dark-color;
-  box-shadow: 0 0 0 0.25rem rgba($link-dark-color, 0.25);
+  border-color: var(--stanford-digital-blue);
+  box-shadow: 0 0 0 0.25rem rgba(var(--sul-link-color-rgb), 0.25);
 }
 
 .bg-dark a {
-  color: $link-light-color;
+  --bs-link-color-rgb: 255, 255, 255;
 }
 
 .warning-icon svg {
   height: 1.25rem;
   width: 1.25rem;
-  color: $stanford-digital-red;
+  color: var(--stanford-digital-red);
 }
 
 .grecaptcha-badge {
diff --git a/app/assets/stylesheets/sulCollection.scss b/app/assets/stylesheets/sulCollection.css
similarity index 61%
rename from app/assets/stylesheets/sulCollection.scss
rename to app/assets/stylesheets/sulCollection.css
index 61f7eb91..6e511109 100644
--- a/app/assets/stylesheets/sulCollection.scss
+++ b/app/assets/stylesheets/sulCollection.css
@@ -1,26 +1,26 @@
 /** AL Sidebar and Document area layout **/
 :root {
-  --al-toggle-icon-color: #{$stanford-digital-blue};
+  --al-toggle-icon-color: var(--stanford-digital-blue);
 }
 
 #sidebar {
   overflow-y: auto;
+}
 
-  @include media-breakpoint-up(lg) {
+@media (min-width: 992px) {
+  #sidebar {
     overflow: hidden;
     margin-bottom: 1rem;
   }
-}
 
-#sidebar-scroll-wrapper {
-  @include media-breakpoint-up(lg) {
+  #sidebar-scroll-wrapper {
     overflow-y: auto;
     overflow-x: hidden;
     height: calc(100vh - 180px);
   }
 }
 
-// make the wrapping .collection-sidebar full bleed,
+/* make the wrapping .collection-sidebar full bleed, */
 .collection-sidebar {
   padding: 0;
 
@@ -28,81 +28,70 @@
     border-bottom: 0;
   }
 
-  // and add padding within .collection-sidebar
+  /* and add padding within .collection-sidebar */
   .al-show-actions-box,
   #sidebar-scroll-wrapper {
-    // padding around the light-green section
+    /* padding around the light-green section */
     padding: 2rem 2rem 2rem 3rem;
   }
 
   #sidebar {
     overflow-y: auto;
-
-    @include media-breakpoint-up(lg) {
-      overflow: hidden;
-      margin-bottom: 1rem;
-    }
-  }
-
-  #sidebar-scroll-wrapper {
-    @include media-breakpoint-up(lg) {
-      overflow-y: auto;
-      overflow-x: hidden;
-      height: calc(100vh - 180px);
-    }
   }
 
   .al-sidebar-navigation-context,
   #collection-context {
-    // overriding this from AL Core allows it to hit the edge of #sidebar-scroll-wrapper above
+    /* overriding this from AL Core allows it to hit the edge of #sidebar-scroll-wrapper above */
     margin-left: 0;
   }
 
   .al-show-actions-box {
-    background-color: $green-white;
+    background-color: var(--green-white);
   }
 
-  // this targets each button within the .al-collection-context-actions
+  /* this targets each button within the .al-collection-context-actions */
   .al-collection-context-actions > * {
     margin-right: 0.5rem;
   }
 
   .al-show-actions-box-info .btn-secondary,
   .al-collection-context-collapsible .btn-secondary {
-    // rather than overriding the entire components inherited from AL Core to change the .btn-secondary class to the more appropriate .btn-outline-secondary, just change the colors in these cases
+    /* rather than overriding the entire components inherited from AL Core to change the .btn-secondary class to the more appropriate .btn-outline-secondary, just change the colors in these cases */
     background-color: white;
     color: black;
     border-radius: 0;
-    // override the icon from AL Core
+
+    /* override the icon from AL Core */
     svg.bi {
       display: none;
     }
   }
 
-  // more padding for the "Expand" sidebar button
+  /* more padding for the "Expand" sidebar button */
   .al-collection-context-collapsible .btn-secondary {
     margin: 0.5rem 0.5rem 1rem 0.5rem;
     padding: 0.5rem 1rem;
+
     &:hover {
-      background-color: $stanford-palo-alto-dark;
+      background-color: var(--stanford-palo-alto-dark);
       color: white;
     }
   }
 }
 
-// match padding in document area for even space across page top
+/* match padding in document area for even space across page top */
 .show-document {
-  // needs to be !important to override AL Core
+  /* needs to be !important to override AL Core */
   padding: 2rem !important;
 }
 
-// Overrides AL Core to style metadata section titles
+/* Overrides AL Core to style metadata section titles */
 .show-document .al-show-sub-heading {
   text-transform: none;
   font-size: 28px;
 }
 
-// Overrides AL Core to change style and align the metadata label to the left
+/* Overrides AL Core to change style and align the metadata label to the left */
 #metadata .dl-invert dt,
 .show-document > * .dl-invert dt {
   text-align: left;
@@ -111,8 +100,8 @@
   color: black;
 }
 
-// AL Core overrides for metadata sections and the top title areas
-// Those borders should look the same but have different types of markup in AL Core
+/* AL Core overrides for metadata sections and the top title areas */
+/* Those borders should look the same but have different types of markup in AL Core */
 #using-these-materials,
 #metadata .dl-invert,
 .title-container,
@@ -129,7 +118,7 @@
 
 #using-these-materials {
   ul {
-    color: $stanford-digital-blue;
+    color: var(--stanford-digital-blue);
   }
 }
 
@@ -147,16 +136,13 @@
   ul {
     list-style-type: disc;
     padding-left: 1.25rem;
-    color: $stanford-digital-blue;
-  }
-  a.nav-link {
-    color: $stanford-digital-blue;
+    color: var(--stanford-digital-blue);
   }
 }
 
-// These are the square badges in the heirarchy that show the number of items
+/* These are the square badges in the hierarchy that show the number of items */
 .documentHeader .bg-secondary {
-  // Bootstrap makes this !important, so we need to override it with !important
+  /* Bootstrap makes this !important, so we need to override it with !important */
   background-color: #ededed !important;
   border: 1px solid #979797;
   color: black;
@@ -164,16 +150,16 @@
 }
 
 .al-hierarchy-highlight > .documentHeader {
-  background-color: $green-white;
+  background-color: var(--green-white);
 }
 
 /**  Search Tools **/
 #sortAndPerPage {
-  // makes it even with top of sidebar content
+  /* makes it even with top of sidebar content */
   padding-top: 0.5rem;
 }
 
-// Spacing between each applied param button
+/* Spacing between each applied param button */
 #appliedParams > a {
   margin-right: 0.5rem;
 }
@@ -188,9 +174,7 @@
 
 a.btn-outline-secondary:hover,
 a.btn-outline-secondary:focus {
-  background-color: $secondary;
-  border-color: $secondary;
-  text-decoration: none;
+  --bs-link-hover-decoration: none;
 }
 
 span.constraint-value:hover,
@@ -199,12 +183,7 @@ span.constraint-value:focus {
   color: black;
 }
 
-.dropdown-item.active {
-  background-color: $secondary;
-}
-
 .al-show-actions-box .dropdown-item:active {
-  background-color: $secondary;
   svg.bi {
     color: white;
   }
@@ -230,12 +209,12 @@ span.constraint-value:focus {
 
 .truncator .view-more,
 .truncator .view-less {
-  color: $stanford-digital-blue;
+  color: var(--stanford-digital-blue);
   font-weight: 600;
 }
 
 .truncator .btn-link {
-  color: $stanford-digital-blue;
+  color: var(--stanford-digital-blue);
 }
 
 .truncator .icon {
@@ -243,23 +222,24 @@ span.constraint-value:focus {
 }
 
 .paginate-section .active > .page-link {
-  background-color: $stanford-palo-alto-dark;
-  border-color: $stanford-palo-alto-dark;
+  background-color: var(--stanford-palo-alto-dark);
+  border-color: var(--stanford-palo-alto-dark);
   color: white;
 }
 
 .paginate-section .page-link {
-  color: $stanford-digital-blue;
+  color: var(--bs-link-color);
+
   &:focus {
-    box-shadow: 0 0 0 0.25rem rgba($stanford-palo-alto-dark, 0.25);
+    box-shadow: 0 0 0 0.25rem rgba(var(--bs-dark-rgb), 0.25);
   }
 }
 
 .paginate-section .next-page:not(.disabled),
 .paginate-section .prev-page:not(.disabled) {
   .page-link {
-    color: $stanford-white;
-    background-color: $stanford-palo-alto-dark;
+    color: var(--bs-body-bg);
+    background-color: var(--stanford-palo-alto-dark);
   }
 }
 
@@ -271,13 +251,13 @@ span.constraint-value:focus {
   align-content: center;
 }
 
-// Digital contents icons, alerts
-// AL Core overrides
+/* Digital contents icons, alerts */
+/* AL Core overrides */
 article.document .al-online-content-icon .blacklight-icons svg,
 .online-contents .al-online-content-icon .blacklight-icons svg,
 #facet-digital_content .al-online-content-icon .blacklight-icons svg,
 .collection-source-icon svg {
-  fill: $stanford-palo-alto-light;
+  fill: var(--stanford-palo-alto-light);
 }
 
 article.document .al-online-content-icon .blacklight-icons svg {
@@ -285,13 +265,13 @@ article.document .al-online-content-icon .blacklight-icons svg {
 }
 
 .tooltip-inner {
-  background-color: $stanford-palo-alto-light;
+  background-color: var(--stanford-palo-alto-light);
   filter: drop-shadow(0px 5px 5px rgba(0, 0, 0, 0.5));
   color: white;
 }
 
 .tooltip.bs-tooltip-top .tooltip-arrow::before {
-  border-top-color: $stanford-palo-alto-light;
+  border-top-color: var(--stanford-palo-alto-light);
 }
 
 .title-container .online-contents h2 {
@@ -304,33 +284,38 @@ article.document .al-online-content-icon .blacklight-icons svg {
 .online-contents.card {
   border: 0;
   padding: 0;
-  background-color: $green-white;
+  background-color: var(--green-white);
+
   .card-body {
     padding: 0.25rem 0.25rem 0.25rem 1rem;
-    border-left: 8px solid $stanford-palo-alto-dark;
+    border-left: 8px solid var(--stanford-palo-alto-dark);
   }
 }
 
 #facet-digital_content.card {
   border: 0;
   margin-bottom: 1rem;
-  background-color: $green-white;
+  background-color: var(--green-white);
+
   .card-body {
     padding: 1rem;
-    border-left: 8px solid $stanford-palo-alto-dark;
+    border-left: 8px solid var(--stanford-palo-alto-dark);
   }
-  a {
-    color: $stanford-digital-blue;
+
+  .remove {
+    color: var(--stanford-digital-blue);
   }
+
   .facet-label,
   .facet-select {
     font-weight: bold;
   }
+
   .facet-count {
     font-weight: normal;
   }
-}
 
-#facet-digital_content.card.facet-limit-active {
-  background-color: $whisper;
+  &.facet-limit-active {
+    background-color: var(--whisper);
+  }
 }
diff --git a/app/assets/stylesheets/sulFacets.scss b/app/assets/stylesheets/sulFacets.css
similarity index 74%
rename from app/assets/stylesheets/sulFacets.scss
rename to app/assets/stylesheets/sulFacets.css
index 147628e5..9aef24fb 100644
--- a/app/assets/stylesheets/sulFacets.scss
+++ b/app/assets/stylesheets/sulFacets.css
@@ -1,7 +1,7 @@
 /* Date Range Facet */
 
 #facet-date_range {
-  // Hide some features that don't work or we don't want
+  /* Hide some features that don't work or we don't want */
   .distribution,
   .more_facets,
   .facet-values.missing,
@@ -10,7 +10,7 @@
   }
   p.range.subsection {
     .facet-limit-active & {
-      // Don't show the complete date range if one is already applied
+      /* Don't show the complete date range if one is already applied */
       display: none;
     }
   }
@@ -24,7 +24,7 @@
   font-size: 1.25rem;
 }
 
-// many of these properties are !important in Blacklight Core, so it's needed here to override
+/* many of these properties are !important in Blacklight Core, so it's needed here to override */
 .facet-limit-active {
   border-color: black !important;
 
diff --git a/app/assets/stylesheets/sulFooter.scss b/app/assets/stylesheets/sulFooter.css
similarity index 64%
rename from app/assets/stylesheets/sulFooter.scss
rename to app/assets/stylesheets/sulFooter.css
index 5e6de6f9..7a2f045c 100644
--- a/app/assets/stylesheets/sulFooter.scss
+++ b/app/assets/stylesheets/sulFooter.css
@@ -1,19 +1,15 @@
-$brand-color: $stanford-cardinal !default;
-$footer-color: $white !default;
-$pre-footer-background: $stanford-black !default;
-
 footer a {
   --bs-link-color-rgb: 255, 255, 255;
   --bs-link-hover-color-rgb: 255, 255, 255;
 }
 
 #pre-footer {
-  background-color: $pre-footer-background;
+  background-color: var(--stanford-black);
 }
 
 .su-logo {
   display: inline-block;
-  font-family: Stanford, $font-family-serif;
+  font-family: Stanford, var(--font-family-serif);
   font-variant-ligatures: discretionary-ligatures;
   font-feature-settings: "liga";
   font-weight: 400;
@@ -28,24 +24,28 @@ footer a {
 }
 
 #su-footer {
-  background-color: $brand-color;
+  background-color: var(--stanford-cardinal);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 
   ul {
     a {
       font-size: min(calc(0.825rem + 0.3vw), 1.25rem);
-
-      @include media-breakpoint-down(sm) {
-        font-weight: 600;
-      }
     }
   }
 
   .copyright {
     font-size: 0.8125rem;
+  }
+}
+
+@media (max-width: 575.98px) {
+  #su-footer {
+    ul a {
+      font-weight: 600;
+    }
 
-    @include media-breakpoint-up(sm) {
+    .copyright {
       font-size: 0.9375rem;
     }
   }
diff --git a/app/assets/stylesheets/sulHeader.css b/app/assets/stylesheets/sulHeader.css
new file mode 100644
index 00000000..051f17c1
--- /dev/null
+++ b/app/assets/stylesheets/sulHeader.css
@@ -0,0 +1,169 @@
+.navbar {
+  --bs-navbar-hover-color: rgba(255, 255, 255, 1);
+  padding-top: 0.75rem;
+  padding-bottom: 0;
+}
+
+.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;
+}
+
+header .topbar > .container,
+header .topbar > .container-fluid {
+  padding: 0;
+}
+
+#feedback {
+  background-color: white;
+
+  label {
+    text-align: right;
+    font-weight: bold;
+  }
+
+  a {
+    --bs-link-color-rgb: var(--sul-link-color-rgb);
+  }
+}
+
+.al-masthead {
+  .h1 {
+    --al-masthead-title-size: 1.5rem;
+    display: inline;
+    font-weight: 600;
+    padding-left: 0;
+  }
+
+  .navbar-nav {
+    --bs-nav-link-padding-y: 0.3rem;
+    --bs-nav-link-color: white;
+    --bs-nav-link-hover-color: white;
+    list-style-type: none;
+    padding-left: 0;
+    margin-right: 0.5rem;
+
+    /* This overrides Arclight. We can use --al-mastead-active-link-color once */
+    /* https://github.com/projectblacklight/arclight/pull/1539 is released */
+    li.active a {
+      color: var(--bs-nav-link-color);
+    }
+
+    li {
+      display: inline-block;
+      position: relative;
+    }
+
+    li:not(:last-child) {
+      margin-right: 1rem;
+    }
+
+    li:not(:first-child)::before {
+      color: var(--bs-nav-link-color);
+      content: "•";
+      position: absolute;
+      left: -1.165rem;
+      top: 0.25rem;
+    }
+  }
+}
+
+@media (min-width: 992px) {
+  .al-masthead .h1 {
+    --al-masthead-title-size: 2rem;
+  }
+}
+
+@media (min-width: 1200px) {
+  .al-masthead .h1 {
+    --al-masthead-title-size: 2.5rem;
+  }
+}
+
+.input-group {
+  .search-btn {
+    --bs-btn-active-bg: var(--stanford-palo-alto-light);
+    --bs-btn-active-border-color: var(--stanford-palo-alto-light);
+    background-color: white;
+    border-color: #dee2e6; /* Border color of Blacklight inputs */
+    border-left: none;
+    padding: 0;
+    color: var(--stanford-palo-alto-dark);
+    padding-right: 5px;
+
+    .blacklight-icons {
+      margin-top: 0.5rem;
+    }
+  }
+
+  > .search-autocomplete-wrapper ul li:active {
+    color: var(--stanford-black);
+    background-color: var(--grey-lighter);
+  }
+}
+
+.al-masthead ~ .navbar-search {
+  border-top: none;
+  background-color: var(--stanford-black);
+  margin-bottom: 0;
+
+  .input-group-text {
+    --bs-body-color: white;
+    --bs-tertiary-bg: var(--stanford-black);
+    --bs-border-width: none;
+    font-weight: 700;
+    padding-top: 0.25rem;
+    padding-bottom: 0.25rem;
+  }
+
+  .within-collection-dropdown {
+    padding-right: 0.25rem;
+
+    .input-group-text {
+      padding-left: 0;
+      padding-right: 1.25rem;
+    }
+  }
+
+  .form-select {
+    background-size: 1.125rem 1.125rem;
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+
+  #search_field {
+    margin-right: 0.825rem;
+  }
+}
+
+@media (min-width: 1200px) {
+  .al-masthead ~ .navbar-search .form-select {
+    padding-right: 8rem;
+  }
+}
+
+@media (min-width: 992px) {
+  .al-masthead ~ .navbar-search {
+    .form-select {
+      padding-right: 5rem;
+    }
+
+    /* Search field selector and full text search box input group */
+    .input-group:nth-of-type(2) {
+      min-width: 87%;
+    }
+  }
+}
+
+.beta-banner {
+  background-color: var(--stanford-illuminating);
+  /* These aren't official stanford colors */
+  /* but no combination of official interactive colors */
+  /* meet accessibility contrast requirements on this background. */
+  color: #000;
+}
diff --git a/app/assets/stylesheets/sulHeader.scss b/app/assets/stylesheets/sulHeader.scss
deleted file mode 100644
index 148aa383..00000000
--- a/app/assets/stylesheets/sulHeader.scss
+++ /dev/null
@@ -1,160 +0,0 @@
-$masthead-color: $stanford-white;
-
-.navbar {
-  --bs-navbar-hover-color: rgba(255, 255, 255, 1);
-  padding-top: 0.75rem;
-}
-
-.navbar-logo {
-  height: 41px;
-  width: 258px;
-  background-size: 258px 41px;
-}
-
-header .topbar > .container,
-header .topbar > .container-fluid {
-  padding: 0;
-}
-
-#feedback {
-  background-color: white;
-
-  label {
-    text-align: right;
-    font-weight: bold;
-  }
-
-  a {
-    color: $stanford-digital-blue;
-  }
-}
-
-.al-masthead {
-  color: $masthead-color;
-
-  .h1 {
-    --al-masthead-title-size: 1.5rem;
-    display: inline;
-    font-weight: 600;
-    padding-left: 0;
-
-    @include media-breakpoint-up(lg) {
-      --al-masthead-title-size: 2rem;
-    }
-
-    @include media-breakpoint-up(xl) {
-      --al-masthead-title-size: 2.25rem;
-    }
-  }
-
-  .navbar-nav {
-    list-style-type: none;
-    padding-left: 0;
-    margin-right: 0.5rem;
-
-    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 {
-      content: "•";
-      position: absolute;
-      left: -1.165rem;
-      top: 0.25rem;
-    }
-  }
-}
-
-.input-group {
-  .search-btn {
-    background-color: $navbar-dark-color;
-    border-color: #dee2e6; // Border color of Blacklight inputs
-    border-left: none;
-    padding: 0;
-    color: $stanford-palo-alto-dark;
-    padding-right: 5px;
-
-    .blacklight-icons {
-      margin-top: 0.5rem;
-    }
-
-    &.btn:active {
-      background-color: $stanford-palo-alto-light;
-      border-color: $stanford-palo-alto-light;
-    }
-  }
-
-  > .search-autocomplete-wrapper ul li:active {
-    color: $stanford-black;
-    background-color: var(--grey-lighter);
-  }
-}
-
-.al-masthead ~ .navbar-search {
-  border-top: none;
-  background-color: $navbar-background-color;
-  margin-bottom: 0;
-
-  .input-group-text {
-    background-color: $navbar-background-color;
-    border: none;
-    color: $navbar-dark-color;
-    font-weight: 700;
-    padding-top: 0.25rem;
-    padding-bottom: 0.25rem;
-  }
-
-  .within-collection-dropdown {
-    padding-right: 0.25rem;
-
-    .input-group-text {
-      padding-left: 0;
-      padding-right: 1.25rem;
-    }
-  }
-
-  .form-select {
-    background-size: 1.125rem 1.125rem;
-    padding-top: 0;
-    padding-bottom: 0;
-
-    @include media-breakpoint-up(lg) {
-      padding-right: 5rem;
-    }
-
-    @include media-breakpoint-up(xl) {
-      padding-right: 8rem;
-    }
-  }
-
-  // Search field selector and full text search box input group
-  .input-group:nth-of-type(2) {
-    @include media-breakpoint-up(lg) {
-      min-width: 87%;
-    }
-  }
-
-  #search_field {
-    margin-right: 0.825rem;
-  }
-}
-
-.beta-banner {
-  background-color: $stanford-illuminating;
-  // These aren't official stanford colors
-  // but no combination of official interactive colors
-  // meet accessibility contrast requirements on this background.
-  color: #000;
-  a {
-    color: #0065ad;
-  }
-}
diff --git a/app/assets/stylesheets/sulLanding.scss b/app/assets/stylesheets/sulLanding.css
similarity index 63%
rename from app/assets/stylesheets/sulLanding.scss
rename to app/assets/stylesheets/sulLanding.css
index ea5edbf9..2e32890d 100644
--- a/app/assets/stylesheets/sulLanding.scss
+++ b/app/assets/stylesheets/sulLanding.css
@@ -1,40 +1,35 @@
 .blacklight-landing_page {
-  overflow-x: hidden;
+  --featured-item-height: 22rem;
+  --featured-teaser-overhang: 1rem;
 
-  body a {
-    color: $link-dark-color;
-  }
+  overflow-x: hidden;
 
   #main-container h1,
   h2 {
     font-size: 2.25rem;
-    font-family: $font-family-serif;
+    font-family: var(--font-family-serif);
     font-weight: bold;
   }
 
-  // make the content area full bleed
+  /* make the content area full bleed */
   #main-container {
     padding: 0;
   }
 }
 
 .collection-count {
-  font-family: $font-family-serif;
+  font-family: var(--font-family-serif);
 }
 
-$featured-item-height: 22rem;
-$featured-teaser-overhang: 1rem;
+@media (min-width: 992px) {
+  #featured-item-wrapper .featured-item img {
+    height: var(--featured-item-height);
 
-#featured-item-wrapper {
-  .featured-item {
-    @include media-breakpoint-up(lg) {
-      img {
-        height: $featured-item-height;
-        object-fit: cover;
-      }
-    }
+    object-fit: cover;
   }
+}
 
+#featured-item-wrapper {
   .featured-item-caption {
     text-align: left;
     background: rgba(0, 0, 0, 0.8);
@@ -48,11 +43,11 @@ $featured-teaser-overhang: 1rem;
 
 #landing-page-search {
   background-image: linear-gradient(to right, #efefef, #d0d8d8);
-  // 30px matches height of stanford top white brand bar
+  /* 30px matches height of stanford top white brand bar */
   padding-top: 30px;
 
   #autocomplete-popup li {
-    color: $stanford-black;
+    color: var(--stanford-black);
   }
 
   .input-group > .search-autocomplete-wrapper input:focus {
@@ -60,15 +55,17 @@ $featured-teaser-overhang: 1rem;
   }
 
   .search-query-form .input-group:focus-within {
-    box-shadow: 0 0 0 0.25rem rgba($link-dark-color, 0.25);
+    box-shadow: 0 0 0 0.25rem rgba(var(--bs-link-color-rgb), 0.25);
   }
 
   li a {
     font-size: 1.125rem;
     font-weight: 350;
   }
+}
 
-  @include media-breakpoint-up(md) {
+@media (min-width: 768px) {
+  #landing-page-search {
     ul {
       list-style-type: none;
       padding-left: 0;
@@ -85,17 +82,19 @@ $featured-teaser-overhang: 1rem;
       position: absolute;
       left: -1rem;
       top: 0.05rem;
-      color: $stanford-digital-blue;
+      color: var(--bs-link-color);
     }
   }
+}
 
-  @include media-breakpoint-up(lg) {
-    height: calc($featured-item-height - $featured-teaser-overhang);
+@media (min-width: 992px) {
+  #landing-page-search {
+    height: calc(var(--featured-item-height) - var(--featured-teaser-overhang));
   }
 }
 
 #about-landing {
-  // 30px matches height of stanford top white brand bar
+  /* 30px matches height of stanford top white brand bar */
   padding-top: 30px;
   padding-bottom: 30px;
 }
diff --git a/app/components/blacklight/top_navbar_component.html.erb b/app/components/blacklight/top_navbar_component.html.erb
index 2574e663..fe4ff44e 100644
--- a/app/components/blacklight/top_navbar_component.html.erb
+++ b/app/components/blacklight/top_navbar_component.html.erb
@@ -13,7 +13,7 @@
       </div>
     </nav>
   </div>
-  
+
   <div data-feedback-target="container" id="feedback" class="collapse">
     <div class="container pt-3">
       <div class="row justify-content-center">
@@ -56,4 +56,4 @@
       </div>
     </div>
   </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/app/views/landing_page/_cards.html.erb b/app/views/landing_page/_cards.html.erb
index c4452af1..be61eb6a 100644
--- a/app/views/landing_page/_cards.html.erb
+++ b/app/views/landing_page/_cards.html.erb
@@ -5,7 +5,7 @@
       <div class="card-body px-1">
         <h3 class="card-title"><%= t('.location.title') %></h3>
         <% cache('location_hours', expires_at: @next_half_hour) do %>
-          <ul>
+          <ul class="locations">
             <% @hours.each do |location_hours| %>
               <li><%= render 'landing_page/location_hours', location_hours: %></li>
             <% end %>
@@ -34,4 +34,4 @@
       </div>
     </div>
   </div>
-</div>
\ No newline at end of file
+</div>