From c60483f682c689bd65f434b9fd9c8944ad7e2b17 Mon Sep 17 00:00:00 2001 From: Steve Taylor Date: Wed, 26 Feb 2025 09:44:31 -0800 Subject: [PATCH] Use temporary header and footer styles --- app/assets/config/manifest.js | 1 + .../component-library-overrides.css | 59 +++++++++++++++++++ app/assets/stylesheets/sul-variables.scss | 3 +- app/views/layouts/searchworks.html.erb | 1 + app/views/shared/_su_footer.html.erb | 26 ++++---- app/views/shared/_top_navbar.html.erb | 25 ++++---- 6 files changed, 90 insertions(+), 25 deletions(-) create mode 100644 app/assets/stylesheets/component-library-overrides.css diff --git a/app/assets/config/manifest.js b/app/assets/config/manifest.js index 05f0adab6..f80e045f1 100644 --- a/app/assets/config/manifest.js +++ b/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 diff --git a/app/assets/stylesheets/component-library-overrides.css b/app/assets/stylesheets/component-library-overrides.css new file mode 100644 index 000000000..bc0324763 --- /dev/null +++ b/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; + } +} + diff --git a/app/assets/stylesheets/sul-variables.scss b/app/assets/stylesheets/sul-variables.scss index 079db6b83..15c498e33 100644 --- a/app/assets/stylesheets/sul-variables.scss +++ b/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; diff --git a/app/views/layouts/searchworks.html.erb b/app/views/layouts/searchworks.html.erb index c5a1364ae..b5632e68c 100644 --- a/app/views/layouts/searchworks.html.erb +++ b/app/views/layouts/searchworks.html.erb @@ -20,6 +20,7 @@ <%= stylesheet_link_tag "application", media: "all" %> <%= stylesheet_link_tag 'print', media: 'print' %> + <%= stylesheet_link_tag "component-library-overrides", media: "all" %> <%= stylesheet_link_tag "https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;400;700&display=swap " %> diff --git a/app/views/shared/_su_footer.html.erb b/app/views/shared/_su_footer.html.erb index 1511003d5..4a30b3d4a 100644 --- a/app/views/shared/_su_footer.html.erb +++ b/app/views/shared/_su_footer.html.erb @@ -1,18 +1,18 @@