mitlibraries-theme 0.1.0

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

@@ -0,0 +1,413 @@
+// 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-usergroups {
+    width: 100%;
+    border-top: 1px solid $gray;
+    padding-top: 2rem;
+
+    span {
+      display: inline-block;
+      margin: 1rem 1.5rem 1rem 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-usergroups, 
+    .wrap-social {
+      align-self: flex-end;
+      margin-top: 0;
+      margin-bottom: 0;
+    }
+
+    .wrap-logo-lib {
+      order: 1;
+      margin-right: 4%;
+    }
+
+    .wrap-usergroups {
+      order: 3;
+      width: 100%;
+      margin: 1rem 4% 0 0;
+      border-top: none;
+
+      span {
+        margin-top: 0;
+        margin-bottom: 0;
+      }
+    }
+
+    .wrap-social {
+      order: 2;
+      margin-left: 4%;
+    }
+  }
+
+  // large screen - able to handle several inline items
+  @media (min-width: $bp-screen-lg) {
+
+    .wrap-usergroups {
+      order: 2;
+      width: auto;
+    }
+
+    .wrap-social {
+      order: 3;
+    }
+  }
+}
+
+// footer - adjustments for slim
+.wrap-footer.footer-slim {
+  padding: 1.5rem 4%;
+
+  .footer-main {
+    display: flex;
+    align-items: center;
+  }
+
+  .wrap-sitemap {
+    margin-left: 2%;
+
+    .item {
+      display: block;
+      margin-right: 10px;
+    }
+  }
+
+  // larger screen - able to handle several inline items
+  @media (min-width: $bp-screen-md) {
+
+    .footer-main {
+      align-items: baseline;
+    }
+
+    .wrap-sitemap .item {
+      display: inline-block;
+    }
+  }
+}
+
+// mit institute footer
+.wrap-footer-institute {
+  padding: 20px 4%;
+}
+

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

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

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

@@ -0,0 +1,81 @@
+// 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

@@ -0,0 +1,29 @@
+// 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

@@ -0,0 +1,117 @@
+
+// ----------------------------
+// #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
+// ----------------------------
+
+// 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.8rem;
+$fs-xxlarge: 3.6rem;
+$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

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

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

@@ -0,0 +1,35 @@
+.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;
+    }
+  }
+}

data/vendor/assets/stylesheets/libraries-main.scss

@@ -0,0 +1,17 @@
+// ------------------------------
+// MIT Libraries Build Compile - LTR
+// this compile makes a plain base css that includes everything for
+// header, footer, and basic content styling across apps
+
+// +Get the core styles
+// ====================
+@import 'core';
+
+// +Select styles that need js
+@import 'js-elements/expand-collapse';
+
+// TODO - split this into a separate compile
+// app specific styles
+// ====================
+//@import 'apps/ebooks';
+//@import 'apps/quicksubmit';