From 95e51e90de17b925d0fb6194769045ea4946bee9 Mon Sep 17 00:00:00 2001
From: Pablo Vazquez <venomgfx@gmail.com>
Date: Thu, 6 Sep 2018 13:03:40 +0200
Subject: [PATCH] Homepage cleanup.

---
 src/styles/_homepage.sass       | 927 +++++++++++++-------------------
 src/styles/project-landing.sass |   7 -
 src/templates/homepage.pug      | 411 +++++++-------
 3 files changed, 574 insertions(+), 771 deletions(-)

diff --git a/src/styles/_homepage.sass b/src/styles/_homepage.sass
index 0c4fcb2..0109102 100644
--- a/src/styles/_homepage.sass
+++ b/src/styles/_homepage.sass
@@ -1,573 +1,406 @@
-.dashboard-container
-	+container-behavior
-	+media-xs
-		flex-direction: column
-	align-content: center
-	align-items: flex-start
-	display: flex
-	justify-content: space-around
-	word-break: break-word
 
-	section.dashboard-main,
-	section.dashboard-secondary
-		+media-xs
-			width: 100%
-		margin: 20px auto
 
-		img
-			max-width: 100%
+.title-underline
+	padding-bottom: 5px
+	position: relative
+	margin-bottom: 20px
 
-	section.dashboard-main
-		+container-box
-		width: 52%
-
-	section.dashboard-secondary
-		width: 46%
-		flex-direction: column
-		margin-right: auto
-
-	span.section-lead
+	&:before
+		background-color: $primary
+		content: ' '
 		display: block
-		padding: 10px 0
-		color: $color-text-dark-secondary
-
-	section.dashboard-main,
-	section.dashboard-secondary
-		.section-title
-			padding-bottom: 5px
-			margin-bottom: 20px
-			position: relative
-
-			&:before
-				position: absolute
-				width: 50px
-				height: 2px
-				top: 125%
-				content: ' '
-				display: block
-				background-color: $color-primary
-
-			a
-				color: $color-text
-
-				&:hover
-					color: $color-primary
-					cursor: pointer
-
-	nav#nav-tabs,
-	nav#sub-nav-tabs
-		ul#nav-tabs__list,
-		ul#sub-nav-tabs__list
-			margin: 0
-			padding: 0
-			list-style: none
-			border-bottom: thin solid $color-background
-			+clearfix
-
-			li.nav-tabs__list-tab
-				float: left
-				border: none
-				border-bottom: 3px solid transparent
-				color: $color-text-dark-primary
-				user-select: none
-
-				&:hover
-					border-color: rgba($color-secondary, .3)
-					cursor: pointer
-					color: $color-text-dark
-					a
-						color: $color-text-dark
-
-				a
-					display: block
-					text-decoration: none
-					padding: 10px 15px 5px
-					color: $color-text-dark-primary
-
-				i
-					margin-right: 5px
-					color: $color-text-dark-secondary
-					font-size: .9em
-
-					&.pi-blender
-						margin-right: 10px
-
-				span
-					color: $color-text-dark-hint
-					margin-left: 5px
-
-				&.active
-					border-color: $color-secondary
-					color: $color-secondary-dark
-					a, i
-						color: $color-secondary-dark
-
-				&.disabled
-					border-color: $color-background-light
-					color: $color-text-dark-hint
-					cursor: default
-					a, i
-						color: $color-text-dark-hint
-
-					&:hover
-						border-color: $color-background-light
-						pointer-events: none
-
-	section.stream
-		background-color: white
-		border-bottom: thin solid $color-background-dark
-
-		ul.activity-stream__list
-			$activity-stream-thumbnail-size: 110px
-
-			> li
-				position: relative
-				display: flex
-				padding: 10px 0
-				overflow: hidden
-				border-top: thin solid $color-background-dark
-
-				&:first-child
-					border: none
-
-				&.active .activity-stream__list-details .title
-					color: $color-primary
-
-				&:hover
-					.title
-						text-decoration: underline
-					&.video
-						a.image
-							&:hover
-								i
-									font-size: 3.5em
-								img
-									opacity: .9
-							img
-								opacity: .7
-								z-index: 0
-								transition: opacity 150ms ease-in-out
-
-							i
-								+position-center-translate
-								z-index: 1
-								color: rgba(white, .6)
-								font-size: 3em
-								transition: font-size 100ms ease-in-out
-
-				&.comment
-					.activity-stream__list-details
-						padding: 0
-						.title
-							color: $color-text-dark
-							padding: 7px 10px 2px 10px
-							font-size: 1em
-							margin: 0
-
-						ul.meta
-							padding: 0 10px 7px 10px
-
-							li
-								&.where-parent:before
-									content: '\e83a'
-									font-family: 'pillar-font'
-
-								&.what:before
-									display: none
-
-				&.post
-					.activity-stream__list-thumbnail
-						border-color: $node-type-post
-						background-color: $node-type-post
-					.activity-stream__list-details .title
-						color: darken($node-type-post, 15%)
-						font:
-							size: 1.3em
-							weight: 500
-
-				&.asset, &.comment, &.post
-					&:hover
-						cursor: pointer
-				&.empty
-					display: none
-					color: $color-text-dark-primary
-					padding: 20px
-					text-align: center
-					span
-						color: $color-primary
-						&:hover
-							text-decoration: underline
-							cursor: pointer
-
-				&.with-picture
-					min-height: $activity-stream-thumbnail-size
-
-					.activity-stream__list-thumbnail
-						background-color: black
-						width: $activity-stream-thumbnail-size * 1.69
-						min-width: $activity-stream-thumbnail-size * 1.69
-
-						.activity-stream__list-thumbnail-icon
-							position: absolute
-							top: 0
-							left: 0
-							right: 0
-							bottom: 0
-							font-size: 1.3em
-							text-shadow: 1px 1px 0 rgba(black, .2)
-							background-image: linear-gradient(10deg, rgba(black, .5) 0%, transparent 40%)
-
-							i
-								position: absolute
-								bottom: -8px
-								left: 20px
-								top: initial
-								right: initial
-								color: white
-
-				.activity-stream__list-thumbnail
-					position: relative
-					display: flex
-					justify-content: center
-					align-items: center
-					overflow: hidden
-					width: 35px
-					height: auto
-					min-width: 35px
-					min-height: auto
-
-					+media-xs
-						display: none
+		height: 2px
+		top: 125%
+		position: absolute
+		width: 50px
 
 
-					&.image i
-						color: $node-type-asset_image
-					&.file i
-						color: $node-type-asset_file
-					&.video i
-						color: $node-type-asset_video
+nav#nav-tabs,
+nav#sub-nav-tabs
+	ul#nav-tabs__list,
+	ul#sub-nav-tabs__list
+		margin: 0
+		padding: 0
+		list-style: none
+		border-bottom: thin solid $color-background
+		+clearfix
 
-					i
-						+position-center-translate
-						left: 23px
-						top: 21px
-						font-size: 1.1em
-
-					img
-						max-height: $activity-stream-thumbnail-size
-						+position-center-translate
-
-				.activity-stream__list-details
-					display: flex
-					flex-direction: column
-					justify-content: space-around
-					flex: 1
-					overflow: hidden
-					position: relative
-					max-width: 100%
-					padding: 10px 0
-
-					+media-xs
-						margin-left: 0
-
-					.ribbon
-						+ribbon
-						right: -47px
-						top: 5px
-						font-size: 12px
-
-						span
-							padding: 1px 50px
-
-					.title
-						padding: 0 10px
-						color: $color-text-dark
-
-						span
-							@include badge(hsl(hue($color-success), 60%, 45%), 3px)
-							font-size: .7em
-							padding: 1px 5px
-							margin-right: 5px
-
-	ul.meta
-		+list-meta
-		padding: 5px 10px 0 10px
-		font-size: .85em
-		color: $color-text-dark-secondary
-		display: flex
-		white-space: nowrap
-
-		&.extra
-			margin-top: auto
-
-		li
-			padding-left: 10px
-			&:before
-				left: -5px
-			&.where-project
-				+text-overflow-ellipsis
-
-	section.comments
-		padding: 0 15px 5px
-
-		ul
-			padding: 0
-
-		> ul
-			list-style-type: none
-			margin: 10px 0 0
-
-			> li
-				+text-overflow-ellipsis
-				border-top: thin solid $color-background-dark
-				padding: 10px 0
-
-				&:first-child
-					border: none
-
-				> a
-					+text-overflow-ellipsis
-					color: $color-text
-					display: block
-					padding-bottom: 5px
-
-	section.blog-stream
-		+media-md
-			padding-left: 10px
-		+media-sm
-			padding-left: 10px
-		position: relative
-
-		.feed
-			position: absolute
-			top: 10px
-			right: 10px
-			font-size: 1.4em
-			color: lighten($color-text-dark-hint, 10%)
+		li.nav-tabs__list-tab
+			float: left
+			border: none
+			border-bottom: 3px solid transparent
+			color: $color-text-dark-primary
+			user-select: none
 
 			&:hover
+				border-color: rgba($color-secondary, .3)
+				cursor: pointer
+				color: $color-text-dark
+				a
+					color: $color-text-dark
+
+			a
+				display: block
+				text-decoration: none
+				padding: 10px 15px 5px
+				color: $color-text-dark-primary
+
+			i
+				margin-right: 5px
+				color: $color-text-dark-secondary
+				font-size: .9em
+
+				&.pi-blender
+					margin-right: 10px
+
+			span
+				color: $color-text-dark-hint
+				margin-left: 5px
+
+			&.active
+				border-color: $color-secondary
+				color: $color-secondary-dark
+				a, i
+					color: $color-secondary-dark
+
+			&.disabled
+				border-color: $color-background-light
+				color: $color-text-dark-hint
+				cursor: default
+				a, i
+					color: $color-text-dark-hint
+
+				&:hover
+					border-color: $color-background-light
+					pointer-events: none
+
+.dashboard-container
+	word-break: break-word
+
+section.stream
+	ul.activity-stream__list
+		$activity-stream-thumbnail-size: 110px
+
+		> li
+			position: relative
+			display: flex
+			padding: 10px 0
+			overflow: hidden
+			border-top: thin solid $color-background-dark
+
+			&:first-child
+				border: none
+
+			&.active .activity-stream__list-details .title
 				color: $color-primary
 
-		> ul
-			margin: 0
-			padding: 0
-			list-style: none
-			border-top: thin solid $color-background
+			&:hover
+				.title
+					text-decoration: underline
+				&.video
+					a.image
+						&:hover
+							i
+								font-size: 3.5em
+							img
+								opacity: .9
+						img
+							opacity: .7
+							z-index: 0
+							transition: opacity 150ms ease-in-out
 
-			.blog_index-item
-				+container-box
+						i
+							+position-center-translate
+							z-index: 1
+							color: rgba(white, .6)
+							font-size: 3em
+							transition: font-size 100ms ease-in-out
+
+			&.comment
+				.activity-stream__list-details
+					padding: 0
+					.title
+						color: $color-text-dark
+						padding: 7px 10px 2px 10px
+						font-size: 1em
+						margin: 0
+
+					ul.meta
+						+list-meta
+						font-size: .9em
+						padding: 0 10px 7px 10px
+
+						li
+							&.where-parent:before
+								content: '\e83a'
+								font-family: 'pillar-font'
+
+							&.what:before
+								display: none
+
+			&.post
+				.activity-stream__list-thumbnail
+					border-color: $node-type-post
+					background-color: $node-type-post
+				.activity-stream__list-details .title
+					color: darken($node-type-post, 15%)
+					font:
+						size: 1.3em
+						weight: 500
+
+			&.asset, &.comment, &.post
+				&:hover
+					cursor: pointer
+			&.empty
+				display: none
+				color: $color-text-dark-primary
+				padding: 20px
+				text-align: center
+				span
+					color: $color-primary
+					&:hover
+						text-decoration: underline
+						cursor: pointer
+
+			&.with-picture
+				min-height: $activity-stream-thumbnail-size
+
+				.activity-stream__list-thumbnail
+					background-color: black
+					width: $activity-stream-thumbnail-size * 1.69
+					min-width: $activity-stream-thumbnail-size * 1.69
+
+					.activity-stream__list-thumbnail-icon
+						position: absolute
+						top: 0
+						left: 0
+						right: 0
+						bottom: 0
+						font-size: 1.3em
+						text-shadow: 1px 1px 0 rgba(black, .2)
+						background-image: linear-gradient(10deg, rgba(black, .5) 0%, transparent 40%)
+
+						i
+							position: absolute
+							bottom: -8px
+							left: 20px
+							top: initial
+							right: initial
+							color: white
+
+			.activity-stream__list-thumbnail
+				position: relative
+				display: flex
+				justify-content: center
+				align-items: center
+				overflow: hidden
+				width: 35px
+				height: auto
+				min-width: 35px
+				min-height: auto
+
+				+media-xs
+					display: none
+
+
+				&.image i
+					color: $node-type-asset_image
+				&.file i
+					color: $node-type-asset_file
+				&.video i
+					color: $node-type-asset_video
+
+				i
+					+position-center-translate
+					left: 23px
+					top: 21px
+					font-size: 1.1em
+
+				img
+					max-height: $activity-stream-thumbnail-size
+					+position-center-translate
+
+			.activity-stream__list-details
 				display: flex
 				flex-direction: column
-				margin-bottom: 50px
+				justify-content: space-around
+				flex: 1
+				overflow: hidden
+				position: relative
+				max-width: 100%
+				padding: 10px 0
 
-				&:before
-					height: 1px
-					background-color: $color-background-dark
-					position: absolute
-					bottom: -26px
-					left: 25px
-					right: 25px
-					content: ' '
+				+media-xs
+					margin-left: 0
 
-				&:last-child
-					margin-bottom: 0
+				.ribbon
+					+ribbon
+					right: -47px
+					top: 5px
+					font-size: 12px
 
-					&:before
-						display: none
+					span
+						padding: 1px 50px
 
-				video
-					max-width: 100%
+				.title
+					padding: 0 10px
+					color: $color-text-dark
 
-				a.item-title
+					span
+						@include badge(hsl(hue($color-success), 60%, 45%), 3px)
+						font-size: .7em
+						padding: 1px 5px
+						margin-right: 5px
+
+section.comments
+	padding: 0 15px 5px
+
+	ul
+		padding: 0
+
+	> ul
+		list-style-type: none
+		margin: 10px 0 0
+
+		> li
+			+text-overflow-ellipsis
+			border-top: thin solid $color-background-dark
+			padding: 10px 0
+
+			&:first-child
+				border: none
+
+			> a
+				+text-overflow-ellipsis
+				color: $color-text
+				display: block
+				padding-bottom: 5px
+
+section.random-asset
+	border-bottom: thin solid $color-background-dark
+
+	ul.random-asset__list
+		list-style: none
+		padding: 0
+
+		> li
+			align-items: center
+			border-top: thin solid $color-background
+			display: flex
+			padding: 7px 0
+			position: relative
+			overflow: hidden
+
+			&:first-child
+				border-top: none
+
+			.ribbon
+				+ribbon
+				right: -47px
+				top: 5px
+				font:
+					size: 12px
+					weight: 500
+
+				z-index: 1
+
+				span
+					padding: 1px 50px
+
+			.random-asset__list-thumbnail
+				background-color: $color-background
+				display: block
+				height: 50px
+				margin-right: 15px
+				min-height: 50px
+				min-width: 50px
+				overflow: hidden
+				position: relative
+				width: 50px
+
+				img
+					width: 100%
+
+				i
+					+position-center-translate
 					font-size: 1.6em
-					padding: 5px 15px
+					color: $color-text-light
+
+				&.image
+					background-color: $node-type-asset_image
+				&.file
+					background-color: $node-type-asset_file
+					font-size: .8em
+				&.video
+					background-color: $node-type-asset_video
+					font-size: .8em
+				&.None
+					background-color: $node-type-group
+
+			.random-asset__list-details
+				.title
 					display: block
-					color: $color-text
+					font-size: 1em
+					color: $color-text-dark-primary
 
 					&:hover
 						color: $color-primary
 
 				ul.meta
 					+list-meta
+					padding-top: 5px
 					font-size: .9em
-					padding: 15px 15px 5px
 
+					li
+						&:before
+							left: -5px
+						&.what
+							text-transform: capitalize
 
-				&.blog-non-featured
-					border-radius: 0
-					margin: 0
+			&.featured
+				align-items: flex-start
+				flex-direction: column
+				padding: 0
 
-				.item-content
-					+node-details-description
-					padding: 10px 15px
-
-				.blog-stream__list-details
-					.title
-						color: $color-text-dark-primary
-						display: block
-						font-size: 1.3em
-
-						&:hover
-							color: $color-primary
-
-					ul.meta
-						+list-meta
-						padding-top: 5px
-						font-size: .9em
-						color: $color-text-dark-secondary
-
-						li
-							padding-left: 10px
-							&:before
-								left: -5px
-
-			.blog_index-header
-				display: block
-				position: relative
-
-				img
-					border-top-left-radius: 3px
-					border-top-right-radius: 3px
-					width: 100%
-
-		.more
-			text-align: center
-
-			a
-				color: $color-text
-				display: block
-				padding: 25px 0
-				text-decoration: underline
-				width: 100%
-
-				&:hover
-					color: $color-primary
-
-	section.random-asset
-		border-bottom: thin solid $color-background-dark
-
-		ul.random-asset__list
-			list-style: none
-			padding: 0
-
-			> li
-				align-items: center
-				border-top: thin solid $color-background
-				display: flex
-				padding: 7px 0
-				position: relative
-				overflow: hidden
-
-				&:first-child
-					border-top: none
-
-				.ribbon
-					+ribbon
-					right: -47px
-					top: 5px
-					font:
-						size: 12px
-						weight: 500
-
-					z-index: 1
-
-					span
-						padding: 1px 50px
-
-				.random-asset__list-thumbnail
-					background-color: $color-background
+				a.title
+					font-size: 1.1em
+					padding: 10px 0 5px
+					display: block
+					color: $color-text
+
+					&:hover
+						color: $color-primary
+
+				a.random-asset__thumbnail
 					display: block
-					height: 50px
-					margin-right: 15px
-					min-height: 50px
-					min-width: 50px
-					overflow: hidden
 					position: relative
-					width: 50px
+
+					&.video
+						background-color: black
+						img
+							opacity: .7
 
 					img
+						transition: opacity 150ms ease-in-out
 						width: 100%
+						max-width: 100%
 
 					i
 						+position-center-translate
-						font-size: 1.6em
-						color: $color-text-light
-
-					&.image
-						background-color: $node-type-asset_image
-					&.file
-						background-color: $node-type-asset_file
-						font-size: .8em
-					&.video
-						background-color: $node-type-asset_video
-						font-size: .8em
-					&.None
-						background-color: $node-type-group
-
-				.random-asset__list-details
-					.title
-						display: block
-						font-size: 1em
-						color: $color-text-dark-primary
-
-						&:hover
-							color: $color-primary
-
-					ul.meta
-						+list-meta
-						padding-top: 5px
-						font-size: .9em
-
-						li
-							&:before
-								left: -5px
-							&.what
-								text-transform: capitalize
-
-				&.featured
-					align-items: flex-start
-					flex-direction: column
-					padding: 0
-
-					a.title
-						font-size: 1.1em
-						padding: 10px 0 5px
-						display: block
-						color: $color-text
-
-						&:hover
-							color: $color-primary
-
-					a.random-asset__thumbnail
-						display: block
-						position: relative
-
-						&.video
-							background-color: black
-							img
-								opacity: .7
-
-						img
-							transition: opacity 150ms ease-in-out
-							width: 100%
-							max-width: 100%
+						color: white
+						font-size: 3em
+						text-shadow: 0 0 25px black
+						transition: font-size 150ms ease-in-out
 
+					&:hover
 						i
-							+position-center-translate
-							color: white
-							font-size: 3em
-							text-shadow: 0 0 25px black
-							transition: font-size 150ms ease-in-out
+							font-size: 3.5em
+						img
+							opacity: .85
 
-						&:hover
-							i
-								font-size: 3.5em
-							img
-								opacity: .85
-
-					ul.meta
-						+list-meta
-						padding-bottom: 10px
+				ul.meta
+					+list-meta
+					padding-bottom: 10px
 
 
 section.announcement
@@ -649,31 +482,21 @@ section.announcement
 			justify-content: space-around
 			flex-wrap: wrap
 
-section.dashboard-in-production
-	.in-production-project
-		border-bottom: thin solid $color-background-dark
-		color: $color-text-dark-primary
-		display: block
-		font-size: 1.1em
-		margin-bottom: 15px
-
-		> img
-			margin-bottom: 15px
 
 body.homepage
-	.dashboard-container
-		.dashboard-main
-			+media-xs
-				width: 100%
-			background-color: transparent
-			box-shadow: none
-			width: 60%
+	.blog
+		// Custom tweak to Bootstrap grid for the only case when
+		// the post is inside a column (it's usually centered in the page).
+		.col-md-9
+			flex: 1
+			max-width: 100%
 
-		.dashboard-secondary
-			+container-box
-			+media-xs
-				width: 100%
-			width: 38%
+		.jumbotron
+			padding-top: 6em
+			padding-bottom: 6em
 
-			> section
-				padding: 15px
+			*
+				font-size: $h1-font-size
+
+			.lead
+				font-size: $font-size-base
diff --git a/src/styles/project-landing.sass b/src/styles/project-landing.sass
index 81e4be2..3d65012 100644
--- a/src/styles/project-landing.sass
+++ b/src/styles/project-landing.sass
@@ -147,13 +147,6 @@ section
 	border-top: thin solid $color-background
 	margin: 0 auto
 
-a.btn
-	margin: 20px auto
-	font-size: 1.3em
-	padding: 9px 18px
-	border-radius: 8px
-	color: $color-text-dark
-
 .navbar-secondary
 	max-width: 620px
 	margin: 0 auto
diff --git a/src/templates/homepage.pug b/src/templates/homepage.pug
index f8cf9d5..33aaae7 100644
--- a/src/templates/homepage.pug
+++ b/src/templates/homepage.pug
@@ -23,237 +23,224 @@ meta(name="twitter:image", content="{% if main_project.picture_header %}{{ main_
 | {% endblock navigation_tabs %}
 
 | {% block body %}
-.dashboard-container
-	section.dashboard-main
+.container-fluid.dashboard-container.imgs-fluid
+	.row
+		.col-md-8
+			section.blog
+				ul.list-unstyled
+					| {% if latest_posts %}
+					| {% for node in latest_posts %}
+					| {{ render_blog_post(node) }}
+					| {% endfor %}
+					| {% else %}
+					li
+						| No blog entries... yet!
+					| {% endif %}
 
-		section.blog-stream
-			ul.blog-stream__list
-				| {% if latest_posts %}
-				| {% for node in latest_posts %}
-				| {{ render_blog_post(node) }}
-				| {% endfor %}
-				| {% else %}
-				li
-					.blog-stream__list-details
-						ul.meta
-							li.when No blog entries... yet!
-				| {% endif %}
+				.d-block.text-center
+					a.d-inline-block.p-3.text-muted(href="{{ url_for('main.main_blog') }}")
+						| See All Blog Posts
 
-			.more
-				a(href="{{ url_for('main.main_blog') }}")
-					| See All Blog Posts
+					a.d-inline-block.p-3.text-muted(
+						href="{{ url_for('main.feeds_blogs') }}",
+						title="Blogs Feed",
+						data-toggle="tooltip",
+						data-placement="left")
+						i.pi-rss
+						| RSS Feed
 
-			a.feed(
-				href="{{ url_for('main.feeds_blogs') }}",
-				title="Blogs Feed",
-				data-toggle="tooltip",
-				data-placement="left")
-				i.pi-rss
+		.col-md-4
+			.dashboard-sidebar
+				section.pt-3
+					h6.title-underline In Production
+					a(href="/p/spring/")
+						img(src="{{ url_for('static', filename='assets/img/projects/spring_450x150.jpg')}}")
 
+					p.text-muted.pt-2.
+						A poetic short film about a mountain spirit and her wise little dog. #[a(href="/p/spring/") Check it out].
 
-	section.dashboard-secondary
-		| {{ navigation_tabs(title) }}
+				section.stream.py-3
+					h6.title-underline Latest Assets
 
-		section.dashboard-in-production
-			h6.section-title In Production
-			span.section-lead.
-				Check out these projects currently in production!
-
-			a.in-production-project(href="https://cloud.blender.org/p/spring/")
-				img(src="{{ url_for('static', filename='assets/img/projects/spring_450x150.jpg')}}")
-				p.
-					#[strong Spring] - A poetic short film about a mountain spirit and her wise little dog.
-
-			a.in-production-project(href="https://cloud.blender.org/p/hero/")
-				img(src="{{ url_for('static', filename='assets/img/projects/hero_450x150.jpg')}}")
-				p.
-					#[strong Hero] - A '2D' trailer-style movie focused on getting grease pencil
-					production ready for Blender 2.8.
-
-		section.stream
-
-			h6.section-title Latest Assets
-
-			ul.activity-stream__list.list-unstyled
-				| {% for n in activity_stream %}
-				li(
-					class="{{ n.node_type }} {{ n.properties.content_type }} {% if n.picture %}with-picture{% endif %}",
-					data-url="{{ n.url }}")
-					a.activity-stream__list-thumbnail(
-						class="{{ n.properties.content_type }}",
-						href="{{ n.url }}")
-						| {% if n.picture %}
-						img(src="{{ n.picture.thumbnail('m', api=api) }}")
-						| {% endif %}
-
-						.activity-stream__list-thumbnail-icon
-							| {% if n.node_type == 'asset' %}
-							| {% if n.properties.content_type == 'video' %}
-							i.pi-play
-							| {% elif n.properties.content_type == 'image' %}
-							i.pi-picture
-							| {% elif n.properties.content_type == 'file' %}
-							i.pi-file-archive
-							| {% else %}
-							i.pi-folder
-							| {% endif %}
-							| {% endif %}
-
-
-					.activity-stream__list-details
-						a.title(href="{{ n.url }}")
-							| {{ n.name }}
-
-						| {% if n.permissions.world %}
-						.ribbon
-							span free
-						| {% endif %}
-						ul.meta
-							| {% if not n.picture %}
-							li.when
-								a(href="{{ n.url }}", title="{{ n._created }}") {{ n._created | pretty_date_time }}
-							li.who {{ n.user.full_name }}
-							| {% endif %}
-
-							| {% if n.attached_to %}
-							li.where-parent
-								a(href="{{ n.attached_to.url }}") {{ n.attached_to.name }}
-							| {% endif %}
-							li.where-project
-								a.project(href="{{ url_for('projects.view', project_url=n.project.url) }}") {{ n.project.name }}
-							li.what
-								| {% if n.node_type == 'asset' %}
-								| {{ n.properties.content_type | undertitle  }}
+					ul.activity-stream__list.list-unstyled
+						| {% for n in activity_stream %}
+						li(
+							class="{{ n.node_type }} {{ n.properties.content_type }} {% if n.picture %}with-picture{% endif %}",
+							data-url="{{ n.url }}")
+							a.activity-stream__list-thumbnail(
+								class="{{ n.properties.content_type }}",
+								href="{{ n.url }}")
+								| {% if n.picture %}
+								img(src="{{ n.picture.thumbnail('m', api=api) }}")
 								| {% endif %}
 
-						| {% if n.picture %}
-						ul.meta.extra
-							li.when
-								a(href="{{ n.url }}", title="{{ n._created }}") {{ n._created | pretty_date_time }}
-							li.who {{ n.user.full_name }}
-						| {% endif %}
-				| {% endfor %}
-
-				li.activity-stream__list-item.empty#activity-stream__empty
-					| No items to list.
+								.activity-stream__list-thumbnail-icon
+									| {% if n.node_type == 'asset' %}
+									| {% if n.properties.content_type == 'video' %}
+									i.pi-play
+									| {% elif n.properties.content_type == 'image' %}
+									i.pi-picture
+									| {% elif n.properties.content_type == 'file' %}
+									i.pi-file-archive
+									| {% else %}
+									i.pi-folder
+									| {% endif %}
+									| {% endif %}
 
 
-		section.random-asset
-			h6.section-title
-				a(href="/search") Explore the Cloud
-			span.section-lead Random selection of the best assets &amp; tutorials
+							.activity-stream__list-details
+								a.title(href="{{ n.url }}")
+									| {{ n.name }}
 
-			ul.random-asset__list.list-unstyled
-				| {% for n in random_featured %}
-				| {% if n.picture and loop.first %}
-				li.random-asset__list-item.project
-					| {% if n.project.picture_square %}
-					a.random-asset__list-thumbnail(
-						href="{{ n.project.url }}")
-						img.image(src="{{ n.project.picture_square.thumbnail('s', api=api) }}")
-					| {% endif %}
-					.random-asset__list-details
-						a.title(href="{{ n.project.url }}") {{ n.project.name }}
-						| {% if n.project.summary %}
-						ul.meta
-							li.what
-								a(href="{{ n.project.url }}") {{ n.project.summary }}
-						| {% endif %}
+								| {% if n.permissions.world %}
+								.ribbon
+									span free
+								| {% endif %}
+								ul.list-unstyled.d-flex.text-muted
+									| {% if not n.picture %}
+									li.when
+										a(href="{{ n.url }}", title="{{ n._created }}") {{ n._created | pretty_date_time }}
+									li.who {{ n.user.full_name }}
+									| {% endif %}
 
-				li.random-asset__list-item.featured
-					| {% if n.permissions.world %}
-					.ribbon
-						span free
-					| {% endif %}
-					a.random-asset__thumbnail(
-						href="{{ n.url }}",
-						class="{{ n.properties.content_type }}")
-						| {% if n.picture %}
-						img(src="{{ n.picture.thumbnail('l', api=api) }}")
+									| {% if n.attached_to %}
+									li.where-parent
+										a(href="{{ n.attached_to.url }}") {{ n.attached_to.name }}
+									| {% endif %}
+									li.where-project
+										a.project(href="{{ url_for('projects.view', project_url=n.project.url) }}") {{ n.project.name }}
+									li.what
+										| {% if n.node_type == 'asset' %}
+										| {{ n.properties.content_type | undertitle  }}
+										| {% endif %}
 
-						| {% if n.properties.content_type == 'video' %}
-						i.pi-play
-						| {% endif %}
+								| {% if n.picture %}
+								ul.list-unstyled.d-flex.text-muted.extra
+									li.when
+										a(href="{{ n.url }}", title="{{ n._created }}") {{ n._created | pretty_date_time }}
+									li.who {{ n.user.full_name }}
+								| {% endif %}
+						| {% endfor %}
 
-						| {% endif %}
+						li.activity-stream__list-item.empty#activity-stream__empty
+							| No items to list.
 
-					a.title(href="{{ n.url }}")
-						| {{ n.name }}
-					ul.meta
-						li.what
-							a(href="{{ n.url }}")
-								| {% if n.properties.content_type %}{{ n.properties.content_type | undertitle }}{% else %}Folder{% endif %}
-						li.where
-							a(href="{{ n.project.url }}")
-								| {{ n.project.name }}
-				| {% else %}
 
-				li
-					| {% if n.permissions.world %}
-					.ribbon
-						span free
-					| {% endif %}
-					a.random-asset__list-thumbnail(
-						href="{{ n.url }}",
-						class="{{ n.properties.content_type }}")
-						| {% if n.picture %}
-						img.image(src="{{ n.picture.thumbnail('s', api=api) }}")
+				section.random-asset.py-3
+					h6.title-underline
+						a(href="/search") Explore the Cloud
+					.pb-3.text-muted Random selection of the best assets &amp; tutorials
+
+					ul.random-asset__list.list-unstyled
+						| {% for n in random_featured %}
+						| {% if n.picture and loop.first %}
+						li.random-asset__list-item.project
+							| {% if n.project.picture_square %}
+							a.random-asset__list-thumbnail(
+								href="{{ n.project.url }}")
+								img.image(src="{{ n.project.picture_square.thumbnail('s', api=api) }}")
+							| {% endif %}
+							.random-asset__list-details
+								a.title(href="{{ n.project.url }}") {{ n.project.name }}
+								| {% if n.project.summary %}
+								ul.list-unstyled.d-flex.text-muted
+									li.what
+										a(href="{{ n.project.url }}") {{ n.project.summary }}
+								| {% endif %}
+
+						li.random-asset__list-item.featured
+							| {% if n.permissions.world %}
+							.ribbon
+								span free
+							| {% endif %}
+							a.random-asset__thumbnail(
+								href="{{ n.url }}",
+								class="{{ n.properties.content_type }}")
+								| {% if n.picture %}
+								img(src="{{ n.picture.thumbnail('l', api=api) }}")
+
+								| {% if n.properties.content_type == 'video' %}
+								i.pi-play
+								| {% endif %}
+
+								| {% endif %}
+
+							a.title(href="{{ n.url }}")
+								| {{ n.name }}
+							ul.list-unstyled.d-flex.text-muted
+								li.what
+									a(href="{{ n.url }}")
+										| {% if n.properties.content_type %}{{ n.properties.content_type | undertitle }}{% else %}Folder{% endif %}
+								li.where
+									a(href="{{ n.project.url }}")
+										| {{ n.project.name }}
 						| {% else %}
-						| {% if n.properties.content_type == 'video' %}
-						i.pi-film-thick
-						| {% elif n.properties.content_type == 'image' %}
-						i.pi-picture
-						| {% elif n.properties.content_type == 'file' %}
-						i.pi-file-archive
+
+						li
+							| {% if n.permissions.world %}
+							.ribbon
+								span free
+							| {% endif %}
+							a.random-asset__list-thumbnail(
+								href="{{ n.url }}",
+								class="{{ n.properties.content_type }}")
+								| {% if n.picture %}
+								img.image(src="{{ n.picture.thumbnail('s', api=api) }}")
+								| {% else %}
+								| {% if n.properties.content_type == 'video' %}
+								i.pi-film-thick
+								| {% elif n.properties.content_type == 'image' %}
+								i.pi-picture
+								| {% elif n.properties.content_type == 'file' %}
+								i.pi-file-archive
+								| {% else %}
+								i.pi-folder
+								| {% endif %}
+								| {% endif %}
+							.random-asset__list-details
+								a.title(href="{{ n.url }}") {{ n.name }}
+								ul.list-unstyled.d-flex.text-muted
+									li.what
+										a(href="{{ n.url }}")
+											| {% if n.properties.content_type %}{{ n.properties.content_type }}{% else %}Folder{% endif %}
+									li.where
+										a(href="{{ n.project.url }}") {{ n.project.name }}
+
+						| {% endif %}
+						| {% endfor %}
+
+
+				section.comments.py-3
+					h6.title-underline Latest Comments
+
+					ul.list-unstyled
+						| {% if latest_comments %}
+						| {% for n in latest_comments %}
+						li(
+							class="{{ n.node_type }}",
+							data-url="{{ n.url }}")
+
+							a.comment-content(href="{{ n.url }}")
+								| {{ n.properties.content | striptags | truncate(200) }}
+
+							ul.list-unstyled.d-flex.text-muted
+								li.who {{ n.user.full_name }}
+								| {% if n.attached_to %}
+
+								li.where-parent
+									a(href="{{ n.attached_to.url }}") {{ n.attached_to.name }}
+								| {% endif %}
+
+								li.when
+									a(href="{{ n.url }}", title="{{ n._created }}")
+										| {{ n._created | pretty_date_time }}
+						| {% endfor %}
+
 						| {% else %}
-						i.pi-folder
+						li.activity-stream__list-item.empty#activity-stream__empty
+							| No comments... yet!
+
 						| {% endif %}
-						| {% endif %}
-					.random-asset__list-details
-						a.title(href="{{ n.url }}") {{ n.name }}
-						ul.meta
-							li.what
-								a(href="{{ n.url }}")
-									| {% if n.properties.content_type %}{{ n.properties.content_type }}{% else %}Folder{% endif %}
-							li.where
-								a(href="{{ n.project.url }}") {{ n.project.name }}
-
-				| {% endif %}
-				| {% endfor %}
-
-
-		section.comments
-
-			h6.section-title Latest Comments
-
-			ul.list-unstyled
-				| {% if latest_comments %}
-				| {% for n in latest_comments %}
-				li(
-					class="{{ n.node_type }}",
-					data-url="{{ n.url }}")
-
-					a.comment-content(href="{{ n.url }}")
-						| {{ n.properties.content | striptags | truncate(200) }}
-
-					ul.meta
-						li.who {{ n.user.full_name }}
-						| {% if n.attached_to %}
-
-						li.where-parent
-							a(href="{{ n.attached_to.url }}") {{ n.attached_to.name }}
-						| {% endif %}
-
-						li.when
-							a(href="{{ n.url }}", title="{{ n._created }}")
-								| {{ n._created | pretty_date_time }}
-				| {% endfor %}
-
-				| {% else %}
-				li.activity-stream__list-item.empty#activity-stream__empty
-					| No comments... yet!
-
-				| {% endif %}
 
 | {% endblock %}