studio - soft landing UI: initial header and templating work

cms/static/sass/_base.scss

@@ -4,9 +4,13 @@
 //
 // -------------------------------------
 
+html {
+  font-size: 62.5%;
+}
+
 body {
     min-width: 980px;
-    background: $m-gray-l;
+    background: $gray-l5;
     font-size: 16px;
     line-height: 1.6;
     color: $baseFontColor;
@@ -76,11 +80,6 @@ h1 {
     float: right;
 }
 
-footer {
-    clear: both;
-    height: 100px;
-}
-
 input[type="text"],
 input[type="email"],
 input[type="password"],

cms/static/sass/_footer.scss

+// footer
+.wrapper-footer {
+  margin: ($baseline*1.5) 0 $baseline 0;
+  padding: $baseline;
+  position: relative;
+  width: 100%;
+}
+
+footer {
+  @include clearfix();
+  @include font-size(13);
+  width: flex-grid(12);
+  margin: 0 auto;
+  padding-top: $baseline;
+  border-top: 1px solid $gray-l4;
+  color: $gray;
+
+  .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;
+
+      &:last-child {
+        margin-right: 0;
+      }
+    }
+  }
+
+  a {
+    color: $gray;
+
+    &:hover, &:active {
+      color: $blue;
+    }
+  }
+}
\ No newline at end of file

cms/static/sass/_header.scss

@@ -2,7 +2,7 @@
 .wrapper-header {
   margin: 0 0 ($baseline*1.5) 0;
   padding: $baseline;
-  border-bottom: 1px solid tint($m-gray, 50%);
+  border-bottom: 1px solid $gray;
   @include box-shadow(0 1px 5px 0 rgba(0,0,0, 0.1));
   background: $white;
   height: 76px;
@@ -27,7 +27,7 @@
   color: $lightGrey;
 }
 
-.branding, .info-course, .nav-course, .nav-account {
+.branding, .info-course, .nav-course, .nav-account, .nav-unauth, .nav-pitch {
   display: inline-block;
   vertical-align: top;
 }
@@ -47,35 +47,13 @@
     height: 32px;
     background: transparent url('../img/logo-edx-studio.png') 0 0 no-repeat;
   }
-
-  &: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;
-  }
 }
 
 .info-course {
   position: relative;
   max-width: 200px;
   padding-right: 15px;
-  font-size: 14px;
+  @include font-size(14);
 
   &:before {
     @extend .faded-vertical-divider;
@@ -104,7 +82,7 @@
   }
 
   .course-number {
-    font-size: 12px;
+    @include font-size(12);
   }
 
   .course-title {
@@ -112,24 +90,22 @@
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
-    font-size: 16px;
-    font-weight: 600;
+    @include font-size(16);
+    font-weight: 550;
 
   }
 }
 
+// course info
 .nav-course {
-  width: 275px;
+  width: 335px;
   margin-top: -($baseline/4);
-  font-size: 14px;
-
-  ol {
-    @include clearfix();
-  }
+  @include font-size(14);
 
-  .nav-item {
+  > ol > .nav-item {
     display: inline-block;
     vertical-align: bottom;
+    width: 100px;
     margin: 0 ($baseline/2) 0 0;
 
     &:last-child {
@@ -140,6 +116,7 @@
       display: block;
       padding: 5px;
       text-transform: uppercase;
+      font-weight: 550;
 
       &:hover, &:active {
         color: $blue;
@@ -147,7 +124,7 @@
 
       .label-prefix {
         display: block;
-        font-size: 11px;
+        @include font-size(11);
       }
 
       .ss-icon {
@@ -179,13 +156,14 @@
   }
 }
 
+// account-based nav
 .nav-account {
   float: right;
   max-width: 300px;
   min-width: 175px;
   width: 20%;
   margin-top: 10px;
-  font-size: 14px;
+  @include font-size(14);
   text-align: right;
 
   .nav-account-username {
@@ -193,7 +171,7 @@
       display: inline-block;
       vertical-align: middle;
       margin-right: 3px;
-      font-size: 12px;
+      @include font-size(12);
     }
 
     .account-username {
@@ -218,16 +196,16 @@
     position: absolute;
     top: 30px;
     width: 125px;
-    border: 1px solid tint($m-gray, 50%);
+    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 tint($m-gray, 75%);
+      border-bottom: 1px solid $gray-l5;
       padding: 0 0($baseline/4) 0;
-      font-size: 13px;
+      @include font-size(13);
 
       &:last-child {
         margin-bottom: 0;
@@ -323,6 +301,86 @@
   }
 }
 
+// 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: 550;
+
+      &:last-child {
+        margin-right: 0;
+      }
+
+      .action {
+        margin-top: -($baseline/4);
+        display: inline-block;
+        padding: ($baseline/4) ($baseline/2);
+        font-weight: 550;
+      }
+    }
+
+    // specific items
+    .nav-not-signedin-help {
+
+    }
+
+    .nav-not-signedin-signup {
+
+      .action-signup {
+        @include blue-button;
+        @include transition(all .15s);
+      }
+    }
+
+    .nav-not-signedin-signin {
+
+      .action-signin {
+        @include white-button;
+        @include transition(all .15s);
+      }
+    }
+  }
+}
+
+
 // js enabled 
 .js {
 

cms/static/sass/_variables.scss

 $baseline: 20px;
 
+// grid
 $gw-column: 80px;
 $gw-gutter: 20px;
-
 $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: 980px;
 
+// type
 $sans-serif: 'Open Sans', $verdana;
 $body-line-height: golden-ratio(.875em, 1);
+$error-red: rgb(253, 87, 87);
 
-$white: rgb(255,255,255);
+// colors - new for re-org
 $black: rgb(0,0,0);
-$pink: rgb(182,37,104);
-$error-red: rgb(253, 87, 87);
+$white: rgb(255,255,255);
+
+$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;
-$black: rgb(0,0,0);
-$white: rgb(255,255,255);
-$blue: #5597dd;
 $orange: #edbd3c;
 $red: #b20610;
 $green: #108614;
@@ -36,8 +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);
\ No newline at end of file
-// new colors - progress for re-org
-$m-gray-l: rgb(247, 247, 247);
-$m-gray: rgb(67,67,67);

cms/static/sass/base-style.scss

 @import 'bourbon/bourbon';
+@import 'bourbon/addons/button';
 @import 'vendor/normalize';
 @import 'keyframes';
 
@@ -11,6 +12,7 @@
 @import "extends";
 @import "base";
 @import "header";
+@import "footer";
 @import "dashboard";
 @import "courseware";
 @import "subsection";

cms/templates/base.html

@@ -5,6 +5,10 @@
   <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <title><%block name="title"></%block></title>
+
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <meta name="path_prefix" content="${MITX_ROOT_URL}">
 
     <%static:css group='base-style'/>
     <link rel="stylesheet" type="text/css" href="${static.url('js/vendor/markitup/skins/simple/style.css')}" />
@@ -12,16 +16,11 @@
     <link rel="stylesheet" type="text/css" href="${static.url('css/vendor/symbolset.ss-symbolicons-block.css')}" />
     <link rel="stylesheet" type="text/css" href="${static.url('css/vendor/symbolset.ss-standard.css')}" />
    
-    <title><%block name="title"></%block></title>
-    <meta name="viewport" content="width=device-width,initial-scale=1">
-
-    <meta name="path_prefix" content="${MITX_ROOT_URL}">
-
     <%block name="header_extras"></%block>
   </head>
 
   <body class="<%block name='bodyclass'></%block> hide-wip">
-    <%include file="widgets/header.html" args="active_tab=active_tab"/>
+    <%include file="widgets/header.html" />
     <%include file="courseware_vendor_js.html"/>
 
     <script type="text/javascript" src="${static.url('js/vendor/json2.js')}"></script>
@@ -47,9 +46,9 @@
     </script>
 
     <%block name="content"></%block>
+    <%include file="widgets/footer.html" />
 
     <%block name="jsextra"></%block>
-
   </body>
 </html>
 

cms/templates/course_index.html

 <%inherit file="base.html" />
 <%block name="title">Course Manager</%block>
+
 <%include file="widgets/header.html"/>
 
 <%block name="content">

cms/templates/course_info.html

@@ -3,7 +3,8 @@
 
 <!-- TODO decode course # from context_course into title -->
 <%block name="title">Course Info</%block>
-<%block name="bodyclass">course-info</%block>
+<%block name="bodyclass">is-signedin course course-info updates</%block>
+
 
 <%block name="jsextra">
   <script type="text/javascript" src="${static.url('js/template_loader.js')}"></script>

cms/templates/edit-static-page.html

 <%inherit file="base.html" />
 <%! from django.core.urlresolvers import reverse %>
 <%block name="title">Edit Static Page</%block>
-<%block name="bodyclass">edit-static-page</%block>
+<%block name="bodyclass">is-signedin course pages edit-static-page</%block>
 
 <%block name="content">
 <div class="main-wrapper">

cms/templates/edit-tabs.html

 <%inherit file="base.html" />
 <%! from django.core.urlresolvers import reverse %>
 <%block name="title">Tabs</%block>
-<%block name="bodyclass">static-pages</%block>
+<%block name="bodyclass">is-signedin course pages static-pages</%block>
 
 <%block name="jsextra">
   <script type='text/javascript'>

cms/templates/edit_subsection.html

@@ -7,8 +7,9 @@
 %>
 
 <%! from django.core.urlresolvers import reverse %>
-<%block name="bodyclass">subsection</%block>
 <%block name="title">CMS Subsection</%block>
+<%block name="bodyclass">is-signedin course subsection</%block>
+
 
 <%namespace name="units" file="widgets/units.html" />
 <%namespace name='static' file='static_content.html'/>

cms/templates/export.html

@@ -3,7 +3,7 @@
 
 <%! from django.core.urlresolvers import reverse %>
 <%block name="title">Export</%block>
-<%block name="bodyclass">export</%block>
+<%block name="bodyclass">is-signedin course export</%block>
 
 <%block name="content">
 <div class="main-wrapper">

cms/templates/import.html

@@ -3,7 +3,7 @@
 
 <%! from django.core.urlresolvers import reverse %>
 <%block name="title">Import</%block>
-<%block name="bodyclass">import</%block>
+<%block name="bodyclass">is-signedin course import</%block>
 
 <%block name="content">
 <div class="main-wrapper">

cms/templates/index.html

 <%inherit file="base.html" />
-<%block name="bodyclass">index</%block>
+<%block name="bodyclass">is-signedin index dashboard</%block>
+
 <%block name="title">Courses</%block>
 
 <%block name="header_extras">

cms/templates/login.html

 <%inherit file="base.html" />
 <%! from django.core.urlresolvers import reverse %>
 <%block name="title">Log in</%block>
-<%block name="bodyclass">no-header</%block>
+<%block name="bodyclass">not-signedin signin</%block>
 
 <%block name="content">
 

cms/templates/manage_users.html

 <%inherit file="base.html" />
 <%block name="title">Course Staff Manager</%block>
-<%block name="bodyclass">users</%block>
+<%block name="bodyclass">is-signedin course users team</%block>
+
 
 <%block name="content">
 <div class="main-wrapper">

cms/templates/overview.html

@@ -7,6 +7,7 @@
 %>
 <%! from django.core.urlresolvers import reverse %>
 <%block name="title">CMS Courseware Overview</%block>
+<%block name="bodyclass">is-signedin course outline</%block>
 
 <%namespace name='static' file='static_content.html'/>
 <%namespace name="units" file="widgets/units.html" />

cms/templates/settings.html

 <%inherit file="base.html" />
-<%block name="bodyclass">settings</%block>
 <%block name="title">Settings</%block>
+<%block name="bodyclass">is-signedin course settings</%block>
+
 
 <%namespace name='static' file='static_content.html'/>
 <%!

cms/templates/signup.html

@@ -2,7 +2,7 @@
 <%! from django.core.urlresolvers import reverse %>
 
 <%block name="title">Sign up</%block>
-<%block name="bodyclass">no-header</%block>
+<%block name="bodyclass">not-signedin signup</%block>
 
 <%block name="content">
 

cms/templates/unit.html

 <%inherit file="base.html" />
 <%! from django.core.urlresolvers import reverse %>
 <%namespace name="units" file="widgets/units.html" />
-<%block name="bodyclass">unit</%block>
 <%block name="title">CMS Unit</%block>
+<%block name="bodyclass">is-signedin course unit</%block>
+
 <%block name="jsextra">
   <script type='text/javascript'>
   $(document).ready(function() {

cms/templates/widgets/footer.html

+<%! from django.core.urlresolvers import reverse %>
+
+<div class="wrapper-footer wrapper">
+  <footer class="main" role="navigation">
+    <div class="colophon">
+      <p>&copy; 2013 <a href="http://www.edx.org" rel="external">edX</a>. All rights reversed.</p>
+    </div>
+    
+    <nav class="nav-peripheral">
+      <ol>
+        <li class="nav-item nav-peripheral-tos">
+          <a href="#">Terms of Service</a>
+        </li>
+        <li class="nav-item nav-peripheral-pp">
+          <a href="#">Privacy Policy</a>
+        </li>
+        <li class="nav-item nav-peripheral-help">
+          <a href="#">edX Studio Help</a>
+        </li>
+        <li class="nav-item nav-peripheral-contact">
+          <a href="#">Contact edX</a>
+        </li>
+        
+        % if user.is_authenticated():
+        <!-- add in zendesk/tender feedback form UI -->
+        % endif
+      </ol>
+    </nav>
+  </footer>
+</div>
\ No newline at end of file

cms/templates/widgets/header.html

@@ -23,10 +23,10 @@
           
           <div class="nav-sub">
             <ul>
-              <li><a href="${reverse('course_index', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}">Outline</a></li>
-              <li><a href="${reverse('course_info', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}">Updates</a></li>
-              <li><a href="${reverse('edit_tabs', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, coursename=ctx_loc.name))}">Pages/Tabs</a></li>
-              <li><a href="${reverse('asset_index', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}">Files &amp; Uploads</a></li>
+              <li class="nav-item"><a href="${reverse('course_index', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}">Outline</a></li>
+              <li class="nav-item"><a href="${reverse('course_info', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}">Updates</a></li>
+              <li class="nav-item"><a href="${reverse('edit_tabs', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, coursename=ctx_loc.name))}">Pages/Tabs</a></li>
+              <li class="nav-item"><a href="${reverse('asset_index', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}">Files &amp; Uploads</a></li>
             </ul>
           </div>
         </li>
@@ -36,10 +36,10 @@
           
           <div class="nav-sub">
             <ul>
-              <li><a href="${reverse('asset_index', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}">Schedule &amp; Details</a></li>
-              <li><a href="${reverse('asset_index', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}">Grading</a></li>
-              <li><a href="${reverse('manage_users', kwargs=dict(location=ctx_loc))}">Course Team</a></li>
-              <li><a href="${reverse('asset_index', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}">Advanced Settings</a></li>
+              <li class="nav-item"><a href="${reverse('asset_index', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}">Schedule &amp; Details</a></li>
+              <li class="nav-item"><a href="${reverse('asset_index', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}">Grading</a></li>
+              <li class="nav-item"><a href="${reverse('manage_users', kwargs=dict(location=ctx_loc))}">Course Team</a></li>
+              <li class="nav-item"><a href="${reverse('asset_index', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}">Advanced Settings</a></li>
             </ul>
           </div>
         </li>
@@ -49,8 +49,8 @@
           
           <div class="nav-sub">
             <ul>
-              <li><a href="${reverse('import_course', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}">Import</a></li>
-              <li><a href="${reverse('export_course', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}">Export</a></li>
+              <li class="nav-item"><a href="${reverse('import_course', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}">Import</a></li>
+              <li class="nav-item"><a href="${reverse('export_course', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}">Export</a></li>
             </ul>
           </div>
         </li>
@@ -58,8 +58,8 @@
     </nav>
     % endif
     
-    % if user.is_authenticated():
-    <nav class="nav-account is-logged-in nav-dropdown">
+    % if user.is_authenticated():    
+    <nav class="nav-account nav-is-signedin nav-dropdown">
       <h2 class="sr">Currently logged in as:</h2>
       <ol>
         <li class="nav-item nav-account-username">
@@ -73,19 +73,28 @@
 
           <div class="nav-sub">
             <ul>
-              <li><a href="#">Help</a></li>
-              <li><a class="action action-logout" href="${reverse('logout')}">Logout</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>
           </div>
         </li>
       </ol>
     </nav>
     % else:
-    <nav class="nav-account nav-dropdown">
-      <h2 class="sr">You're not currently logged in</h2>
+    <nav class="nav-not-signedin">
+      <h2 class="sr">You're not currently signed in</h2>
       <ol>
-        <li>
-          <a class="action action-login" href="${reverse('login')}">Login</a>
+        <li class="nav-item nav-not-signedin-how">
+          <a href="">How Studio Works</a>
+        </li>
+        <li class="nav-item nav-not-signedin-help">
+          <a href="#">Studio Help</a>
+        </li>
+        <li class="nav-item nav-not-signedin-signup">
+          <a class="action action-signup" href="${reverse('signup')}">Sign Up</a>
+        </li>
+        <li class="nav-item nav-not-signedin-signin">
+          <a class="action action-signin" href="${reverse('login')}">Sign In</a>
         </li>
       </ol>
     </nav>

common/static/sass/_mixins.scss

+// font-sizing
 @function em($pxval, $base: 16) {
   @return #{$pxval / $base}em;
 }
 
+@mixin font-size($sizeValue: 1.6){
+  font-size: $sizeValue + px;
+  font-size: ($sizeValue/10) + rem;
+}
+
 // Line-height
 @function lh($amount: 1) {
   @return $body-line-height * $amount;
@@ -26,6 +32,7 @@
   width: 1px;
 }
 
+// vertical and horizontal centering
 @mixin vertically-and-horizontally-centered ( $height, $width ) {
   left: 50%;
   margin-left: -$width / 2;