From 2054d4e31e723f31f875a52b6a76a536c04275e1 Mon Sep 17 00:00:00 2001
From: "Erin E. Sullivan" <sulliv.erin@gmail.com>
Date: Tue, 7 Jan 2025 15:36:16 -0500
Subject: [PATCH 01/10] Moving where `.site-wrapper` wraps in order to push
 down footer. Removing unused styles.

---
 src/index.js             |  8 ++++----
 src/stylesheets/main.css | 30 +++++++++++++-----------------
 2 files changed, 17 insertions(+), 21 deletions(-)

diff --git a/src/index.js b/src/index.js
index 2744cbec..03f7ba3d 100644
--- a/src/index.js
+++ b/src/index.js
@@ -19,10 +19,10 @@ const App = () => {
   return (
     <Provider store={store}>
       <BrowserRouter>
+        <A11yLiveMessage />
+        <ScrollToTop />
+        <SearchHeader />
         <div className='site-wrapper'>
-          <A11yLiveMessage />
-          <ScrollToTop />
-          <SearchHeader />
           <Routes>
             <Route
               path='/'
@@ -47,8 +47,8 @@ const App = () => {
             <Route path=':datastoreSlug/*' element={<DatastoreRoute />} />
             <Route path='*' element={<NoMatch />} />
           </Routes>
-          <Footer />
         </div>
+        <Footer />
       </BrowserRouter>
     </Provider>
   );
diff --git a/src/stylesheets/main.css b/src/stylesheets/main.css
index 76d01b6b..dd3346ae 100644
--- a/src/stylesheets/main.css
+++ b/src/stylesheets/main.css
@@ -74,16 +74,13 @@ html {
 
 .container-narrow {
   max-width: 54rem;
+  width: 100%;
 }
 
 .container-medium {
   max-width: 1200px;
 }
 
-.container-fluid {
-  padding: 0 1rem;
-}
-
 * {
   -webkit-font-smoothing: antialiased;
 }
@@ -98,8 +95,9 @@ body {
 }
 
 body {
-  font: 0.875rem/1.4 "Noto Sans", sans-serif;
+  background: #f2f2f2;
   color: #262626;
+  font: 0.875rem/1.4 "Noto Sans", sans-serif;
 }
 
 @media (min-width: 820px) {
@@ -108,6 +106,16 @@ body {
   }
 }
 
+#root {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.site-wrapper {
+  flex-grow: 1;
+}
+
 /*
     Accessibility utilities
 */
@@ -1016,10 +1024,6 @@ details[open] > summary svg.expand_more {
   border-top: solid 1px #E5E5E5;
 }
 
-body {
-  background: white;
-}
-
 .flex-container {
   display: block;
 }
@@ -1041,10 +1045,6 @@ body {
   }
 }
 
-.grey-background {
-  background: #E5E5E5;
-}
-
 .page {
   display: inherit;
   padding: 2rem;
@@ -1057,10 +1057,6 @@ body {
   }
 }
 
-.site-wrapper {
-  background: #F2F2F2;
-}
-
 .page-not-found-container {
   margin-top: 6rem;
   margin-bottom: 8rem;

From 6e3305fef15a5de1eba7500c4f1f5128642bc97c Mon Sep 17 00:00:00 2001
From: "Erin E. Sullivan" <sulliv.erin@gmail.com>
Date: Wed, 8 Jan 2025 08:51:59 -0500
Subject: [PATCH 02/10] Removing reset styles and separating base styles into a
 new file.

---
 src/index.js             |   1 +
 src/stylesheets/base.css |  41 +++++++++++
 src/stylesheets/main.css | 152 ++-------------------------------------
 3 files changed, 48 insertions(+), 146 deletions(-)
 create mode 100644 src/stylesheets/base.css

diff --git a/src/index.js b/src/index.js
index 03f7ba3d..12d07907 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,4 +1,5 @@
 import './stylesheets/colors.css';
+import './stylesheets/base.css';
 import './stylesheets/forms.css';
 import './stylesheets/main.css';
 import './stylesheets/spacing.css';
diff --git a/src/stylesheets/base.css b/src/stylesheets/base.css
new file mode 100644
index 00000000..f4e2f9ba
--- /dev/null
+++ b/src/stylesheets/base.css
@@ -0,0 +1,41 @@
+*,
+*:before,
+*:after {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+body,
+#root {
+  display: flex;
+  flex-direction: column;
+}
+
+body {
+  background: var(--search-color-grey-200);
+  color: var(--search-color-grey-700);
+  font: 0.875rem/1.4 "Noto Sans", sans-serif;
+}
+
+@media (min-width: 820px) {
+  body {
+    font-size: 1rem;
+  }
+}
+
+#root,
+.site-wrapper {
+  flex-grow: 1;
+}
diff --git a/src/stylesheets/main.css b/src/stylesheets/main.css
index dd3346ae..2b00624f 100644
--- a/src/stylesheets/main.css
+++ b/src/stylesheets/main.css
@@ -1,72 +1,8 @@
-/* http://meyerweb.com/eric/tools/css/reset/
-   v2.0 | 20110126
-   License: none (public domain)
-*/
-html, body, div, span, applet, object, iframe,
-h1, h2, h3, h4, h5, h6, p, blockquote, pre,
-a, abbr, acronym, address, big, cite, code,
-del, dfn, em, img, ins, kbd, q, s, samp,
-strike, strong, sub, sup, tt, var,
-center,
-dl, dt, dd, ol, ul, li,
-fieldset, form, label, legend,
-table, caption, tbody, tfoot, thead, tr, th, td,
-article, aside, canvas, details, embed,
-figure, figcaption, footer, header, hgroup,
-menu, nav, output, ruby, section, summary,
-time, mark, audio, video {
-  margin: 0;
-  padding: 0;
-  border: 0;
-  font-size: 100%;
-  font: inherit;
-  vertical-align: baseline;
-}
-
-/* HTML5 display-role reset for older browsers */
-article, aside, details, figcaption, figure,
-footer, header, hgroup, menu, nav, section {
-  display: block;
-}
-
-body {
-  line-height: 1;
-}
-
-ol,
-ul {
-  list-style: none;
-}
-
-blockquote,
-q {
-  quotes: none;
-}
-
-blockquote:before,
-blockquote:after,
-q:before,
-q:after {
-  content: '';
-  content: none;
-}
-
 table {
   border-collapse: collapse;
   border-spacing: 0;
 }
 
-/* apply a natural box layout model to all elements, but allowing components to change */
-html {
-  box-sizing: border-box;
-}
-
-*,
-*:before,
-*:after {
-  box-sizing: border-box;
-}
-
 .container {
   margin: 0 auto;
   padding: 0 0.75rem;
@@ -81,40 +17,6 @@ html {
   max-width: 1200px;
 }
 
-* {
-  -webkit-font-smoothing: antialiased;
-}
-
-/*
-  Site
-*/
-html,
-body {
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-body {
-  background: #f2f2f2;
-  color: #262626;
-  font: 0.875rem/1.4 "Noto Sans", sans-serif;
-}
-
-@media (min-width: 820px) {
-  body {
-    font-size: 1rem;
-  }
-}
-
-#root {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-}
-
-.site-wrapper {
-  flex-grow: 1;
-}
 
 /*
     Accessibility utilities
@@ -132,21 +34,16 @@ body {
 */
 h1,
 .h1 {
-  font-size: 1.87rem;
+  font-family: inherit;
+  font-size: 2.4rem;
 }
 
 h2 {
   font-size: 1.5rem;
 }
 
-h1,
-h2 {
-  font-weight: 600;
-  line-height: 1.3;
-}
-
 h3 {
-  font-size: 1.25rem;
+  font-size: 1.2rem;
 }
 
 h4,
@@ -154,31 +51,12 @@ h4,
   font-size: 1rem;
 }
 
-h3,
-h4 {
-  font-weight: 600;
-}
-
 h5 {
-  font-size: 0.9rem;
-}
-
-h6 {
-  font-size: 0.9rem;
-}
-
-h5,
-h6 {
-  font-weight: 600;
+  font-size: 0.875rem;
 }
 
-h1,
-h2,
-h3,
-h4,
-h5,
 h6 {
-  margin: 1rem 0;
+  font-size: 0.75rem;
 }
 
 .heading-xlarge,
@@ -215,9 +93,6 @@ h6 {
 /*
   Typography and Elements
 */
-p {
-  margin: 1em 0;
-}
 
 a {
   color: var(--search-color-blue-400);
@@ -239,7 +114,7 @@ a:not([class], [id]):hover,
 }
 
 *::selection {
-  background: #CCE6FF;
+  background: var(--search-color-blue-300);
 }
 
 img {
@@ -247,21 +122,6 @@ img {
   max-width: 100%;
 }
 
-ol,
-ul {
-  margin-left: 3rem;
-  margin-top: 1rem;
-  margin-bottom: 1rem;
-}
-
-ol {
-  list-style: decimal;
-}
-
-ul {
-  list-style: disc;
-}
-
 dt {
   font-weight: 600;
 }

From c514cb485ebe42f6545e8e999f1e2bd637c33000 Mon Sep 17 00:00:00 2001
From: "Erin E. Sullivan" <sulliv.erin@gmail.com>
Date: Wed, 8 Jan 2025 09:14:51 -0500
Subject: [PATCH 03/10] Separating footer styles into their own file.

---
 src/modules/core/components/Footer/index.js   |  3 +-
 src/modules/core/components/Footer/styles.css | 26 ++++++++++
 src/stylesheets/main.css                      | 47 -------------------
 3 files changed, 28 insertions(+), 48 deletions(-)
 create mode 100644 src/modules/core/components/Footer/styles.css

diff --git a/src/modules/core/components/Footer/index.js b/src/modules/core/components/Footer/index.js
index eee6610e..175c70bf 100644
--- a/src/modules/core/components/Footer/index.js
+++ b/src/modules/core/components/Footer/index.js
@@ -1,3 +1,4 @@
+import './styles.css';
 import { Anchor, Icon } from '../../../reusable';
 import React from 'react';
 
@@ -23,7 +24,7 @@ const Footer = () => {
         role='contentinfo'
       >
         <div className='container container-medium'>
-          <ul className='site-footer-nav-list'>
+          <ul className='site-footer-nav-list list__unstyled'>
             <li>
               <Anchor to='/everything'>
                 Home
diff --git a/src/modules/core/components/Footer/styles.css b/src/modules/core/components/Footer/styles.css
new file mode 100644
index 00000000..9605f5dd
--- /dev/null
+++ b/src/modules/core/components/Footer/styles.css
@@ -0,0 +1,26 @@
+.site-footer {
+  background: white;
+  border-top: 2px solid var(--search-color-grey-300);
+  padding-bottom: 3.5rem;
+  padding-top: 1.5rem;
+  text-align: center;
+}
+
+.site-footer,
+.site-footer a {
+  color: var(--search-color-grey-600);
+}
+
+.site-footer-nav-list {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  gap: 0.5rem 1.5rem;
+  justify-content: center;
+}
+
+@media (min-width: 980px) {
+  .site-footer-nav-list {
+    flex-direction: row;
+  }
+}
\ No newline at end of file
diff --git a/src/stylesheets/main.css b/src/stylesheets/main.css
index 2b00624f..5c710f4a 100644
--- a/src/stylesheets/main.css
+++ b/src/stylesheets/main.css
@@ -493,37 +493,6 @@ textarea {
   height: 26px !important;
 }
 
-.site-footer {
-  background: #00274C;
-  padding: 1.5rem 0;
-  color: white;
-  text-align: center;
-}
-
-.site-footer a {
-  color: white;
-  text-decoration: underline;
-}
-
-.site-footer-nav-list {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-
-.site-footer-nav-list li {
-  padding: 0;
-  margin: 0;
-  margin-bottom: 1rem;
-}
-
-@media (min-width: 980px) {
-  .site-footer-nav-list li {
-    display: inline-block;
-    margin-right: 1.5rem;
-  }
-}
-
 .no-margin {
   margin: 0;
 }
@@ -1784,22 +1753,6 @@ details[open] > summary svg.expand_more {
   order: 3;
 }
 
-.site-footer {
-  /* keep it to the bottom */
-  background: white;
-  border-top: solid 2px #E5E5E5;
-  color: var(--search-color-grey-600);
-  padding-bottom: 5rem;
-}
-
-.site-footer p {
-  margin: 0;
-}
-
-.site-footer a {
-  color: var(--search-color-grey-600);
-}
-
 .checkbox-label {
   display: flex;
   cursor: pointer;

From 6ce736aefe5cf3e74a58219d28a5d6cf4373ee06 Mon Sep 17 00:00:00 2001
From: "Erin E. Sullivan" <sulliv.erin@gmail.com>
Date: Wed, 8 Jan 2025 09:26:35 -0500
Subject: [PATCH 04/10] Page style adjustments.

---
 src/stylesheets/main.css      | 2 +-
 src/stylesheets/utilities.css | 8 ++++++++
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/stylesheets/main.css b/src/stylesheets/main.css
index 5c710f4a..52a6d6b5 100644
--- a/src/stylesheets/main.css
+++ b/src/stylesheets/main.css
@@ -876,8 +876,8 @@ details[open] > summary svg.expand_more {
 
 .page {
   display: inherit;
+  margin-top: 1rem;
   padding: 2rem;
-  margin: 1rem 0;
 }
 
 @media (max-width: 820px) {
diff --git a/src/stylesheets/utilities.css b/src/stylesheets/utilities.css
index b54be4e4..e6e795f1 100644
--- a/src/stylesheets/utilities.css
+++ b/src/stylesheets/utilities.css
@@ -18,6 +18,14 @@
     0 2px 4px 0 var(--search-color-grey-400);
 }
 
+.container__rounded > *:first-child {
+  margin-top: 0;
+}
+
+.container__rounded > *:last-child {
+  margin-bottom: 0;
+}
+
 .flex,
 .flex__responsive {
   display: flex;

From bd09cbe4e951d3a0753902e0b66473929870cecc Mon Sep 17 00:00:00 2001
From: "Erin E. Sullivan" <sulliv.erin@gmail.com>
Date: Wed, 8 Jan 2025 09:31:51 -0500
Subject: [PATCH 05/10] Adjusting DatastoreNavigation styles.

---
 src/modules/datastores/components/DatastoreNavigation/index.js | 2 +-
 .../datastores/components/DatastoreNavigation/styles.css       | 3 +--
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/modules/datastores/components/DatastoreNavigation/index.js b/src/modules/datastores/components/DatastoreNavigation/index.js
index 3c02c919..7cec5286 100644
--- a/src/modules/datastores/components/DatastoreNavigation/index.js
+++ b/src/modules/datastores/components/DatastoreNavigation/index.js
@@ -6,7 +6,7 @@ import { stringifySearch } from '../../../search';
 const DatastoreNavigation = ({ activeFilters, activeInstitution, currentDatastore, datastores, page, query, sort }) => {
   return (
     <nav className='datastore-nav' aria-label='Datastores'>
-      <ol>
+      <ol className='list__unstyled'>
         {datastores.map((datastore) => {
           const { isMultisearch, name, slug, uid } = datastore;
           const queryString = stringifySearch({
diff --git a/src/modules/datastores/components/DatastoreNavigation/styles.css b/src/modules/datastores/components/DatastoreNavigation/styles.css
index 9e663371..857bac49 100644
--- a/src/modules/datastores/components/DatastoreNavigation/styles.css
+++ b/src/modules/datastores/components/DatastoreNavigation/styles.css
@@ -7,8 +7,6 @@
 .datastore-nav ol {
   display: flex;
   flex-direction: column;
-  list-style: none;
-  margin: 0;
   justify-content: center;
 }
 
@@ -32,6 +30,7 @@
   align-items: center;
   border-color: transparent;
   border-style: solid;
+  border-width: 0;
   border-left-width: 3px;
   display: flex;
   height: 100%;

From 274e88057d79e9fd9d557bd7fafca64780e79421 Mon Sep 17 00:00:00 2001
From: "Erin E. Sullivan" <sulliv.erin@gmail.com>
Date: Wed, 8 Jan 2025 09:43:55 -0500
Subject: [PATCH 06/10] Updating heading sizes and adjusting Advanced Search
 headings and styles.

---
 src/index.js                                  |  1 +
 .../ActiveAdvancedFilters/styles.css          |  1 -
 .../components/AdvancedSearchForm/index.js    |  2 +-
 .../components/FiltersContainer/index.js      |  6 +-
 src/stylesheets/forms.css                     |  6 ++
 src/stylesheets/main.css                      | 61 -------------------
 src/stylesheets/typography.css                | 60 ++++++++++++++++++
 7 files changed, 71 insertions(+), 66 deletions(-)
 create mode 100644 src/stylesheets/typography.css

diff --git a/src/index.js b/src/index.js
index 12d07907..98007bc2 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,5 +1,6 @@
 import './stylesheets/colors.css';
 import './stylesheets/base.css';
+import './stylesheets/typography.css';
 import './stylesheets/forms.css';
 import './stylesheets/main.css';
 import './stylesheets/spacing.css';
diff --git a/src/modules/advanced/components/ActiveAdvancedFilters/styles.css b/src/modules/advanced/components/ActiveAdvancedFilters/styles.css
index cf379c8d..cf0c7253 100644
--- a/src/modules/advanced/components/ActiveAdvancedFilters/styles.css
+++ b/src/modules/advanced/components/ActiveAdvancedFilters/styles.css
@@ -4,5 +4,4 @@
 
 .active-filter-list {
   font-size: 0.9rem;
-  margin-left: 2.5rem;
 }
diff --git a/src/modules/advanced/components/AdvancedSearchForm/index.js b/src/modules/advanced/components/AdvancedSearchForm/index.js
index 5a10fba4..6f70a7ef 100644
--- a/src/modules/advanced/components/AdvancedSearchForm/index.js
+++ b/src/modules/advanced/components/AdvancedSearchForm/index.js
@@ -85,7 +85,7 @@ const AdvancedSearchForm = ({ datastore }) => {
 
   return (
     <form className='y-spacing container__rounded page margin-top__none' onSubmit={handleSubmit}>
-      <h2 className='h1'>{name} Search</h2>
+      <h2>{name} Search</h2>
       {errors.map((error, index) => {
         return (
           <Alert type='error' key={index}>
diff --git a/src/modules/advanced/components/FiltersContainer/index.js b/src/modules/advanced/components/FiltersContainer/index.js
index b02463f2..d5836c9d 100644
--- a/src/modules/advanced/components/FiltersContainer/index.js
+++ b/src/modules/advanced/components/FiltersContainer/index.js
@@ -66,7 +66,7 @@ const FiltersContainer = ({ datastoreUid }) => {
   return (
     <>
       {activeFilters && <ActiveAdvancedFilters {...{ activeFilters, filters: filterGroups }} />}
-      <h2 className='heading-large'>Additional search options</h2>
+      <h3>Additional search options</h3>
       <div className='advanced-filters-inner-container'>
         {filterGroupings.map((filterGroup, groupIndex) => {
           return (
@@ -88,7 +88,7 @@ const FiltersContainer = ({ datastoreUid }) => {
                       ];
                       return (
                         <div key={index} className='advanced-filter-container'>
-                          <h2 className='advanced-filter-label-text'>{name}</h2>
+                          <h4 className='advanced-filter-label-text'>{name}</h4>
                           <div className='advanced-filter-inner-container'>
                             {type === 'multiple_select' && <Multiselect {...{ currentFilters, datastoreUid, filterGroupUid: uid, filters, name }} />}
                             {type === 'date_range_input' && <DateRangeInput {...{ currentFilter: currentURLFilters[0], datastoreUid, filterGroupUid: uid }} />}
@@ -100,7 +100,7 @@ const FiltersContainer = ({ datastoreUid }) => {
                   )
                 : (
                     <div className='advanced-filter-container'>
-                      <h2 className='advanced-filter-label-text'>{filterGroup}</h2>
+                      <h4 className='advanced-filter-label-text'>{filterGroup}</h4>
                       {advancedDatastoreFilters[filterGroup].map((advancedFilter, index) => {
                         return <AdvancedFilter key={index} {...{ advancedFilter, changeAdvancedFilter }} />;
                       })}
diff --git a/src/stylesheets/forms.css b/src/stylesheets/forms.css
index 62e0e97e..ff9883ee 100644
--- a/src/stylesheets/forms.css
+++ b/src/stylesheets/forms.css
@@ -1,3 +1,9 @@
+fieldset {
+  border: 0;
+  margin: 0;
+  padding: 0;
+}
+
 label:has(input[type='radio']),
 input[type='radio'],
 label:has(input[type='checkbox']),
diff --git a/src/stylesheets/main.css b/src/stylesheets/main.css
index 52a6d6b5..f7426f42 100644
--- a/src/stylesheets/main.css
+++ b/src/stylesheets/main.css
@@ -29,67 +29,6 @@ table {
   overflow: hidden;
 }
 
-/*
-  Headings
-*/
-h1,
-.h1 {
-  font-family: inherit;
-  font-size: 2.4rem;
-}
-
-h2 {
-  font-size: 1.5rem;
-}
-
-h3 {
-  font-size: 1.2rem;
-}
-
-h4,
-.h4 {
-  font-size: 1rem;
-}
-
-h5 {
-  font-size: 0.875rem;
-}
-
-h6 {
-  font-size: 0.75rem;
-}
-
-.heading-xlarge,
-.heading-large,
-.heading-medium,
-.heading-small,
-.heading-xsmall {
-  display: block;
-  font-weight: 700;
-  line-height: 1.25;
-  margin-bottom: 0.25em;
-  margin-top: 1.5em;
-  font-size: 1rem;
-}
-
-.heading-xlarge {
-  margin-bottom: 0.625em;
-  margin-top: 1.25em;
-  font-size: 2.4rem;
-}
-
-.heading-large {
-  margin-bottom: 0.555em;
-  margin-top: 1.25em;
-  font-size: 1.5rem;
-}
-
-.heading-medium {
-  margin-bottom: 0.83333em;
-  margin-top: 1.875em;
-  font-size: 1.2rem;
-}
-
 /*
   Typography and Elements
 */
diff --git a/src/stylesheets/typography.css b/src/stylesheets/typography.css
new file mode 100644
index 00000000..2411033b
--- /dev/null
+++ b/src/stylesheets/typography.css
@@ -0,0 +1,60 @@
+/*
+  Headings
+*/
+h1,
+.h1 {
+  font-family: inherit;
+  font-size: 2.4rem;
+}
+
+h2 {
+  font-size: 1.87rem;
+}
+
+h3 {
+  font-size: 1.5rem;
+}
+
+h4,
+.h4 {
+  font-size: 1.2rem;
+}
+
+h5 {
+  font-size: 1rem;
+}
+
+h6 {
+  font-size: 0.875rem;
+}
+
+.heading-xlarge,
+.heading-large,
+.heading-medium,
+.heading-small,
+.heading-xsmall {
+  display: block;
+  font-weight: 700;
+  line-height: 1.25;
+  margin-bottom: 0.25em;
+  margin-top: 1.5em;
+  font-size: 1rem;
+}
+
+.heading-xlarge {
+  margin-bottom: 0.625em;
+  margin-top: 1.25em;
+  font-size: 2.4rem;
+}
+
+.heading-large {
+  margin-bottom: 0.555em;
+  margin-top: 1.25em;
+  font-size: 1.5rem;
+}
+
+.heading-medium {
+  margin-bottom: 0.83333em;
+  margin-top: 1.875em;
+  font-size: 1.2rem;
+}

From e8fcae03936517aec0a2def3fe78a2efa2243772 Mon Sep 17 00:00:00 2001
From: "Erin E. Sullivan" <sulliv.erin@gmail.com>
Date: Wed, 8 Jan 2025 10:24:03 -0500
Subject: [PATCH 07/10] Heading adjustments.

---
 .../AdvancedSearchContainer/index.js          |  2 +-
 .../browse/components/BrowseAtoZ/index.js     |  2 +-
 .../components/BrowseByFilters/index.js       |  6 +--
 .../browse/components/BrowsePage/index.js     |  4 +-
 .../browse/components/ShelfBrowse/index.js    |  2 +-
 .../datastores/components/Landing/index.js    |  2 +-
 .../getthis/components/GetThisPage/index.js   |  2 +-
 src/modules/lists/components/List/index.js    |  2 +-
 .../components/AboutLibrarySearch/index.js    |  2 +-
 .../components/AccessibilityPage/index.js     |  2 +-
 src/modules/pages/components/NoMatch/index.js | 40 +++++++++----------
 .../records/components/Record/index.js        |  2 +-
 .../records/components/RecordList/index.js    |  4 +-
 src/stylesheets/main.css                      | 24 ++---------
 src/stylesheets/typography.css                | 30 ++------------
 src/stylesheets/utilities.css                 |  4 ++
 16 files changed, 47 insertions(+), 83 deletions(-)

diff --git a/src/modules/advanced/components/AdvancedSearchContainer/index.js b/src/modules/advanced/components/AdvancedSearchContainer/index.js
index c124e84b..5dde155b 100644
--- a/src/modules/advanced/components/AdvancedSearchContainer/index.js
+++ b/src/modules/advanced/components/AdvancedSearchContainer/index.js
@@ -41,7 +41,7 @@ const AdvancedSearchContainer = () => {
         ]}
       />
 
-      <H1 className='heading-xlarge'>Advanced Search</H1>
+      <H1>Advanced Search</H1>
       <p className='font-lede'>Select a search category below for associated advanced search options.</p>
 
       <nav className='advanced-search-nav' aria-label='Advanced Search Datastores'>
diff --git a/src/modules/browse/components/BrowseAtoZ/index.js b/src/modules/browse/components/BrowseAtoZ/index.js
index 2cd12a1f..e6d9071e 100644
--- a/src/modules/browse/components/BrowseAtoZ/index.js
+++ b/src/modules/browse/components/BrowseAtoZ/index.js
@@ -16,7 +16,7 @@ const BrowseAtoZ = () => {
 
   return (
     <section className='browse'>
-      <h2 className='heading-large margin-top__none'>Titles A-Z</h2>
+      <h2 className='margin-y__none'>Titles A-Z</h2>
       <ul className='browse-list'>
         {['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', '0-9', 'Other'].map((character, key) => {
           return (
diff --git a/src/modules/browse/components/BrowseByFilters/index.js b/src/modules/browse/components/BrowseByFilters/index.js
index 915ab8df..4938b213 100644
--- a/src/modules/browse/components/BrowseByFilters/index.js
+++ b/src/modules/browse/components/BrowseByFilters/index.js
@@ -14,7 +14,7 @@ const NestedList = ({ browserFilterTo, filter }) => {
             </Anchor>
           )
         : (
-            <h3 className='heading-medium'>{filter.name}</h3>
+            <h3>{filter.name}</h3>
           )}
       {filter.children && (
         <ul>
@@ -50,8 +50,8 @@ const BrowseByFilters = ({ filters }) => {
     <>
       {Object.keys(filters).map((uid) => {
         return (
-          <section key={uid} className='browse u-margin-top-1'>
-            <h2 className='heading-large u-margin-top-none'>{filters[uid].name}</h2>
+          <section key={uid} className='browse margin-top__m'>
+            <h2 className='margin-y__none'>{filters[uid].name}</h2>
             <ul className='nested-list'>
               {filters[uid].filters.map((filter) => {
                 return (
diff --git a/src/modules/browse/components/BrowsePage/index.js b/src/modules/browse/components/BrowsePage/index.js
index e44afcb0..314cbe4a 100644
--- a/src/modules/browse/components/BrowsePage/index.js
+++ b/src/modules/browse/components/BrowsePage/index.js
@@ -18,14 +18,14 @@ const BrowsePage = () => {
   });
 
   return (
-    <div className='container container-narrow u-margin-top-1'>
+    <div className='container container-narrow margin-top__m'>
       <Breadcrumb
         items={[
           { text: `${datastore.name}`, to: `/${datastore.slug}${document.location.search}` },
           { text: 'Browse' }
         ]}
       />
-      <H1 className='heading-xlarge'>Browse all {datastore.name}</H1>
+      <H1>Browse all {datastore.name}</H1>
       <p className='font-lede'>When you&apos;re stuck looking for specific {datastore.name.toLowerCase()} or just want to see what&apos;s out there, the browse page makes finding the right {datastore.name.toLowerCase()} easy. Browse all {datastore.name.toLowerCase()} titles alphabetically or by academic discipline.</p>
       <BrowseAtoZ />
       <BrowseByFilters filters={browse} />
diff --git a/src/modules/browse/components/ShelfBrowse/index.js b/src/modules/browse/components/ShelfBrowse/index.js
index d5e5b867..34ef3b1f 100644
--- a/src/modules/browse/components/ShelfBrowse/index.js
+++ b/src/modules/browse/components/ShelfBrowse/index.js
@@ -90,7 +90,7 @@ const ShelfBrowse = () => {
   return (
     <section className='shelf-browse container__rounded'>
       <header className='flex__responsive'>
-        <h2 className='margin-y__none heading-medium'>Shelf browse</h2>
+        <h2 className='margin-y__none'>Shelf browse</h2>
         <BrowseLink value={callNumber}>
           <Icon icon='list' size='24' className='margin-right__xs' />Browse in call number list
         </BrowseLink>
diff --git a/src/modules/datastores/components/Landing/index.js b/src/modules/datastores/components/Landing/index.js
index 12d3ddf1..d1e66eae 100644
--- a/src/modules/datastores/components/Landing/index.js
+++ b/src/modules/datastores/components/Landing/index.js
@@ -60,7 +60,7 @@ const Landing = ({ activeDatastore, defaultInstitution, options }) => {
       {uid === 'mirlyn' && (
         <div className='container container-narrow'>
           <div className='institution-select-landing-container center-text'>
-            <h2 className='heading-large'>
+            <h2>
               To find materials closest to you, please choose a library
             </h2>
             <p className='flex flex__responsive'>
diff --git a/src/modules/getthis/components/GetThisPage/index.js b/src/modules/getthis/components/GetThisPage/index.js
index d1d5e09e..1bd1f7f5 100644
--- a/src/modules/getthis/components/GetThisPage/index.js
+++ b/src/modules/getthis/components/GetThisPage/index.js
@@ -31,7 +31,7 @@ const GetThisPage = () => {
           ]}
         />
       </div>
-      <H1 className='heading-xlarge'>Get This</H1>
+      <H1>Get This</H1>
       {record?.fields?.length === 0 && record?.names?.length === 0
         ? (
             <section className='container__rounded page'>
diff --git a/src/modules/lists/components/List/index.js b/src/modules/lists/components/List/index.js
index 9bca2138..609bc5a7 100644
--- a/src/modules/lists/components/List/index.js
+++ b/src/modules/lists/components/List/index.js
@@ -31,7 +31,7 @@ const List = ({ activeDatastore, currentDatastore }) => {
       />
 
       <div className='lists-header'>
-        <H1 className='heading-xlarge'>My Temporary {name} List</H1>
+        <H1>My Temporary {name} List</H1>
         <div className='lists-header-info'>
           {Boolean(listLength) && (
             <button
diff --git a/src/modules/pages/components/AboutLibrarySearch/index.js b/src/modules/pages/components/AboutLibrarySearch/index.js
index f2eda2d8..d343c297 100644
--- a/src/modules/pages/components/AboutLibrarySearch/index.js
+++ b/src/modules/pages/components/AboutLibrarySearch/index.js
@@ -11,7 +11,7 @@ const AboutLibrarySearch = () => {
   return (
     <div className='container container-narrow'>
       <main className='container__rounded page'>
-        <H1 className='u-margin-top-none'>About Library Search</H1>
+        <H1>About Library Search</H1>
         <p>Library Search is the University of Michigan Library&apos;s discovery interface. Launched in July 2018, it is designed to provide a consistent user experience across the physical and electronic resources the library provides. The Everything view displays a few results matching a user&apos;s keyword search under separate panels for each of the five categories of information: Catalog, Articles, Databases, Online Journals, and Guides & More. Each of these categories has an in-depth view that enables users to drill down into those materials to find what best meets their needs.</p>
         <h2>Overview</h2>
         <p>Although the user interface is intentionally similar across search categories, it contains a variety of information sources where each kind of data are managed:</p>
diff --git a/src/modules/pages/components/AccessibilityPage/index.js b/src/modules/pages/components/AccessibilityPage/index.js
index f6f46b02..4612afc4 100644
--- a/src/modules/pages/components/AccessibilityPage/index.js
+++ b/src/modules/pages/components/AccessibilityPage/index.js
@@ -10,7 +10,7 @@ const AccessibilityPage = () => {
   return (
     <div className='container container-narrow'>
       <main className='container__rounded page'>
-        <H1 className='u-margin-top-none'>Accessibility</H1>
+        <H1>Accessibility</H1>
         <p>We are dedicated to creating inclusive services and products for all users. We are constantly working to make Library Search as accessible and usable as possible.</p>
         <p>We aim to meet <Anchor href='https://www.w3.org/TR/WCAG21/'>WCAG 2.1 AA standards</Anchor></p>
         <h2>Compatibility with tools</h2>
diff --git a/src/modules/pages/components/NoMatch/index.js b/src/modules/pages/components/NoMatch/index.js
index a1a8cc21..abebd49d 100644
--- a/src/modules/pages/components/NoMatch/index.js
+++ b/src/modules/pages/components/NoMatch/index.js
@@ -8,27 +8,25 @@ const NoMatch = () => {
   }, []);
 
   return (
-    <div className='container container-narrow'>
-      <main className='page-not-found-container'>
-        <H1 className='heading-xlarge'>Page not found - 404</H1>
-        <p className='font-lede'>We can&apos;t find the page you&apos;re looking for.</p>
-        <h2 className='heading-medium'>Try these options instead</h2>
-        <ul className='margin-left-2 feedback-form-fieldset'>
-          <li>
-            Start over from <Anchor to='/everything'>the homepage</Anchor>.
-          </li>
-          <li className='u-margin-top-1'>
-            The link to the resource you&apos;re looking for may have changed, please search for the title or related keyword to check for current access.
-          </li>
-          <li className='u-margin-top-1'>
-            <Anchor to='/databases/browse'>Browse all Databases</Anchor> or <Anchor to='/onlinejournals/browse'>Browse all Online Journals</Anchor> to view comprehensive lists of current library resources.
-          </li>
-          <li className='u-margin-top-1'>
-            <Anchor href='https://www.lib.umich.edu/ask-librarian'>Ask a librarian</Anchor> and we&apos;ll help you find what you&apos;re looking for!
-          </li>
-        </ul>
-      </main>
-    </div>
+    <main className='container container-narrow padding-top__m'>
+      <H1>Page not found - 404</H1>
+      <p className='font-lede'>We can&apos;t find the page you&apos;re looking for.</p>
+      <h2>Try these options instead</h2>
+      <ul>
+        <li>
+          Start over from <Anchor to='/everything'>the homepage</Anchor>.
+        </li>
+        <li>
+          The link to the resource you&apos;re looking for may have changed, please search for the title or related keyword to check for current access.
+        </li>
+        <li>
+          <Anchor to='/databases/browse'>Browse all Databases</Anchor> or <Anchor to='/onlinejournals/browse'>Browse all Online Journals</Anchor> to view comprehensive lists of current library resources.
+        </li>
+        <li>
+          <Anchor href='https://www.lib.umich.edu/ask-librarian'>Ask a librarian</Anchor> and we&apos;ll help you find what you&apos;re looking for!
+        </li>
+      </ul>
+    </main>
   );
 };
 
diff --git a/src/modules/records/components/Record/index.js b/src/modules/records/components/Record/index.js
index ed141190..5dfdbceb 100644
--- a/src/modules/records/components/Record/index.js
+++ b/src/modules/records/components/Record/index.js
@@ -15,7 +15,7 @@ const Header = ({ datastoreUid, record }) => {
   const datastoreSlug = getDatastoreSlugByUid(datastoreUid);
   const pictureField = getField(record.fields, 'picture');
   let recordTitleLink = `/${datastoreSlug}/record/${recordUid}${location.search}`;
-  let recordHeaderClassName = 'record-title';
+  let recordHeaderClassName = 'record-title margin__none';
 
   // Special Library Website case
   if (datastoreUid === 'website') {
diff --git a/src/modules/records/components/RecordList/index.js b/src/modules/records/components/RecordList/index.js
index 2614dd8f..e0bad2c8 100644
--- a/src/modules/records/components/RecordList/index.js
+++ b/src/modules/records/components/RecordList/index.js
@@ -78,8 +78,8 @@ const RecordList = () => {
         ? (
             <>
               <KeywordSwitch {...{ datastore, query }} />
-              <div className='no-results-suggestions'>
-                <h2 className='heading-small margin-top__none'>Other suggestions</h2>
+              <div className='container__rounded no-shadow padding__m margin-top__m'>
+                <h3 className='margin-y__none'>Other suggestions</h3>
                 <ul className='margin-bottom__none'>
                   <li>Try looking at the other search categories linked below the search box.</li>
                   <li><ILLRequestMessage /></li>
diff --git a/src/stylesheets/main.css b/src/stylesheets/main.css
index f7426f42..9da6c8a9 100644
--- a/src/stylesheets/main.css
+++ b/src/stylesheets/main.css
@@ -65,6 +65,10 @@ dt {
   font-weight: 600;
 }
 
+dd {
+  margin: 0;
+}
+
 .table-compact table {
   border: none;
 }
@@ -582,17 +586,6 @@ details[open] > summary svg.expand_more {
   text-decoration: underline;
 }
 
-.no-results-suggestions {
-  background: #FAFAFA;
-  border-radius: 4px;
-  padding: 1rem;
-}
-
-.no-results-suggestions li {
-  margin: 0;
-  margin-bottom: 0.25rem;
-}
-
 .pagination-container {
   padding: 0.75rem 1rem;
   background: white;
@@ -825,11 +818,6 @@ details[open] > summary svg.expand_more {
   }
 }
 
-.page-not-found-container {
-  margin-top: 6rem;
-  margin-bottom: 8rem;
-}
-
 /*
   Record
 */
@@ -852,10 +840,6 @@ details[open] > summary svg.expand_more {
 .record-title {
   font-weight: 600;
   font-size: 1.2rem;
-  text-decoration: none;
-  margin: 0;
-  margin-right: 1rem;
-  margin-bottom: 0.75rem;
 }
 
 .record-title .icon {
diff --git a/src/stylesheets/typography.css b/src/stylesheets/typography.css
index 2411033b..17adba19 100644
--- a/src/stylesheets/typography.css
+++ b/src/stylesheets/typography.css
@@ -4,11 +4,11 @@
 h1,
 .h1 {
   font-family: inherit;
-  font-size: 2.4rem;
+  font-size: 2.5rem;
 }
 
 h2 {
-  font-size: 1.87rem;
+  font-size: 1.75rem;
 }
 
 h3 {
@@ -17,7 +17,7 @@ h3 {
 
 h4,
 .h4 {
-  font-size: 1.2rem;
+  font-size: 1.25rem;
 }
 
 h5 {
@@ -28,11 +28,7 @@ h6 {
   font-size: 0.875rem;
 }
 
-.heading-xlarge,
-.heading-large,
-.heading-medium,
-.heading-small,
-.heading-xsmall {
+.heading-small {
   display: block;
   font-weight: 700;
   line-height: 1.25;
@@ -40,21 +36,3 @@ h6 {
   margin-top: 1.5em;
   font-size: 1rem;
 }
-
-.heading-xlarge {
-  margin-bottom: 0.625em;
-  margin-top: 1.25em;
-  font-size: 2.4rem;
-}
-
-.heading-large {
-  margin-bottom: 0.555em;
-  margin-top: 1.25em;
-  font-size: 1.5rem;
-}
-
-.heading-medium {
-  margin-bottom: 0.83333em;
-  margin-top: 1.875em;
-  font-size: 1.2rem;
-}
diff --git a/src/stylesheets/utilities.css b/src/stylesheets/utilities.css
index e6e795f1..3b9a4bb3 100644
--- a/src/stylesheets/utilities.css
+++ b/src/stylesheets/utilities.css
@@ -26,6 +26,10 @@
   margin-bottom: 0;
 }
 
+.no-shadow {
+  box-shadow: none;
+}
+
 .flex,
 .flex__responsive {
   display: flex;

From aba8f84558fda72a616818dc9d4358ac3fe84817 Mon Sep 17 00:00:00 2001
From: "Erin E. Sullivan" <sulliv.erin@gmail.com>
Date: Wed, 8 Jan 2025 11:02:33 -0500
Subject: [PATCH 08/10] Everything style adjustments.

---
 .../records/components/BentoboxList/index.js  |  2 +-
 .../records/components/Metadata/styles.css    |  5 +++++
 .../records/components/RecordPreview/index.js |  4 ++--
 .../components/Specialists/index.js           |  4 ++--
 src/stylesheets/main.css                      | 21 -------------------
 src/stylesheets/typography.css                | 14 ++++++-------
 6 files changed, 17 insertions(+), 33 deletions(-)

diff --git a/src/modules/records/components/BentoboxList/index.js b/src/modules/records/components/BentoboxList/index.js
index 79131f10..cd8f95ab 100644
--- a/src/modules/records/components/BentoboxList/index.js
+++ b/src/modules/records/components/BentoboxList/index.js
@@ -47,7 +47,7 @@ const BentoboxList = () => {
             {index === 2 && <Specialists show={2} />}
             <section className={`container__rounded bentobox bentobox-${uid}`}>
               <Anchor className='flex padding-x__m padding-y__xs bentobox-heading' to={`/${slug}${searchQuery}`}>
-                <h2 className='h4 margin__none'>{name}</h2>
+                <h2 className='size__inherit strong margin__none'>{name}</h2>
                 <small>
                   {typeof totalResults === 'number'
                     ? `${totalResults.toLocaleString()} Result${totalResults === 1 ? '' : 's'}`
diff --git a/src/modules/records/components/Metadata/styles.css b/src/modules/records/components/Metadata/styles.css
index aed74520..0939b8cd 100644
--- a/src/modules/records/components/Metadata/styles.css
+++ b/src/modules/records/components/Metadata/styles.css
@@ -20,6 +20,11 @@
   }
 }
 
+.record-preview .metadata-list {
+  margin: 0;
+  margin-top: 0.5rem;
+}
+
 .metadata-list-item > dd > ol.list__unstyled > li {
   display: inline-block;
 }
diff --git a/src/modules/records/components/RecordPreview/index.js b/src/modules/records/components/RecordPreview/index.js
index 7f11aaf3..b5224e7c 100644
--- a/src/modules/records/components/RecordPreview/index.js
+++ b/src/modules/records/components/RecordPreview/index.js
@@ -21,7 +21,7 @@ const Header = ({ datastoreUid, record, searchQuery }) => {
 
   return (
     <>
-      <h3 className='record-preview-heading'>
+      <h3 className='size__inherit strong margin__none'>
         {[].concat(record.names).map((title, index) => {
           if (index > 0) {
             return (
@@ -48,7 +48,7 @@ const Header = ({ datastoreUid, record, searchQuery }) => {
               key={index}
             >
               <TrimString string={title} />
-              <Icon icon='open_in_new' className='icon' size='1.125rem' />
+              <Icon icon='open_in_new' className='icon margin-left__2xs text-grey' size='1.125rem' />
             </Anchor>
           );
         })}
diff --git a/src/modules/specialists/components/Specialists/index.js b/src/modules/specialists/components/Specialists/index.js
index eb07675d..070246d6 100644
--- a/src/modules/specialists/components/Specialists/index.js
+++ b/src/modules/specialists/components/Specialists/index.js
@@ -27,7 +27,7 @@ const Specialists = ({ show = 3 }) => {
   return (
     <section className='container__rounded specialists'>
       <div className='flex flex__responsive padding__m padding-y__s specialists-heading'>
-        <h2 className='h4 margin__none'>Talk to a Library Specialist</h2>
+        <h2 className='size__inherit strong margin__none'>Talk to a Library Specialist</h2>
         <Anchor href='https://www.lib.umich.edu/research-and-scholarship/help-research/find-specialist'>
           Find more specialists
           <Icon icon='open_in_new' size='18' className='icon' />
@@ -41,7 +41,7 @@ const Specialists = ({ show = 3 }) => {
               <li className='padding__m specialist' key={`specialist-${index}`}>
                 <img src={picture} alt='' className='specialist__picture' />
                 <section>
-                  <h3 className='h4 margin__none'>
+                  <h3 className='size__inherit strong margin__none'>
                     <Anchor href={url}>
                       {name}
                       <Icon icon='open_in_new' size='18' className='icon' />
diff --git a/src/stylesheets/main.css b/src/stylesheets/main.css
index 9da6c8a9..2c7d09ff 100644
--- a/src/stylesheets/main.css
+++ b/src/stylesheets/main.css
@@ -89,11 +89,6 @@ blockquote {
   font-style: italic;
 }
 
-b,
-.strong {
-  font-weight: 600;
-}
-
 sup {
   font-size: 0.6em;
   vertical-align: top;
@@ -115,10 +110,6 @@ small[id*="-description"] {
   display: block;
 }
 
-form {
-  box-sizing: border-box;
-}
-
 label {
   display: block;
 }
@@ -1217,18 +1208,6 @@ details[open] > summary svg.expand_more {
   border-bottom: solid 1px var(--search-color-grey-400);
 }
 
-.record-preview-heading {
-  font-size: 1rem;
-  margin: 0;
-  margin-bottom: 0.5rem;
-}
-
-.record-preview-heading .icon {
-  color: var(--search-color-grey-600);
-  margin-left: 0.25rem;
-  width: 0.85rem;
-}
-
 .record-preview-title-link {
   margin-right: 0.25rem;
 }
diff --git a/src/stylesheets/typography.css b/src/stylesheets/typography.css
index 17adba19..45620ef2 100644
--- a/src/stylesheets/typography.css
+++ b/src/stylesheets/typography.css
@@ -28,11 +28,11 @@ h6 {
   font-size: 0.875rem;
 }
 
-.heading-small {
-  display: block;
-  font-weight: 700;
-  line-height: 1.25;
-  margin-bottom: 0.25em;
-  margin-top: 1.5em;
-  font-size: 1rem;
+b,
+.strong {
+  font-weight: 600;
+}
+
+.size__inherit {
+  font-size: inherit;
 }

From a3a3c2932a9b745cbc3282f6167b94982d6ea1e4 Mon Sep 17 00:00:00 2001
From: "Erin E. Sullivan" <sulliv.erin@gmail.com>
Date: Wed, 8 Jan 2025 11:09:58 -0500
Subject: [PATCH 09/10] Adjusting heading size.

---
 src/modules/browse/components/ShelfBrowse/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/modules/browse/components/ShelfBrowse/index.js b/src/modules/browse/components/ShelfBrowse/index.js
index 34ef3b1f..9c7334a1 100644
--- a/src/modules/browse/components/ShelfBrowse/index.js
+++ b/src/modules/browse/components/ShelfBrowse/index.js
@@ -90,7 +90,7 @@ const ShelfBrowse = () => {
   return (
     <section className='shelf-browse container__rounded'>
       <header className='flex__responsive'>
-        <h2 className='margin-y__none'>Shelf browse</h2>
+        <h2 className='margin-y__none h4'>Shelf browse</h2>
         <BrowseLink value={callNumber}>
           <Icon icon='list' size='24' className='margin-right__xs' />Browse in call number list
         </BrowseLink>

From cce0fea0eceadf0b814979452d762862a0c75d8c Mon Sep 17 00:00:00 2001
From: "Erin E. Sullivan" <sulliv.erin@gmail.com>
Date: Wed, 8 Jan 2025 11:20:55 -0500
Subject: [PATCH 10/10] Appeasing the newline gods.

---
 src/modules/core/components/Footer/styles.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/modules/core/components/Footer/styles.css b/src/modules/core/components/Footer/styles.css
index 9605f5dd..7de26938 100644
--- a/src/modules/core/components/Footer/styles.css
+++ b/src/modules/core/components/Footer/styles.css
@@ -23,4 +23,4 @@
   .site-footer-nav-list {
     flex-direction: row;
   }
-}
\ No newline at end of file
+}