Added msising marketing files

templates/sass/marketing/_base.scss

@@ -0,0 +1,44 @@
+body {
+  background-color: #fff;
+  color: #444;
+  font: $body-font-size $body-font-family;
+
+  :focus {
+    outline-color: #ccc;
+  }
+
+  h1 {
+    font: 800 24px $header-font-family;
+  }
+
+  li {
+    margin-bottom: lh();
+  }
+
+  em {
+    font-style: italic;
+  }
+
+  a {
+    color: $mit-red;
+    font-style: italic;
+    text-decoration: none;
+
+    &:hover, &:focus {
+      color: darken($mit-red, 10%);
+    }
+  }
+
+  #{$all-text-inputs}, textarea {
+    @include box-shadow(0 -1px 0 #fff);
+    @include linear-gradient(#eee, #fff);
+    border: 1px solid #999;
+    font: $body-font-size $body-font-family;
+    padding: 4px;
+    width: 100%;
+
+    &:focus {
+      border-color: $mit-red;
+    }
+  }
+}

templates/sass/marketing/_extends.scss

@@ -0,0 +1,94 @@
+.wrapper {
+  @include box-sizing(border-box);
+  margin: 0 auto;
+  max-width: $fg-max-width;
+  // min-width: $fg-min-width;
+  padding: lh();
+  width: flex-grid(12);
+}
+
+.subpage {
+  @extend .clearfix;
+  @extend .wrapper;
+
+  > div {
+    padding-left: flex-grid(4) + flex-gutter();
+
+    @media screen and (max-width: 940px) {
+      padding-left: 0;
+    }
+
+    p {
+      margin-bottom: lh();
+      line-height: lh();
+    }
+
+    h1 {
+      margin-bottom: lh(.5);
+    }
+
+    h2 {
+      font: 18px $header-font-family;
+      color: #000;
+      margin-bottom: lh(.5);
+    }
+
+    ul {
+      list-style: disc outside none;
+
+      li {
+        list-style: disc outside none;
+        line-height: lh();
+      }
+    }
+
+    dl {
+      margin-bottom: lh();
+
+      dd {
+        margin-bottom: lh(.5);
+      }
+    }
+  }
+}
+
+.clearfix:after {
+  content: ".";
+  display: block;
+  height: 0;
+  clear: both;
+  visibility: hidden;
+}
+
+.button {
+  @include border-radius(3px);
+  @include inline-block();
+  @include transition();
+  background-color: $mit-red;
+  border: 1px solid darken($mit-red, 10%);
+  color: #fff;
+  margin: lh() 0 lh(.5);
+  padding: lh(.25) lh(.5);
+  text-decoration: none;
+  font-style: normal;
+  @include box-shadow(inset 0 1px 0 lighten($mit-red, 8%));
+  -webkit-font-smoothing: antialiased;
+
+  &:hover {
+    background-color: darken($mit-red, 10%);
+    border-color: darken($mit-red, 20%);
+  }
+
+  span {
+    font-family: Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", serif;
+    font-style: italic;
+  }
+}
+
+p.ie-warning {
+  display: block !important;
+  line-height: 1.3em;
+  background: yellow;
+  margin-bottom: lh();
+  padding: lh();
+}

templates/sass/marketing/_footer.scss

@@ -0,0 +1,101 @@
+footer {
+  @extend .wrapper;
+  @extend .clearfix;
+  padding-top: 0;
+
+  div.footer-wrapper {
+    border-top: 1px solid #e5e5e5;
+    padding: lh() 0;
+    background: url('/static/images/marketing/mit-logo.png') right center no-repeat;
+
+    @media screen and (max-width: 780px) {
+      background-position: left bottom;
+      padding-bottom: lh(3);
+    }
+
+    a {
+      color: #888;
+      text-decoration: none;
+      @include transition();
+
+      &:hover, &:focus {
+        color: #666;
+      }
+    }
+
+    p {
+      @include inline-block();
+      margin-right: lh();
+    }
+
+    ul {
+      @include inline-block();
+
+      @media screen and (max-width: 780px) {
+        margin-top: lh();
+      }
+
+      li {
+        @include inline-block();
+        margin-bottom: 0;
+
+        &:after {
+          content: ' |';
+          display: inline;
+          color: #ccc;
+        }
+
+        &:last-child {
+          &:after {
+            content: none;
+          }
+        }
+
+      }
+
+      &.social {
+        float: right;
+        margin-right: 60px;
+        position: relative;
+        top: -5px;
+
+        @media screen and (max-width: 780px) {
+          float: none;
+        }
+
+        li {
+          float: left;
+          margin-right: lh(.5);
+
+          &:after {
+            content: none;
+            display: none;
+          }
+
+          a {
+            display: block;
+            height: 29px;
+            width: 28px;
+            text-indent: -9999px;
+
+            &:hover {
+              opacity: .8;
+            }
+          }
+
+          &.twitter a {
+            background: url('/static/images/marketing/twitter.png') 0 0 no-repeat;
+          }
+
+          &.facebook a {
+            background: url('/static/images/marketing/facebook.png') 0 0 no-repeat;
+          }
+
+          &.linkedin a {
+            background: url('/static/images/marketing/linkedin.png') 0 0 no-repeat;
+          }
+        }
+      }
+    }
+  }
+}

templates/sass/marketing/_header.scss

@@ -0,0 +1,169 @@
+header.announcement {
+  @include background-size(cover);
+  background: #333;
+  border-bottom: 1px solid #000;
+  color: #fff;
+  -webkit-font-smoothing: antialiased;
+
+  &.home {
+    background: #e3e3e3 url("/static/images/marketing/shot-5-medium.jpg");
+
+    @media screen and (min-width: 1200px) {
+      background: #e3e3e3 url("/static/images/marketing/shot-5-large.jpg");
+    }
+
+    div {
+      padding: lh(10) lh() lh(3);
+
+      @media screen and (max-width:780px) {
+        padding: lh(2.5) lh() lh(2);
+      }
+
+      //hide login link for homepage
+      nav {
+        h1 {
+          margin-right: 0;
+        }
+
+        a.login {
+          display: none;
+        }
+      }
+    }
+  }
+
+  &.course {
+    background: #e3e3e3 url("/static/images/marketing/course-bg-small.jpg");
+
+    @media screen and (min-width: 1200px) {
+      background: #e3e3e3 url("/static/images/marketing/course-bg-large.jpg");
+    }
+
+    @media screen and (max-width: 1199px) and (min-width: 700px) {
+      background: #e3e3e3 url("/static/images/marketing/course-bg-medium.jpg");
+    }
+
+    div {
+      padding: lh(4) lh() lh(2);
+
+      @media screen and (max-width:780px) {
+        padding: lh(2.5) lh() lh(2);
+      }
+    }
+
+  }
+
+  div {
+    @extend .wrapper;
+    position: relative;
+
+    nav {
+      position: absolute;
+      top: 0;
+      right: lh();
+      @include border-radius(0 0 3px 3px);
+      background: #333;
+      background: rgba(#000, .7);
+      padding: lh(.5) lh();
+
+      h1 {
+        @include inline-block();
+        margin-right: lh(.5);
+
+
+        a {
+          font: italic 800 18px $header-font-family;
+          color: #fff;
+          text-decoration: none;
+
+          &:hover, &:focus {
+            color: #999;
+          }
+        }
+      }
+
+      a.login {
+        text-decoration: none;
+        color: #fff;
+        font-size: 12px;
+        font-style: normal;
+        font-family: $header-font-family;
+
+        &:hover, &:focus {
+          color: #999;
+        }
+      }
+    }
+
+    section {
+      @extend .clearfix;
+      background: $mit-red;
+      @include inline-block();
+      margin-left: flex-grid(4) + flex-gutter();
+      padding: lh() lh(1.5);
+
+      @media screen and (max-width: 780px) {
+        margin-left: 0;
+      }
+
+      h1 {
+        font-family: "Open Sans";
+        font-size: 30px;
+        font-weight: 800;
+        @include inline-block();
+        line-height: 1.2em;
+        margin: 0 lh() 0 0;
+      }
+
+      h2 {
+        font-family: "Open Sans";
+        font-size: 24px;
+        font-weight: 400;
+        @include inline-block();
+        line-height: 1.2em;
+      }
+
+      &.course {
+        section {
+          float: left;
+          margin-left: 0;
+          margin-right: flex-gutter(8);
+          padding: 0;
+          width: flex-grid(4, 8);
+
+          @media screen and (max-width: 780px) {
+            float: none;
+            width: 100%;
+            margin-right: 0;
+          }
+
+          a {
+            @extend .button;
+            background-color: darken($mit-red, 20%);
+            border-color: darken($mit-red, 30%);
+            @include box-shadow(inset 0 1px 0 darken($mit-red, 10%), 0 1px 0 lighten($mit-red, 5%));
+            display: block;
+            padding: lh(.5) lh();
+            text-align: center;
+
+            &:hover {
+              background-color: darken($mit-red, 10%);
+              border-color: darken($mit-red, 20%);
+            }
+          }
+        }
+
+        p {
+          width: flex-grid(4, 8);
+          line-height: lh();
+          float: left;
+
+          @media screen and (max-width: 780px) {
+            float: none;
+            width: 100%;
+          }
+        }
+      }
+    }
+  }
+}

templates/sass/marketing/_index.scss

@@ -0,0 +1,337 @@
+section.index-content {
+  @extend .wrapper;
+  @extend .clearfix;
+
+  section {
+    @extend .clearfix;
+    float: left;
+
+    @media screen and (max-width: 780px) {
+      float: none;
+      width: auto;
+      margin-right: 0;
+    }
+
+    h1 {
+      font-size: 800 24px "Open Sans";
+      margin-bottom: lh();
+    }
+
+    p {
+      line-height: lh();
+      margin-bottom: lh();
+
+    }
+
+    ul {
+      margin: 0;
+    }
+
+    &.about {
+      @include box-sizing(border-box);
+      border-right: 1px solid #e5e5e5;
+      margin-right: flex-gutter();
+      padding-right: flex-gutter() / 2;
+      width: flex-grid(8);
+
+      @media screen and (max-width: 780px) {
+        width: 100%;
+        border-right: 0;
+        margin-right: 0;
+        padding-right: 0;
+      }
+
+      section {
+        @extend .clearfix;
+        margin-bottom: lh();
+
+        p {
+          width: flex-grid(4, 8);
+          float: left;
+
+          @media screen and (max-width: 780px) {
+            float: none;
+            width: auto;
+          }
+
+          &:nth-child(odd) {
+            margin-right: flex-gutter(8);
+
+            @media screen and (max-width: 780px) {
+              margin-right: 0;
+            }
+          }
+        }
+
+        &.intro {
+          section {
+            margin-bottom: 0;
+
+            &.intro-text {
+              margin-right: flex-gutter(8);
+              width: flex-grid(4, 8);
+
+              @media screen and (max-width: 780px) {
+                margin-right: 0;
+                width: auto;
+              }
+
+              p {
+                margin-right: 0;
+                width: auto;
+                float: none;
+              }
+            }
+
+            &.intro-video {
+              width: flex-grid(4, 8);
+
+              @media screen and (max-width: 780px) {
+                width: auto;
+              }
+
+              a {
+                display: block;
+                width: 100%;
+
+                img {
+                  width: 100%;
+                }
+
+                span {
+                  display: none;
+                }
+              }
+            }
+          }
+        }
+
+        &.features {
+          border-top: 1px solid #E5E5E5;
+          padding-top: lh();
+          margin-bottom: 0;
+
+          h2 {
+            text-transform: uppercase;
+            letter-spacing: 1px;
+            color: #888;
+            margin-bottom: lh();
+            font-weight: normal;
+            font-size: 14px;
+
+            span {
+              text-transform: none;
+
+            }
+          }
+
+          p {
+            width: auto;
+            clear: both;
+
+            strong {
+              font-family: "Open sans";
+              font-weight: 800;
+            }
+
+            a {
+              color: $mit-red;
+              text-decoration: none;
+              @include transition();
+
+              &:hover, &:focus {
+                color: darken($mit-red, 15%);
+              }
+            }
+          }
+
+          ul {
+            margin-bottom: 0;
+
+            li {
+              line-height: lh();
+              width: flex-grid(4, 8);
+              float: left;
+              margin-bottom: lh(.5);
+
+              @media screen and (max-width: 780px) {
+                width: auto;
+                float: none;
+              }
+
+              &:nth-child(odd) {
+                margin-right: flex-gutter(8);
+
+                @media screen and (max-width: 780px) {
+                  margin-right: 0;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+
+    &.course, &.staff {
+      width: flex-grid(4);
+
+      @media screen and (max-width: 780px) {
+        width: auto;
+      }
+
+      h1 {
+        color: #888;
+        font: normal $body-font-size $body-font-family;
+        font-size: 14px;
+        letter-spacing: 1px;
+        margin-bottom: lh();
+        text-transform: uppercase;
+      }
+
+      h2 {
+        font: 800 24px $header-font-family;
+      }
+
+      h3 {
+        font: 400 18px $header-font-family;
+      }
+
+      a {
+        @extend .button;
+
+        span.arrow {
+          color: rgba(#fff, .6);
+          font-style: normal;
+          @include inline-block();
+          padding-left: 10px;
+        }
+      }
+
+      ul {
+        list-style: none;
+
+        li {
+          img {
+            float: left;
+            margin-right: lh(.5);
+          }
+        }
+      }
+    }
+
+    &.course {
+      h2 {
+        padding-top: lh(5);
+        background: url('/static/images/marketing/circuits-bg.jpg') 0 0 no-repeat;
+        @include background-size(contain);
+
+        @media screen and (max-width: 998px) and (min-width: 781px){
+          background: url('/static/images/marketing/circuits-medium-bg.jpg') 0 0 no-repeat;
+        }
+
+        @media screen and (max-width: 780px) {
+          padding-top: lh(5);
+          background: url('/static/images/marketing/circuits-bg.jpg') 0 0 no-repeat;
+        }
+
+        @media screen and (min-width: 500px) and (max-width: 781px) {
+          padding-top: lh(8);
+        }
+      }
+
+      div.announcement {
+        p.announcement-button {
+          a {
+            margin-top: 0;
+          }
+        }
+
+        img {
+          max-width: 100%;
+          margin-bottom: lh();
+        }
+      }
+    }
+
+
+    // index
+    //---------------------------------------- //
+    &.about-course {
+      @include box-sizing(border-box);
+      border-right: 1px solid #e5e5e5;
+      margin-right: flex-gutter();
+      padding-right: flex-gutter() / 2;
+      width: flex-grid(8);
+
+      @media screen and (max-width: 780px) {
+        width: auto;
+        border-right: 0;
+        margin-right: 0;
+        padding-right: 0;
+      }
+
+      section {
+        width: flex-grid(4, 8);
+
+        @media screen and (max-width: 780px) {
+          width: auto;
+        }
+
+        &.about-info {
+          margin-right: flex-gutter(8);
+
+          @media screen and (max-width: 780px) {
+            margin-right: 0;
+          }
+        }
+
+        &.requirements {
+          clear: both;
+          width: 100%;
+          border-top: 1px solid #E5E5E5;
+          padding-top: lh();
+          margin-bottom: 0;
+
+          p {
+            float: left;
+            width: flex-grid(4, 8);
+            margin-right: flex-gutter(8);
+
+            @media screen and (max-width: 780px) {
+              margin-right: 0;
+              float: none;
+              width: auto;
+            }
+
+            &:nth-child(odd) {
+              margin-right: 0;
+            }
+          }
+        }
+
+        &.cta {
+          width: 100%;
+          text-align: center;
+
+          a.enroll {
+            @extend .button;
+            padding: lh(.5) lh(2);
+            @include inline-block();
+            text-align: center;
+            font: 800 18px $header-font-family;
+          }
+        }
+      }
+    }
+
+    &.staff {
+      h1 {
+        margin-top: lh(1);
+      }
+    }
+  }
+}
+
+section.copyright, section.tos, section.privacy-policy, section.honor-code {
+  @extend .subpage;
+}

templates/sass/marketing/_variables.scss

@@ -0,0 +1,21 @@
+// Variables
+//---------------------------------------- //
+// // grid
+$fg-column: 60px;
+$fg-gutter: 25px;
+$fg-max-columns: 12;
+$fg-max-width: 1400px;
+$fg-min-width: 781px;
+
+$gw-column: 60px;
+$gw-gutter: 25px;
+
+$body-font-family: Georgia, serif;
+$header-font-family: "Open Sans", Helvetica, Arial, sans-serif;
+
+$body-font-size: 16px;
+$body-line-height: golden-ratio($body-font-size, 1);
+
+// Colors
+$mit-red: #933;
+$cream: #F6EFD4;