Homepage cleanup.

src/styles/_homepage.sass

@@ -1,61 +1,22 @@
-.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
+.title-underline
-			max-width: 100%
-
-	section.dashboard-main
-		+container-box
-		width: 52%
-
-	section.dashboard-secondary
-		width: 46%
-		flex-direction: column
-		margin-right: auto
-
-	span.section-lead
-		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
+	margin-bottom: 20px
 
 	&:before
-				position: absolute
+		background-color: $primary
-				width: 50px
-				height: 2px
-				top: 125%
 		content: ' '
 		display: block
-				background-color: $color-primary
+		height: 2px
+		top: 125%
+		position: absolute
+		width: 50px
 
-			a
-				color: $color-text
 
-				&:hover
+nav#nav-tabs,
-					color: $color-primary
+nav#sub-nav-tabs
-					cursor: pointer
-
-	nav#nav-tabs,
-	nav#sub-nav-tabs
 	ul#nav-tabs__list,
 	ul#sub-nav-tabs__list
 		margin: 0
@@ -113,10 +74,10 @@
 					border-color: $color-background-light
 					pointer-events: none
 
-	section.stream
+.dashboard-container
-		background-color: white
+	word-break: break-word
-		border-bottom: thin solid $color-background-dark
 
+section.stream
 	ul.activity-stream__list
 		$activity-stream-thumbnail-size: 110px
 
@@ -165,6 +126,8 @@
 						margin: 0
 
 					ul.meta
+						+list-meta
+						font-size: .9em
 						padding: 0 10px 7px 10px
 
 						li
@@ -289,25 +252,7 @@
 						padding: 1px 5px
 						margin-right: 5px
 
-	ul.meta
+section.comments
-		+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
@@ -331,119 +276,7 @@
 				display: block
 				padding-bottom: 5px
 
-	section.blog-stream
+section.random-asset
-		+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%)
-
-			&:hover
-				color: $color-primary
-
-		> ul
-			margin: 0
-			padding: 0
-			list-style: none
-			border-top: thin solid $color-background
-
-			.blog_index-item
-				+container-box
-				display: flex
-				flex-direction: column
-				margin-bottom: 50px
-
-				&:before
-					height: 1px
-					background-color: $color-background-dark
-					position: absolute
-					bottom: -26px
-					left: 25px
-					right: 25px
-					content: ' '
-
-				&:last-child
-					margin-bottom: 0
-
-					&:before
-						display: none
-
-				video
-					max-width: 100%
-
-				a.item-title
-					font-size: 1.6em
-					padding: 5px 15px
-					display: block
-					color: $color-text
-
-					&:hover
-						color: $color-primary
-
-				ul.meta
-					+list-meta
-					font-size: .9em
-					padding: 15px 15px 5px
-
-
-				&.blog-non-featured
-					border-radius: 0
-					margin: 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
@@ -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
+	.blog
-		.dashboard-main
+		// Custom tweak to Bootstrap grid for the only case when
-			+media-xs
+		// the post is inside a column (it's usually centered in the page).
-				width: 100%
+		.col-md-9
-			background-color: transparent
+			flex: 1
-			box-shadow: none
+			max-width: 100%
-			width: 60%
 
-		.dashboard-secondary
+		.jumbotron
-			+container-box
+			padding-top: 6em
-			+media-xs
+			padding-bottom: 6em
-				width: 100%
-			width: 38%
 
-			> section
+			*
-				padding: 15px
+				font-size: $h1-font-size
+
+			.lead
+				font-size: $font-size-base

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

src/templates/homepage.pug

@@ -23,56 +23,44 @@ meta(name="twitter:image", content="{% if main_project.picture_header %}{{ main_
 | {% endblock navigation_tabs %}
 
 | {% block body %}
-.dashboard-container
+.container-fluid.dashboard-container.imgs-fluid
-	section.dashboard-main
+	.row
-
+		.col-md-8
-		section.blog-stream
+			section.blog
-			ul.blog-stream__list
+				ul.list-unstyled
 					| {% if latest_posts %}
 					| {% for node in latest_posts %}
 					| {{ render_blog_post(node) }}
 					| {% endfor %}
 					| {% else %}
 					li
-					.blog-stream__list-details
+						| No blog entries... yet!
-						ul.meta
-							li.when No blog entries... yet!
 					| {% endif %}
 
-			.more
+				.d-block.text-center
-				a(href="{{ url_for('main.main_blog') }}")
+					a.d-inline-block.p-3.text-muted(href="{{ url_for('main.main_blog') }}")
 						| See All Blog Posts
 
-			a.feed(
+					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
 
-
+		.col-md-4
-	section.dashboard-secondary
+			.dashboard-sidebar
-		| {{ navigation_tabs(title) }}
+				section.pt-3
-
+					h6.title-underline In Production
-		section.dashboard-in-production
+					a(href="/p/spring/")
-			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/")
+					p.text-muted.pt-2.
-				img(src="{{ url_for('static', filename='assets/img/projects/hero_450x150.jpg')}}")
+						A poetic short film about a mountain spirit and her wise little dog. #[a(href="/p/spring/") Check it out].
-				p.
-					#[strong Hero] - A '2D' trailer-style movie focused on getting grease pencil
-					production ready for Blender 2.8.
 
-		section.stream
+				section.stream.py-3
-
+					h6.title-underline Latest Assets
-			h6.section-title Latest Assets
 
 					ul.activity-stream__list.list-unstyled
 						| {% for n in activity_stream %}
@@ -108,7 +96,7 @@ meta(name="twitter:image", content="{% if main_project.picture_header %}{{ main_
 								.ribbon
 									span free
 								| {% endif %}
-						ul.meta
+								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 }}
@@ -127,7 +115,7 @@ meta(name="twitter:image", content="{% if main_project.picture_header %}{{ main_
 										| {% endif %}
 
 								| {% if n.picture %}
-						ul.meta.extra
+								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 }}
@@ -138,10 +126,10 @@ meta(name="twitter:image", content="{% if main_project.picture_header %}{{ main_
 							| No items to list.
 
 
-		section.random-asset
+				section.random-asset.py-3
-			h6.section-title
+					h6.title-underline
 						a(href="/search") Explore the Cloud
-			span.section-lead Random selection of the best assets & tutorials
+					.pb-3.text-muted Random selection of the best assets & tutorials
 
 					ul.random-asset__list.list-unstyled
 						| {% for n in random_featured %}
@@ -155,7 +143,7 @@ meta(name="twitter:image", content="{% if main_project.picture_header %}{{ main_
 							.random-asset__list-details
 								a.title(href="{{ n.project.url }}") {{ n.project.name }}
 								| {% if n.project.summary %}
-						ul.meta
+								ul.list-unstyled.d-flex.text-muted
 									li.what
 										a(href="{{ n.project.url }}") {{ n.project.summary }}
 								| {% endif %}
@@ -179,7 +167,7 @@ meta(name="twitter:image", content="{% if main_project.picture_header %}{{ main_
 
 							a.title(href="{{ n.url }}")
 								| {{ n.name }}
-					ul.meta
+							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 %}
@@ -211,7 +199,7 @@ meta(name="twitter:image", content="{% if main_project.picture_header %}{{ main_
 								| {% endif %}
 							.random-asset__list-details
 								a.title(href="{{ n.url }}") {{ n.name }}
-						ul.meta
+								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 %}
@@ -222,9 +210,8 @@ meta(name="twitter:image", content="{% if main_project.picture_header %}{{ main_
 						| {% endfor %}
 
 
-		section.comments
+				section.comments.py-3
-
+					h6.title-underline Latest Comments
-			h6.section-title Latest Comments
 
 					ul.list-unstyled
 						| {% if latest_comments %}
@@ -236,7 +223,7 @@ meta(name="twitter:image", content="{% if main_project.picture_header %}{{ main_
 							a.comment-content(href="{{ n.url }}")
 								| {{ n.properties.content | striptags | truncate(200) }}
 
-					ul.meta
+							ul.list-unstyled.d-flex.text-muted
 								li.who {{ n.user.full_name }}
 								| {% if n.attached_to %}