adding some standard sass bits to LMS and bare bones sass for verification

lms/static/sass/base/_mixins.scss

@@ -1,3 +1,6 @@
+// lms - utilities - mixins and extends
+// ====================
+
 // mixins - font sizing
 @mixin font-size($sizeValue: 16){
   font-size: $sizeValue + px;
@@ -44,6 +47,9 @@
 }
 
 
+
+
+
 //-----------------
 //  Theme Mixin Styles
 //-----------------

lms/static/sass/elements/_typography.scss

@@ -0,0 +1,178 @@
+// lms - elements - typography
+// ====================
+
+// Scale - (6, 7, 8, 9, 10, 11, 12, 14, 16, 18, 21, 24, 36, 48, 60, 72)
+
+// headings/titles
+.t-title {
+  font-family: $f-sans-serif;
+}
+
+.t-title1 {
+  @extend .t-title;
+  @include font-size(60);
+  @include line-height(60);
+}
+
+.t-title2 {
+  @extend .t-title;
+  @include font-size(48);
+  @include line-height(48);
+}
+
+.t-title3 {
+  @include font-size(36);
+  @include line-height(36);
+}
+
+.t-title4 {
+  @extend .t-title;
+  @include font-size(24);
+  @include line-height(24);
+}
+
+.t-title5 {
+  @extend .t-title;
+  @include font-size(18);
+  @include line-height(18);
+}
+
+.t-title6 {
+  @extend .t-title;
+  @include font-size(16);
+  @include line-height(16);
+}
+
+.t-title7 {
+  @extend .t-title;
+  @include font-size(14);
+  @include line-height(14);
+}
+
+.t-title8 {
+  @extend .t-title;
+  @include font-size(12);
+  @include line-height(12);
+}
+
+.t-title9 {
+  @extend .t-title;
+  @include font-size(11);
+  @include line-height(11);
+}
+
+// ====================
+
+// copy
+.t-copy {
+  font-family: $f-sans-serif;
+}
+
+.t-copy-base {
+  @extend .t-copy;
+  @include font-size(16);
+  @include line-height(16);
+}
+
+.t-copy-lead1 {
+  @extend .t-copy;
+  @include font-size(18);
+  @include line-height(18);
+}
+
+.t-copy-lead2 {
+  @extend .t-copy;
+  @include font-size(24);
+  @include line-height(24);
+}
+
+.t-copy-sub1 {
+  @extend .t-copy;
+  @include font-size(14);
+  @include line-height(14);
+}
+
+.t-copy-sub2 {
+  @extend .t-copy;
+  @include font-size(12);
+  @include line-height(12);
+}
+
+// ====================
+
+// actions/labels
+.t-action1 {
+  @include font-size(18);
+  @include line-height(18);
+}
+
+.t-action2 {
+  @include font-size(16);
+  @include line-height(16);
+}
+
+.t-action3 {
+  @include font-size(14);
+  @include line-height(14);
+}
+
+.t-action4 {
+  @include font-size(12);
+  @include line-height(12);
+}
+
+
+// ====================
+
+// code
+.t-code {
+  font-family: $f-monospace;
+}
+
+// ====================
+
+// icons
+.t-icon1 {
+  @include font-size(48);
+  @include line-height(48);
+}
+
+.t-icon2 {
+  @include font-size(36);
+  @include line-height(36);
+}
+
+.t-icon3 {
+  @include font-size(24);
+  @include line-height(24);
+}
+
+.t-icon4 {
+  @include font-size(18);
+  @include line-height(18);
+}
+
+.t-icon5 {
+  @include font-size(16);
+  @include line-height(16);
+}
+
+.t-icon6 {
+  @include font-size(14);
+  @include line-height(14);
+}
+
+.t-icon7 {
+  @include font-size(12);
+  @include line-height(12);
+}
+
+.t-icon8 {
+  @include font-size(11);
+  @include line-height(11);
+}
+
+.t-icon9 {
+  @include font-size(10);
+  @include line-height(10);
+}

lms/static/sass/views/_verification.scss

@@ -0,0 +1,28 @@
+// lms - views - verification flow
+// ====================
+
+body.register.verification {
+
+  .page-header {
+    @extend .t-title3;
+
+
+
+    .title {
+
+    }
+  }
+
+  .progress {
+
+  }
+
+  .block-photo {
+
+
+  }
+
+
+
+
+}

lms/templates/verify_student/face_upload.html

@@ -1,6 +1,14 @@
 <%! from django.utils.translation import ugettext as _ %>
 <%! from django.core.urlresolvers import reverse %>
 <%inherit file="../main.html" />
+<%block name="bodyclass">register verification</%block>
+
+<%block name="js_extra">
+  <script type="text/javascript">
+
+  </script>
+</%block>
+
 
 <%block name="content">
 <div class="container">
@@ -12,19 +20,19 @@
   <section class="progress">
   <h3 class="sr">Your Progress</h3>
   <ol>
-    <li class="progress-step1"><span class="current">Current: </span>Step 1 Take Your Photo</li>
-    <li class="progress-step2">Step 2 ID Photo</li>
-    <li class="progress-step3">Step 3 Review</li>
-    <li class="progress-step4">Step 4 Payment</li>
-    <li class="progress-step5">Finished Confirmation</li>
+    <li class="progress-step" id="progress-step1"><span class="current">Current: </span>Step 1 Take Your Photo</li>
+    <li class="progress-step" id="progress-step2">Step 2 ID Photo</li>
+    <li class="progress-step" id="progress-step3">Step 3 Review</li>
+    <li class="progress-step" id="progress-step4">Step 4 Payment</li>
+    <li class="progress-step" id="progress-step5">Finished Confirmation</li>
   </ol>
   </section>
 
 
 
   <section id="wrapper">
-    <div id="wrapper-facephoto">
-      <h3>Take Your Photo</h3>
+    <div id="wrapper-facephoto block-photo">
+      <h3 class="title">Take Your Photo</h3>
       <p>Use your webcam to take a picture of your face so we can match it with the picture on your ID.</p>
 
       <div id="facecam">
@@ -97,8 +105,8 @@
 
 
 
-    <div id="wrapper-idphoto">
-      <h3>Take Your Photo</h3>
+    <div id="wrapper-idphoto block-photo">
+      <h3 class="title">Take Your Photo</h3>
       <p>Use your webcam to take a picture of your face so we can match it with the picture on your ID.</p>
 
       <div id="idcam">
@@ -153,40 +161,14 @@
 
 
 
-    <div id="wrapper-review">
-      <h3>Verify Your Submission</h3>
+    <div id="wrapper-review block-photo">
+      <h3 class="title">Verify Your Submission</h3>
       <p>Make sure we can verify your identity with the photos and information below.</p>
 
       <div class="review-name">
         <h3>Check Your Name</h3>
         <p>Make sure your full name on your edX account, [User Name], matches your ID. We will also use this as the name on your certificate.</p>
         <p><a href="#">Edit my name</a></p>
-
-        <section id="edit-name" class="modal">
-        <header>
-          <h4>${_("Edit Your Full Name")}</h4>
-        </header>
-          <form id="course-checklists" class="course-checklists" method="post" action="">
-            <div role="alert" class="status message submission-error" tabindex="-1">
-              <p class="message-title">${_("The following error occured while editing your name:")}
-                <span class="message-copy"> </span>
-              </p>
-            </div>
-            <p>
-              <label for="name">${_('Full Name')}</label>
-              <input id="name" type="text" name="name" value="" placeholder="${_('example: Jane Doe')}" required aria-required="true" />
-            </p>
-
-            <div class="actions">
-              <button class="action action-primary" type="submit">${_("Save")}</button>
-              <button class="action action-secondary action-cancel">${_("Cancel")}</button>
-            </div>
-          </form>
-          <a href="#" rel="view" class="action action-close action-editname-close">
-            <i class="icon-remove-sign"></i>
-            <span class="label">close</span>
-          </a>
-        </section>
       </div>
 
       <div id="review-facephoto">
@@ -248,4 +230,32 @@
   <!--<a href="${reverse('verify_student/photo_id_upload')}">Upload Photo ID</a>-->
 </div>
 
+
+
+<section id="edit-name" class="modal">
+<header>
+  <h4>${_("Edit Your Full Name")}</h4>
+</header>
+  <form id="course-checklists" class="course-checklists" method="post" action="">
+    <div role="alert" class="status message submission-error" tabindex="-1">
+      <p class="message-title">${_("The following error occured while editing your name:")}
+        <span class="message-copy"> </span>
+      </p>
+    </div>
+    <p>
+      <label for="name">${_('Full Name')}</label>
+      <input id="name" type="text" name="name" value="" placeholder="${_('example: Jane Doe')}" required aria-required="true" />
+    </p>
+
+    <div class="actions">
+      <button class="action action-primary" type="submit">${_("Save")}</button>
+      <button class="action action-secondary action-cancel">${_("Cancel")}</button>
+    </div>
+  </form>
+  <a href="#" rel="view" class="action action-close action-editname-close">
+    <i class="icon-remove-sign"></i>
+    <span class="label">close</span>
+  </a>
+</section>
+
 </%block>