mitlibraries-theme 0.3.3 → 0.4.0.pre

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ecf72d8fc3f947feff484f614fbd78299b988b60f2917289b1166b8d8045eb33
-  data.tar.gz: cced976628bcad6adfd7ae13d7fec3238c9692aa8abb13575a56990882353c74
+  metadata.gz: fd29a8ce91d2922f295baab773e7d17316665ac00fe4b0616bc3264c5f7fd35d
+  data.tar.gz: 3b400d8296fc3ccd3596f6ab3ab327c07d7b6f6bba2f39fe4ee845263a663ffd
 SHA512:
-  metadata.gz: 14ec4af05c669a9f5335ab98bf8cfacaab6acdd2950145c0160aaeb4569a2d3b1b60071316439a7c29e53394130462049a8dda0de6af40b842fc6f2c9c1b9fa9
-  data.tar.gz: 514c0869fa969fa8c96bdf55e48b6312f5e612fdf806c856ac74335b5901fe46378d2507b75d5af045cd0a365df6601c42f9812f8e0e6ae0585ade814133ebc5
+  metadata.gz: 48842d3566f0b8bf024288dd6235b5d4e58316f97b8b723b057cba727d3e491d36711ad644ae2e0332edee556734de75f528887122f566ebdb983bd13b164206
+  data.tar.gz: 5e36a447dd8c3771267654e10020a2b05e2fb60646b8e0f62592fa8a0575885b4890534d2486f837e6271f5e88632f4b0124b5291c119947e3a59824a405e9fa

data/app/views/layouts/_libraries_footer.html.erb

@@ -8,18 +8,53 @@
             <%= image_tag("mitlib-wordmark.svg", :alt => "MIT Libraries logo") %>
           </a>
         </div>
+        <div class="wrap-social">
+          <p class="text-find-us">Find us on</p>
+          <a href="//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="/facebook" title="Facebook">
+            <svg class="icon-social--facebook" width="2048" height="2048" viewBox="-640 -384 2048 2048" xmlns="http://www.w3.org/2000/svg"><g transform="scale(1 -1) translate(0 -1280)"><path d="M511 980h257l-30 -284h-227v-824h-341v824h-170v284h170v171q0 182 86 275.5t283 93.5h227v-284h-142q-39 0 -62.5 -6.5t-34 -23.5t-13.5 -34.5t-3 -49.5v-142z" fill="black"></path></g></svg>
+            <span class="sr">Facebook</span>
+          </a><!-- End Facebook -->
+          
+          <a href="//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="//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 -->
+
+          <a href="//libguides.mit.edu/mit-feeds" title="RSS">
+            <svg class="icon-social--rss" width="2048" height="2048" viewBox="-320 -384 2048 2048" xmlns="http://www.w3.org/2000/svg"><g transform="scale(1 -1) translate(0 -1280)"><path d="M384 192q0 -80 -56 -136t-136 -56t-136 56t-56 136t56 136t136 56t136 -56t56 -136zM896 69q2 -28 -17 -48q-18 -21 -47 -21h-135q-25 0 -43 16.5t-20 41.5q-22 229 -184.5 391.5t-391.5 184.5q-25 2 -41.5 20t-16.5 43v135q0 29 21 47q17 17 43 17h5q160 -13 306 -80.5 t259 -181.5q114 -113 181.5 -259t80.5 -306zM1408 67q2 -27 -18 -47q-18 -20 -46 -20h-143q-26 0 -44.5 17.5t-19.5 42.5q-12 215 -101 408.5t-231.5 336t-336 231.5t-408.5 102q-25 1 -42.5 19.5t-17.5 43.5v143q0 28 20 46q18 18 44 18h3q262 -13 501.5 -120t425.5 -294 q187 -186 294 -425.5t120 -501.5z" fill="black"></path></g></svg>
+            <span class="sr">RSS</span>
+          </a><!-- End RSS -->
+        </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://accessibility.mit.edu/" class="link-sub">Accessibility</a></span>
+            </nav>
+          </div>
+        </div>
       </div><!-- end .identity -->
-      <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/">Home</a>
-          <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 the Libraries</a>
-        </nav>
-      </div><!-- end .links-all -->
     </div>
   </div>
 </div>

data/lib/mitlibraries/theme/version.rb

@@ -1,5 +1,5 @@
 module Mitlibraries
   module Theme
-    VERSION = '0.3.3'.freeze
+    VERSION = '0.4.0.pre'.freeze
   end
 end

data/vendor/assets/stylesheets/elements/_footer.scss

@@ -13,6 +13,13 @@
     @extend %link;
     color: $white;
     text-decoration: none;
+
+    &:hover,
+    &:active,
+    &:focus {
+      text-decoration: underline;
+      color: $white;
+    }
   }
 
   .title {
@@ -37,7 +44,7 @@
     }
   }
 
-  .wrap-usergroups {
+  .wrap-policies {
     @extend .list-inline-pipe;
     font-size: $fs-small;
   }
@@ -83,13 +90,23 @@
   font-size: $fs-xxsmall;
   color: $gray-l3;
 
+  .footer-info-institute {
+    display: flex;
+    justify-content: space-between;
+    align-items: baseline;
+  }
+
   a {
     @extend %link;
     color: $white;
+    &:hover,
+    &:active,
+    &:focus {
+      color: $white;
+    }
   }
 
   .link-logo-mit {
-    display: inline-block;
 
     .logo-mit {
       fill: $gray-l2;
@@ -101,13 +118,14 @@
   }
 
   .about-mit {
-    @extend .list-inline-pipe;
-    display: inline-block;
     color: $gray-l3;
+    margin-right: 4%;
     text-transform: uppercase;
+    white-space: nowrap;
   }
 
   .license {
+    margin-left: auto;
     margin-top: 1rem;
     color: $gray-l3;
   }

data/vendor/assets/stylesheets/elements/_modules.scss

@@ -84,7 +84,7 @@
 
   .fa {
     display: inline-block;
-    margin-right: .5em
+    margin-right: .5em;
   }
 
   &.success {
@@ -104,6 +104,20 @@
     border-top: 5px solid $error;
     color: $black-t;
   }
+
+  &.privacy-notice {
+    position: fixed;
+    bottom: 40px;
+    left: 10%;
+    right: 10%;
+    width: 80%;
+    display: flex;
+    justify-content: space-between;
+    background-color: #eee;
+    p {
+      margin-right: .5em;
+    }
+  }
 }
 
 .inline-action {

data/vendor/assets/stylesheets/global/_layouts.scss

@@ -284,7 +284,7 @@
     margin-bottom: 20px;
   }
 
-  .wrap-usergroups {
+  .wrap-policies {
     width: 100%;
     border-top: 1px solid $gray;
     padding-top: 2rem;
@@ -293,6 +293,10 @@
       display: inline-block;
       margin: 1rem 1.5rem 1rem 0;
 
+      &.item {
+      margin-right: 0;
+      }
+
       &:after {
         content:'';
       }
@@ -331,7 +335,7 @@
     }
 
     .wrap-logo-lib, 
-    .wrap-usergroups, 
+    .wrap-policies, 
     .wrap-social {
       align-self: flex-end;
       margin-top: 0;
@@ -343,11 +347,11 @@
       margin-right: 4%;
     }
 
-    .wrap-usergroups {
-      order: 3;
-      width: 100%;
-      margin: 1rem 4% 0 0;
+    .wrap-policies {
+      order: 2;
+      padding: auto;
       border-top: none;
+      width: auto;
 
       span {
         margin-top: 0;
@@ -356,22 +360,22 @@
     }
 
     .wrap-social {
-      order: 2;
-      margin-left: 4%;
+      order: 3;
+      margin-left: auto;
     }
   }
 
   // large screen - able to handle several inline items
   @media (min-width: $bp-screen-lg) {
 
-    .wrap-usergroups {
-      order: 2;
-      width: auto;
-    }
-
     .wrap-social {
       order: 3;
     }
+
+    .wrap-policies {
+      order: 2;
+    }
+
   }
 }
 
@@ -379,29 +383,64 @@
 .wrap-footer.footer-slim {
   padding: 1.5rem 4%;
 
-  .footer-main {
+  .wrap-middle {
+    order: 2;
     display: flex;
-    align-items: center;
-  }
+    flex: 1; // No other element gets a value, forcing this element to be greedy in its sizing
+    flex-direction: column;
+    align-items: flex-start;
 
-  .wrap-sitemap {
-    margin-left: 2%;
+    .wrap-policies {
+      align-self: flex-start; // This overrides the flex-end applicable to vertial alignment in full footer.
+    }
 
-    .item {
-      display: block;
-      margin-right: 10px;
+    .wrap-sitemap {
+      display: inline-block;
+      margin-bottom: 2rem;
+
+      .item {
+        display: block;
+        margin-right: 10px;
+        margin-bottom: 5px;
+      }
     }
   }
 
+
   // larger screen - able to handle several inline items
   @media (min-width: $bp-screen-md) {
 
-    .footer-main {
-      align-items: baseline;
+    .wrap-middle {
+      order: 2;
+
+      .wrap-policies {
+        margin-left: 2%;
+        order: 2;
+      }
+
+      .wrap-sitemap {
+        display: inline-block;
+        margin-left: 2%;
+        margin-bottom: auto;
+        order: 1;
+
+        .item {
+          display: inline-block;
+          margin-bottom: auto;
+        }
+      }
     }
 
-    .wrap-sitemap .item {
-      display: inline-block;
+    .wrap-social {
+      order: 3;
+    }
+  }
+
+  @media (min-width: $bp-screen-lg) {
+    .wrap-policies {
+    }
+
+    .wrap-sitemap {
     }
   }
 }

data/vendor/assets/stylesheets/global/_variables.scss

@@ -19,6 +19,9 @@ $bp-screen-xl:                  1280px;
 // #COLORS
 // ----------------------------
 
+// NOTE: if updating color variables, you should also update
+// the guide helper scss and the examples file;
+
 // colors - grayscale
 $black:                         #000;
 $black-t:                       #000; // true black

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: mitlibraries-theme
 version: !ruby/object:Gem::Version
-  version: 0.3.3
+  version: 0.4.0.pre
 platform: ruby
 authors:
 - Jeremy Prevost
-autorequire: 
+autorequire:
 bindir: exe
 cert_chain: []
-date: 2020-06-24 00:00:00.000000000 Z
+date: 2020-09-29 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bundler
@@ -94,7 +94,7 @@ dependencies:
     - - "~>"
       - !ruby/object:Gem::Version
         version: '5'
-description: 
+description:
 email:
 - jprevost@mit.edu
 executables: []
@@ -149,7 +149,7 @@ homepage: https://github.com/MITLibraries/mitlibraries-theme
 licenses:
 - MIT
 metadata: {}
-post_install_message: 
+post_install_message:
 rdoc_options: []
 require_paths:
 - lib
@@ -160,12 +160,12 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: '0'
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
-  - - ">="
+  - - ">"
     - !ruby/object:Gem::Version
-      version: '0'
+      version: 1.3.1
 requirements: []
-rubygems_version: 3.1.2
-signing_key: 
+rubygems_version: 3.0.3
+signing_key:
 specification_version: 4
 summary: General theme for MIT Libraries Rails apps
 test_files: []