From b2cfe4643831bb9515da98f00b7720f15be08036 Mon Sep 17 00:00:00 2001
From: Pablo Vazquez <venomgfx@gmail.com>
Date: Sun, 17 Sep 2017 20:11:04 +0200
Subject: [PATCH] Style tweaks on projects

Plus re-ordering and minor cleanup
---
 src/styles/_comments.sass |  1 -
 src/styles/_config.sass   |  8 +++---
 src/styles/_homepage.sass |  8 ++++++
 src/styles/_project.sass  | 49 +++++++++++++++-----------------
 src/styles/_utils.sass    |  1 -
 src/styles/base.sass      | 59 +++++++++++++++------------------------
 6 files changed, 58 insertions(+), 68 deletions(-)

diff --git a/src/styles/_comments.sass b/src/styles/_comments.sass
index 9b3f850b..460d9b17 100644
--- a/src/styles/_comments.sass
+++ b/src/styles/_comments.sass
@@ -2,7 +2,6 @@ $comments-width-max: 710px
 
 #comments-container
 	position: relative
-	min-height: 170px
 
 	&.texture
 		border-top: none
diff --git a/src/styles/_config.sass b/src/styles/_config.sass
index 7961b7ad..29f51662 100644
--- a/src/styles/_config.sass
+++ b/src/styles/_config.sass
@@ -1,10 +1,10 @@
 $color-background: #eaebec
 $color-background-light: lighten($color-background, 5%)
 $color-background-dark: darken($color-background, 5%)
-$color-background-nav: hsl(hue($color-background), 20%, 25%)
+$color-background-nav: hsl(hue($color-background), 25%, 35%)
 
-$color-background-nav-light: hsl(hue($color-background), 20%, 40%)
-$color-background-nav-dark: hsl(hue($color-background), 20%, 15%)
+$color-background-nav-light: hsl(hue($color-background), 25%, 45%)
+$color-background-nav-dark: hsl(hue($color-background), 25%, 15%)
 
 $color-background-active: #dff5f6  // background colour for active items.
 $color-background-active-dark: hsl(hue($color-background-active), 50%, 50%)
@@ -115,7 +115,7 @@ $node-type-comment: #66ccbd
 $node-type-group: #c3a280
 $node-type-post: #647bce
 
-$list-node-children-item-width: 200px
+$list-node-children-item-width: 220px
 $list-node-children-item-width_list: 60px
 $list-node-children-item-width_square: 160px
 $z-index-base: 13
diff --git a/src/styles/_homepage.sass b/src/styles/_homepage.sass
index b0cd746a..3438e293 100644
--- a/src/styles/_homepage.sass
+++ b/src/styles/_homepage.sass
@@ -722,6 +722,14 @@
 							&.what
 								text-transform: capitalize
 
+				&.project
+					padding: 10px 15px
+
+					a.title
+						font-size: 1.3em
+					a.random-asset__list-thumbnail
+						border-radius: 3px
+
 				&.featured
 					align-items: flex-start
 					flex-direction: column
diff --git a/src/styles/_project.sass b/src/styles/_project.sass
index 16f7260c..394fb863 100644
--- a/src/styles/_project.sass
+++ b/src/styles/_project.sass
@@ -1,4 +1,5 @@
 $project-sidebar-background: lighten($color-background, 5%)
+$node-latest-thumbnail-size: 160px
 
 body.open-projects,
 body.courses,
@@ -197,17 +198,20 @@ body.blog
 	position: relative
 
 #project_context-header
-	z-index: $z-index-base + 3
-	position: fixed
-	top: $project_header-height
+	align-items: center
+	background-color: white
+	background-color: $color-background-light
+	border-bottom: thin solid lighten($color-text-dark-hint, 10%)
+	box-shadow: none
+	color: $color-text-dark-secondary
+	display: flex
 	height: $project_header-height
 	min-height: $project_header-height
-	width: auto
-	color: $color-text-dark-secondary
-	border-bottom: thin solid lighten($color-text-dark-hint, 10%)
-	background-color: $color-background-light
-	box-shadow: none
+	position: fixed
+	top: $project_header-height
 	transition: box-shadow 250ms ease-in-out
+	width: auto
+	z-index: $z-index-base + 3
 
 	&.is-offset
 		box-shadow: 0 0 25px rgba(black, .2)
@@ -786,8 +790,7 @@ $node-preview-max-height-lg: 700px
 		height: 250px
 		top: -10px
 		left: -10px
-		// We can't have nice things because of Edge
-		// filter: blur(10px)
+		filter: blur(10px)
 
 		&:after
 			content: ''
@@ -971,8 +974,6 @@ section.node-preview
 
 		cursor: zoom-in
 
-		+media-sm
-			max-height: $node-preview-max-height-sm
 		+media-md
 			max-height: $node-preview-max-height-md
 		+media-lg
@@ -981,13 +982,12 @@ section.node-preview
 		img
 			display: block
 			max-height: $node-preview-max-height-lg
-			margin: 0 auto
+			max-width: 100%
+			object-fit: scale-down
 
 			+media-xs
 				width: 100%
 
-			+media-sm
-				max-height: $node-preview-max-height-sm
 			+media-md
 				max-height: $node-preview-max-height-md
 			+media-lg
@@ -1585,7 +1585,6 @@ a.learn-more
 					border-color: $node-type-asset_video
 					background-color: hsl(hue($node-type-asset_video), 20%, 55%)
 
-				$node-latest-thumbnail-size: 160px
 				.image
 					width: 100%
 					height: $node-latest-thumbnail-size
@@ -1799,9 +1798,9 @@ section.node-children
 			background-color: black
 
 	.cloud-logo
-		font-size: 4em
-		color: darken($color-background, 60%)
 		+position-center-translate
+		font-size: 4em
+		color: $color-background-dark
 		left: $list-node-children-item-width / 2 - 10
 
 	/* Browse group as list */
@@ -1913,14 +1912,14 @@ section.node-children
 					margin-right: 5px
 
 
-	& .list-node-children-item-thumbnail
+	.list-node-children-item-thumbnail
 		display: flex
 		align-items: center
 		justify-content: center
 
 		width: $list-node-children-item-width
 		height: $list-node-children-item-width / 1.69
-		background-color: darken($color-background, 55%)
+		background-color: $color-background
 		position: relative
 		overflow: hidden
 
@@ -1928,7 +1927,7 @@ section.node-children
 			height: 100%
 			+position-center-translate
 
-		& .list-node-children-item-thumbnail-icon
+		.list-node-children-item-thumbnail-icon
 			position: absolute
 			top: 0
 			left: 0
@@ -1965,12 +1964,10 @@ section.node-children
 
 		display: flex
 		align-items: center
-		color: $color-text-light
-		text-shadow: 1px 1px 0 rgba(black, .2)
-		background-color: darken($color-background, 60%)
+		background-color: $color-background
 
-		padding: 5px 10px
-		font-size: .85em
+		padding: 5px 12px
+		font-size: .9em
 		width: $list-node-children-item-width
 		max-width: $list-node-children-item-width
 
diff --git a/src/styles/_utils.sass b/src/styles/_utils.sass
index ac1bf4e5..39b004d6 100644
--- a/src/styles/_utils.sass
+++ b/src/styles/_utils.sass
@@ -383,7 +383,6 @@
 	h1, h2, h3, h4, h5, h6
 		padding:
 			top: 20px
-			left: 20px
 			right: 20px
 
 	blockquote
diff --git a/src/styles/base.sass b/src/styles/base.sass
index 7b695a00..8b2c5ea8 100644
--- a/src/styles/base.sass
+++ b/src/styles/base.sass
@@ -245,7 +245,6 @@ header.navbar-header
 nav.navbar, nav.sidebar
 	z-index: $z-index-base + 5 /* Flowplayer seems to take up to 11, project container is 12 */
 	border: none
-	border-width: 0
 	display: flex
 	align-items: center
 	background-color: $color-background-nav
@@ -262,45 +261,33 @@ nav.navbar, nav.sidebar
 
 	li
 		user-select: none
+
 		a.navbar-item
-			user-select: none
-			color: $color-text-light-secondary
-			height: $navbar-height
-			display: flex
 			align-items: center
-			padding:
-				top: 3px
-				bottom: 0
-				left: 20px
-				right: 20px
+			color: $color-text-light-secondary
+			display: flex
+			height: $navbar-height
+			transition: color 150ms ease-in-out, box-shadow 100ms ease-in-out
+			user-select: none
 
-			font-weight: 400
-			text-transform: uppercase
-			border-bottom: 3px solid transparent
-			transition: color 200ms ease-in-out, border-bottom 100ms ease-in-out
-
-			+media-md
-				padding-left: 15px
-				padding-right: 15px
 			+media-sm
 				padding-left: 10px
 				padding-right: 10px
 
 			&:hover, &:focus
 				color: $color-text-light
-				background-color: rgba($color-background-nav, .4)
-				border-bottom-color: $color-primary
+				background-color: initial
+				box-shadow: inset 0 -3px 0 $color-primary
 
 			&:focus
-				border-bottom-color: $color-primary
+				box-shadow: inset 0 -3px 0 $color-primary
 
 			&.active
 				color: $color-text-light
-				background-color: $color-background-nav
-				border-bottom-color: lighten($color-secondary, 10%)
+				box-shadow: inset 0 -3px 0 lighten($color-secondary, 10%)
 
 				&:hover
-					border-bottom-color: lighten($color-secondary, 20%)
+					box-shadow: inset 0 -3px 0 lighten($color-secondary, 20%)
 
 			.pi-angle-down
 				position: relative
@@ -349,15 +336,13 @@ nav.navbar, nav.sidebar
 				+position-center-translate
 
 	.navbar-brand
-		height: $navbar-height
 		display: flex
 		align-items: center
-		margin-left: 0 !important
 		color: white
 		padding:
 			top: 8px
 			left: 5px
-			right: 20px // overrides bs
+			right: 20px // overrides bootstrap
 
 		&:hover
 			span.app-logo
@@ -386,14 +371,13 @@ nav.navbar, nav.sidebar
 			transform: translate(-50%, -50%)
 
 		ul.dropdown-menu
-			padding-top: 0
+			padding: 0
 
 			li
 				a
 					background-color: rgba(white, .3)
 					text-shadow: none
 					height: initial
-					border-bottom: none
 					font:
 						family: $font-body
 						size: .9em
@@ -402,6 +386,7 @@ nav.navbar, nav.sidebar
 
 					&:hover
 						color: $color-primary
+						box-shadow: none
 
 					&.subitem
 						font-size: .8em
@@ -447,7 +432,6 @@ nav.navbar, nav.sidebar
 			ul.dropdown-menu
 				background-color: lighten($color-background-nav, 5%)
 				color: white
-				padding-top: 5px
 				left: 0
 				right: auto
 
@@ -459,7 +443,12 @@ nav.navbar, nav.sidebar
 						color: $color-text-light-primary
 
 						&:hover
-							color: $color-primary
+							background-color: lighten($color-background-nav, 15%)
+
+					&:last-child a
+						border-bottom-left-radius: 3px
+						border-bottom-right-radius: 3px
+
 					&.disabled a
 						color: $color-text-dark-primary
 						cursor: default
@@ -1091,10 +1080,9 @@ button, .btn
 
 	#cloud-search, .tt-hint
 		+text-overflow-ellipsis
-		background-color: transparent
 		outline: none
-		border: thin solid transparent
-		border-bottom: 3px solid transparent
+		border: thin solid $color-background-nav-light
+		border-radius: 3px
 		font:
 			size: 1em
 			weight: 400
@@ -1106,8 +1094,7 @@ button, .btn
 		transition: border 100ms ease-in-out
 
 		&:focus
-			border: thin solid transparent
-			border-bottom: 3px solid lighten($color-primary, 5%)
+			background-color: $color-background-nav-light
 			outline: none
 
 		&::placeholder