From a13765c71060c77937d35b8af97160a66ec7d7f7 Mon Sep 17 00:00:00 2001 From: Matthew Bernhardt Date: Thu, 30 Nov 2023 14:15:43 -0500 Subject: [PATCH] Update branding materials and stylesheets ** Why are these changes being introduced: * MIT has released an updated logo, which we need to start implementing across our web platforms. * While doing this, there are some additional changes that we've decided to make to clean up our footer content, and to move shared assets like these logos to our CDN. ** Relevant ticket(s): * https://mitlibraries.atlassian.net/browse/pw-72 ** How does this address that need: * This replaces the old MIT logo (which were inline SVG markup) with the new logo (which is loaded via img tag from the CDN). * The simple favicon.ico file is removed, and a more robust set of icons loaded from the CDN. * The footer is cleaned up, with some updated links and the removal of social media icons. * Stylesheets for the header, footer, and menu are updated to pay a bit more attention to logo sizes, and establish the relevant size constraints. * Style rules for markup which is no longer present have been removed. I hope I got it all, but am not sure. ** Document any side effects to this change: * The final column of links in the mega-footer has more complex markup, because one of the elements now has two different links (so a class on an anchor tag is no longer sufficient). To stay consistent, I've made this change (having the class on a span, which then contains the link) on all items in that column. * Some of the responsiveness of the header is a bit wonky, and probably in need of a wholesale rebuilding of the stylesheets in the future. UX has signed off on how it behaves, though, and starting the rebuild from the WordPress implementation is the wrong way to tackle that issue - so I'm leaving it as is for now. --- .../css/scss/partials/_footer.scss | 66 ++++-------------- .../css/scss/partials/_header.scss | 6 +- .../css/scss/partials/_menu.scss | 4 +- web/app/themes/mitlib-parent/footer.php | 9 +-- web/app/themes/mitlib-parent/header.php | 7 +- .../themes/mitlib-parent/inc/footer-main.php | 45 +++--------- web/favicon.ico | Bin 14846 -> 0 bytes 7 files changed, 32 insertions(+), 105 deletions(-) delete mode 100644 web/favicon.ico diff --git a/web/app/themes/mitlib-parent/css/scss/partials/_footer.scss b/web/app/themes/mitlib-parent/css/scss/partials/_footer.scss index d1c42030..0f04cdcb 100644 --- a/web/app/themes/mitlib-parent/css/scss/partials/_footer.scss +++ b/web/app/themes/mitlib-parent/css/scss/partials/_footer.scss @@ -2,7 +2,7 @@ background: $black url(#{$imagesPath}/vi-shape7-tp.png) no-repeat 10% center; flex-wrap: wrap; @include bp-tablet--portrait { - padding: 2em 1.375em; + padding: 1.25em 1.375em; } @include span-12-12; a { @@ -67,9 +67,6 @@ span { display: block; width: 50%; - &:not(:last-of-type) { - margin-bottom: 1.5em; - } @include bp-tablet--portrait { font-weight: 300; padding-left: 1em; @@ -98,14 +95,8 @@ max-width: 9.5em; width: 9.5em; } - svg { - max-height: 4em; - max-width: 9.5em; - fill: #fff; - } - title { - color: #000; - background-color: #fff; + img { + display: block; } } .text-find-us { @@ -161,55 +152,25 @@ } } // End .footer-main .footer-info-institute { - align-items: baseline; + align-items: start; background: $gray-dark; display: flex; - flex-direction: column; - flex-wrap: wrap; - padding: 1.5em 1em; - @include bp-tablet--portrait { - flex-direction: row; - } - .about-mit { - font-size: 0.625em; - margin-bottom: 2em; - margin-right: 1em; - span { - color: #eeeeee; - text-transform: uppercase; - &:first-of-type { - font-weight: bold; - } - @include bp-tablet--portrait { - color: #ededed; - &:not(:last-of-type):after { - content: '|'; - font-weight: normal; - } - } - } - } + justify-content: space-between; + padding: 1.25em 1.375em; .license { color: #fff; font-size: 0.6875em; - margin-left: auto; + margin-left: auto; + @include rem-first(max-width, 25); a { color: #ededed; text-decoration: underline; } } - .link-mit-home { + .link-logo-mit { display: block; - @include bp-tablet--portrait{ - margin: 0 1em 1.5em 0; - } - } - .logo-mit { - fill: #bbb9b8; - width: 3.375em; - .color { - fill: #ededed; - } + @include rem-first(margin-right, 3.125); + @include rem-first(min-width, 9.5); } } // Old browser fixes @@ -225,10 +186,7 @@ > div { float: left; } - .about-mit { - padding-top: 4em; - } - .link-mit-home { + .link-logo-mit { padding-top: 1.5em; } } diff --git a/web/app/themes/mitlib-parent/css/scss/partials/_header.scss b/web/app/themes/mitlib-parent/css/scss/partials/_header.scss index 71ba85c6..57c9d669 100644 --- a/web/app/themes/mitlib-parent/css/scss/partials/_header.scss +++ b/web/app/themes/mitlib-parent/css/scss/partials/_header.scss @@ -29,7 +29,7 @@ .logo-mit-lib { fill: $color-text--light; - padding: 8px; + padding: 1.6785rem 0.5rem 0.5rem 0.5rem; svg { @include rem-first(max-height, 1.75); @@ -112,8 +112,8 @@ @include rem-first(padding-bottom, 0.5); padding-left: 0.5em; padding-right: 0.5em; - max-width: 59px; - @include rem-first(max-width, 3.6875); + max-width: 74px; + @include rem-first(max-width, 4.6); @include bp-tablet--portrait { display: block; diff --git a/web/app/themes/mitlib-parent/css/scss/partials/_menu.scss b/web/app/themes/mitlib-parent/css/scss/partials/_menu.scss index 127e7fe2..26d04fb7 100644 --- a/web/app/themes/mitlib-parent/css/scss/partials/_menu.scss +++ b/web/app/themes/mitlib-parent/css/scss/partials/_menu.scss @@ -71,7 +71,7 @@ body.user-is-tabbing *.nav-main { font-size: 0.75em; a { - padding: 1rem 0.5rem 0.5rem 0.5rem; + padding: 1.9375rem 0.5rem 0.5rem 0.5rem; align-items: center; flex-direction: column; text-transform: uppercase; @@ -192,7 +192,7 @@ body.user-is-tabbing *.nav-main { color: #fff; display: flex; height: 100%; - padding-top: 2em; + padding-top: 2.875em; } &.active { diff --git a/web/app/themes/mitlib-parent/footer.php b/web/app/themes/mitlib-parent/footer.php index e45590ae..8784a160 100644 --- a/web/app/themes/mitlib-parent/footer.php +++ b/web/app/themes/mitlib-parent/footer.php @@ -15,13 +15,8 @@
- MIT - - - -
- Massachusetts Institute of Technology -
+ MIT +
Content created by the MIT Libraries, CC BY-NC unless otherwise noted. Notify us about copyright concerns.
diff --git a/web/app/themes/mitlib-parent/header.php b/web/app/themes/mitlib-parent/header.php index 27d183f2..173151ad 100644 --- a/web/app/themes/mitlib-parent/header.php +++ b/web/app/themes/mitlib-parent/header.php @@ -25,6 +25,10 @@ + + + +