Main navigation bar

app/styles/dependencies/typography.scss

@@ -23,7 +23,7 @@ h1, h2, h3, h4, h5, h6 {
 /*__Font Sizes__*/
 .small {font-size: .7em;}
 .medium {font-size: 1em;}
-.large {font-size: 1.2;}
+.large {font-size: 1.2em;}
 .xlarge {font-size: 2em;}
 .xxlarge {font-size: 3em;}
 

app/styles/modules/nav.scss

@@ -1,15 +1,15 @@
 .menu {
     width: 90px;
     background-image: url("/images/menu.png");
+    background-attachment: fixed;
     background-position: center bottom;
-    background-repeat: no-repeat;
     flex-wrap: wrap;
-    padding: 3em .3em;
+    padding: 2em .3em;
     font-family: 'ostrichSans';
 }
 
 .logo {
-    margin-bottom: 4em;
+    margin-bottom: 2em;
     img {
         width: 100%;
     }
@@ -17,17 +17,63 @@
 
 .main-nav {
     text-align: center;
-    margin-bottom: 100px;
+    margin-bottom: 3em;
+    list-style: none;
+    padding: 0;
+    position: relative;
     li {
-        margin-bottom: 20px;
+        margin-bottom: 1em;
     }
     a {
         color: $white;
-        @extend .xlarge;
         display: block;
-        span{
+        text-align:center;
+        &:hover {
+            @include transition (color .3s linear);
+            color: $freshTaiga;
+        }
+        span {
             display: block;
-            line-height: 1.2em;
+        }
+        .icon{
+            @extend .xlarge;
+            line-height: 1.1em;
+        }
+        .item {
+            @extend .large;
+        }
+    }
+    .active {
+        @include transition (color .3s linear);
+        color: $freshTaiga;
+    }
+}
+
+.user {
+    width: 80px;
+    padding: 0 10px;
+    position: absolute;
+    bottom: 1em;
+    a {
+        text-align: center;
+        color: $white;
+        @extend .medium;
+    }
+    img{
+        border: 1px solid transparent;
+        &:hover {
+            border: 2px solid $freshTaiga;
+            @include transition (all .6s ease-in-out);
+        }
+    }
+    .settings {
+        text-align: center;
+        a {
+            margin-right: .5em;
+            &:hover {
+                @include transition (color .3s linear);
+                color: $freshTaiga;
+            }
         }
     }
 }

app/views/modules/nav.jade

@@ -6,30 +6,31 @@ nav.menu
     li
       a(href="", title="Search")
         span.icon.icon-search
-        span Search
+        span.item Search
     li
-      a(href="", title="Backlog")
+      a.active(href="", title="Backlog")
         span.icon.icon-backlog
-        span Backlog
+        span.item Backlog
     li
       a(href="", title="Kanban")
         span.icon.icon-kanban
-        span Kanban
+        span.item Kanban
     li
       a(href="", title="Issues")
         span.icon.icon-issues
-        span Issues
+        span.item Issues
     li
       a(href="", title="Wiki")
         span.icon.icon-wiki
-        span Wiki
+        span.item Wiki
     li
       a(href="", title="Video")
         span.icon.icon-video
-        span Video
+        span.item Video
   div.user
     a.avatar(href="", title="User preferences")
-      img(src="http://thecodeplayer.com/u/uifaces/23.jpg", alt="username")
+      img(src="http://thecodeplayer.com/u/uifaces/12.jpg", alt="username")
-    a(href="", title="User preferences") Pilar
+    div.settings
-    a(href="", title="Site preferences")
+      a(href="", title="User preferences") Pilar
-      span.icon.icon-settings
+      a(href="", title="Site preferences")
+        span.icon.icon-settings