Blog: Style tweaks and minor cleanup

Mainly removing unused classes such as blog_post-container

src/styles/_config.sass

@@ -99,7 +99,7 @@ $screen-md-max: $screen-lg-min - 1 !default
 $sidebar-width: 50px !default
 
 /* Project specifics */
-$project_nav-width: 240px !default
+$project_nav-width: 250px !default
 $project-sidebar-width: 50px !default
 $project_header-height: 50px !default
 $project_footer-height: 30px !default
@@ -120,9 +120,6 @@ $list-node-children-item-width_square: 160px !default
 $z-index-base: 13 !default
 
 .container
-	@media (min-width: $screen-sm-min) 
-		width: 750px
-
 	@media (min-width: $screen-md-min)
 		width: 1100px
 

src/styles/_project.sass

@@ -10,6 +10,12 @@ body.workshops
 body.blog
 	background-color: white
 
+	#project_nav,
+	#project_nav-container
+		+media-xs
+			width: 100%
+		width: $project_nav-width * 1.5
+
 #project-container
 	display: flex
 	flex-direction: row
@@ -40,9 +46,8 @@ body.blog
 		text-align: left
 
 #project_nav-container
-	position: fixed
+	+media-lg
-	z-index: $z-index-base + 5
+		width: $project_nav-width * 1.33
-	width: $project_nav-width
 
 	+media-xs
 		display: block
@@ -50,6 +55,11 @@ body.blog
 		position: relative
 		height: initial !important
 
+	position: fixed
+	z-index: $z-index-base + 5
+	width: $project_nav-width
+
+
 #project_sidebar
 	width: $project-sidebar-width
 	z-index: $z-index-base + 6
@@ -125,14 +135,23 @@ body.blog
 			&.active
 				background-color: $color-background-nav-light
 
+				// The tiny triangle
 				&:after
-					content: ''
+					+media-xs
+						border-top-color: $project-sidebar-background
+						border-right-color: transparent
+						left: 50%
+						right: initial
+						transform: translateX(-50%)
+						top: 0
+
 					border: 7px solid transparent
 					border-right-color: $project-sidebar-background
+					content: ''
 					display: block
 					position: absolute
-					top: 50%
 					right: 0
+					top: 50%
 					transform: translateY(-50%)
 
 				a
@@ -174,20 +193,23 @@ body.blog
 
 /* Container for navigation on the left */
 #project_nav
+	+media-lg
+		width: $project_nav-width * 1.33
+
+	+media-xs
+		width: initial
+
+	background-color: $project-sidebar-background
 	display: block
+	left: 0
+	position: relative
 	visibility: visible
 	width: $project_nav-width
-	position: relative
-	background-color: $project-sidebar-background
-	left: 0
 
 	&.about
 		display: none
 		visibility: hidden
 
-	+media-xs
-		width: initial
-
 
 /* Header with name and node edit tools */
 #project_nav-header,
@@ -714,12 +736,15 @@ ul.project_nav-edit-list
 
 /* The actual navigation tree container */
 #project_tree
-	padding: 0 0 5px 0// some padding on top/bottom of jstree
+	+media-xs
-	position: relative
+		margin-top: 0
-	margin-top: $project_header-height
+
 	background-color: $project-sidebar-background
 	border-right: thin solid $color-background
+	margin-top: $project_header-height
 	overflow-y: auto
+	padding: 0 0 5px 0// some padding on top/bottom of jstree
+	position: relative
 
 	&.edit
 		margin-top: 0
@@ -2669,8 +2694,7 @@ section.node-children
 #project_context
 	#blog_container
 		padding: 0
-		#blog_index-container,
+		#blog_index-container
-		#blog_post-container
 			width: 100%
 			padding: 0
 			border: none

src/styles/base.sass

@@ -158,32 +158,31 @@ strong, b
 header.navbar-header
 	position: relative
 	margin: 0
-	z-index: 1 // to be on top of the overlay
 	height: 100%
+	z-index: 1 // to be on top of the overlay
 
 	.navbar-toggle
 		color: white
+		float: none
+		margin: 5px 0 0 10px
 
+		i
+			margin: 0
 
 .navbar-overlay
-	display: none
-	position: absolute
-	top: 0
-	left: 0
-	right: 0
 	bottom: 0
-	z-index: 0
+	display: none
-	width: 100%
+	left: 0
 	height: 100%
-
+	position: absolute
+	right: 0
+	top: 0
 	transition: background-color 350ms ease-in-out
+	width: 100%
+	z-index: 0
 
 	&+.navbar-container
 		.search-input
-			margin: 8px 0
-			border-radius: 3px
-			border: thin solid transparent
-
 			+media-lg
 				border: thin solid rgba(white, .2)
 
@@ -191,6 +190,9 @@ header.navbar-header
 					&::placeholder
 						color: rgba(white, .8)
 
+			border: thin solid transparent
+			border-radius: 3px
+			margin: 8px 0
 
 	&.is-active
 		background-color: $color-background-nav
@@ -346,8 +348,10 @@ nav.sidebar
 				+position-center-translate
 
 	.navbar-brand
-		display: flex
+		+media-xs
+			padding-left: 10px
 		align-items: center
+		display: flex
 		color: white
 		padding:
 			top: 8px
@@ -1037,11 +1041,6 @@ button, .btn
 		background-color: rgba($color-background-nav, .7)
 
 .search-input
-	position: relative
-	float: left
-	padding: 0
-	margin: 0
-
 	+media-lg
 		max-width: 350px
 	+media-md
@@ -1051,11 +1050,14 @@ button, .btn
 	+media-xs
 		display: block
 		margin: 0 10px
-		width: 75%
 		position: absolute
 		z-index: $z-index-base
-		top: 2px
+		right: 5px
-		left: 40px
+	position: relative
+	float: left
+	padding: 0
+	margin: 0
+
 
 	.search-icon
 		position: absolute
@@ -1089,17 +1091,17 @@ button, .btn
 
 	#cloud-search, .tt-hint
 		+text-overflow-ellipsis
-		outline: none
 		border: thin solid $color-background-nav-light
 		border-radius: 3px
+		color: white
 		font:
 			size: 1em
 			weight: 400
 			family: $font-body
 		margin: 0
-		padding: 0 20px 0 40px
 		min-height: 32px
-		color: white
+		outline: none
+		padding: 0 20px 0 40px
 		transition: border 100ms ease-in-out
 
 		&:focus

src/styles/blog.sass

@@ -8,17 +8,15 @@
 
 
 #blog_container
-	padding:
-		top: 15px
-		bottom: 15px
-	display: flex
-	justify-content: center
-
 	+media-xs
 		flex-direction: column
 		padding-top: 0
+	display: flex
+	padding:
+		top: 15px
+		bottom: 15px
 
-	#blog_post-edit-form
+#blog_post-edit-form
 	padding: 20px
 
 	.form-group
@@ -133,15 +131,6 @@
 
 			+markdown-preview-container
 
-				margin:
-					left: -20px
-					right: -20px
-
-				padding:
-					top: 20px
-					left: 0
-					right: 0
-
 			&:before
 				content: 'Live Preview'
 				position: absolute
@@ -160,8 +149,7 @@
 				color: $color-text-dark-hint
 				transition: color 150ms ease-in-out
 
-
+			&:empty
-			.node-edit-form-md-preview:empty
 				color: transparent
 				margin: 0 auto
 				padding: 0 10px
@@ -171,20 +159,13 @@
 					color: transparent
 
 
-		#node-edit-form-md-preview
+#blog_post-create-container,
-			padding: 20px
+#blog_post-edit-container
-
-	&.post-create
-		flex-direction: row-reverse
-
-	#blog_post-create-container,
-	#blog_post-edit-container
 	padding: 25px
 
-	#blog_index-container,
+#blog_index-container,
-	#blog_post-container,
+#blog_post-create-container,
-	#blog_post-create-container,
+#blog_post-edit-container
-	#blog_post-edit-container
 	+container-box
 	width: 75%
 
@@ -214,15 +195,18 @@
 
 	.blog_index-item
 		+media-lg
+			max-width: 880px
+		+media-md
+			max-width: 880px
+		+media-sm
 			max-width: 780px
 
-			margin: 0 auto 15px auto
+		margin: 15px auto
 
 		&:hover
 			.item-info a
 				color: $color-primary
 
-
 		.item-picture
 			position: relative
 			width: 100%
@@ -254,15 +238,13 @@
 			display: block
 			font:
 				family: $font-body
-					size: 2em
+				size: 1.8em
-				padding: 25px 25px 10px 25px
+			padding-bottom: 10px
+			padding-top: 20px
 
 		.item-info
 			color: $color-text-dark-secondary
 			font-size: 1em
-				padding:
-					left: 25px
-					right: 25px
 
 			a
 				color: $color-text-dark-secondary
@@ -294,16 +276,9 @@
 					left: 10px
 					right: 10px
 
-		.button-create, .button-edit
+	.button-create,
-			position: absolute
-			z-index: 2
-			top: 20px
-			right: 20px
-			+button($color-success, 6px, true)
-
 	.button-edit
-			right: 170px
+		+button($color-success, 3px, true)
-			top: 15px
 
 	.item-picture+.button-back+.button-edit
 		right: 20px
@@ -337,7 +312,7 @@
 				padding:
 					left: 0
 
-	#blog_post-edit-form
+#blog_post-edit-form
 	padding: 0
 
 	.form-group
@@ -403,9 +378,9 @@
 		margin: 0
 
 	.button-back
+		+button($color-info, 6px, true)
 		display: block
 		width: 100%
-		+button($color-info, 6px)
 		margin: 15px 0 0 0
 
 	#blog_post-edit-form
@@ -478,7 +453,6 @@
 				transition: opacity 150ms ease-in-out
 				+position-center-translate
 
-
 		.item-info
 			padding: 10px 20px
 			background-color: white
@@ -501,63 +475,33 @@
 					text-decoration: none
 					color: $color-primary
 
-#blog_post-container
-	.button-create
-		+button($color-success, 6px)
-	.button-back
-		position: absolute
-		top: 15px
-		right: 15px
-		z-index: 2
-		+button($color-info, 6px, true)
-	.button-create, .button-edit
-		position: absolute
-		z-index: 2
-		top: 15px
-		right: 15px
-		+button($color-success, 6px, true)
-
-	.button-edit
-		right: 170px
-		top: 15px
-
-	.button-back+.button-edit
-		right: 15px
-		top: 15px
-
 
 #blog_container
 	&.cloud-blog
 		#blog_index-container,
-		#blog_post-container,
 		#blog_post-create-container,
 		#blog_post-edit-container
 			width: 90%
 			padding: 25px 30px 20px 30px
 
-		#blog_index-container+#blog_index-sidebar,
+		#blog_index-container+#blog_index-sidebar
-		#blog_post-container+#blog_index-sidebar
 			display: none
 
-	&.cloud-blog #blog_index-container,
+	#blog_index-container,
-	&.cloud-blog #blog_post-container,
+	&.cloud-blog #blog_index-container
-	#blog_index-container, #blog_post-container
-		padding: 0 0 50px 0
-
 		+media-sm
 			width: 100%
-			padding: 25px 20px 20px 20px
+
 		+media-xs
 			width: 100%
-			padding: 0 0 20px 0
+
+		padding: 0 0 50px 0
+		margin: 0 auto
 
 		.blog_index-item
-			padding: 25px 80px 20px 80px
-			position: relative
-
 			+media-xs
 				width: 100%
-				padding: 25px 0 20px 0
+				padding: 10px 25px
 
 			&.list
 				margin: 0 auto
@@ -613,10 +557,8 @@
 				a.item-title, .item-info
 					padding-left: 70px
 
-	#blog_index-container,
+#blog_index-container
-	#blog_post-container
 	.blog_index-item
-			padding: 25px 10px 20px 10px
 		position: relative
 
 		+media-xs
@@ -624,19 +566,13 @@
 
 		&.list
 			padding: 15px 10px
-				margin: 0 25px
+			margin: 0
 
 			+media-xs
 				width: 100%
 				padding: 15px 10px
 				margin: 0
 
-	&.cloud-blog #blog_post-container,
-	#blog_post-container
-		.blog_index-item
-			padding-top: 55px
-			font-size: .9em
-
 
 .blog-archive-navigation
 	+media-xs
@@ -674,3 +610,14 @@
 	right: 0
 	top: 0
 	z-index: 1
+
+#project_context
+	.blog_index-item
+		+media-xs
+			margin-left: 0
+		padding: 0
+		margin-left: 10px
+
+	#blog_container
+		.comments-container
+			margin-left: 30px

src/styles/plugins/_jstree.sass

@@ -8,57 +8,41 @@ $tree-color-highlight-background-text: white
 .jstree-default
 	/* list item */
 	.jstree-node
-		position: relative
-		max-width: 100% // Needed for ellipsis on long names
-		margin: 0 !important
-		color: $tree-color-text
-		background-image: none !important
-
-		transition: color 100ms ease-in-out, background-color 150ms ease-in-out
-
 		+media-xs
 			width: 100%
+		background-image: none !important
+		border: none
+		color: $tree-color-text
+		margin: 0 !important
+		max-width: 100% // Needed for ellipsis on long names
+		position: relative
 
 		&[data-node-type="asset"],
 		&[data-node-type="texture"],
 		&[data-node-type="hdri"]
 			.jstree-anchor
 				padding-right: 20px
-				&:before
-					font-family: 'pillar-font'
-					content: '\e84d'
-					color: $color-text-dark-hint
-					font-size: .8em
-					padding: 0 5px
-					position: absolute
-					right: 5px
 
-				&.jstree-clicked
-					&:before
-						color: $tree-color-highlight-background-text !important
-					&:after
-						display: none
 			&[is_free='true']
 				.jstree-anchor
 					padding-right: initial
-					&:before
+
-						display: none
 					&:after
-						display: none
+						color: $tree-color-highlight
+						content: '\e84e' !important
+						display: block
 
 		&[data-node-type="page"],
 		&[data-node-type="blog"]
-			font-size: 1.15em
 			color: darken($tree-color-highlight, 5%)
-			border-bottom: 2px solid $tree-color-highlight
+			font-weight: bold
-
-			&:hover
-				border-bottom-color: lighten($tree-color-highlight, 5%)
 
 			.jstree-anchor
 				padding: 5px 8px 1px 8px
+
 				&:after
 					top: 3px !important
+
 			.jstree-icon
 				display: none
 
@@ -95,7 +79,7 @@ $tree-color-highlight-background-text: white
 						font-size: .85em !important
 
 				.jstree-anchor
-					border-left: thin solid rgba($tree-color-text, .2)
+					box-shadow: inset 1px 0 0 0 rgba($tree-color-text, .2)
 
 		/* Closed Folder */
 		// &.jstree-closed
@@ -110,51 +94,58 @@ $tree-color-highlight-background-text: white
 
 		/* The text of the last level item */
 		.jstree-anchor
-			width: 100%
-			padding-left: 28px
-			padding-right: 10px
-			height: inherit
-			line-height: 26px
-			white-space: nowrap
-			text-overflow: ellipsis
-			overflow: hidden
-			border-bottom: thin solid transparent
-			transition: none
-
 			+media-xs
 				width: 98%
 				padding: 0 !important
+			border: none
+			height: inherit
+			line-height: 26px
+			overflow: hidden
+			padding-left: 28px
+			padding-right: 10px
+			text-overflow: ellipsis
+			transition: none
+			transition: color 50ms ease-in-out, background-color 100ms ease-in-out
+			white-space: nowrap
+			width: 100%
 
-			.jstree-icon
+			// Little arrow on the right
-				margin: 0 !important
-				font-size: 95% !important
-				color: $color-text-dark-secondary
-
-			/* Selected item */
-			&.jstree-clicked
-				background-color: $tree-color-highlight-background !important
-				color: $tree-color-highlight-background-text !important
-
-				.jstree-ocl, .jstree-icon
-					color: $tree-color-highlight-background-text !important
-
 			&:after
-					content: '\e83a'
+				content: '\e83a' !important
 				font-family: 'pillar-font'
-					color: $tree-color-highlight-background-text
+				color: white
+				display: none
 				position: absolute
 				right: 7px
 				top: 1px
 
-				li
+			// Icon, not selected
-					a.jstree-anchor:after
+			.jstree-icon
-						content: ''
+				color: $color-text-dark-secondary
+				font-size: 95% !important
+				margin: 0 !important
+
+			/* Selected item */
+			&.jstree-clicked
+				background-color: $tree-color-highlight-background !important
+				color: white !important
+
+				&:after
+					display: block
+					color: white !important
+
+				.jstree-ocl,
+				.jstree-icon
+					color: white
 
 				/* hover an active item */
-				&.jstree-hovered,
+				&.jstree-hovered
-				&.jstree-hovered .jstree-icon
+					background-color: lighten($tree-color-highlight-background, 10%) !important
-					color: $tree-color-highlight-background-text !important
 					box-shadow: none
+					color: white !important
+
+				&.jstree-hovered .jstree-icon
+					color: white !important
 
 			.jstree-hovered
 				background-color: rgba($tree-color-highlight, .1) !important
@@ -196,45 +187,70 @@ $tree-color-highlight-background-text: white
 			line-height: 26px
 			left: 5px
 
-	&.is_subscriber .jstree-anchor
+	&.is_subscriber
+		.jstree-node
+			&[is_free='true']
+				.jstree-anchor
 					padding-right: initial
-		&:before
+
-			display: none
 					&:after
-			display: none
+						display: none !important
 
 	&.blog
 		.jstree-anchor
-			padding: 5px 5px 5px 10px
+			padding: 6px 6px 6px 12px
-			&:hover, &:hover i
+
+			&:hover
 				color: $tree-color-highlight
 
-			&.jstree-clicked .tree-item-info
+			&.post
-				color: white
+				border-bottom: thin solid $color-background-dark
+
+			&.jstree-clicked
+				&.post
+					background-color: transparent !important
+
+					&:after
+						top: 8px
+						color: $tree-color-highlight !important
 
 					.tree-item-info
-			display: block
+						color: $color-text
-			font-size: .85em
-			margin-left: 40px
-			padding-top: 2px
-			line-height: 1em
-			color: $color-text-dark-secondary
 
-		.tree-item-thumbnail
+					.tree-item-title
-			display: flex
+						color: $tree-color-highlight
+
+		.tree-item
+			line-height: initial
+			padding-right: 10px
+
+			&-title
+				font-size: 1.2em
+				overflow: initial
+				text-overflow: initial
+				white-space: normal
+
+			&-info
+				color: $color-text-dark-secondary
+				display: block
+				font-size: .8em
+				padding: 5px
+
+			&-thumbnail
 				align-items: center
-			justify-content: center
 				background-color: $color-background
-			width: 40px
-			height: 40px
-			float: left
-			margin: 0 5px 0 -5px
 				border-radius: 3px
 				color: $color-text-dark-secondary
+				display: flex
+				float: left
+				height: 70px
+				justify-content: center
+				margin: 0 10px 0 -5px
+				width: 70px
+
 				img
-				border-radius: 3px
+					height: 70px
-				width: 40px
+					width: 70px
-				height: 40px
 
 
 .jstree-loading
@@ -263,14 +279,16 @@ $tree-color-highlight-background-text: white
 
 
 a.jstree-anchor.jstree-clicked+ul li a.jstree-anchor.jstree-clicked
-	background-color: rgba($tree-color-highlight-background, .7) !important
+	background-color: rgba($tree-color-highlight-background, .8) !important
+	color: white !important
 
 a.jstree-anchor.jstree-clicked+ul li a.jstree-anchor.jstree-clicked+ul li a.jstree-anchor.jstree-clicked
 	background-color: rgba($tree-color-highlight-background, .8) !important
+	color: white !important
 
 i.jstree-icon.jstree-ocl
-	height: 26px !important
 	color: rgba($tree-color-text, .5) !important
+	height: 26px !important
 	+media-xs
 		height: 40px !important