studio - header UI: in progress markup changes WIP

cms/static/sass/_base.scss

@@ -50,6 +50,40 @@ h1 {
 // ====================
 
 // layout - basic
+.wrapper-mast {
+  margin: 0;
+  padding: 0 $baseline;
+  position: relative;
+  
+  .mast {
+      @include clearfix();
+      @include font-size(16);
+      position: relative;
+      max-width: $fg-max-width;
+      min-width: $fg-min-width;
+      width: flex-grid(12);
+      margin: 0 auto $baseline auto;
+      border-bottom: 1px solid $gray-l4;
+      padding-bottom: ($baseline/2);
+      color: $gray-d2;
+
+      .title-sub {
+        @include font-size(14);
+        display: block;
+        margin: 0;
+        color: $gray-l2;
+      }
+
+      .title, .title-1 {
+        @include font-size(32);
+        margin: 0;
+        padding: 0;
+        font-weight: 600;
+        color: $gray-d3;
+      }
+    }
+}
+
 .wrapper-content {
   margin: 0;
   padding: 0 $baseline;

cms/templates/settings.html

@@ -41,12 +41,15 @@ from contentstore import utils
 </%block>
 
 <%block name="content">
+<div class="wrapper-mast wrapper">
+  <header class="mast">
+    <span class="title-sub">Settings</span>
+    <h1 class="title-1">Schedule &amp; Details</h1>
+  </header>
+</div>
+
 <div class="wrapper-content wrapper">
   <section class="content">
-    <header class="page">
-      <span class="title-sub">Settings</span>
-      <h1 class="title-1">Schedule &amp; Details</h1>
-    </header>
 
     <!-- <div class="introduction">
       <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p>

cms/templates/settings_graders.html

@@ -39,12 +39,15 @@ from contentstore import utils
 </%block>
 
 <%block name="content">
+<div class="wrapper-mast wrapper">
+  <header class="mast">
+    <span class="title-sub">Settings</span>
+    <h1 class="title-1">Grading</h1>
+  </header>
+</div>
+
 <div class="wrapper-content wrapper">
   <section class="content">
-    <header class="page">
-      <span class="title-sub">Settings</span>
-      <h1 class="title-1">Grading</h1>
-    </header>
 
     <!-- <div class="introduction">
       <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p>

cms/templates/unit.html

@@ -24,6 +24,51 @@
 
 </%block>
 <%block name="content">
+<div class="wrapper-mast wrapper">
+  <header class="mast">
+    <nav class="nav-hierarchy">
+      <ul>
+        <li class="nav-item">
+          <a href="#">Section Name</a>
+        </li>
+        <li class="nav-item">
+          <a href="#">Subsection Name</a>
+        </li>
+      </ul>
+    </nav>
+
+    <h1 class="title-1">Unit Name</h1>
+
+    <nav class="nav-actions">
+      <ul>
+        <li class="nav-item">
+          <a href="#">Preview Unit</a>
+        </li>
+        <li class="nav-item">
+          <a href="#">View Live</a>
+        </li>
+        <li class="nav-item">
+          <a href="#">Edit as Draft</a>
+        </li>
+      </ul>
+    </nav>
+
+    <div class="metadata status-unit">
+      <div class="status-visibility">
+        
+      </div>
+
+      <div class="status-release">
+        
+      </div>
+
+      <div class="status-url">
+        
+      </div>
+    </div>    
+  </header>
+</div>
+
   <div class="main-wrapper edit-state-${unit_state}" data-id="${unit_location}">
     <div class="inner-wrapper">
       <div class="alert editing-draft-alert">