Merge pull request #57 from MITLibraries/pw68-branding-update

JPrevost · web-flow · commit 93b931b80248 · 2023-12-18T15:18:55.000-05:00
Updates MIT branding
diff --git a/.gitignore b/.gitignore
@@ -11,3 +11,4 @@
 /test/dummy/tmp/
 
 .DS_Store
+*.gem
diff --git a/app/views/layouts/_head.html.erb b/app/views/layouts/_head.html.erb
@@ -7,17 +7,14 @@
 
 <%= yield :additional_meta_tag %>
 
-<!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
-<!--[if lt IE 9]>
-  <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.1/html5shiv.js" type="text/javascript"></script>
-<![endif]-->
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.1.1/normalize.min.css">
 <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic&subset=latin,latin-ext" type="text/css">
 <%= stylesheet_link_tag "application", :media => "all" %>
 
-<!-- For all other devices -->
-<!-- Size should be 32 x 32 pixels -->
-<%= favicon_link_tag 'favicon.ico', :rel => 'shortcut icon' %>
+<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">
 
 <%= render partial: "layouts/js_exception_handler" %>
 <%= javascript_include_tag "application" %>
diff --git a/app/views/layouts/_institute_footer.html.erb b/app/views/layouts/_institute_footer.html.erb
@@ -3,11 +3,13 @@
     <footer class="footer-info-institute" aria-label="MIT footer" role="contentinfo">
       <a class="link-logo-mit" href="https://www.mit.edu">
         <span class="sr">MIT</span>
-        <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>
+        <img
+          src="https://cdn.libraries.mit.edu/files/branding/local/mit_lockup_std-three-line_rgb_white.svg"
+          alt="MIT logo"
+          width="150"
+        />
       </a>
-      <div class="about-mit">
-        <span class="item">Massachusetts Institute of Technology</span>
-      </div>
+
       <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>
     </footer><!-- end .footer-info-institute -->
diff --git a/app/views/layouts/_libraries_footer.html.erb b/app/views/layouts/_libraries_footer.html.erb
@@ -4,43 +4,26 @@
       <div class="identity">
         <div class="wrap-logo-lib">
           <a href="https://libraries.mit.edu" class="logo-mit-lib">
-            <span class="sr">MIT Libraries home</span>
-            <%= image_tag("mitlib-wordmark.svg", :alt => "MIT Libraries logo") %>
-          </a>
+              <span class="sr">MIT Libraries home</span>
+              <img
+                src="https://cdn.libraries.mit.edu/files/branding/local/mitlib-wordmark.svg"
+                alt="MIT Libraries logo"
+                width="150"
+              />
+            </a>
         </div>
-        <div class="wrap-social">
-          <p class="text-find-us">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"></path></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"></path></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 .social -->
+       
         <div class="wrap-middle">
-          <div class="wrap-sitemap">
-            <nav class="sitemap-libraries-abbrev" aria-label="MIT Libraries site menu">
-              <h2 class="sr">MIT Libraries navigation</h2>
-              <a class="item" href="https://libraries.mit.edu/search">Search</a>
-              <a class="item" href="https://libraries.mit.edu/hours">Hours &amp; locations</a>
-              <a class="item" href="https://libraries.mit.edu/borrow">Borrow &amp; request</a>
-              <a class="item" href="https://libraries.mit.edu/research-support">Research support</a>
-              <a class="item" href="https://libraries.mit.edu/about">About us</a>
-            </nav>
-          </div><!-- end .links-all -->
           <div class="wrap-policies">
             <nav aria-label="MIT Libraries policy menu">
               <span class="item"><a href="https://libraries.mit.edu/privacy" class="link-sub">Privacy</a></span>
+              
               <span class="item"><a href="https://libraries.mit.edu/permissions" class="link-sub">Permissions</a></span>
+              
               <span class="item"><a href="https://libraries.mit.edu/accessibility" class="link-sub">Accessibility</a></span>
+                            
+              <span class="item"><a href="https://libraries.mit.edu/contact" class="link-sub">Contact us</a></span>
+
             </nav>
           </div>
         </div>
diff --git a/app/views/layouts/_site_header.html.erb b/app/views/layouts/_site_header.html.erb
@@ -5,12 +5,14 @@
         <h1 class="name-site group nav-logo">
           <a href="https://libraries.mit.edu/" class="logo-mit-lib">
             <span class="sr">MIT Libraries home</span>
-            <%= image_tag("mitlib-wordmark.svg", :alt => "MIT Libraries logo") %>
+            <img src="https://cdn.libraries.mit.edu/files/branding/local/mitlib-wordmark.svg" height="35" alt="MIT Libraries logo">
           </a>
         </h1>
       </div>
       <div class="wrap-header-supp">
-        <a class="link-logo-mit" href="https://www.mit.edu"><span class="sr">MIT</span><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>
+        <a class="link-logo-mit" href="https://www.mit.edu"><span class="sr">MIT</span>
+          <img src="https://cdn.libraries.mit.edu/files/branding/local/mit_logo_std_rgb_white.svg" height="35" alt="MIT logo" >
+        </a>
       </div>
     </header>
   </div>
diff --git a/vendor/assets/images/favicon.ico b/vendor/assets/images/favicon.ico
diff --git a/vendor/assets/images/mitlib-wordmark.svg b/vendor/assets/images/mitlib-wordmark.svg
diff --git a/vendor/assets/images/vi-shape7-tp.svg b/vendor/assets/images/vi-shape7-tp.svg
diff --git a/vendor/assets/stylesheets/elements/_footer.scss b/vendor/assets/stylesheets/elements/_footer.scss
@@ -7,7 +7,7 @@
 }
 
 .wrap-footer {
-    background: $black image-url('vi-shape7-tp.svg') no-repeat 10% center;
+    background: $black url('https://cdn.mitlibrary.net/files/branding/local/vi-shape7-tp.svg') no-repeat 10% center;
 
   a {
     @extend %link;
@@ -93,7 +93,7 @@
   .footer-info-institute {
     display: flex;
     justify-content: space-between;
-    align-items: baseline;
+    align-items: start;
   }
 
   a {
@@ -125,8 +125,7 @@
   }
 
   .license {
-    margin-left: auto;
-    margin-top: 1rem;
     color: $gray-l3;
+    margin-left: 2em;
   }
 }
diff --git a/vendor/assets/stylesheets/elements/_header.scss b/vendor/assets/stylesheets/elements/_header.scss
@@ -26,7 +26,7 @@
 }
 
 .wrap-header {
-  background: $black image-url('vi-shape7-tp.svg') no-repeat 0 65%;
+  background: $black url('https://cdn.mitlibrary.net/files/branding/local/vi-shape7-tp.svg') no-repeat 0 65%;
 
   .logo-mit-lib {
     display: inline-block;
diff --git a/vendor/assets/stylesheets/global/_layouts.scss b/vendor/assets/stylesheets/global/_layouts.scss
@@ -16,7 +16,7 @@
   @include clearfix;
   max-width: 114rem;
   margin: 0 auto;
-  padding: 10px 4%;
+  padding: 20px 4%;
 }
 
 // generic grid options
@@ -270,6 +270,7 @@
   .identity {
     margin-top: 4rem;
     margin-bottom: 2rem;
+    align-items: flex-end;
   }
 
   .wrap-logo-lib {
@@ -278,12 +279,6 @@
     margin: 0 20px 20px 0;
   }
 
-  .wrap-social {
-    display: inline-block;
-    vertical-align: bottom;
-    margin-bottom: 20px;
-  }
-
   .wrap-policies {
     width: 100%;
     border-top: 1px solid $gray;
@@ -303,10 +298,6 @@
     }
   }
 
-  .wrap-social .text-find-us {
-    display: none;
-  }
-
   // bigger than small mobile - able to handle columns ok
   @media (min-width: $bp-screen-md) {
 
@@ -330,13 +321,11 @@
     .identity {
       display: flex;
       flex-wrap: wrap;
-      justify-content: space-between;
       margin: 4% 0 0 0;
     }
 
     .wrap-logo-lib, 
-    .wrap-policies, 
-    .wrap-social {
+    .wrap-policies {
       align-self: flex-end;
       margin-top: 0;
       margin-bottom: 0;
@@ -358,20 +347,11 @@
         margin-bottom: 0;
       }
     }
-
-    .wrap-social {
-      order: 3;
-      margin-left: auto;
-    }
   }
 
   // large screen - able to handle several inline items
   @media (min-width: $bp-screen-lg) {
 
-    .wrap-social {
-      order: 3;
-    }
-
     .wrap-policies {
       order: 2;
     }
@@ -430,10 +410,6 @@
         }
       }
     }
-
-    .wrap-social {
-      order: 3;
-    }
   }
 
   @media (min-width: $bp-screen-lg) {

Original file line number	Diff line number	Diff line change
`@@ -11,3 +11,4 @@`
`11`	`11`	`/test/dummy/tmp/`
`12`	`12`
`13`	`13`	`.DS_Store`
	`14`	`+*.gem`
Original file line number	Diff line number	Diff line change
`@@ -7,7 +7,7 @@`
`7`	`7`	`}`
`8`	`8`
`9`	`9`	`.wrap-footer {`
`10`		`- background: $black image-url('vi-shape7-tp.svg') no-repeat 10% center;`
	`10`	`+ background: $black url('https://cdn.mitlibrary.net/files/branding/local/vi-shape7-tp.svg') no-repeat 10% center;`
`11`	`11`
`12`	`12`	`a {`
`13`	`13`	`@extend %link;`
`@@ -93,7 +93,7 @@`
`93`	`93`	`.footer-info-institute {`
`94`	`94`	`display: flex;`
`95`	`95`	`justify-content: space-between;`
`96`		`- align-items: baseline;`
	`96`	`+ align-items: start;`
`97`	`97`	`}`
`98`	`98`
`99`	`99`	`a {`
`@@ -125,8 +125,7 @@`
`125`	`125`	`}`
`126`	`126`
`127`	`127`	`.license {`
`128`		`- margin-left: auto;`
`129`		`- margin-top: 1rem;`
`130`	`128`	`color: $gray-l3;`
	`129`	`+ margin-left: 2em;`
`131`	`130`	`}`
`132`	`131`	`}`
Original file line number	Diff line number	Diff line change
`@@ -26,7 +26,7 @@`
`26`	`26`	`}`
`27`	`27`
`28`	`28`	`.wrap-header {`
`29`		`- background: $black image-url('vi-shape7-tp.svg') no-repeat 0 65%;`
	`29`	`+ background: $black url('https://cdn.mitlibrary.net/files/branding/local/vi-shape7-tp.svg') no-repeat 0 65%;`
`30`	`30`
`31`	`31`	`.logo-mit-lib {`
`32`	`32`	`display: inline-block;`