Merge branch 'feature/btalbot/studio-softlanding' of github.com:MITx/mitx into feature/btalbot/studio-softlanding

cms/static/js/base.js

@@ -39,6 +39,21 @@ $(document).ready(function() {
     $('.unit .item-actions .delete-button').bind('click', deleteUnit);
     $('.new-unit-item').bind('click', createNewUnit);
 
+    // nav-related
+    $('body').addClass('js');
+
+    $('.nav-dropdown .nav-item .title').click(function(e){
+
+        $subnav = $(this).parent().find('.nav-sub');
+        $title = $(this).parent().find('.title');
+
+        e.preventDefault();
+        $('.nav-dropdown .nav-item .title').removeClass('is-selected');
+        $('.nav-dropdown .nav-item .nav-sub').removeClass('is-shown');
+        $title.toggleClass('is-selected');
+        $subnav.toggleClass('is-shown');
+      });
+
     // toggling overview section details
     $(function(){
       if($('.courseware-section').length > 0) {

cms/static/sass/_account.scss

@@ -0,0 +1,284 @@
+// login and sign up UI
+.signup, .signin {
+
+  .wrapper-content {
+    margin: 0;
+    padding: 0 $baseline;
+    position: relative;
+    width: 100%;
+  }
+
+  .content {
+    @include clearfix();
+    @include font-size(16);
+    max-width: $fg-max-width;
+    min-width: $fg-min-width;
+    width: flex-grid(12);
+    margin: 0 auto;
+    color: $gray-d2;
+    
+    header {
+      position: relative;
+      margin-bottom: $baseline;
+      border-bottom: 1px solid $gray-l4;
+      padding-bottom: ($baseline/2);
+
+      h1 {
+        @include font-size(32);
+        float: none;
+        margin: 0;
+        padding: 0;
+        font-weight: 600;
+      }
+
+      .action {
+        @include font-size(13);
+        position: absolute;
+        right: 0;
+        top: 40%;
+      }
+    }
+
+    .introduction {
+      @include font-size(14);
+      margin: 0 0 $baseline 0;
+    }
+  }
+
+  .content-primary, .content-supplementary {
+    @include box-sizing(border-box);
+    float: left;
+  }
+
+  .content-primary {
+    width: flex-grid(8, 12);
+    margin-right: flex-gutter();
+
+    form {
+      @include box-sizing(border-box);
+      @include box-shadow(0 1px 2px $shadow-l1);
+      @include border-radius(2px);
+      width: 100%;
+      border: 1px solid $gray-l2;
+      padding: $baseline ($baseline*1.5);
+      background: $white;
+
+      .form-actions {
+        margin-top: $baseline;
+
+        .action-primary {
+          @include blue-button;
+          @include transition(all .15s);
+          @include font-size(15);
+          display:block;
+          width: 100%;
+          padding: ($baseline*0.75) ($baseline/2);
+          font-weight: 600;
+          text-transform: uppercase;
+        }
+      }
+
+      .list-input {
+        margin: 0;
+        padding: 0;
+        list-style: none;
+
+        .field {
+          margin: 0 0 ($baseline*0.75) 0;
+
+          &:last-child {
+            margin-bottom: 0;
+          }
+
+          &.required {
+
+            label {
+              font-weight: 600;
+            }
+
+            label:after {
+              margin-left: ($baseline/4);
+              content: "*";
+            }
+          }
+
+          label, input, textarea {
+            display: block;
+          }
+
+          label {
+            @include font-size(14);
+            @include transition(color, 0.15s, ease-in-out);
+            margin: 0 0 ($baseline/4) 0;
+
+            &.is-focused {
+              color: $blue;
+            }
+          }
+
+          input, textarea {
+            @include font-size(16);
+            height: 100%;
+            width: 100%;
+            padding: ($baseline/2);       
+
+            &.long {
+              width: 100%;
+            }
+
+            &.short {
+              width: 25%;
+            }
+
+            ::-webkit-input-placeholder {
+               color: $gray-l4;
+            }
+
+            :-moz-placeholder {
+               color: $gray-l3; 
+            }
+
+            ::-moz-placeholder {
+               color: $gray-l3;  
+            }
+
+            :-ms-input-placeholder {  
+               color: $gray-l3; 
+            }
+          }
+
+          textarea.long {
+            height: ($baseline*5);
+          }
+
+          input[type="checkbox"] {
+            display: inline-block;
+            margin-right: ($baseline/4);
+            width: auto;
+            height: auto;
+
+            & + label {
+              display: inline-block;
+            }
+          }
+
+          .tip {
+            @include font-size(13);
+            display: block;
+            margin-top: ($baseline/4);
+            color: $gray-l3;
+          }
+        }
+
+        .field-group {
+          @include clearfix();
+          margin: 0 0 ($baseline/2) 0;
+
+          .field {
+            display: block;
+            width: 47%;
+            border-bottom: none;
+            margin: 0 $baseline 0 0;
+            padding-bottom: 0;
+
+            &:nth-child(odd) {
+              float: left;
+            }
+
+            &:nth-child(even) {
+              float: right;
+              margin-right: 0;
+            }
+
+            input, textarea {
+              width: 100%;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .content-supplementary {
+    width: flex-grid(4, 12);
+
+    .bit {
+      @include font-size(13);
+      margin: 0 0 $baseline 0;
+      border-bottom: 1px solid $gray-l4;
+      padding: 0 0 $baseline 0;
+      color: $gray-l1;
+
+      &:last-child {
+        margin-bottom: 0;
+        border: none;
+        padding-bottom: 0;
+      }
+
+      h3 {
+        @include font-size(14);
+        margin: 0 0 ($baseline/4) 0;
+        color: $gray-d2;
+        font-weight: 600;
+      }
+
+    }
+  }
+}
+
+.signup {
+
+}
+
+.signin {
+
+  #field-password {
+    position: relative;
+
+    .action-forgotpassword {
+      @include font-size(13);
+      position: absolute;
+      top: 0;
+      right: 0;
+    }
+  }
+}
+
+// messages
+.message {
+  @include font-size(14);
+  display: block;
+}
+
+.message-status {
+  display: none;
+  @include border-top-radius(2px);
+  @include box-sizing(border-box);
+  border-bottom: 2px solid $yellow-d2;
+  margin: 0 0 $baseline 0;
+  padding: ($baseline/2) $baseline;
+  font-weight: 500;
+  background: $yellow-d1;
+  color: $white;
+
+  .ss-icon {
+    position: relative;
+    top: 3px;
+    @include font-size(16);
+    display: inline-block;
+    margin-right: ($baseline/2);
+  }
+
+  .text {
+    display: inline-block;
+  }
+
+  &.error {
+    border-color: shade($red, 50%);
+    background: tint($red, 20%);
+  }
+
+  &.is-shown {
+    display: block;
+  }
+}

cms/static/sass/_base.scss

@@ -4,9 +4,13 @@
 //
 // -------------------------------------
 
+html {
+  font-size: 62.5%;
+}
+
 body {
     min-width: 980px;
-    background: rgb(240, 241, 245);
+    background: $gray-l5;
     font-size: 16px;
     line-height: 1.6;
     color: $baseFontColor;
@@ -42,6 +46,12 @@ h1 {
     margin-bottom: 30px;
 }
 
+.wrapper {
+  @include clearfix();
+  @include box-sizing(border-box);
+  width: 100%;
+}
+
 .main-wrapper {
     position: relative;
     margin: 0 40px;
@@ -70,11 +80,6 @@ h1 {
     float: right;
 }
 
-footer {
-    clear: both;
-    height: 100px;
-}
-
 input[type="text"],
 input[type="email"],
 input[type="password"],
@@ -417,4 +422,9 @@ body.show-wip {
     font-size: 20px;
     color: rgba(0, 0, 0, 0.85);
   }
+}
+
+// basic utility
+.sr {
+  @include text-sr();
 }

cms/static/sass/_extends.scss

@@ -0,0 +1,78 @@
+.faded-hr-divider {
+  @include background-image(linear-gradient(180deg, rgba(200,200,200, 0) 0%,
+                                                    rgba(200,200,200, 1) 50%,
+                                                    rgba(200,200,200, 0)));
+  height: 1px;
+  width: 100%;
+}
+
+.faded-hr-divider-medium {
+  @include background-image(linear-gradient(180deg, rgba(240,240,240, 0) 0%,
+                                                    rgba(240,240,240, 1) 50%,
+                                                    rgba(240,240,240, 0)));
+  height: 1px;
+  width: 100%;
+}
+
+.faded-hr-divider-light {
+  @include background-image(linear-gradient(180deg, rgba(255,255,255, 0) 0%,
+                                                    rgba(255,255,255, 0.8) 50%,
+                                                    rgba(255,255,255, 0)));
+  height: 1px;
+  width: 100%;
+}
+
+.faded-vertical-divider {
+  @include background-image(linear-gradient(90deg, rgba(200,200,200, 0) 0%,
+                                                    rgba(200,200,200, 1) 50%,
+                                                    rgba(200,200,200, 0)));
+  height: 100%;
+  width: 1px;
+}
+
+.faded-vertical-divider-light {
+  @include background-image(linear-gradient(90deg, rgba(255,255,255, 0) 0%,
+                                                    rgba(255,255,255, 0.6) 50%,
+                                                    rgba(255,255,255, 0)));
+  height: 100%;
+  width: 1px;
+}
+
+.vertical-divider {
+  @extend .faded-vertical-divider;
+  position: relative;
+
+  &::after {
+    @extend .faded-vertical-divider-light;
+    content: "";
+    display: block;
+    position: absolute;
+    left: 1px;
+  }
+}
+
+.horizontal-divider {
+  border: none;
+  @extend .faded-hr-divider;
+  position: relative;
+
+  &::after {
+    @extend .faded-hr-divider-light;
+    content: "";
+    display: block;
+    position: absolute;
+    top: 1px;
+  }
+}
+
+.fade-right-hr-divider {
+  @include background-image(linear-gradient(180deg, rgba(200,200,200, 0) 0%,
+                                                    rgba(200,200,200, 1)));
+  border: none;
+}
+
+.fade-left-hr-divider {
+  @include background-image(linear-gradient(180deg, rgba(200,200,200, 1) 0%,
+                                                    rgba(200,200,200, 0)));
+  border: none;
+}

cms/static/sass/_footer.scss

@@ -0,0 +1,48 @@
+//studio global footer
+.wrapper-footer {
+  margin: ($baseline*1.5) 0 $baseline 0;
+  padding: $baseline;
+  position: relative;
+  width: 100%;
+
+  footer.primary {
+    @include clearfix();
+    @include font-size(13);
+    max-width: $fg-max-width;
+    min-width: $fg-min-width;
+    width: flex-grid(12);
+    margin: 0 auto;
+    padding-top: $baseline;
+    border-top: 1px solid $gray-l4;
+    color: $gray-l2;
+
+    .colophon {
+      width: flex-grid(4, 12);
+      float: left;
+      margin-right: flex-gutter(2);
+    }
+
+    .nav-peripheral {
+      width: flex-grid(6, 12);
+      float: right;
+      text-align: right;
+
+      .nav-item {
+        display: inline-block;
+        margin-right: ($baseline/2);
+
+        &:last-child {
+          margin-right: 0;
+        }
+      }
+    }
+
+    a {
+      color: $gray-l1;
+
+      &:hover, &:active {
+        color: $blue;
+      }
+    }
+  }
+}

cms/static/sass/_header.scss

@@ -1,109 +1,428 @@
-body.no-header {
-	.primary-header {
-		display: none;
-	}
+//studio global header and navigation
+.wrapper-header {
+  margin: 0 0 ($baseline*1.5) 0;
+  padding: $baseline;
+  border-bottom: 1px solid $gray;
+  @include box-shadow(0 1px 5px 0 rgba(0,0,0, 0.1));
+  background: $white;
+  height: 76px;
+  position: relative;
+  width: 100%;
+  z-index: 10;
+
+  a {
+    color: $baseFontColor;
+    display: block;
+
+    &:hover, &:active {
+      color: $blue;
+    }
+  }
+
+  header.primary {
+    @include clearfix();
+    max-width: $fg-max-width;
+    min-width: $fg-min-width;
+    width: flex-grid(12);
+    margin: 0 auto;
+    color: $gray-l1;
+  }
 }
 
-@mixin active {
-	@include linear-gradient(top, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0));
-	background-color: rgba(255, 255, 255, .3);
-	@include box-shadow(0 -1px 0 rgba(0, 0, 0, .2) inset, 0 1px 0 #fff inset);
-	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
+.branding, .info-course, .nav-course, .nav-account, .nav-unauth, .nav-pitch {
+  display: inline-block;
+  vertical-align: top;
 }
 
-.primary-header {
-	width: 100%;
-	margin-bottom: 30px;
+.branding, .info-course, .nav-course {
+  margin: 0 ($baseline*0.75) 0 0;
+}
 
-	&.active-tab-courseware #courseware-tab {
-		@include active;
-	}
+.branding {
+  position: relative;
+  padding-right: ($baseline*0.75);
 
-	&.active-tab-assets #assets-tab {
-		@include active;
-	}
-	
-	&.active-tab-pages #pages-tab {
-		@include active;
-	}
+  a {
+    @include text-hide();
+    display: block;
+    width: 164px;
+    height: 32px;
+    background: transparent url('../img/logo-edx-studio.png') 0 0 no-repeat;
+  }
+}
 
-	&.active-tab-users #users-tab {
-		@include active;
-	}
+.info-course {
+  position: relative;
+  max-width: 200px;
+  margin-top: -3px;
+  padding-right: $baseline;
+  @include font-size(14);
 
-	&.active-tab-settings #settings-tab {
-		@include active;
-	}
+  &:before {
+    @extend .faded-vertical-divider;
+    content: "";
+    display: block;
+    height: 50px;
+    position: absolute;
+    right: 1px;
+    top: -8px;
+    width: 1px;
+  }
 
-	&.active-tab-import #import-tab {
-		@include active;
-	}
+  &:after {
+    @extend .faded-vertical-divider-light;
+    content: "";
+    display: block;
+    height: 50px;
+    position: absolute;
+    right: 0px;
+    top: -12px;
+    width: 1px;
+  }
 
-	&.active-tab-export #export-tab {
-		@include active;
-	}
+  .course-number, .course-title {
+    display: block;
+  }
 
-	.drop-icon {
-		margin-left: 5px;
-		font-size: 11px;
-	}
+  .course-number {
+    @include font-size(12);
+  }
 
-	.settings-icon {
-		font-size: 18px;
-		line-height: 18px;
-	}
+  .course-title {
+    width: 100%;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    @include font-size(16);
+    font-weight: 600;
+  }
+}
 
-	.class-nav-bar {
-		clear: both;
-		@include linear-gradient(top, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0));
-		background-color: $lightBluishGrey;
-		@include box-shadow(0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 -1px 0 rgba(0, 0, 0, 0.2) inset);
-	}
+// course info
+.nav-course {
+  width: 335px;
+  margin-top: -($baseline/4);
+  @include font-size(14);
 
-	.class-nav {
-		@include clearfix;		
+  > ol > .nav-item {
+    display: inline-block;
+    vertical-align: bottom;
+    width: 100px;
+    margin: 0 ($baseline/2) 0 0;
 
-		a {
-			float: left;
-			display: inline-block;
-			padding: 15px 25px 17px;
-			font-size: 15px;
-			color: #3c3c3c;
-			text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
+    &:last-child {
+      margin-right: 0;
+    }
 
-			&:hover {
-				@include linear-gradient(top, rgba(255, 255, 255, .2), rgba(255, 255, 255, 0));
-			}
-		}
+    .title {
+      display: block;
+      padding: 5px;
+      text-transform: uppercase;
+      font-weight: 600;
+      color: $gray-d3;
 
-		li {
-			float: left;
-		}
-	}
+      &:hover, &:active {
+        color: $blue;
+      }
 
-	.class {
-		@include clearfix;
-		height: 100%;
-		font-size: 12px;
-		color: rgb(163, 171, 184);
-		@include linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, .1));
-		background-color: rgb(47, 53, 63);
+      .label-prefix {
+        display: block;
+        @include font-size(11);
+        font-weight: 400;
+      }
 
-		a {
-			display: inline-block;
-			height: 20px;
-			padding: 5px 10px 6px;
-			color: rgb(163, 171, 184);			
-		}
+      .ss-icon {
+       
+      }
 
-		.home {
-			position: relative;
-			top: 1px;
-		}
+      &.is-selected {
+        color: $blue;
+      }
+    }
 
-		.log-out {
-			position: relative;
-			top: 3px;
-		}
-	}
+    // current state
+    &.is-current {
+
+      .title {
+        color: $blue;
+      }
+    }
+
+    // specific nav items
+    &.nav-course-courseware {
+    }
+
+    &.nav-course-settings {
+    }
+
+    &.nav-course-tools {
+    }
+  }
+}
+
+// account-based nav
+.nav-account {
+  float: right;
+  max-width: 300px;
+  min-width: 175px;
+  width: 20%;
+  margin-top: 10px;
+  @include font-size(14);
+  text-align: right;
+
+  .nav-account-username {
+    .ss-icon {
+      display: inline-block;
+      vertical-align: middle;
+      margin-right: 3px;
+      @include font-size(12);
+    }
+
+    .account-username {
+      display: inline-block;
+      width: 80%;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+  }
+}
+
+// dropdown UI
+.nav-dropdown {
+
+  .nav-item {
+    position: relative;
+  }
+
+  .nav-sub {
+    @include border-radius(2px);
+    position: absolute;
+    top: 30px;
+    width: 125px;
+    border: 1px solid $gray-l2;
+    padding: ($baseline/4) ($baseline/2);
+    @include box-shadow(0 1px 5px 0 rgba(0,0,0, 0.1));
+    background: $white;
+
+    li {
+      margin: 0 0 ($baseline/4) 0;
+      border-bottom: 1px solid $gray-l5;
+      padding: 0 0($baseline/4) 0;
+      @include font-size(13);
+
+      &:last-child {
+        margin-bottom: 0;
+        border-bottom: none;
+        padding-bottom: 0;
+      }
+
+      a {
+        display: block;
+      }
+    }
+
+    // arrows
+    &:after, &:before {
+
+    }
+
+    &:after {
+
+    }
+
+    &:before {
+
+    }
+  }
+
+  // vendor
+  .arrow_box {
+    position: relative;
+    background: #fff;
+    border: 1px solid #a1a1a1;
+  }
+  .arrow_box:after, .arrow_box:before {
+    bottom: 100%;
+    border: solid transparent;
+    content: " ";
+    height: 0;
+    width: 0;
+    position: absolute;
+    pointer-events: none;
+  }
+
+  .arrow_box:after {
+    border-color: rgba(255, 255, 255, 0);
+    border-bottom-color: #fff;
+    border-width: 10px;
+    left: 50%;
+    margin-left: -10px;
+  }
+  .arrow_box:before {
+    border-color: rgba(161, 161, 161, 0);
+    border-bottom-color: #a1a1a1;
+    border-width: 11px;
+    left: 50%;
+    margin-left: -11px;
+  }
+
+  // specific navs
+  &.nav-account {
+
+    .nav-sub {
+      right: 0;
+      text-align: left;
+    }
+  }
+
+  &.nav-course {
+
+    .nav-sub {
+      left: -5px;
+    }
+
+    .nav-course-courseware {
+
+      .nav-sub {
+        top: 50px;
+      }
+    }
+
+    .nav-course-settings {
+
+      .nav-sub {
+        top: 50px;
+      }
+    }
+
+    .nav-course-tools {
+
+      .nav-sub {
+      
+      }
+    }
+  }
+}
+
+// is-signed in
+.is-signedin {
+
+  &.course .branding {
+
+    &:before {
+      @extend .faded-vertical-divider;
+      content: "";
+      display: block;
+      height: 50px;
+      position: absolute;
+      right: 1px;
+      top: -8px;
+      width: 1px;
+    }
+
+    &:after {
+      @extend .faded-vertical-divider-light;
+      content: "";
+      display: block;
+      height: 50px;
+      position: absolute;
+      right: 0px;
+      top: -12px;
+      width: 1px;
+    }
+  }
+}
+
+// not signed in
+.not-signedin {
+
+  // unauthenticated nav
+  .nav-not-signedin {
+    float: right;
+    margin-top: ($baseline/4);
+
+    .nav-item {
+      @include font-size(16);
+      display: inline-block;
+      vertical-align: middle;
+      margin: 0 $baseline 0 0;
+      font-weight: 500;
+
+      &:last-child {
+        margin-right: 0;
+      }
+
+      .action {
+        margin-top: -($baseline/4);
+        display: inline-block;
+        padding: ($baseline/4) ($baseline/2);
+      }
+    }
+
+    // specific items
+    .nav-not-signedin-help {
+
+    }
+
+    .nav-not-signedin-signup {
+      margin-right: ($baseline/2);
+
+      .action-signup {
+        @include blue-button;
+        @include transition(all .15s);
+        @include font-size(14);
+        padding: ($baseline/4) ($baseline/2);
+        text-transform: uppercase;
+        font-weight: 600 !important;
+      }
+    }
+
+    .nav-not-signedin-signin {
+
+      .action-signin {
+        @include white-button;
+        @include transition(all .15s);
+        @include font-size(14);
+        padding: ($baseline/4) ($baseline/2);
+        text-transform: uppercase;
+        font-weight: 600 !important;
+      }
+    }
+  }
+}
+
+
+// active/current nav states
+body.howitworks .nav-not-signedin-hiw,
+body.signin .nav-not-signedin-signin,
+body.signup .nav-not-signedin-signup,
+body.course.outline .nav-course-courseware
+{
+
+  a {
+    color: $blue;
+  }
+}
+
+// js enabled 
+.js {
+
+  .nav-dropdown {
+
+    .nav-item .title {
+      cursor: pointer;
+    }
+  }
+
+  .nav-sub {
+    @include transition (opacity 1.0s ease-in-out 0s);
+    opacity: 0;
+    pointer-events: none;
+
+    &.is-shown {
+      opacity: 1.0;
+      pointer-events: auto;
+    }
+  }
 }

cms/static/sass/_index.scss

@@ -1,79 +1,409 @@
-body.index {
-  > header {
-    display: none;
-  }
+// how it works/not signed in index
+.index {
 
-  > h1 {
-    font-weight: 300;
-    color: lighten($dark-blue, 40%);
-    text-shadow: 0 1px 0 #fff;
-    -webkit-font-smoothing: antialiased;
-    max-width: 600px;
-    text-align: center;
-    margin: 80px auto 30px;
-  }
+  &.not-signedin {
 
-  section.main-container {
-    border-right: 3px;
-    background: #FFF;
-    max-width: 600px;
-    margin: 0 auto;
-    display: block;
-    @include box-sizing(border-box);
-    border: 1px solid lighten( $dark-blue , 30% );
-    @include border-radius(3px);
-    overflow: hidden;
-    @include bounce-in-animation(.8s);
+    .wrapper-header {
+      margin-bottom: 0;
+    }
 
-    header {
-      border-bottom: 1px solid lighten($dark-blue, 50%);
-      @include linear-gradient(#fff, lighten($dark-blue, 62%));
-      @include clearfix();
-      @include box-shadow( 0 2px 0 $light-blue, inset 0 -1px 0 #fff);
-      text-shadow: 0 1px 0 #fff;
+    .wrapper-footer {
+      margin: 0;
+      border-top: 2px solid $gray-l3;
 
-      h1 {
-        font-size: 14px;
-        padding: 8px 20px;
-        float: left;
-        color: $dark-blue;
-        margin: 0;
-      }
-
-      a {
-        float: right;
-        padding: 8px 20px;
-        border-left: 1px solid lighten($dark-blue, 50%);
-        @include box-shadow( inset -1px 0 0 #fff);
-        font-weight: bold;
-        font-size: 22px;
-        line-height: 1;
-        color: $dark-blue;
+      footer.primary {
+        border: none;
+        margin-top: 0;
+        padding-top: 0;
       }
     }
 
-    ol {
-      list-style: none;
+    .wrapper-content-header, .wrapper-content-features, .wrapper-content-cta {
+      @include box-sizing(border-box);
       margin: 0;
-      padding: 0;
+      padding: 0 $baseline;
+      position: relative;
+      width: 100%;
+    }
 
-      li {
-        border-bottom: 1px solid lighten($dark-blue, 50%);
+    .content {
+      @include clearfix();
+      @include font-size(16);
+      max-width: $fg-max-width;
+      min-width: $fg-min-width;
+      width: flex-grid(12);
+      margin: 0 auto;
+      color: $gray-d2;
+    
+      header {
 
-        a {
-          display: block;
-          padding: 10px 20px;
+      }
 
-          &:hover {
-            color: $dark-blue;
-            background: lighten($yellow, 10%);
-            text-shadow: 0 1px 0 #fff;
+      h1, h2, h3, h4, h5, h6 {
+        color: $gray-d3;
+      }
+
+      h2 {
+
+      }
+
+      h3 {
+
+      }
+
+      h4 {
+
+      }
+    }
+
+    // welcome content
+    .wrapper-content-header {
+      padding-bottom: ($baseline*4);
+      padding-top: ($baseline*4);
+      background: $blue;
+    }
+
+    .content-header {
+      position: relative;
+      text-align: center;
+      color: $white;
+
+      h1 {
+        @include font-size(52);
+        float: none;
+        margin: 0 0 ($baseline/2) 0;
+        border-bottom: 1px solid $blue-l1;
+        padding: 0;
+        font-weight: 500;
+        color: $white;
+      }
+
+      .logo {
+        @include text-hide();
+        position: relative;
+        top: 3px;
+        display: inline-block;
+        vertical-align: baseline;
+        width: 282px;
+        height: 57px;
+        background: transparent url('../img/logo-edx-studio-white.png') 0 0 no-repeat;
+      }
+
+      .tagline {
+        @include font-size(24);
+        margin: 0;
+        color: $blue-l3;
+      }
+    }
+
+    .arrow_box {
+      position: relative;
+      background: #fff;
+      border: 4px solid #000;
+    }
+    .arrow_box:after, .arrow_box:before {
+      top: 100%;
+      border: solid transparent;
+      content: " ";
+      height: 0;
+      width: 0;
+      position: absolute;
+      pointer-events: none;
+    }
+
+    .arrow_box:after {
+      border-color: rgba(255, 255, 255, 0);
+      border-top-color: #fff;
+      border-width: 30px;
+      left: 50%;
+      margin-left: -30px;
+    }
+    .arrow_box:before {
+      border-color: rgba(0, 0, 0, 0);
+      border-top-color: #000;
+      border-width: 36px;
+      left: 50%;
+      margin-left: -36px;
+    }
+
+    // feature content
+    .wrapper-content-features {
+      @include box-shadow(0 -1px ($baseline/4) $shadow);
+      padding-bottom: ($baseline*2);
+      padding-top: ($baseline*3);
+      background: $white;
+    }
+
+    .content-features {
+
+      .list-features {
+
+      }
+
+      // indiv features
+      .feature {
+        @include clearfix();
+        margin: 0 0 ($baseline*2) 0;
+        border-bottom: 1px solid $gray-l4;
+        padding: 0 0 ($baseline*2) 0;
+
+        .img {
+          @include box-sizing(border-box);
+          float: left;
+          width: flex-grid(3, 12);
+          margin-right: flex-gutter();
+
+          a {
+            @include box-sizing(border-box);
+            @include box-shadow(0 1px ($baseline/10) $shadow-l1);
+            position: relative;
+            top: 0;
+            display: block;
+            overflow: hidden;
+            border: 1px solid $gray-l3;
+            padding: ($baseline/4);
+            background: $white;
+
+            .action-zoom {
+              @include transition(bottom .50s ease-in-out);
+              position: absolute;
+              bottom: -30px;
+              right: ($baseline/2);
+              opacity: 0;
+
+              .ss-icon {
+                @include font-size(18);
+                @include border-top-radius(3px);
+                display: inline-block;
+                padding: ($baseline/4) ($baseline/2);
+                background: $blue;
+                color: $white;
+                text-align: center;
+              }
+            }
+
+            &:hover {
+              border-color: $blue;
+
+              .action-zoom {
+                opacity: 1.0;
+                bottom: -2px;
+              }
+            }
+          }
+
+          img {
+            display: block;
+            width: 100%;
+            height: 100%;
           }
         }
 
-        &:last-child {
-          border-bottom: none;
+        .copy {
+          float: left;
+          width: flex-grid(9, 12);
+          margin-top: -($baseline/4);
+
+          h3 {
+            margin: 0 0 ($baseline/2) 0;
+            @include font-size(24);
+            font-weight: 600;
+          }
+
+          > p {
+            @include font-size(18);
+            color: $gray-d1;
+          }
+
+          strong {
+            color: $pink-l1;
+            font-weight: 500;
+          }
+
+          .list-proofpoints {
+            @include clearfix();
+            @include font-size(14);
+            width: flex-grid(9, 9);
+            margin: ($baseline*1.5) 0 0 0;
+
+            .proofpoint {
+              @include box-sizing(border-box);
+              @include border-radius(($baseline/4));
+              @include transition(color .50s ease-in-out);
+              position: relative;
+              top: 0;
+              float: left;
+              width: flex-grid(3, 9);
+              min-height: ($baseline*8);
+              margin-right: flex-gutter();
+              padding: ($baseline*0.75) $baseline;
+              color: $gray-l1;
+              cursor: pointer;
+
+              .title {
+                @include font-size(16);
+                margin: 0 0 ($baseline/4) 0;
+                font-weight: 500;
+                color: $gray-d3;
+              }
+
+              &:hover {
+                @include box-shadow(0 1px ($baseline/10) $shadow-l1);
+                background: $blue-l5;
+                top: -($baseline/5);
+
+                .title, strong {
+                  color: $blue;
+                }
+              }
+
+              &:last-child {
+                margin-right: 0;
+              }
+            }
+          }
         }
+
+
+        &:last-child {
+          margin-bottom: 0;
+          border: none;
+          padding-bottom: 0;
+        }
+
+        &:nth-child(even) {
+
+          .img {
+            float: right;
+            margin-right: 0;
+            margin-left: flex-gutter();
+          }
+
+          .copy {
+            float: right;
+            text-align: right;
+          }
+
+          .list-proofpoints {
+
+            .proofpoint {
+              float: right;
+              width: flex-grid(3, 9);
+              margin-left: flex-gutter();
+              margin-right: 0;
+
+              &:last-child {
+                margin-left: 0;
+              }
+            }
+          }
+        }
+      }
+    }
+
+    // call to action content
+    .wrapper-content-cta {
+      padding-bottom: ($baseline*2);
+      padding-top: ($baseline*2);
+      background: $white;
+    }
+
+    .content-cta {
+      border-top: 1px solid $gray-l4;
+
+
+      .list-actions {
+        position: relative;
+        margin-top: -($baseline*1.5);
+
+        li {
+          width: flex-grid(6, 12); 
+          margin: 0 auto;
+        }
+
+        .action {
+          display: block;
+          width: 100%;
+          text-align: center;
+        }
+
+        .action-primary {
+          @include blue-button;
+          @include transition(all .15s);
+          @include font-size(18);
+          padding: ($baseline*0.75) ($baseline/2);
+          font-weight: 600;
+          text-align: center;
+          text-transform: uppercase;
+        }
+
+        .action-secondary {
+          @include font-size(14);
+          margin-top: ($baseline/2);
+        }
+      }
+    }
+  }
+
+  // js dependant
+  &.js {
+
+    .content-modal {
+      @include border-bottom-radius(2px);
+      @include box-sizing(border-box);
+      @include box-shadow(0 2px 4px $shadow-d1);
+      position: relative;
+      display: none;
+      width: 700px;
+      overflow: hidden;
+      border: 1px solid $gray-d1;
+      padding: ($baseline);
+      background: $white;
+
+      .action-modal-close {
+        @include transition(top .25s ease-in-out);
+        @include border-bottom-radius(3px);
+        position: absolute;
+        top: -3px;
+        right: $baseline;
+        padding: ($baseline/4) ($baseline/2) 0 ($baseline/2);
+        background: $gray-l3;
+        text-align: center;
+
+        .label {
+          @include text-sr();
+        }
+
+        .ss-icon {
+          @include font-size(18);
+          color: $white;
+        }
+
+        &:hover {
+          background: $blue;
+          top: 0;
+        }
+      }
+
+      img {
+        @include box-sizing(border-box);
+        width: 100%;
+        overflow-y: scroll;
+        padding: ($baseline/10);
+        border: 1px solid $gray-l4;
+      }
+
+      .title {
+        @include font-size(18);
+        margin: 0 0 ($baseline/2) 0;
+        font-weight: 600;
+        color: $gray-d3;
+      }
+
+      .description {
+        @include font-size(13);
+        margin-top: ($baseline/2);
+        color: $gray-l1;
       }
     }
   }

cms/static/sass/_modal.scss

@@ -54,4 +54,16 @@
 		@include white-button;
 		margin-top: 13px;
 	}
+}
+
+// lean modal alternative
+#lean_overlay {
+	position: fixed;
+	z-index: 10000;
+	top: 0px;
+	left: 0px;
+	display: none;
+	height: 100%;
+	width: 100%;
+	background: $black;
 }

cms/static/sass/_subsection.scss

@@ -1,3 +1,11 @@
+.subsection .main-wrapper {
+  margin: 40px;
+}
+
+.subsection .inner-wrapper {
+  @include clearfix();
+}
+
 .subsection-body {
 	padding: 32px 40px;
 	@include clearfix;

cms/static/sass/_unit.scss

@@ -1,5 +1,5 @@
-.unit .main-wrapper,
-.subsection .main-wrapper {
+.unit .main-wrapper {
+  @include clearfix();
   margin: 40px;
 }
 

cms/static/sass/_variables.scss

@@ -1,25 +1,85 @@
-$gw-column: 80px;
-$gw-gutter: 20px;
+$baseline: 20px;
 
+// grid
+$gw-column: ($baseline*3);
+$gw-gutter: $baseline;
 $fg-column: $gw-column;
 $fg-gutter: $gw-gutter;
 $fg-max-columns: 12;
-$fg-max-width: 1400px;
-$fg-min-width: 810px;
+$fg-max-width: 1280px;
+$fg-min-width: 900px;
 
+// type
 $sans-serif: 'Open Sans', $verdana;
 $body-line-height: golden-ratio(.875em, 1);
-
-$white: rgb(255,255,255);
-$black: rgb(0,0,0);
-$pink: rgb(182,37,104);
 $error-red: rgb(253, 87, 87);
 
-$baseFontColor: #3c3c3c;
-$offBlack: #3c3c3c;
+// colors - new for re-org
 $black: rgb(0,0,0);
 $white: rgb(255,255,255);
-$blue: #5597dd;
+
+$gray: rgb(127,127,127);
+$gray-l1: tint($gray,20%);
+$gray-l2: tint($gray,40%);
+$gray-l3: tint($gray,60%);
+$gray-l4: tint($gray,80%);
+$gray-l5: tint($gray,90%);
+$gray-d1: shade($gray,20%);
+$gray-d2: shade($gray,40%);
+$gray-d3: shade($gray,60%);
+$gray-d4: shade($gray,80%);
+
+$blue: rgb(85, 151, 221);
+$blue-l1: tint($blue,20%);
+$blue-l2: tint($blue,40%);
+$blue-l3: tint($blue,60%);
+$blue-l4: tint($blue,80%);
+$blue-l5: tint($blue,90%);
+$blue-d1: shade($blue,20%);
+$blue-d2: shade($blue,40%);
+$blue-d3: shade($blue,60%);
+$blue-d4: shade($blue,80%);
+
+$pink: rgb(183, 37, 103);
+$pink-l1: tint($pink,20%);
+$pink-l2: tint($pink,40%);
+$pink-l3: tint($pink,60%);
+$pink-l4: tint($pink,80%);
+$pink-l5: tint($pink,90%);
+$pink-d1: shade($pink,20%);
+$pink-d2: shade($pink,40%);
+$pink-d3: shade($pink,60%);
+$pink-d4: shade($pink,80%);
+
+$green: rgb(37, 184, 90);
+$green-l1: tint($green,20%);
+$green-l2: tint($green,40%);
+$green-l3: tint($green,60%);
+$green-l4: tint($green,80%);
+$green-l5: tint($green,90%);
+$green-d1: shade($green,20%);
+$green-d2: shade($green,40%);
+$green-d3: shade($green,60%);
+$green-d4: shade($green,80%);
+
+$yellow: rgb(231, 214, 143);
+$yellow-l1: tint($yellow,20%);
+$yellow-l2: tint($yellow,40%);
+$yellow-l3: tint($yellow,60%);
+$yellow-l4: tint($yellow,80%);
+$yellow-l5: tint($yellow,90%);
+$yellow-d1: shade($yellow,20%);
+$yellow-d2: shade($yellow,40%);
+$yellow-d3: shade($yellow,60%);
+$yellow-d4: shade($yellow,80%);
+
+$shadow: rgba(0,0,0,0.2);
+$shadow-l1: rgba(0,0,0,0.1);
+$shadow-d1: rgba(0,0,0,0.4);
+
+// colors - inherited 
+$baseFontColor: #3c3c3c;
+$offBlack: #3c3c3c;
 $orange: #edbd3c;
 $red: #b20610;
 $green: #108614;
@@ -34,4 +94,4 @@ $brightGreen: rgb(22, 202, 87);
 $disabledGreen: rgb(124, 206, 153);
 $darkGreen: rgb(52, 133, 76);
 $lightBluishGrey: rgb(197, 207, 223);
-$lightBluishGrey2: rgb(213, 220, 228);
+$lightBluishGrey2: rgb(213, 220, 228);

cms/static/sass/base-style.scss

@@ -1,4 +1,5 @@
 @import 'bourbon/bourbon';
+@import 'bourbon/addons/button';
 @import 'vendor/normalize';
 @import 'keyframes';
 
@@ -8,8 +9,10 @@
 @import "fonts";
 @import "variables";
 @import "cms_mixins";
+@import "extends";
 @import "base";
 @import "header";
+@import "footer";
 @import "dashboard";
 @import "courseware";
 @import "subsection";
@@ -26,6 +29,8 @@
 @import "modal";
 @import "alerts";
 @import "login";
+@import "account";
+@import "index";
 @import 'jquery-ui-calendar';
 
 @import 'content-types';