From 44a5c6957539227ef5a2e40c6eb2c413cbe492b5 Mon Sep 17 00:00:00 2001
From: Kyle Fiedler <kfiedler@thoughtbot.com>
Date: Thu, 16 Feb 2012 09:55:51 -0500
Subject: [PATCH] Added more style for main navigation

--HG--
branch : templates-ky-new-nav
---
 .DS_Store                | Bin 12292 -> 12292 bytes
 navigation.html          |   1 -
 sass/layout/_header.scss |  88 ++++++++++++++++++++++++++++++++-------
 sass/layout/_layout.scss |   8 ++--
 4 files changed, 77 insertions(+), 20 deletions(-)

diff --git a/.DS_Store b/.DS_Store
index a511c81699e614c17125778724b428fc9f3b0606..6e5576ca7e10e372339d2e21808290a0c9a489b0 100644
GIT binary patch
delta 82
zcmZokXi3;`Sb%Z;<Rb#fIug~@X2zB}3dUvzwK@vb=H>=E3MK}owY8j_9Gn7AI7F57
mY&=2|YijH28zu(|$}=`?E)<-?wwYbx8w*o@-sZnDtik{(m>F;Y

delta 106
zcmZokXi3;`Sb%Zu<Rb#fUSieN2098RwK@vbMy6&!rlF~^MQtr7CkLm%6An=&JsXdZ
p#H#9=+Bya>U}S{Q47^YpMm20M7M#MinN{Kk%jW+wtintT3;?T^7cT$+

diff --git a/navigation.html b/navigation.html
index 3b4b50d314..bba364d18b 100644
--- a/navigation.html
+++ b/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>
diff --git a/sass/layout/_header.scss b/sass/layout/_header.scss
index b1d56fe905..283f8d68ed 100644
--- a/sass/layout/_header.scss
+++ b/sass/layout/_header.scss
@@ -1,6 +1,6 @@
 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,26 +13,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%);
-        color: darken($mit-red, 25%);
-        font-size: 20px;
-        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();
+        color: darken($mit-red, 25%);
+        font-size: 18px;
+        font-weight: 800;
+        line-height: lh();
+        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;
-        padding: 19px lh() 9px 0;
-        line-height: lh();
+        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 {
@@ -72,15 +84,15 @@ div.header-wrapper {
       margin: 0;
       padding: 0;
       text-shadow: 0 -1px 0 darken($mit-red, 10%);
-      max-height: 52px; //fix for firefox
       -webkit-font-smoothing: antialiased;
       background: #501016;
-      margin-top: 10px;
+      margin-top: 5px;
+          border-bottom: 1px solid darken(#501016, 10%);
       @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%));
 
       ul {
         @extend .clearfix;
-        display: inline-block;
         margin: 0;
 
         li {
@@ -91,7 +103,7 @@ div.header-wrapper {
           a {
             color: #fff;
             text-decoration: none;
-            padding: 12px lh() 6px;
+            padding: 10px lh() 8px;
             display: block;
             font-weight: bold;
 
@@ -103,6 +115,52 @@ div.header-wrapper {
           }
         }
       }
+
+      .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;
+        }
+      }
     }
   }
 }
diff --git a/sass/layout/_layout.scss b/sass/layout/_layout.scss
index c0f52ad268..584e1e1fa2 100644
--- a/sass/layout/_layout.scss
+++ b/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);
       }
     }