CSS: Cleanup and simplification

Mainly to rely more on bootstrap styling

src/styles/components/_navbar.sass

@@ -1,43 +1,8 @@
 // Navigation.
-.navbar-overlay
-	+media-lg
-		display: block
-	bottom: 0
-	display: none
-	left: 0
-	height: 100%
-	position: absolute
-	right: 0
-	top: 0
-	transition: background-color 350ms ease-in-out
-	width: 100%
-	z-index: 0
-
-	&.is-active
-		background-color: $color-background-nav
-		text-shadow: none
-
-.navbar-brand
-	padding-left: 10px
-	color: $color-text
-	width: 120px // Blender Cloud logo width
-
-	&:hover
-		color: $color-text-dark-primary
-
-
-nav.navbar
-	.navbar-collapse
-		> ul > li > .navbar-item
-			padding: $navbar-nav-link-padding-x
-			height: $nav-link-height
-
 .navbar,
 nav.sidebar
-	align-items: center
-	background-color: $color-background-nav
 	border: none
-	display: flex
+	color: $color-text-dark-secondary
 	padding: 0
 	z-index: $z-index-base + 5 /* Flowplayer seems to take up to 11, project container is 12 */
 
@@ -53,30 +18,26 @@ nav.sidebar
 
 	.navbar-item
 		align-items: center
-		color: $color-text
 		display: flex
 		user-select: none
-		transition: color 150ms ease-in-out, box-shadow 100ms ease-in-out
+		color: inherit
 
 		+media-sm
 			padding-left: 10px
 			padding-right: 10px
 
 		&:hover, &:focus
-			color: $color-primary
+			color: $primary
 			background-color: transparent
-			box-shadow: inset 0 -3px 0 $color-primary
+			box-shadow: inset 0 -3px 0 $primary
 			text-decoration: none
 
 		&:focus
-			box-shadow: inset 0 -3px 0 $color-primary
+			box-shadow: inset 0 -3px 0 $primary
 
 		&.active
-			color: $color-primary
-			box-shadow: inset 0 -3px 0 lighten($color-secondary, 10%)
-
-			&:hover
-				box-shadow: inset 0 -3px 0 lighten($color-secondary, 20%)
+			color: $primary
+			box-shadow: inset 0 -3px 0 $primary
 
 		.pi-angle-down
 			position: relative
@@ -86,11 +47,6 @@ nav.sidebar
 		user-select: none
 		position: relative
 
-		&.nav-item-sign-in
-			i
-				padding-right: 6px
-				font-size: 1.1em
-
 		img.gravatar
 			border-radius: 999em
 			height: 32px
@@ -130,11 +86,6 @@ nav.sidebar
 	.dropdown
 		min-width: 60px // navbar avatar size
 
-		// Removes angle-down icon from bootstrap,
-		// since we use a nicer chevron.
-		a:after
-			display: none
-
 		span.fa-stack
 			position: absolute
 			top: 50%
@@ -176,9 +127,51 @@ nav.sidebar
 							font-size: .9em
 
 
-nav.sidebar
-	ul li.nav-item-sign-in a.navbar-item
-		font-size: .8em
+// Secondary navigation for
+.nav-secondary
+	align-items: center
+	box-shadow: 0 2px 0 0 $color-background
+
+	.nav-link
+		color: $color-text
+		transition: box-shadow 150ms ease-in-out
+
+		&:hover,
+		&.active
+			box-shadow: 0 2px 0 0 $primary
+
+
+.navbar-overlay
+	+media-lg
+		display: block
+	bottom: 0
+	display: none
+	left: 0
+	height: 100%
+	position: absolute
+	right: 0
+	top: 0
+	transition: background-color 350ms ease-in-out
+	width: 100%
+	z-index: 0
+
+	&.is-active
+		background-color: $color-background-nav
+		text-shadow: none
+
+.navbar-brand
+	padding-left: 10px
+	color: inherit
+	width: 120px // Blender Cloud logo width
+
+	&:hover
+		color: $primary
+
+nav.navbar
+	.navbar-collapse
+		> ul > li > .navbar-item
+			padding: $navbar-nav-link-padding-x
+			height: $nav-link-height
 
 
 .navbar-backdrop-container
@@ -206,20 +199,3 @@ nav.sidebar
 
 .navbar+.page-content
 	padding-top: $nav-link-height
-
-// Secondary navigation for
-.nav-secondary
-	align-items: center
-	box-shadow: 0 2px 0 0 $color-background
-
-	.nav-link
-		color: $color-text
-		transition: box-shadow 150ms ease-in-out
-
-		&:hover,
-		&.active
-			box-shadow: 0 2px 0 0 $color-primary
-
-	.nav-title
-		font-weight: bold
-		padding-right: 20px