merged new navigation branch

navigation.html

@@ -7,7 +7,6 @@
     </hgroup>
 
     <nav class="${active_page}">
-
       <ul class="coursenav">
         <li class="courseware"><a href="/courseware">Courseware</a></li>
         <li class="info"><a href="/info">Course Info</a></li>

sass/layout/_header.scss

 div.header-wrapper {
-  // @include linear-gradient(lighten($mit-red, 5%), darken($mit-red, 5%));
-  @include box-shadow(inset 0 -1px 2px darken($mit-red, 10%));
+ @include box-shadow(inset 0 -4px 6px darken($mit-red, 5%));
   background: $mit-red;
   border-bottom: 1px solid #fff;
 
@@ -13,25 +12,38 @@ div.header-wrapper {
     hgroup {
       @extend .clearfix;
       float: left;
+      padding-top: 13px;
+      min-width: flex-grid(3);
 
       h1 {
-        border-right: 1px solid darken($mit-red, 5%);
+        @include inline-block();
         color: darken($mit-red, 25%);
-        font-size: 20px;
+        font-size: 18px;
         font-weight: 800;
-        margin: 0 lh() 0 0;
-        padding: 17px lh() 14px 0;
-        text-shadow: 0 1px 0 lighten($mit-red, 10%);
         line-height: lh();
-        @include inline-block();
+        margin: 0;
+        padding: 0 lh(.5) 0 0;
+        text-shadow: 0 1px 0 lighten($mit-red, 10%);
+
+        &:after {
+          color: darken($mit-red, 10%);
+          content: "•";
+          display: inline-block;
+          font-size: 10px;
+          letter-spacing: -2px;
+          padding-left: lh(.5);
+          text-shadow: 0;
+        }
       }
 
       h2 {
         @include inline-block();
-        margin: 0 lh() 0 0;
-        padding: 19px lh() 9px 0;
-        line-height: lh();
-        border-right: 1px solid darken($mit-red, 5%);
+        margin: 0;
+        font-size: 16px;
+        padding: 0 lh() 0px 0;
+        text-transform: none;
+        letter-spacing: 0;
+        text-shadow: 0 -1px 0 darken($mit-red, 10%);
         -webkit-font-smoothing: antialiased;
 
         a {
@@ -44,61 +56,123 @@ div.header-wrapper {
         }
       }
 
-      @media screen and (max-width: 920px) {
-        border-bottom: 1px solid darken($mit-red, 5%);
+
+      @media screen and (max-width: 900px) {
         display: block;
         float: none;
 
         h1 {
-          float: right;
+          float: left;
           border: 0;
-          margin-right: 0;
-          padding-right: 0;
         }
 
         h2 {
           float: left;
           border: 0;
           margin-right: 0;
-          padding-right: 0;
         }
       }
     }
 
     nav {
-      float: left;
+      -webkit-font-smoothing: antialiased;
+      @include border-radius(3px 3px 0 0);
+      @include box-shadow(inset 0 0 0 1px darken(#501016, 5%), inset 0 2px 0 lighten(#501016, 5%));
+      background: #501016;
+      border-bottom: 1px solid darken(#501016, 10%);
       display: block;
-      margin: 0;
+      float: left;
+      margin: 5px 0 0;
       padding: 0;
       text-shadow: 0 -1px 0 darken($mit-red, 10%);
-      max-height: 52px; //fix for firefox
-      -webkit-font-smoothing: antialiased;
-
 
       ul {
         @extend .clearfix;
-        display: inline-block;
-        padding: 19px 0 9px;
         margin: 0;
 
         li {
-          margin-right: lh();
-          display: inline-block;
-          margin-bottom: 0;
           line-height: lh();
+          margin-bottom: 0;
+          float: left;
 
           a {
             color: #fff;
             text-decoration: none;
+            padding: 10px lh() 8px;
+            display: block;
+            font-weight: bold;
+
+            @media screen and (max-width: 1020px) {
+              padding: 10px lh(.7) 8px;
+            }
 
             &:hover {
               color: rgba(#fff, .7);
               background-color: none;
-              text-decoration: none;
             }
           }
         }
       }
+
+      @media screen and (max-width: 900px) {
+        width: 100%;
+        float: none;
+
+        ul {
+          li {
+            padding: auto;
+            display: table-cell;
+            width: 16.6666666667%;
+            text-align: center;
+          }
+        }
+      }
+
+      .active {
+        background: #F4F4F4;
+        color: #333;
+        text-shadow: 0 1px 0 #fff;
+        border: 1px solid darken(#501016, 10%);
+        border-bottom: 0;
+        @include box-shadow(0 2px 0 #f4f4f4, inset 0 1px 0 #fff);
+        @include border-radius(3px 3px 0 0);
+      }
+
+      &.courseware {
+        li.courseware a {
+          @extend .active;
+        }
+      }
+
+      &.book {
+        li.book a {
+          @extend .active;
+        }
+      }
+
+      &.info {
+        li.info a {
+          @extend .active;
+        }
+      }
+
+      &.discussion {
+        li.discussion a {
+          @extend .active;
+        }
+      }
+
+      &.wiki {
+        li.wiki a {
+          @extend .active;
+        }
+      }
+
+      &.profile {
+        li.profile a {
+          @extend .active;
+        }
+      }
     }
   }
 }

sass/layout/_layout.scss

@@ -12,15 +12,15 @@ html {
       @extend .clearfix;
       @extend .wrapper;
       @include box-sizing(border-box);
-      @include border-radius(4px);
       overflow: hidden;
       background: #fff;
       border-bottom: 1px solid #bbb;
-
-      @media screen and (min-width: 1400px) {
-        // @include border-radius(3px);
+      margin-top: 3px;
         @include box-shadow(0 0 4px #dfdfdf);
         border: 1px solid #bbb;
+
+      @media screen and (min-width: 1400px) {
+        @include border-radius(4px);
         margin-top: lh(.5);
       }
     }