From ce19e17e249addc094b8ff372abba32e8657a8c9 Mon Sep 17 00:00:00 2001 From: djanelle-mit Date: Mon, 20 Oct 2025 15:40:28 -0400 Subject: [PATCH 1/4] Bringing over institute and library footer parials from theme gem --- app/views/layouts/_institute_footer.html.erb | 17 ++++++++++ app/views/layouts/_libraries_footer.html.erb | 33 ++++++++++++++++++++ 2 files changed, 50 insertions(+) create mode 100644 app/views/layouts/_institute_footer.html.erb create mode 100644 app/views/layouts/_libraries_footer.html.erb diff --git a/app/views/layouts/_institute_footer.html.erb b/app/views/layouts/_institute_footer.html.erb new file mode 100644 index 0000000..be46b99 --- /dev/null +++ b/app/views/layouts/_institute_footer.html.erb @@ -0,0 +1,17 @@ + diff --git a/app/views/layouts/_libraries_footer.html.erb b/app/views/layouts/_libraries_footer.html.erb new file mode 100644 index 0000000..61f7ad1 --- /dev/null +++ b/app/views/layouts/_libraries_footer.html.erb @@ -0,0 +1,33 @@ + From 7e78e9b13b38f3331836da0ccd103839b4ab91ab Mon Sep 17 00:00:00 2001 From: djanelle-mit Date: Mon, 20 Oct 2025 16:44:06 -0400 Subject: [PATCH 2/4] Overrode styles from mitlib-style for footer and institute footer --- app/assets/stylesheets/partials/_layouts.scss | 75 ++++++++++++++++++- app/views/layouts/_institute_footer.html.erb | 2 +- app/views/layouts/_libraries_footer.html.erb | 14 ++-- 3 files changed, 79 insertions(+), 12 deletions(-) diff --git a/app/assets/stylesheets/partials/_layouts.scss b/app/assets/stylesheets/partials/_layouts.scss index 0922b61..0162a3a 100644 --- a/app/assets/stylesheets/partials/_layouts.scss +++ b/app/assets/stylesheets/partials/_layouts.scss @@ -1,3 +1,4 @@ +// GLOBAL LAYOUT STYLING .wrap-gridband, .wrap-notice, .wrap-header, .wrap-header-local, .wrap-breadcrumb, .wrap-content, .wrap-footer, .wrap-footer-institute, .wrap-footer.footer-slim, .wrapper { @@ -22,14 +23,84 @@ } -.wrap-header .header-slim .logo-mit-lib img {height: 40px;} // Adjust Libraries logo to 40px height - .wrapper { margin: 0 auto; } +// HEADER STYLING +.wrap-header .header-slim .logo-mit-lib img {height: 40px;} // Adjust Libraries logo to 40px height + .hidden-md { @media (max-width: $bp-screen-md) { display: none; } } + +// FOOTER STYLES +.wrap-footer.footer-slim { + padding-top: 32px; + padding-bottom: 32px; +} + +.wrap-footer .identity { + margin-top: 0; + align-items: center; +} + +.wrap-footer .wrap-logo-lib { + margin-right: 48px; +} + +.wrap-footer.footer-slim .wrap-middle .wrap-policies { + padding-top: 0; + margin-left: 0; + + nav { + display: flex; + gap: 32px; + + a { + font-size: 1.5rem; + color: $color-gray-300; + } + } + +} + +// Adjust styles for navigation when on smaller screens +@media (max-width: $bp-screen-md) { + .wrap-footer.footer-slim .identity { + margin-bottom: 0; + } + + .wrap-footer.footer-slim .wrap-middle .wrap-policies { + border-top: none; + + nav { + gap: 24px; + } + } +} + +.wrap-footer-institute { + padding-top: 16px; + padding-bottom: 16px; + + .footer-info-institute { + align-items: center; + color: $color-gray-300; + } + + a.link-logo-mit img { + max-width: unset; + } + + .license { + font-size: 1.3rem; + + a { + color: $color-gray-300; + } + } + +} \ No newline at end of file diff --git a/app/views/layouts/_institute_footer.html.erb b/app/views/layouts/_institute_footer.html.erb index be46b99..1392013 100644 --- a/app/views/layouts/_institute_footer.html.erb +++ b/app/views/layouts/_institute_footer.html.erb @@ -6,7 +6,7 @@ MIT logo diff --git a/app/views/layouts/_libraries_footer.html.erb b/app/views/layouts/_libraries_footer.html.erb index 61f7ad1..b103d85 100644 --- a/app/views/layouts/_libraries_footer.html.erb +++ b/app/views/layouts/_libraries_footer.html.erb @@ -8,7 +8,7 @@ MIT Libraries logo @@ -16,14 +16,10 @@ From 44e4a0ace19577599feec9350cc65e1df5addcf2 Mon Sep 17 00:00:00 2001 From: djanelle-mit Date: Mon, 20 Oct 2025 16:52:40 -0400 Subject: [PATCH 3/4] Centralized focus styling into mixin and applied to footer interactive elements --- app/assets/stylesheets/partials/_effects.scss | 7 +++++++ app/assets/stylesheets/partials/_header.scss | 4 +--- app/assets/stylesheets/partials/_layouts.scss | 10 ++++++++++ 3 files changed, 18 insertions(+), 3 deletions(-) diff --git a/app/assets/stylesheets/partials/_effects.scss b/app/assets/stylesheets/partials/_effects.scss index d57501d..119ef3e 100644 --- a/app/assets/stylesheets/partials/_effects.scss +++ b/app/assets/stylesheets/partials/_effects.scss @@ -9,3 +9,10 @@ text-decoration: none; // Included as fallback if text-decoration-color isn't supported text-decoration: underline transparent; } + +// +@mixin set-focus-outline() { + *:focus-visible { + outline: 2px solid $color-focus-dark; + } +} diff --git a/app/assets/stylesheets/partials/_header.scss b/app/assets/stylesheets/partials/_header.scss index d407b72..016b63c 100644 --- a/app/assets/stylesheets/partials/_header.scss +++ b/app/assets/stylesheets/partials/_header.scss @@ -1,7 +1,5 @@ .institute-bar, .libraries-header { - *:focus-visible { - outline: 2px solid $color-focus-dark; - } + @include set-focus-outline(); } .institute-bar { diff --git a/app/assets/stylesheets/partials/_layouts.scss b/app/assets/stylesheets/partials/_layouts.scss index 0162a3a..4edc593 100644 --- a/app/assets/stylesheets/partials/_layouts.scss +++ b/app/assets/stylesheets/partials/_layouts.scss @@ -37,6 +37,12 @@ } // FOOTER STYLES + +.wrap-outer-footer, .wrap-outer-footer-institute { + @include set-focus-outline(); +} + + .wrap-footer.footer-slim { padding-top: 32px; padding-bottom: 32px; @@ -49,6 +55,10 @@ .wrap-footer .wrap-logo-lib { margin-right: 48px; + + .logo-mit-lib { + display: block; + } } .wrap-footer.footer-slim .wrap-middle .wrap-policies { From 2c69b1535b85c964198104b17428a52a0ef66037 Mon Sep 17 00:00:00 2001 From: djanelle-mit Date: Mon, 20 Oct 2025 16:54:59 -0400 Subject: [PATCH 4/4] Clean up comments in effects partial --- app/assets/stylesheets/partials/_effects.scss | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/app/assets/stylesheets/partials/_effects.scss b/app/assets/stylesheets/partials/_effects.scss index 119ef3e..e3b8855 100644 --- a/app/assets/stylesheets/partials/_effects.scss +++ b/app/assets/stylesheets/partials/_effects.scss @@ -1,6 +1,6 @@ -// ---------------------------------------------------- -// CENTRALIZED LOCATION FOR ANIMATIONS AND TRANSITIONS -// ---------------------------------------------------- +// -------------------------------------------------------------- +// CENTRALIZED LOCATION FOR ANIMATIONS, TRANSITIONS, AND OUTLINES +// -------------------------------------------------------------- // ANIMATION @@ -10,7 +10,8 @@ text-decoration: underline transparent; } -// +// OUTLINE + @mixin set-focus-outline() { *:focus-visible { outline: 2px solid $color-focus-dark;