Navigation bar in projects list

app/partials/home/home-logged-in.jade

@@ -3,8 +3,9 @@ div.profile.centered
     include ../includes/modules/profile/profile-bar
     div.main
         div.hero
+        include ../includes/modules/profile/profile-content-tabs
         div.content-wrapper
-            div.content
+            section.content
-            div.sidebar Sidebar
+            section.sidebar Sidebar
 
 

app/partials/includes/modules/profile/profile-bar.jade

@@ -1,4 +1,4 @@
-div.profile-bar
+section.profile-bar
     img.profile-img(src="http://i.imgur.com/gPiHzHN.jpg", alt="{{ user.nickname }}")
     a.button-green
         span Follow

app/partials/includes/modules/profile/profile-content-tabs.jade

@@ -0,0 +1,13 @@
+nav.profile-content-tabs
+    a.tab.active(href="", title="Activity Tab")
+        span.icon.icon-plus
+        span activity
+    a.tab(href="", title="Projects Tab")
+        span.icon.icon-plus
+        span projects
+    a.tab(href="", title="Contacts Tab")
+        span.icon.icon-plus
+        span contacts
+    a.tab(href="", title="Favorites Tab")
+        span.icon.icon-plus
+        span favorites

app/styles/layout/profile.scss

@@ -7,26 +7,27 @@
         width: 200px;
     }
     .main {
-        background: #00f;
         display: flex;
-        flex: 4;
+        flex: 1;
         flex-direction: column;
         padding: 0;
     }
+    .hero {
+        background: lighten($whitish, 10%);
+        margin-bottom: .3rem;
+        min-height: 200px;
+    }
     .content-wrapper {
         display: flex;
         min-height: 100vh;
     }
-    .hero {
-        background: #0ff;
-        min-height: 10vh;
-    }
     .content {
-        background: #5dcd42;
+        background: lighten($whitish, 10%);
-        flex: 4;
+        flex: 1;
+        margin-right: 1rem;
     }
     .sidebar {
         background: #121212;
-        flex: .5;
+        width: 150px;
     }
 }

app/styles/modules/profile/profile-bar.scss

@@ -0,0 +1,92 @@
+.profile-bar {
+    .profile-img {
+        max-width: 100%;
+    }
+    .button-green {
+        display: block;
+        margin-bottom: 1rem;
+    }
+    h1,
+    h2 {
+        @extend %bold;
+        @extend %small;
+        line-height: 1;
+        margin-bottom: .5rem;
+    }
+    h1 {
+        @extend %xlarge;
+        text-transform: none;
+    }
+    h2 {
+        @extend %large;
+        color: $gray-light;
+    }
+    .location {
+        color: $gray-light;
+        margin-bottom: 1rem;
+    }
+    .profile-stats {
+        background: $whitish;
+        border-radius: 5px;
+        display: flex;
+        justify-content: space-between;
+        margin-bottom: 1rem;
+        padding: 1rem;
+        .stat {
+            padding: 0 .2rem;
+            text-align: center;
+        }
+        .stat-number {
+            @extend %xlarge;
+            @extend %title;
+            display: block;
+            margin-bottom: .3rem;
+        }
+        .stat-name {
+            @extend %title;
+            display: block;
+        }
+    }
+    .profile-badges {
+        display: flex;
+        justify-content: space-between;
+        margin-bottom: 1rem;
+        .badge {
+            background: $gray-light;
+            border-radius: 5px;
+            height: 45px;
+            margin-right: .2rem;
+            width: 45px;
+        }
+    }
+
+    .profile-organizations {
+        border-bottom: 1px solid $whitish;
+        border-top: 1px solid $whitish;
+        margin-bottom: 1rem;
+        padding: 1rem 0;
+        h3 {
+            @extend %bold;
+            margin-bottom: .5rem;
+        }
+        .profile-organizations-wrapper {
+            display: flex;
+            justify-content: space-between;
+        }
+        .organization {
+            background: $gray-light;
+            border-radius: 5px;
+            height: 45px;
+            margin-right: .2rem;
+            width: 45px;
+        }
+    }
+
+    .profile-quote {
+        @extend %title;
+        @extend %xlarge;
+        background: url('/images/quote.png') no-repeat top left;
+        line-height: 1.2;
+        padding: .5rem;
+    }
+}

app/styles/modules/profile/profile-content-tabs.scss

@@ -0,0 +1,25 @@
+.profile-content-tabs {
+    border-top: 1px solid $whitish;
+    .tab {
+        background: $white;
+        color: $gray-light;
+        display: inline-block;
+        padding: .3rem 1rem;
+        &:hover,
+        &.active {
+            color: $grayer;
+            .icon {
+                color: $green-taiga;
+            }
+        }
+        &.active {
+            border-left: 1px solid $whitish;
+            border-right: 1px solid $whitish;
+            position: relative;
+            top: 1px;
+        }
+    }
+    .icon {
+        margin-right: .3rem;
+    }
+}