studio - soft landing/nav: added in functionality/content to soft landing view and started punch list

cms/static/sass/_header.scss

@@ -128,6 +128,7 @@
       .label-prefix {
         display: block;
         @include font-size(11);
+        font-weight: 400;
       }
 
       .ss-icon {
@@ -346,7 +347,7 @@
       display: inline-block;
       vertical-align: middle;
       margin: 0 $baseline 0 0;
-      font-weight: 600;
+      font-weight: 500;
 
       &:last-child {
         margin-right: 0;
@@ -392,6 +393,18 @@
 }
 
 
+// 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 {
 

cms/static/sass/_index.scss

@@ -162,7 +162,7 @@
 
               .ss-icon {
                 @include font-size(18);
-                @include border-radius(2px);
+                @include border-top-radius(3px);
                 display: inline-block;
                 padding: ($baseline/4) ($baseline/2);
                 background: $blue;
@@ -232,18 +232,17 @@
               .title {
                 @include font-size(16);
                 margin: 0 0 ($baseline/4) 0;
-                font-weight: 600;
+                font-weight: 500;
                 color: $gray-d3;
               }
 
               &:hover {
                 @include box-shadow(0 1px ($baseline/10) $shadow-l1);
-                background: $blue;
-                color: $blue-l3;
+                background: $blue-l5;
                 top: -($baseline/5);
 
                 .title, strong {
-                  color: $white;
+                  color: $blue;
                 }
               }
 
@@ -334,4 +333,66 @@
       }
     }
   }
+
+  // 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%;
+        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/templates/edit_subsection.html

@@ -98,6 +98,7 @@
     </div>
   </div>
 </div>
+</div>
 </%block>
 
 <%block name="jsextra">

cms/templates/howitworks.html

@@ -59,7 +59,7 @@
       <li class="feature">
         <figure class="img zoom">
         <a rel="modal" href="#hiw-feature2">
-          <img src="/static/img/thumb-hiw-feature1.png" alt="Studio Keeps Your Learning Sequences and Lectures, Together" />
+          <img src="/static/img/thumb-hiw-feature2.png" alt="Studio Keeps Your Learning Sequences and Lectures, Together" />
           <figcaption class="sr">Studio Keeps Your Learning Sequences and Lectures, Together</figcaption>
           <span class="action-zoom">
             <i class="ss-icon ss-symbolicons-block">&#xE002;</i>
@@ -93,7 +93,7 @@
       <li class="feature">
         <figure class="img zoom">
           <a rel="modal" href="#hiw-feature3">
-            <img src="/static/img/thumb-hiw-feature1.png" alt="Studio Gives You Simple, Fast, and Incremental Publishing. With Friends." />
+            <img src="/static/img/thumb-hiw-feature3.png" alt="Studio Gives You Simple, Fast, and Incremental Publishing. With Friends." />
             <figcaption class="sr">Studio Gives You Simple, Fast, and Incremental Publishing. With Friends.</figcaption>
             <span class="action-zoom">
               <i class="ss-icon ss-symbolicons-block">&#xE002;</i>
@@ -144,27 +144,55 @@
   </section>
 </div>
 
-<!-- <div class="content-modal" id="hiw-feature1">
-  <h3>Feature #1</h3>
-  <img src="/static/img/hiw-feature1.png" alt="" />
+<div class="content-modal" id="hiw-feature1">
+  <h3 class="title">Feature #1</h3>
+  <figure>
+    <img src="/static/img/hiw-feature1.png" alt="" />
+    <figcaption class="description">Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</figcaption>
+  </figure>
+
+  <a href="#" rel="view" class="action action-modal-close">
+    <i class="ss-icon ss-symbolicons-block">&#x2421;</i>
+    <span class="label">close modal</span>
+  </a>
 </div>
 
 <div class="content-modal" id="hiw-feature2">
-  <h3>Feature #2</h3>
-  <img src="/static/img/hiw-feature1.png" alt="" />
+  <h3 class="title">Feature #2</h3>
+  <figure>
+    <img src="/static/img/hiw-feature2.png" alt="" />
+    <figcaption class="description">Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</figcaption>
+  </figure>
+
+  <a href="#" rel="view" class="action action-modal-close">
+    <i class="ss-icon ss-symbolicons-block">&#x2421;</i>
+    <span class="label">close modal</span>
+  </a>
 </div>
 
 <div class="content-modal" id="hiw-feature3">
-  <h3>Feature #3</h3>
-  <img src="/static/img/hiw-feature1.png" alt="" />
-</div> -->
+  <h3 class="title">Feature #3</h3>
+  <figure>
+    <img src="/static/img/hiw-feature3.png" alt="" />
+    <figcaption class="description">Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</figcaption>
+  </figure>
+
+  <a href="#" rel="view" class="action action-modal-close">
+    <i class="ss-icon ss-symbolicons-block">&#x2421;</i>
+    <span class="label">close modal</span>
+  </a>
+</div>
 </%block>
 
 <%block name="jsextra">
   <script type="text/javascript">
     (function() {
 
-      $("a[rel*=modal]").leanModal({closeButton: ".modal_close"});
+      // lean modal window
+      $('a[rel*=modal]').leanModal({overlay : 0.50, closeButton: '.action-modal-close' });
+      $('a.action-modal-close').click(function(e){
+        (e).preventDefault();
+      });
 
     })(this)
   </script>

cms/templates/widgets/header.html

@@ -78,6 +78,7 @@
 
           <div class="nav-sub">
             <ul>
+              <li class="nav-item"><a href="#">My Courses</a></li>
               <li class="nav-item"><a href="#">Help</a></li>
               <li class="nav-item"><a class="action action-logout" href="${reverse('logout')}">Logout</a></li>
             </ul>
@@ -89,8 +90,8 @@
     <nav class="nav-not-signedin">
       <h2 class="sr">You're not currently signed in</h2>
       <ol>
-        <li class="nav-item nav-not-signedin-how">
-          <a href="">How Studio Works</a>
+        <li class="nav-item nav-not-signedin-hiw">
+          <a href="#">How Studio Works</a>
         </li>
         <li class="nav-item nav-not-signedin-help">
           <a href="#">Studio Help</a>

common/static/sass/_mixins.scss

@@ -8,7 +8,7 @@
   font-size: ($sizeValue/10) + rem;
 }
 
-// Line-height
+// line-height
 @function lh($amount: 1) {
   @return $body-line-height * $amount;
 }