Added more styles includeing the index page more color changes and header styles

cms/static/sass/_base.scss

@@ -8,7 +8,7 @@ $body-line-height: 20px;
 $light-blue: #f0f7fd;
 $dark-blue: #50545c;
 $bright-blue: #3c8ebf;
-$orange: #f96e5b;
+$orange: #ea5155;
 $yellow: #fff8af;
 $cream: #F6EFD4;
 $mit-red: #933;
@@ -41,15 +41,17 @@ input {
 }
 
 button, input[type="submit"], .button {
-  background-color: $orange;
-  border: 0;
+  @include box-shadow(inset 0 0 0 1px lighten($bright-blue, 15%));
+  @include linear-gradient(lighten($bright-blue, 10%), $bright-blue);
+  border-left: 1px solid lighten($dark-blue, 10%);
+  text-shadow: 0 -1px 0 darken($bright-blue, 10%);
   color: #fff;
   font-weight: bold;
   padding: 8px 10px;
   -webkit-font-smoothing: antialiased;
+  @include border-radius(4px);
 
-  &:hover {
-    background-color: shade($orange, 10%);
+  &:hover, &:focus {
   }
 }
 

cms/static/sass/_content-types.scss

@@ -53,3 +53,8 @@
   @extend .content-type;
   background-image: url('../img/content-types/chapter.png');
 }
+
+.module a:first-child {
+  @extend .content-type;
+  background-image: url('/static/img/content-types/module.png');
+}

cms/static/sass/_index.scss

+body.index {
+  > header {
+    display: none;
+  }
+
+  > 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;
+  }
+
+  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);
+
+    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;
+
+      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;
+      }
+    }
+
+    ol {
+      list-style: none;
+      margin: 0;
+      padding: 0;
+
+      li {
+        border-bottom: 1px solid lighten($dark-blue, 50%);
+
+        a {
+          display: block;
+          padding: 10px 20px;
+
+          &:hover {
+            color: $dark-blue;
+            background: lighten($yellow, 10%);
+            text-shadow: 0 1px 0 #fff;
+          }
+        }
+
+        &:last-child {
+          border-bottom: none;
+        }
+      }
+    }
+  }
+}

cms/static/sass/_keyframes.scss

+@mixin bounce-in {
+  0% {
+    opacity: 0;
+    @include transform(scale(.3));
+  }
+
+  50% {
+    opacity: 1;
+    @include transform(scale(1.05));
+  }
+
+  100% {
+    @include transform(scale(1));
+  }
+}
+
+@-moz-keyframes bounce-in { @include bounce-in(); }
+@-webkit-keyframes bounce-in { @include bounce-in(); }
+@-o-keyframes bounce-in { @include bounce-in(); }
+@keyframes bounce-in { @include bounce-in();}
+
+@mixin bounce-in-animation($duration, $timing: ease-in-out) {
+  @include animation-name(bounce-in);
+  @include animation-duration($duration);
+  @include animation-timing-function($timing);
+  @include animation-fill-mode(both);
+}

cms/static/sass/_layout.scss

@@ -20,7 +20,7 @@ body {
     color: #fff;
     display: block;
     float: none;
-    padding: 0 25px;
+    padding: 0 20px;
     text-shadow: 0 -1px 0 darken($dark-blue, 15%);
     width: 100%;
 
@@ -117,7 +117,7 @@ body {
       @include box-sizing(border-box);
       width: flex-grid(9) + flex-gutter();
       float: left;
-      @include box-shadow( -2px 0 0 darken($light-blue, 3%));
+      @include box-shadow( -2px 0 0 lighten($dark-blue, 55%));
       @include transition();
       background: #FFF;
     }

cms/static/sass/_section.scss

 section#unit-wrapper {
   section.filters {
     @include clearfix;
+    display: none;
     opacity: .4;
     margin-bottom: 10px;
     @include transition;
@@ -52,6 +53,8 @@ section#unit-wrapper {
     display: table;
     border: 1px solid lighten($dark-blue, 40%);
     width: 100%;
+    @include border-radius(3px);
+    @include box-shadow(0 0 4px lighten($dark-blue, 50%));
 
     section {
       header {

cms/static/sass/_unit.scss

 section#unit-wrapper {
   > header {
-    border-bottom: 2px solid $dark-blue;
+    border-bottom: 1px solid lighten($dark-blue, 50%);
+    @include linear-gradient(#fff, lighten($dark-blue, 62%));
     @include clearfix();
-    @include box-shadow( 0 2px 0 darken($light-blue, 3%));
-    padding: 6px 20px;
+    @include box-shadow( 0 2px 0 $light-blue, inset 0 -1px 0 #fff);
+    text-shadow: 0 1px 0 #fff;
 
     section {
       float: left;
+      padding: 10px 20px;
 
       h1 {
-        font-size: 16px;
-        text-transform: uppercase;
-        letter-spacing: 1px;
+        font-size: 18px;
         @include inline-block();
-        color: $bright-blue;
+        color: $dark-blue;
         margin: 0;
       }
 
@@ -22,21 +22,21 @@ section#unit-wrapper {
         margin: 0;
 
         a {
-          text-indent: -9999px;
           @include inline-block();
-          width: 1px;
-          height: 100%;
+          font-size: 12px;
        }
       }
     }
 
     div {
-      float: right;
+      @include clearfix;
       color: #666;
+      float: right;
+      padding: 0 20px;
 
       a {
-        display: block;
         @include inline-block;
+        padding: 13px 20px;
 
         &.cancel {
           margin-right: 20px;
@@ -45,9 +45,32 @@ section#unit-wrapper {
         }
 
         &.save-update {
-         @extend .button;
-         margin: -6px -21px -6px 0;
-       }
+          border-left: 1px solid lighten($dark-blue, 40%);
+          border-right: 1px solid lighten($dark-blue, 40%);
+          // @include box-shadow(inset 0 0 0 1px lighten($bright-blue, 15%));
+          color: $bright-blue;
+          @include linear-gradient(lighten($dark-blue, 50%), lighten($bright-blue, 55%));
+
+          // &:hover, &:focus {
+          //   color: $yellow;
+          //   @include linear-gradient($bright-blue, darken($bright-blue, 10%));
+          //   @include box-shadow(inset 0 0 3px 1px lighten($bright-blue, 10%));
+          // }
+        }
+        // &.save-update {
+        //   border-left: 1px solid lighten($dark-blue, 10%);
+        //   border-right: 1px solid lighten($dark-blue, 10%);
+        //   @include box-shadow(inset 0 0 0 1px lighten($bright-blue, 15%));
+        //   color: #fff;
+        //   @include linear-gradient(lighten($bright-blue, 10%), $bright-blue);
+        //   text-shadow: 0 -1px 0 darken($bright-blue, 10%);
+
+        //   &:hover, &:focus {
+        //     color: $yellow;
+        //     @include linear-gradient($bright-blue, darken($bright-blue, 10%));
+        //     @include box-shadow(inset 0 0 3px 1px lighten($bright-blue, 10%));
+        //   }
+        // }
       }
     }
   }

cms/static/sass/base-style.scss

 @import 'bourbon/bourbon';
 @import 'vendor/normalize';
+@import 'keyframes';
 
 @import 'base', 'layout', 'content-types';
 @import 'calendar';
-@import 'section', 'unit';
+@import 'section', 'unit', 'index';
 
 @import 'module/module-styles.scss';

cms/templates/base.html

@@ -15,7 +15,7 @@
     <meta name="path_prefix" content="${MITX_ROOT_URL}">
   </head>
 
-  <body>
+  <body class="<%block name='bodyclass'></%block>">
 
     <%include file="widgets/header.html"/>
     <%include file="courseware_vendor_js.html"/>

cms/templates/course_index.html

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

cms/templates/index.html

 <%inherit file="base.html" />
+<%block name="bodyclass">index</%block>
 <%block name="title">Courses</%block>
 
 <%block name="content">
+<h1>edX Course Management</h1>
+
 <section class="main-container">
+  <header>
+    <h1>Courses</h1>
+    <a href="#" class="wip">+</a>
+  </header>
+
   <ol>
     %for course, url in courses:
     <li><a href="${url}">${course}</a></li>