Project style adjustments.

src/styles/_apps_base.sass

@@ -403,7 +403,7 @@ nav.sidebar
 $loader-bar-width: 100px
 $loader-bar-height: 2px
 .loader-bar
-	bottom: 0
+	bottom: -$loader-bar-height
 	content: ''
 	display: none
 	height: 0

src/styles/_config.sass

@@ -101,7 +101,8 @@ $screen-md-max: $screen-lg-min - 1 !default
 $sidebar-width: 40px !default
 
 /* Project specifics */
-$project_nav-width: 275px !default
+$project_nav-width: 250px !default
+$project_nav-width-xl: $project_nav-width * 1.4 !default
 $project_nav-width-lg: $project_nav-width * 1.2 !default
 $project_nav-width-md: $project_nav-width
 $project_nav-width-sm: $project_nav-width * 0.8 !default
@@ -160,4 +161,6 @@ $nav-link-height: 37px
 $navbar-padding-x: 0
 $navbar-padding-y: 0
 
+$btn-padding-y-sm: 0.1rem
+
 $grid-breakpoints: (xs: 0,sm: 576px,md: 768px,lg: 1060px,xl: 1500px, xxl: 1800px)

src/styles/_project.sass

@@ -1,10 +1,17 @@
 $node-latest-thumbnail-size: 160px
 
-body.open-projects,
+/* Dark navbar when browsing a project. */
-body.courses,
+body.project
-body.workshops
+	nav.navbar
-	#project-container
+		@extend .bg-dark
-		+container-behavior
+		box-shadow: 0 2px $gray-700
+
+		.nav-link, .text-muted
+			color: $gray-400 !important
+
+		.nav-main .nav-link
+			@extend .text-dark
+
 
 #project-container
 	display: flex
@@ -26,22 +33,26 @@ body.workshops
 
 
 #project_nav,
+#project_tree,
 #project_nav-container
-	+media-lg
-		width: $project_nav-width-lg
-	+media-sm
-		width: $project_nav-width-sm
 	+media-xs
 		width: $project_nav-width-xs
+	+media-sm
+		width: $project_nav-width-sm
+	+media-md
+		width: $project_nav-width-md
+	+media-lg
+		width: $project_nav-width-lg
+	+media-xl
+		width: $project_nav-width-xl
 
 	width: $project_nav-width
 
 #project_nav-container
 	+media-xs
 		display: block
-		width: 100%
-		position: relative
 		height: initial !important
+		position: relative
 
 	position: fixed
 	z-index: $z-index-base + 5
@@ -94,36 +105,11 @@ body.workshops
 					width: $project-sidebar-width
 
 
-#search-container #project_sidebar ul.project-tabs li.tabs-thumbnail
-	background-color: $color-background-nav-dark
-	&:hover
-		background-color: $color-background-nav-light
-
 #project-nav,
 #project_context-container
 	flex: 1
 
 
-/* Container for navigation on the left */
-#project_nav
-	+media-lg
-		width: $project_nav-width-lg
-	+media-sm
-		width: $project_nav-width-sm
-	+media-xs
-		width: $project_nav-width-xs
-
-	display: block
-	left: 0
-	position: relative
-	visibility: visible
-	width: $project_nav-width
-
-	&.about
-		display: none
-		visibility: hidden
-
-
 /* Header with name and node edit tools */
 #project_context-header
 	right: 0
@@ -494,40 +480,28 @@ $node-preview-max-height-lg: 700px
 				text-transform: uppercase
 
 section.node-preview
-	+media-md
-		max-height: $node-preview-max-height-md
-	+media-lg
-		max-height: $node-preview-max-height-lg
-
-	align-items: center
 	background-color: black
 	color: $color-text-light-primary
-	// display: flex
+	flex-shrink: 0 // prevents content/comments to make preview dissappear
-	justify-content: center
+	max-height: calc((9 / 16) * 133vh)
-	max-height: 500px
+  min-height: 200px
-	// min-height: 200px
+	overflow: hidden
-	// overflow: hidden
 
 	iframe
 		width: 100%
 
 	img
-		display: block
+		@extend .d-block
-		max-height: $node-preview-max-height-lg
+		@extend .mx-auto
 		max-width: 100%
 		object-fit: scale-down
+		flex: 1
 
 		+media-xs
 			width: 100%
 
-		+media-md
-			max-height: $node-preview-max-height-md
-		+media-lg
-			max-height: $node-preview-max-height-lg
-
 	&.image
 		cursor: zoom-in
-		display: flex
 		overflow: hidden
 
 	&.video
@@ -583,19 +557,10 @@ section.node-preview
 							color: $color-warning
 							margin-right: 10px
 
-	&.project
-		background-color: black
-		width: 100%
-
-		img
-			max-height: 800px
-			max-width: 100%
-			object-fit: cover
-			width: 100%
 
 section.node-preview-forbidden
 	align-items: center
-	background-color: $color-background-nav
+	background-color: $primary
 	color: $color-text-light
 	cursor: default
 	display: flex
@@ -1033,7 +998,7 @@ a.learn-more
 		width: auto
 		height: auto
 		background: black
-		box-shadow: 1px 1px 1px rgba(black, .5), 2px 2px 15px rgba(black, .5)
+		box-shadow: 1px 1px 1px rgba(black, .5), 2px 2px 25px rgba(black, .25)
 
 		visibility: hidden
 		display: none
@@ -1070,7 +1035,7 @@ a.learn-more
 			top: 0
 			left: 0
 			right: 0
-			@include overlay(rgba($color-background-nav, .9), 0%, transparent, 25%)
+			@include overlay(rgba(black, .9), 0%, transparent, 25%)
 
 			+text-overflow-ellipsis
 
@@ -1290,13 +1255,13 @@ a.learn-more
 
 		.list-node-children-item-thumbnail
 			height: $list-node-children-item-width
-			background-color: $color-background-nav
+			background-color: black
 
 		&:hover
 			opacity: 1
 
 			img
-				opacity: .15
+				opacity: .5
 
 			.list-node-children-item-name
 				opacity: 1
@@ -2021,5 +1986,3 @@ a.learn-more
 				padding: 5px 35px
 				text-align: center
 
-.ribbon
-	+ribbon

src/styles/_utils.sass

@@ -512,6 +512,8 @@
 		margin: 1px 0
 		padding: 3px 50px
 
+.ribbon
+	+ribbon
 
 @mixin text-background($text-color, $background-color, $roundness, $padding)
 	border-radius: $roundness

src/styles/components/_navbar.sass

@@ -1,6 +1,6 @@
 /* Top level navigation bar. */
 .navbar
-	box-shadow: inset 0 -2px  $color-background
+	box-shadow: 0 2px  $color-background
 
 .nav
 	border: none
@@ -119,22 +119,22 @@
 	&:focus
 		box-shadow: inset 0 -3px 0 $primary
 
-	&.active
-		color: $primary
-		box-shadow: inset 0 -3px 0 $primary
-
 
 /* Secondary navigation. */
 $nav-secondary-bar-size: -2px
 .nav-secondary
 	align-items: center
-	box-shadow: inset 0 $nav-secondary-bar-size 0 0 $color-background
 
 	.nav-link
 		color: $color-text
 		cursor: pointer
+		margin-bottom: 2px
 		transition: color 150ms ease-in-out
 
+		span
+			position: relative
+			top: 2px
+
 		&:after
 			background-color: transparent
 			bottom: 0
@@ -155,6 +155,7 @@ $nav-secondary-bar-size: -2px
 			background-image: linear-gradient(to right, $primary-accent 70%, $primary)
 			height: 2px
 			width: 100%
+			bottom: -2px
 
 		span
 			+active-gradient
@@ -162,6 +163,9 @@ $nav-secondary-bar-size: -2px
 		i
 			color: $primary-accent
 
+	.nav-link.active
+		font-weight: bold
+
 	&.nav-secondary-vertical
 		align-items: flex-start
 		flex-direction: column
@@ -186,6 +190,8 @@ $nav-secondary-bar-size: -2px
 
 // Big navigation dropdown.
 .nav-main
+	min-width: initial
+
 	.nav-secondary
 		.nav-link
 			@extend .pr-5