CSS general cleanup and minor style tweaks

src/styles/_config.sass

@@ -100,7 +100,7 @@ $sidebar-width: 50px !default
 
 /* Project specifics */
 $project_nav-width: 250px !default
-$project-sidebar-width: 50px !default
+$project-sidebar-width: 40px !default
 $project_header-height: 37px !default
 $project_footer-height: 30px !default
 

src/styles/_organizations.sass

@@ -1,17 +1,4 @@
 body.organizations
-	ul#sub-nav-tabs__list
-		align-items: center
-		display: flex
-
-		li.result
-			padding: 10px 20px
-
-	.dashboard-secondary
-		.box
-			+container-box
-			padding: 10px 20px
-			margin: 0
-
 	#item-details
 		.organization
 			label

src/styles/_project-dashboard.sass

@@ -1,22 +1,16 @@
-
 .dashboard-container
 	section#home,
 	section#projects
-		background-color: $color-background
 		border-bottom-left-radius: 3px
 		border-bottom-right-radius: 3px
 
 		nav#sub-nav-tabs.home,
 		nav#sub-nav-tabs.projects
-			background-color: white
 			border-bottom: thin solid $color-background-dark
 
 			li.nav-tabs__list-tab
 				padding: 15px 20px 10px 20px
 
-	section#home
-		background-color: $color-background-dark
-
 	nav.nav-tabs__tab
 		display: none
 		background-color: $color-background-light

src/styles/_project.sass

@@ -40,10 +40,6 @@ body.blog
 	width: 100%
 	left: 0
 
-#project_context-header
-	span#status-bar
-		text-align: left
-
 #project_nav-container
 	+media-lg
 		width: $project_nav-width * 1.33
@@ -62,6 +58,7 @@ body.blog
 #project_sidebar
 	width: $project-sidebar-width
 	z-index: $z-index-base + 6
+	box-shadow: inset -1px 0 0 0 $color-background
 
 	+media-xs
 		width: 100%
@@ -95,30 +92,21 @@ body.blog
 			&:first-child
 				border-top: thin solid transparent
 
-			&:hover
+			&:hover,
-				background-color: $primary
+			&.active
 				cursor: pointer
 
 				a
-					color: $white
+					color: $primary
 
 			a
 				align-items: center
+				color: $color-text
 				display: flex
 				justify-content: center
 				height: $project-sidebar-width
 				width: $project-sidebar-width
 
-			i
-				font-size: 1.1em
-
-			&.active
-				background-color: $primary
-				color: $white
-
-				a
-					color: $white
-
 			&.tabs-thumbnail
 				img
 					height: $project-sidebar-width
@@ -176,13 +164,16 @@ body.blog
 	height: $project_header-height
 	min-height: $project_header-height
 	position: fixed
-	top: $project_header-height
+	top: $project_header-height + 1
 	transition: box-shadow 250ms ease-in-out
 	z-index: $z-index-base + 3
 
 	&.is-offset
 		box-shadow: 0 0 25px rgba(black, .2)
 
+	span#status-bar
+		text-align: left
+
 #project_nav-header
 	left: 0
 	position: absolute
@@ -432,8 +423,8 @@ ul.project_nav-edit-list
 	padding-top: $project_header-height
 
 #node-container
-	flex: 1
 	background-color: white
+	flex: 1
 
 	/* For error messages (403) and other overlaid text*/
 	#node-overlay
@@ -466,8 +457,7 @@ ul.project_nav-edit-list
 	+media-xs
 		margin-top: 0
 
-	border-right: thin solid $color-background
+	// margin-top: $project_header-height //so it's right below the project title.
-	margin-top: $project_header-height //so it's right below the project title.
 	overflow-y: auto // show vertical scrollbars when needed.
 	padding: 0 0 5px 0 // some padding on top/bottom of jstree.
 	position: relative
@@ -816,6 +806,7 @@ section.node-preview-forbidden
 	justify-content: center
 	min-height: 400px
 	position: relative
+	overflow: hidden
 
 	img
 		height: 130%
@@ -1243,8 +1234,6 @@ a.learn-more
 
 
 section.node-children
-	background-color: white
-
 	&.group, &.storage
 		flex: 1
 		padding: 10px 0 25px 20px

src/styles/_utils.sass

@@ -666,3 +666,11 @@
 
 .user-select-none
 	user-select: none
+
+// Bootstrap has .img-fluid, a class to limit the width of an image to 100%.
+// .imgs-fluid below is to be applied on a parent container when we can't add
+// classes to the images themselves. e.g. the blog.
+.imgs-fluid
+	img
+		// Just re-use Bootstrap's mixin here.
+		+img-fluid

src/styles/components/_jumbotron.sass

@@ -2,8 +2,8 @@
 .jumbotron
 	background-size: cover
 	border-radius: 0
-	padding-top: 12em
+	padding-top: 10em
-	padding-bottom: 12em
+	padding-bottom: 10em
 
 	// Black-transparent gradient from left to right to better read the overlay text.
 	&.jumbotron-overlay

src/styles/components/_navbar.sass

@@ -1,4 +1,8 @@
 // Navigation.
+
+.navbar
+	box-shadow: inset 0 -2px  $color-background
+
 .navbar,
 nav.sidebar
 	border: none
@@ -39,10 +43,6 @@ nav.sidebar
 			color: $primary
 			box-shadow: inset 0 -3px 0 $primary
 
-		.pi-angle-down
-			position: relative
-			left: 5px
-
 	li
 		user-select: none
 		position: relative
@@ -130,15 +130,16 @@ nav.sidebar
 // Secondary navigation for
 .nav-secondary
 	align-items: center
-	box-shadow: 0 2px 0 0 $color-background
+	box-shadow: inset 0 -2px 0 0 $color-background
 
 	.nav-link
 		color: $color-text
+		cursor: pointer
 		transition: box-shadow 150ms ease-in-out
 
 		&:hover,
 		&.active
-			box-shadow: 0 2px 0 0 $primary
+			box-shadow: inset 0 -2px 0 0 $primary
 
 
 .navbar-overlay
@@ -160,9 +161,8 @@ nav.sidebar
 		text-shadow: none
 
 .navbar-brand
-	padding-left: 10px
 	color: inherit
-	width: 120px // Blender Cloud logo width
+	padding-left: 4px
 
 	&:hover
 		color: $primary