Skip to content

Commit

Permalink
Update branding materials and stylesheets
Browse files Browse the repository at this point in the history 
** 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.
  • Loading branch information
@matt-bernhardt
matt-bernhardt committed Dec 14, 2023
1 parent f9f441c commit a13765c
Show file tree
Hide file tree
Showing 7 changed files with 32 additions and 105 deletions.
66 changes: 12 additions & 54 deletions web/app/themes/mitlib-parent/css/scss/partials/_footer.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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
Expand All @@ -225,10 +186,7 @@
> div {
float: left;
}
.about-mit {
padding-top: 4em;
}
.link-mit-home {
.link-logo-mit {
padding-top: 1.5em;
}
}
Expand Down
6 changes: 3 additions & 3 deletions web/app/themes/mitlib-parent/css/scss/partials/_header.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -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;
Expand Down
4 changes: 2 additions & 2 deletions web/app/themes/mitlib-parent/css/scss/partials/_menu.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -192,7 +192,7 @@ body.user-is-tabbing *.nav-main {
color: #fff;
display: flex;
height: 100%;
padding-top: 2em;
padding-top: 2.875em;
}

&.active {
Expand Down
9 changes: 2 additions & 7 deletions web/app/themes/mitlib-parent/footer.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,13 +15,8 @@

<div class="footer-info-institute">
<a class="link-logo-mit" href="https://www.mit.edu">
<span class="sr">MIT</span>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" width="54" height="28" viewBox="0 0 54 28" enable-background="new 0 0 54 28" xml:space="preserve" class="logo-mit"><rect x="28.9" y="8.9" width="5.8" height="19.1" class="color"/><rect width="5.8" height="28"/><rect x="9.6" width="5.8" height="18.8"/><rect x="19.3" width="5.8" height="28"/><rect x="38.5" y="8.9" width="5.8" height="19.1"/><rect x="38.8" width="15.2" height="5.6"/><rect x="28.9" width="5.8" height="5.6"/></svg>
</a><!-- End MIT Logo -->

<div class="about-mit">
<span class="item">Massachusetts Institute of Technology</span>
</div><!-- End div.about-mit -->
<img src="https://cdn.libraries.mit.edu/files/branding/local/mit_lockup_std-three-line_rgb_white.svg" alt="MIT" width="152">
</a>

<div class="license">Content created by the MIT Libraries, <a href="https://creativecommons.org/licenses/by-nc/4.0/">CC BY-NC</a> unless otherwise noted. <a href="https://libraries.mit.edu/research-support/notices/copyright-notify/">Notify us about copyright concerns</a>.
</div><!-- End div.footer-info-institure -->
Expand Down
7 changes: 5 additions & 2 deletions web/app/themes/mitlib-parent/header.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,10 @@
<?php get_template_part( 'inc/header', 'opengraph' ); ?>
<link rel="profile" href="https://gmpg.org/xfn/11" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<link rel="icon" href="https://cdn.libraries.mit.edu/files/branding/favicons/favicon.ico" sizes="32x32">
<link rel="icon" href="https://cdn.libraries.mit.edu/files/branding/favicons/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="https://cdn.libraries.mit.edu/files/branding/favicons/apple-touch-icon.png"><!-- 180×180 -->
<link rel="manifest" href="https://cdn.libraries.mit.edu/files/branding/favicons/manifest.json">
<?php wp_head(); ?>
<script>
todayDate="";
Expand All @@ -38,8 +42,7 @@
<?php get_template_part( 'inc/nav', 'hamburger' ); ?>
<?php get_template_part( 'inc/liblogo' ); ?>
<?php get_template_part( 'inc/nav', 'main' ); ?>
<a class="link-logo-mit" href="http://www.mit.edu"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" width="54" height="28" viewBox="0 0 54 28" enable-background="new 0 0 54 28" xml:space="preserve" class="logo-mit"><title>Massaschusetts Institute of Technology logo</title><rect x="28.9" y="8.9" width="5.8" height="19.1" class="color"/><rect width="5.8" height="28"/><rect x="9.6" width="5.8" height="18.8"/><rect x="19.3" width="5.8" height="28"/><rect x="38.5" y="8.9" width="5.8" height="19.1"/><rect x="38.8" width="15.2" height="5.6"/><rect x="28.9" width="5.8" height="5.6"/></svg>
<span class="sr">MIT Logo</span>
<a class="link-logo-mit" href="http://www.mit.edu"><img src="https://cdn.libraries.mit.edu/files/branding/local/mit_logo_std_rgb_white.svg" height="32" alt="MIT logo" >
</a><!-- End MIT Logo -->
<?php get_template_part( 'inc/nav', 'smalldisplays' ); ?>
</header>
45 changes: 8 additions & 37 deletions web/app/themes/mitlib-parent/inc/footer-main.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,52 +44,23 @@
</div>
<div class="flex-item">
<h4><a href="/about">About us</a></h4>
<a href="/contact" class="link-sub">Contact us</a>
<a href="/news" class="link-sub">News</a>
<a href="/events" class="link-sub">Classes &amp; events</a>
<a href="/use-policies" class="link-sub">Use policy</a>
<a href="/giving" class="link-sub">Giving</a>
<a href="/about" class="link-sub">More about us</a>
<span class="link-sub"><a href="/contact">Contact us</a> | <a href="/follow">Follow us</a></span>
<span class="link-sub"><a href="/news">News</a></span>
<span class="link-sub"><a href="/events">Classes &amp; events</a></span>
<span class="link-sub"><a href="/use-policies">Use policy</a></span>
<span class="link-sub"><a href="/giving">Giving</a></span>
<span class="link-sub"><a href="/about">More about us</a></span>
</div>
</div><!-- end div.links-all -->

<div class="identity flex-container">
<a href="/" class="logo-mit-lib">
<svg xmlns="http://www.w3.org/2000/svg" width="193.9" height="77.55" viewBox="0 0 193.9 77.55"><title>MIT Libraries logo</title><path d="M5.3,5.55H17.2L21.55,21.2q0.25,0.85.58,2.22T22.8,26.1q0.4,1.55.8,3.25h0.1q0.35-1.7.75-3.25,0.3-1.3.65-2.67t0.6-2.22L30.1,5.55h12V41.3H34V21.58q0-1.17,0-2.37,0-1.4.1-3.05H34q-0.4,1.55-.7,2.85t-0.53,2.22q-0.28,1.08-.42,1.58L27.25,41.3h-7.3l-5.1-18.45q-0.15-.5-0.45-1.6T13.85,19q-0.3-1.3-.65-2.85H13.1q0,1.65,0,3.05,0,1.2.08,2.4t0,1.75v18h-8V5.55Zm40,0h8.85V41.3H45.32V5.55ZM67.4,13H57V5.55H86.75V13H76.25V41.3H67.4V13ZM5.3,46.55h8.85V74.8H30.82v7.5H5.3V46.55Zm28.7,0h8.15v6.6H34v-6.6ZM34,56.7h8.15V82.3H34V56.7ZM61,83.1a9.84,9.84,0,0,1-4.55-1,7.87,7.87,0,0,1-3.2-3h-0.1V82.3h-7.8V46.55h8.15v13h0.15A9.45,9.45,0,0,1,56.55,57a8.63,8.63,0,0,1,4.37-1,9.89,9.89,0,0,1,4.53,1,10.16,10.16,0,0,1,3.45,2.85,13.44,13.44,0,0,1,2.2,4.3,17.91,17.91,0,0,1,.78,5.38,19.49,19.49,0,0,1-.78,5.72,12.5,12.5,0,0,1-2.2,4.28,9.47,9.47,0,0,1-3.45,2.67A10.66,10.66,0,0,1,61,83.1Zm-2.3-6.45a4.14,4.14,0,0,0,3.67-1.92,9.45,9.45,0,0,0,1.28-5.27,9.74,9.74,0,0,0-1.28-5.3,4.19,4.19,0,0,0-3.77-2,4.44,4.44,0,0,0-4,2.1,9.66,9.66,0,0,0-1.33,5.25,8.53,8.53,0,0,0,1.45,5.17A4.69,4.69,0,0,0,58.67,76.65ZM73.81,56.7h7.8v4h0.15a9.63,9.63,0,0,1,3-3.35,7.29,7.29,0,0,1,4-1,4.41,4.41,0,0,1,1.6.2v7h-0.2a7.36,7.36,0,0,0-6,1.27Q82,66.6,82,70.8V82.3H73.81V56.7ZM99.76,83a12,12,0,0,1-3.53-.5A7.54,7.54,0,0,1,93.46,81a7,7,0,0,1-1.8-2.45A8.11,8.11,0,0,1,91,75.15a7.29,7.29,0,0,1,.78-3.52,6.67,6.67,0,0,1,2.12-2.35A10.55,10.55,0,0,1,97,67.85a25.72,25.72,0,0,1,3.77-.75,24.65,24.65,0,0,0,5-1,1.92,1.92,0,0,0,1.45-1.85,2.57,2.57,0,0,0-.83-2,3.92,3.92,0,0,0-2.67-.75,4.45,4.45,0,0,0-3,.85,3.67,3.67,0,0,0-1.2,2.45h-7.5a8.46,8.46,0,0,1,.8-3.4,8.17,8.17,0,0,1,2.17-2.8,10.56,10.56,0,0,1,3.58-1.9,16.34,16.34,0,0,1,5-.7,19.62,19.62,0,0,1,4.9.52,9.73,9.73,0,0,1,3.4,1.58,7.29,7.29,0,0,1,2.45,3,10.63,10.63,0,0,1,.8,4.25V78.3a13,13,0,0,0,.17,2.42,1.78,1.78,0,0,0,.73,1.23V82.3h-7.9a3.37,3.37,0,0,1-.5-1.12,14.64,14.64,0,0,1-.35-1.72h-0.1A8.47,8.47,0,0,1,104.44,82,9.92,9.92,0,0,1,99.76,83Zm2.6-5.2a5.45,5.45,0,0,0,3.73-1.25,4.23,4.23,0,0,0,1.42-3.35v-3a11.85,11.85,0,0,1-1.87.73q-1.08.33-2.33,0.63a10.45,10.45,0,0,0-3.4,1.27,2.47,2.47,0,0,0-1.05,2.17,2.42,2.42,0,0,0,1,2.2A4.5,4.5,0,0,0,102.36,77.75Zm15.87-21H126v4h0.15a9.63,9.63,0,0,1,3-3.35,7.29,7.29,0,0,1,4-1,4.41,4.41,0,0,1,1.6.2v7h-0.2a7.36,7.36,0,0,0-6,1.27q-2.23,1.83-2.23,6V82.3h-8.15V56.7Zm18.94-10.15h8.15v6.6h-8.15v-6.6Zm0,10.15h8.15V82.3h-8.15V56.7Zm24,26.35a15.16,15.16,0,0,1-5.7-1,12.12,12.12,0,0,1-4.3-2.85,12.66,12.66,0,0,1-2.7-4.33,15.06,15.06,0,0,1-1-5.4,14.72,14.72,0,0,1,1-5.33,12.71,12.71,0,0,1,2.7-4.3A12.46,12.46,0,0,1,155.3,57a14.58,14.58,0,0,1,10.28-.17,12.28,12.28,0,0,1,3.83,2.35,12.76,12.76,0,0,1,3.42,5.33,20.72,20.72,0,0,1,1.08,7.13H155.5a7.52,7.52,0,0,0,1.8,4.1,5.14,5.14,0,0,0,4,1.5,4.81,4.81,0,0,0,2.65-.68,4.3,4.3,0,0,0,1.6-1.87h8a9.47,9.47,0,0,1-1.5,3.33,10.65,10.65,0,0,1-2.8,2.73,12.12,12.12,0,0,1-3.58,1.75A15.22,15.22,0,0,1,161.15,83Zm4.5-16.3a6,6,0,0,0-1.55-3.65,4.39,4.39,0,0,0-3.3-1.35,4.66,4.66,0,0,0-3.6,1.35,7,7,0,0,0-1.65,3.65h10.1Zm21.9,16.35q-5.65,0-8.95-2.42A8.35,8.35,0,0,1,175.1,74h7.7a4.15,4.15,0,0,0,1.45,2.85,5.09,5.09,0,0,0,3.25,1,5.63,5.63,0,0,0,2.92-.65,2.09,2.09,0,0,0,1.08-1.9,1.82,1.82,0,0,0-.55-1.37,4.08,4.08,0,0,0-1.45-.85,10.92,10.92,0,0,0-2.08-.5q-1.17-.17-2.42-0.42-1.65-.3-3.3-0.72a10.14,10.14,0,0,1-3-1.28,6.33,6.33,0,0,1-2.12-2.27,7.45,7.45,0,0,1-.8-3.68,7.1,7.1,0,0,1,.87-3.55A7.64,7.64,0,0,1,179,58a11.18,11.18,0,0,1,3.53-1.55,17,17,0,0,1,4.28-.52q5.45,0,8.35,2.2a8,8,0,0,1,3.2,6h-7.5a3,3,0,0,0-1.33-2.37,5.48,5.48,0,0,0-2.78-.62,5.1,5.1,0,0,0-2.52.58,1.9,1.9,0,0,0-1,1.78,1.33,1.33,0,0,0,.5,1.1,4.21,4.21,0,0,0,1.35.67,14.86,14.86,0,0,0,2,.48l2.33,0.4q1.7,0.3,3.42.73A10.59,10.59,0,0,1,196,68.2a7.05,7.05,0,0,1,2.32,2.42,7.75,7.75,0,0,1,.9,4A7.35,7.35,0,0,1,195.9,81a11.75,11.75,0,0,1-3.7,1.6A18.75,18.75,0,0,1,187.54,83.1Z" transform="translate(-5.3 -5.55)" /></svg>
<span class="sr">MIT Libraries</span>
</a><!-- End MIT Libraries Logo -->

<div class="social flex-container">
<p class="text-find-us sr">Find us on</p>
<a href="https://twitter.com/mitlibraries" title="Twitter">
<svg class="icon-social--twitter" width="2048" height="2048" viewBox="-192 -384 2048 2048" xmlns="http://www.w3.org/2000/svg"><g transform="scale(1 -1) translate(0 -1280)"><path d="M1620 1128q-67 -98 -162 -167q1 -14 1 -42q0 -130 -38 -259.5t-115.5 -248.5t-184.5 -210.5t-258 -146t-323 -54.5q-271 0 -496 145q35 -4 78 -4q225 0 401 138q-105 2 -188 64.5t-114 159.5q33 -5 61 -5q43 0 85 11q-112 23 -185.5 111.5t-73.5 205.5v4q68 -38 146 -41 q-66 44 -105 115t-39 154q0 88 44 163q121 -149 294.5 -238.5t371.5 -99.5q-8 38 -8 74q0 134 94.5 228.5t228.5 94.5q140 0 236 -102q109 21 205 78q-37 -115 -142 -178q93 10 186 50z" fill="black" /></g></svg>
<span class="sr">Twitter</span>
</a><!-- End Twitter -->

<a href="https://instagram.com/mitlibraries/" title="Instagram">
<svg class="icon-social--instagram" viewBox="0 0 120 120" enable-background="new 0 0 120 120" xml:space="preserve"><path id="Instagram_10_" fill="#FFFFFF" d="M95.1,103.9H24.9c-0.2,0-0.4-0.1-0.6-0.1c-3.9-0.5-7.1-3.4-8-7.2
c-0.1-0.4-0.2-0.9-0.2-1.3V24.8c0-0.2,0.1-0.3,0.1-0.5c0.6-3.9,3.4-7.1,7.3-8c0.4-0.1,0.8-0.2,1.3-0.2h70.4c0.2,0,0.3,0.1,0.5,0.1
c4,0.5,7.2,3.6,8,7.5c0.1,0.4,0.1,0.8,0.2,1.2v70.2c-0.1,0.4-0.1,0.8-0.2,1.2c-0.7,3.6-3.6,6.6-7.2,7.4
C96,103.7,95.5,103.8,95.1,103.9z M25.6,51.7v0.2c0,13,0,26,0,38.9c0,1.9,1.6,3.5,3.5,3.5c20.6,0,41.2,0,61.8,0
c1.9,0,3.5-1.6,3.5-3.5c0-13,0-25.9,0-38.9v-0.3H86c1.2,3.8,1.5,7.6,1.1,11.5c-0.5,3.9-1.7,7.6-3.8,10.9c-2.1,3.4-4.7,6.2-8,8.4
c-8.5,5.8-19.6,6.3-28.6,1.2c-4.5-2.5-8.1-6.1-10.6-10.7c-3.7-6.8-4.3-14-2.1-21.4C31.2,51.7,28.4,51.7,25.6,51.7L25.6,51.7z
M60,42.2c-9.7,0-17.6,7.8-17.8,17.5c-0.1,9.9,7.8,17.8,17.4,18c9.9,0.2,18-7.7,18.2-17.4C78,50.4,70,42.2,60,42.2L60,42.2z
M86.7,38.7L86.7,38.7c1.4,0,2.9,0,4.3,0c1.9,0,3.4-1.6,3.4-3.5c0-2.8,0-5.5,0-8.3c0-2-1.6-3.6-3.6-3.6c-2.8,0-5.5,0-8.3,0
c-2,0-3.6,1.6-3.6,3.6c0,2.7,0,5.5,0,8.2c0,0.4,0.1,0.8,0.2,1.2c0.5,1.5,1.8,2.4,3.5,2.4C84,38.7,85.3,38.7,86.7,38.7L86.7,38.7z"/></svg>
<span class="sr">Instagram</span>
</a><!-- End Instagram -->

<a href="https://www.youtube.com/user/MITLibraries" title="YouTube">
<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="youtube" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" class="icon-social--youtube"><path fill="black" d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z" class=""></path></svg>
<span class="sr">YouTube</span>
</a><!-- End YouTube -->

</div><!-- end div.social -->
<a href="/" class="logo-mit-lib"><img src="https://cdn.libraries.mit.edu/files/branding/local/mitlib-wordmark.svg" alt="MIT Libraries logo"></a><!-- End MIT Libraries Logo -->

<div class="links-primary flex-container">
<span><a href="https://libraries.mit.edu/privacy" class="link-sub">Privacy</a></span>
<span><a href="https://libraries.mit.edu/permissions" class="link-sub">Permissions</a></span>
<span><a href="https://libraries.mit.edu/accessibility" class="link-sub">Accessibility</a></span>
<span><a href="https://libraries.mit.edu/contact" class="link-sub">Contact us</a></span>
</div><!-- End div.links-primary -->

</div><!-- End div.identity -->
Expand Down
Binary file removed web/favicon.ico
View file
Binary file not shown.

0 comments on commit a13765c

Please sign in to comment.