mitlibraries-theme 0.8.0 → 1.0.0

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

@@ -1,452 +0,0 @@
-// layouts
-
-// base layout styles for everyone!
-.layout-band {
-  @include clearfix;
-}
-
-.wrap-gridband, 
-.wrap-notice, 
-.wrap-header, 
-.wrap-header-local,
-.wrap-breadcrumb, 
-.wrap-content, 
-.wrap-footer, 
-.wrap-footer-institute {
-  @include clearfix;
-  max-width: 114rem;
-  margin: 0 auto;
-  padding: 10px 4%;
-}
-
-// generic grid options
-
-.gridband {
-  @include clearfix;
-
-  .grid-item {
-    width: auto;
-    float: none;
-  }
-
-  // 2-col generic with overflow
-  &.layout-2c {
-
-    @media (min-width: $bp-screen-md) {
-      .grid-item {
-        float: left;
-        width: 48%;
-        margin-right: 3%;
-        
-        &:nth-child(2n+0) {
-          float: right;
-          margin-right: 0;
-        }
-      }
-    }
-  }
-
-  // 3-col generic with overflow
-  &.layout-3c {
-
-    @media (min-width: $bp-screen-md) {
-      .grid-item {
-        float: left;
-        width: 32%;
-        margin-right: 2%;        
-
-        &:nth-child(3n+3) {
-          float: right;
-          margin-right: 0;
-        }
-      }
-    }
-  }
-
-  // 4-col generic with overflow
-  &.layout-4c {
-
-    @media (min-width: $bp-screen-md) {
-      .grid-item {
-        float: left;
-        width: 23%;
-        margin-right: 2%;        
-
-        &:nth-child(4n+4) {
-          float: right;
-          margin-right: 0;
-        }
-      }
-    }
-  }
-}
-
-// ----------------------------
-// #HEADER - global, slim, local
-// ----------------------------
-
-// simplified slim header for light branding
-.wrap-header {
-
-  .header-slim {
-
-    .logo-mit-lib img {
-      height: 35px;
-    }
-  }
-}
-
-.wrap-header-core, 
-.wrap-header-supp {
-  display: inline-block;
-  vertical-align: bottom;
-}
-
-.wrap-header-core {
-  width: 65%;
-}
-
-.wrap-header-supp {
-  width: 33%;
-
-  .link-logo-mit {
-    float: right;
-  }
-}
-
-// local header 
-.wrap-header-local {
-
-  .wrap-local-nav {
-    margin-top: 8px;
-
-    .nav-item {
-      @extend .button-subtle; 
-      display: inline-block;
-      margin-right: 10px;
-      font-size: $fs-small;
-      text-decoration: none;
-
-      &.current {
-        border: 1px solid $brand-primary-accent;
-      }
-    } 
-  }
-}
-
-// ----------------------------
-// #CONTENT
-// ----------------------------
-
-.wrap-outer-content {
-  background-color: $white-t;
-  color: $black;  
-}
-
-.wrap-content { 
-  padding-top: 3rem;
-  padding-bottom: 2%;
-
-  .content-main {
-    padding-bottom: 3rem;
-  }
-}
-
-// 3/4 - 1/4 2-column layout
-.layout-3q1q {
-
-  @media (min-width: $bp-screen-md) {
-
-    .col3q {
-      float: left;
-      width: 73%;
-    }
-
-    .col1q-r {
-      float: right;
-      width: 22%;
-      margin-left: 3%
-    }
-  }
-}
-
-// 1/4 - 3/4 2-column layout
-.layout-1q3q {
-
-  @media (min-width: $bp-screen-md) {
-
-    .col1q {
-      float: left;
-      width: 22%;
-      margin-right: 3%
-    }
-
-    .col3q {
-      float: right;
-      width: 73%;
-    }
-  }
-}
-
-// 1/4 - 1/2 - 1/4 3-column layout
-.layout-1q2q1q {
-
-  @media (min-width: $bp-screen-md) {
-
-    .col1q {
-      float: left;
-      width: 22%;
-      margin-right: 3%
-    }
-
-    .content-main {
-      float: left;
-      width: 48%;
-      margin-right: 3%
-    }
-
-    .col1q-r {
-      float: right;
-      width: 22%;
-    }
-  }
-}
-
-// 1/3 - 2/3 2-column layout
-.layout-1t2t {
-
-  @media (min-width: $bp-screen-md) {
-    display: flex;
-    
-    .col1t {
-      float: left;
-      width: 33%;
-      margin-right: 3%
-    }
-
-    .col2t {
-      float: right;
-      width: 63%;
-    }
-  }
-}
-
-// 2/3 - 1/3 2-column layout
-.layout-2t1t {
-
-  @media (min-width: $bp-screen-md) {
-    display: flex;
-    
-    .col2t {
-      float: left;
-      width: 63%;
-      margin-right: 3%
-    }
-
-    .col1t-r {
-      float: right;
-      width: 33%;
-    }
-  }
-}
-
- 
-
-// ----------------------------
-// #FOOTER - base and full
-// ----------------------------
-
-.wrap-footer {
-  padding: 3.5rem 4%;
-
-  .wrap-sitemap {
-
-    // hide the sub menu items on small screens
-    .menu-sub {
-      display: none;
-    }
-  }
-
-  .identity {
-    margin-top: 4rem;
-    margin-bottom: 2rem;
-  }
-
-  .wrap-logo-lib {
-    display: inline-block;
-    vertical-align: bottom;
-    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;
-    padding-top: 2rem;
-
-    span {
-      display: inline-block;
-      margin: 1rem 1.5rem 1rem 0;
-
-      &.item {
-      margin-right: 0;
-      }
-
-      &:after {
-        content:'';
-      }
-    }
-  }
-
-  .wrap-social .text-find-us {
-    display: none;
-  }
-
-  // bigger than small mobile - able to handle columns ok
-  @media (min-width: $bp-screen-md) {
-
-    .wrap-sitemap {
-      display: flex;
-      flex-direction: row;
-
-      .col {
-        margin-right: 3%;
-
-        &:last-child {
-          margin-right: 0;
-        } 
-      }
-
-      .menu-sub {
-        display: block;
-      }
-    }
-
-    .identity {
-      display: flex;
-      flex-wrap: wrap;
-      justify-content: space-between;
-      margin: 4% 0 0 0;
-    }
-
-    .wrap-logo-lib, 
-    .wrap-policies, 
-    .wrap-social {
-      align-self: flex-end;
-      margin-top: 0;
-      margin-bottom: 0;
-    }
-
-    .wrap-logo-lib {
-      order: 1;
-      margin-right: 4%;
-    }
-
-    .wrap-policies {
-      order: 2;
-      padding: auto;
-      border-top: none;
-      width: auto;
-
-      span {
-        margin-top: 0;
-        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;
-    }
-
-  }
-}
-
-// footer - adjustments for slim
-.wrap-footer.footer-slim {
-  padding: 1.5rem 4%;
-
-  .wrap-middle {
-    order: 2;
-    display: flex;
-    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-policies {
-      align-self: flex-start; // This overrides the flex-end applicable to vertial alignment in full footer.
-    }
-
-    .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) {
-
-    .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-social {
-      order: 3;
-    }
-  }
-
-  @media (min-width: $bp-screen-lg) {
-    .wrap-policies {
-    }
-
-    .wrap-sitemap {
-    }
-  }
-}
-
-// mit institute footer
-.wrap-footer-institute {
-  padding: 20px 4%;
-}
-

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

@@ -1,4 +0,0 @@
-// remove the forms required asterisk abbr underline
-abbr.required {
-	text-decoration: none;
-}

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

@@ -1,81 +0,0 @@
-// general typography helpers
-
-// headers 
-.hd-1 {
-  margin-bottom: .5em;
-  font-size: $fs-xxxlarge;
-  line-height: $lh-tight;
-  font-weight: $fw-bold;
-}
-
-.hd-2 {
-  margin-bottom: .5em;
-  font-size: $fs-xxlarge;  
-  line-height: $lh-tight;
-  font-weight: $fw-bold;
-}
-
-.hd-3 {
-  margin-bottom: .5em;
-  font-size: $fs-xlarge;
-  line-height: $lh-tight;
-  font-weight: $fw-normal;
-}
-
-.hd-4 {
-  margin-bottom: .5em;
-  font-size: $fs-large;
-  line-height: $lh-tight;
-  font-weight: $fw-bold;
-}
-
-.hd-5 {
-  margin-bottom: .5em;
-  font-size: $fs-base;
-  line-height: $lh-tight;
-  font-weight: $fw-bold;
-}
-
-.hd-6 {
-  margin-bottom: .5em;
-  font-size: $fs-base;
-  line-height: $lh-tight;
-  font-weight: $fw-bold;
-}
-
-.hd-subtitle1 {
-  margin-bottom: .5em;
-  font-size: $fs-base; 
-  text-transform: uppercase;
-}
-
-.hd-subtitle2 {
-  margin-bottom: .5em;
-  font-size: $fs-small; 
-  text-transform: uppercase;
-}
-
-.hd-subtitle3 {
-  margin-bottom: .5em;
-  font-size: $fs-xsmall; 
-  text-transform: uppercase;
-}
-
-// copy 
-
-.copy-lead {
-  font-size: $fs-xlarge;
-}
-
-.copy-base {
-  font-size: $fs-base;
-}
-
-.copy-sup {
-  font-size: $fs-xsmall;
-}
-
-.copy-micro {
-  font-size: $fs-xxsmall;  
-  font-weight: $fw-normal;
-}

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

@@ -1,29 +0,0 @@
-// clear base browser styling
-
-h1, h2, h3, h4, h5, h6 {
-  margin: 0;
-  font-weight: normal;
-  font-size: 1rem;
-  line-height: 1;
-}
-
-p,
-ol,
-ul,
-dl {
-    margin: 0 0 1em 0;
-}
-
-img {
-  max-width: 100%;
-  vertical-align: middle;
-}
-
-a {
-  text-decoration: none;
-}
-
-input[type=checkbox], 
-input[type=radio] {
-	margin-right: .5rem;
-}

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

@@ -1,120 +0,0 @@
-
-// ----------------------------
-// #SETTINGS
-// ----------------------------
-$image-path: '/dest/i' !default;
-
-// ----------------------------
-// #GRID
-// ----------------------------
-
-// grid - breakpoints
-$bp-screen-sm:                  480px;
-$bp-screen-md:                  768px;
-$bp-screen-lg:                  1024px;
-$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
-$white:                         #fff;
-$white-warm:                    #ede8e2;
-$white-t:                       #fff; // true white
-$gray:                          #595959; // accessible on #f3f3f3
-$gray-d1:                       #333;
-$gray-d2:                       #222;
-$gray-l1:                       #767676; // accessible on #fff
-$gray-l2:                       #ccc;
-$gray-l3:                       #dedede;
-$gray-l4:                       #f3f3f3;
-$gray-warm:                     #c6b6a3;
-$transparent:                   rgba(0, 0, 0, 0); // transparent black
-$transparent-w:                 rgba(255,255,255,0); // transparent white
-$glare:                         rgba($white-t, .3);
-$shadow:                        rgba($black-t, .5);
-$smoke:                         rgba($gray, .3);
-$wisp:                          rgba($gray, .1);
-
-// pentagram colors - named
-$magenta:                       #FF00FF;
-$red:                           #FF0000;
-$orange:                        #FF7700;
-$yellow:                        #FFC800;
-$green:                         #00C800;
-$blue:                          #0000FF;
-$blue-bright:                   #00C8FF;
-
-// pentagram colors secondary
-$magenta-muted:                 #C702C7;
-$red-muted:                     #D50606;
-$orange-muted:                  #E46212;
-$yellow-muted:                  #FFC422;
-$green-muted:                   #008700;
-$blue-muted:                    #1A1A83;
-$blue-bright-muted:             #04A6CF;
-
-
-// colors - brand
-$brand-primary:                 $black;
-$brand-primary-accent:          $blue;
-$brand-primary2:                $blue-bright; // accessible on dark 
-$brand-secondary:               $magenta-muted;
-
-// colors - utilities
-$success:                       $green-muted;
-$warning:                       $yellow;
-$error:                         $red-muted;
-$informational:                 $gray;
-
-
-// ----------------------------
-// #TYPOGRAPHY
-// ----------------------------
-
-$base-font: 'Helvetica Neue', Helvetica, Arial, 'Open Sans', sans-serif;
-$alt-fonts: 'Georgia', Cambria, 'Times New Roman', Times, serif;
-
-// font-sizes and line-heights
-$fs-xxxsmall: .9rem;
-$fs-xxsmall: 1rem;
-$fs-xsmall: 1.2rem;
-$fs-smallish: 1.3rem;
-$fs-small: 1.4rem;
-$fs-base: 1.6rem;
-$fs-large: 2.0rem;
-$fs-xlarge: 2.6rem;
-$fs-xxlarge: 3.2rem;
-$fs-xxxlarge: 4.2rem;
-$fs-xxxxlarge: 4.8rem;
-
-$fw-bold: 600;
-$fw-normal: 400;
-$fw-light: 300;
-
-$lh-xtight: .92;
-$lh-tight: 1;
-$lh-base: 1.2;
-$lh-loose: 1.5;
-$lh-xloose: 1.7;
-
-
-// ----------------------------
-// #DEPTH
-// ----------------------------
-
-$z-depth-way-back:      -1000;
-$z-depth-back:           -100;
-$z-depth-lil-back:       -10;
-$z-depth-base:           1;
-$z-depth-lil-front:      10;
-$z-depth-front:          100;
-$z-depth-way-front:     1000;
-

data/vendor/assets/stylesheets/global/_vendor-overrides.scss

@@ -1 +0,0 @@
-// Styles needed to override vendor stuff

data/vendor/assets/stylesheets/js-elements/_expand-collapse.scss

@@ -1,35 +0,0 @@
-.no-js {
-  .expand-collapse-control {
-    display: none;
-  }
-}
-
-.js {
-  .expand-collapse-wrap {
-    position: relative;
-    overflow: hidden;
-    margin-bottom: 2rem;
-    padding-bottom: 2rem;
-    transition: height 200ms;
-  }
-
-  .expand-container {
-    margin-bottom: 4rem;
-  }
-
-  .expand-collapse-control {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    margin: 0;
-    padding: 4rem .5rem .5rem .5rem;
-    background: #fff; // fallback
-    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #f3f3f3 50%);
-
-    .button {
-      @extend %unbutton;
-      @extend .button-secondary;
-    }
-  }
-}