Added some more style for cal view and nav bar

cms/static/sass/_base.scss

@@ -5,7 +5,7 @@ $body-font-family: "Open Sans", "Lucida Grande", "Lucida Sans Unicode", "Lucida
 $body-font-size: 14px;
 $body-line-height: 20px;
 
-$light-blue: #f0f8fa;
+$light-blue: #f0f7fd;
 $dark-blue: #50545c;
 $bright-blue: #3c8ebf;
 $orange: #f96e5b;
@@ -13,6 +13,14 @@ $yellow: #fff8af;
 $cream: #F6EFD4;
 $mit-red: #933;
 
+@mixin hide-text {
+  background-color: transparent;
+  border:           0;
+  color:            transparent;
+  font:             0/0 a;
+  text-shadow:      none;
+}
+
 // Base html styles
 html {
   height: 100%;
@@ -122,10 +130,10 @@ textarea {
   }
 }
 
-.wip {
-  outline: 1px solid #f00 !important;
-  position: relative;
-}
+// .wip {
+//   outline: 1px solid #f00 !important;
+//   position: relative;
+// }
 
 .hidden {
   display: none;

cms/static/sass/_calendar.scss

@@ -1,13 +1,15 @@
 section.cal {
   @include box-sizing(border-box);
   @include clearfix;
-  padding: 25px;
+  padding: 20px;
 
   > header {
+    display: none;
     @include clearfix;
     margin-bottom: 10px;
     opacity: .4;
     @include transition;
+    text-shadow: 0 1px 0 #fff;
 
     &:hover {
       opacity: 1;
@@ -70,12 +72,15 @@ section.cal {
   ol {
     list-style: none;
     @include clearfix;
-    border-left: 1px solid lighten($dark-blue, 40%);
-    border-top: 1px solid lighten($dark-blue, 40%);
+    border: 1px solid lighten( $dark-blue , 30% );
+    background: #FFF;
     width: 100%;
     @include box-sizing(border-box);
     margin: 0;
     padding: 0;
+    @include box-shadow(0 0 5px lighten($dark-blue, 45%));
+    @include border-radius(3px);
+    overflow: hidden;
 
     > li {
       border-right: 1px solid lighten($dark-blue, 40%);
@@ -84,6 +89,7 @@ section.cal {
       float: left;
       width: flex-grid(3) + ((flex-gutter() * 3) / 4);
       background-color: $light-blue;
+      @include box-shadow(inset 0 0 0 1px lighten($light-blue, 8%));
 
       &:hover {
         li.create-module {
@@ -91,6 +97,10 @@ section.cal {
         }
       }
 
+      &:nth-child(4n) {
+        border-right: 0;
+      }
+
       header {
         border-bottom: 1px solid lighten($dark-blue, 40%);
         @include box-shadow(0 2px 2px $light-blue);
@@ -128,6 +138,7 @@ section.cal {
             color: #888;
             border-bottom: 0;
             font-size: 12px;
+            @include box-shadow(none);
           }
         }
       }
@@ -138,9 +149,11 @@ section.cal {
         padding: 0;
 
         li {
-          border-bottom: 1px solid darken($light-blue, 8%);
-          position: relative;
+          border-bottom: 1px solid darken($light-blue, 6%);
+          // @include box-shadow(0 1px 0 lighten($light-blue, 4%));
           overflow: hidden;
+          position: relative;
+          text-shadow: 0 1px 0 #fff;
 
           &:hover {
             background-color: lighten($yellow, 14%);
@@ -314,16 +327,13 @@ section.cal {
   @include box-sizing(border-box);
   opacity: .4;
   @include transition();
-  background: darken($light-blue, 2%);
 
   &:hover {
     opacity: 1;
     width: flex-grid(5) + flex-gutter();
-    background-color: transparent;
 
     + section.main-content {
       width: flex-grid(7);
-      opacity: .6;
     }
   }
 
@@ -340,6 +350,7 @@ section.cal {
       display: block;
 
       li {
+
         ul {
           display: inline;
         }
@@ -351,6 +362,7 @@ section.cal {
     li {
       @include box-sizing(border-box);
       width: 100%;
+      border-right: 0;
 
       &.create-module {
         display: none;

cms/static/sass/_layout.scss

@@ -2,6 +2,8 @@ body {
   @include clearfix();
   height: 100%;
   font: 14px $body-font-family;
+  background-color: lighten($dark-blue, 62%);
+  background-image: url('/static/img/noise.png');
 
   > section {
     display: table;
@@ -11,28 +13,53 @@ body {
 
   > header {
     background: $dark-blue;
+    @include background-image(url('/static/img/noise.png'), linear-gradient(lighten($dark-blue, 10%), $dark-blue));
+    border-bottom: 1px solid darken($dark-blue, 15%);
+    @include box-shadow(inset 0 -1px 0 lighten($dark-blue, 10%));
+    @include box-sizing(border-box);
     color: #fff;
     display: block;
     float: none;
-    padding: 8px 25px;
+    padding: 0 25px;
+    text-shadow: 0 -1px 0 darken($dark-blue, 15%);
     width: 100%;
-    @include box-sizing(border-box);
-    -webkit-font-smoothing: antialiased;
 
     nav {
       @include clearfix;
 
-      h2 {
-        font-size: 14px;
-        text-transform: uppercase;
+      > a {
+        @include hide-text;
+        background: url('/static/img/menu.png') 0 center no-repeat;
+        border-right: 1px solid darken($dark-blue, 10%);
+        @include box-shadow(1px 0 0 lighten($dark-blue, 10%));
+        display: block;
         float: left;
-        margin: 0 15px 0 0;
+        height: 19px;
+        padding: 8px 10px 8px 0;
+        width: 14px;
+
+        &:hover, &:focus {
+          opacity: .7;
+        }
+      }
+
+      h2 {
+        border-right: 1px solid darken($dark-blue, 10%);
+        @include box-shadow(1px 0 0 lighten($dark-blue, 10%));
+        float: left;
+        font-size: 14px;
+        margin: 0;
+        text-transform: uppercase;
+        -webkit-font-smoothing: antialiased;
 
         a {
           color: #fff;
+          padding: 8px 20px;
+          display: block;
 
           &:hover {
-            color: rgba(#fff, .6);
+            background-color: rgba(darken($dark-blue, 15%), .5);
+            color: $yellow;
           }
         }
       }
@@ -48,21 +75,35 @@ body {
       ul {
         float: left;
         margin: 0;
+        padding: 0;
+        @include clearfix;
 
         &.user-nav {
           float: right;
+          border-left: 1px solid darken($dark-blue, 10%);
         }
 
         li {
-          @include inline-block();
+          border-right: 1px solid darken($dark-blue, 10%);
+          float: left;
+          @include box-shadow(1px 0 0 lighten($dark-blue, 10%));
 
           a {
-            padding: 8px 10px;
+            padding: 8px 20px;
             display: block;
-            margin: -8px 0;
 
             &:hover {
-              background-color: darken($dark-blue, 15%);
+              background-color: rgba(darken($dark-blue, 15%), .5);
+              color: $yellow;
+            }
+
+            &.new-module {
+              &:before {
+                @include inline-block;
+                content: "+";
+                font-weight: bold;
+                margin-right: 10px;
+              }
             }
           }
         }
@@ -78,6 +119,7 @@ body {
       float: left;
       @include box-shadow( -2px 0 0 darken($light-blue, 3%));
       @include transition();
+      background: #FFF;
     }
   }
 }

cms/templates/widgets/header.html

@@ -1,13 +1,14 @@
 <%! from django.core.urlresolvers import reverse %>
 <header>
   <nav>
+    <a href="/">Home</a>
     <h2><a href="/">edX CMS: TODO:-course-name-here</a></h2>
     <ul>
       <li>
-        <a href="#" class="new-module wip">New Module</a>
+        <a href="#" class="new-module wip">Module</a>
       </li>
       <li>
-        <a href="#" class="new-module wip">New Unit</a>
+        <a href="#" class="new-module wip">Unit</a>
       </li>
     </ul>