Home: In Production section for ongoing projects

src/styles/_homepage.sass

@@ -1,45 +1,38 @@
 .dashboard-container
+	+container-behavior
 	+media-xs
 		flex-direction: column
+	align-content: center
+	align-items: flex-start
 	display: flex
 	justify-content: space-around
-	align-items: flex-start
-	align-content: center
 	word-break: break-word
 
-	+container-behavior
+	section.dashboard-main,
-
+	section.dashboard-secondary
-	section#main
-		+container-box
-		margin: 20px auto
-		width: 52%
-
 		+media-xs
 			width: 100%
-			border-radius: 0
+		margin: 20px auto
 
-	section#side
+		img
+			max-width: 100%
+
+	section.dashboard-main
+		+container-box
+		width: 52%
+
+	section.dashboard-secondary
 		width: 46%
 		flex-direction: column
 		margin-right: auto
 
-		+media-xs
-			width: 100%
-
-	section.blog-stream,
-	section.random-asset
-		margin: 20px auto
-
-		+media-xs
-			border-radius: 0
-
 	span.section-lead
 		display: block
-			padding: 10px 0 10px 15px
+		padding: 10px 0
 		color: $color-text-dark-secondary
 
-	section#main,
+	section.dashboard-main,
-	section#side
+	section.dashboard-secondary
 		h4
 			padding-bottom: 5px
 			margin-bottom: 20px
@@ -61,8 +54,8 @@
 					color: $color-primary
 					cursor: pointer
 
-	section#nav-tabs,
+	nav#nav-tabs,
-	section#sub-nav-tabs
+	nav#sub-nav-tabs
 		ul#nav-tabs__list,
 		ul#sub-nav-tabs__list
 			margin: 0
@@ -73,7 +66,6 @@
 
 			li.nav-tabs__list-tab
 				float: left
-				// font-size: 1.1em
 				border: none
 				border-bottom: 3px solid transparent
 				color: $color-text-dark-primary
@@ -145,8 +137,6 @@
 	section.stream
 		background-color: white
 		border-bottom: thin solid $color-background-dark
-		padding: 15px 15px 0
-		position: relative
 
 		ul.activity-stream__list
 			list-style: none
@@ -492,14 +482,10 @@
 
 	section.random-asset
 		border-bottom: thin solid $color-background-dark
-		margin: 40px 0
-
-		h4
-			padding-left: 15px
 
 		ul.random-asset__list
 			list-style: none
-			padding: 0 15px
+			padding: 0
 
 			> li
 				align-items: center
@@ -623,7 +609,8 @@
 
 section.announcement
 	+container-box
-	margin: 20px 15px
+	margin-left: 15px
+	margin-right: 15px
 
 	.header-icons
 		display: flex
@@ -732,126 +719,31 @@ section.announcement
 					+button(hsl(hue($color-success), 60%, 40%), 3px, true)
 
 
-/* Sections for the non-logged in */
+section.dashboard-in-production
-section.pricing
+	.in-production-project
-	padding: 50px 0
+		border-bottom: thin solid $color-background-dark
-	margin-bottom: 25px
+		color: $color-text-dark-primary
-	background-color: $color-background-light
+		display: block
-	+clearfix
+		font-size: 1.1em
-	+media-xs
-		padding: 0
-
-	h2
-		text-align: center
-		font-size: 2.3em
-		text-shadow: 1px 1px 0 white
-		margin:
-			top: 10px
-			bottom: 50px
-		padding: 0
-
-		+media-xs
-			font-size: 1.6em
-
-	.box
-		margin-top: 40px
-		padding: 20px 20px 60px 20px
-		border: 1px solid $color-text-dark-hint
-		background-color: white
-		position: relative
-		text-align: center
-		border-top: 3px solid rgba($color-text-dark-secondary, .5)
-		border-bottom-left-radius: 3px
-		border-bottom-right-radius: 3px
-
-		+media-xs
 		margin-bottom: 15px
 
-		&.yearly
+		> img
-			border-top: 3px solid $color-info
+			margin-bottom: 15px
-			transform: scale(1.1)
-
-			+media-xs
-				transform: scale(1)
-
-			a.sign-up-now
-				+button($color-primary, 3px, true)
-
-		h3
-			font:
-				size: 1.8em
-				family: $font-body
-			padding-bottom: 0
-			margin: 25px 0 0 10px
-
-		.pricing-display
-			position: relative
-			color: $color-info
-			padding: 10px 0
-
-			.currency-sign,
-			.digit-dec
-				font-size: 1.7em
-				position: relative
-				top: -25px
-				font-weight: 100
-
-			.digit-int
-				font-size: 4.5em
-				font-weight: 100
-
-		.pricing-caption
-			color: $color-text-dark-hint
-			text-align: center
-			padding-bottom: 25px
-
-			ul
-				text-align: left
-
-		+list-bullets
-
-		ul
-			color: $color-text-dark-primary
-			padding-left: 10px
-			margin-top: 15px
-
-			li
-				padding-bottom: 8px
-
-		.sign-up-now
-			position: absolute
-			bottom: 25px
-			width: 65%
-			left: 50%
-			transform: translateX(-50%)
-			font-size: 1.2em
-
-			+button($color-primary, 3px)
-			padding: 5px 25px
-			white-space: nowrap
-			text-align: center
-
-	.education
-		color: $color-text-dark-primary
-		font-size: 1.1em
-		padding: 25px 15px 0
-		text-align: center
-
-		h3
-			color: $color-primary-dark
-
-		.btn
-			margin-top: 15px
-			min-width: 200px
 
 body.homepage
 	.dashboard-container
-		#main
+		.dashboard-main
+			+media-xs
+				width: 100%
+			background-color: transparent
+			box-shadow: none
+			width: 60%
+
+		.dashboard-secondary
+			+container-box
 			+media-xs
 				width: 100%
 			width: 38%
 
-		#side
+			> section
-			+media-xs
+				padding: 15px
-				width: 100%
-			width: 60%

src/styles/_welcome.sass

@@ -279,3 +279,115 @@
 .container.wide-on-sm
 	+media-sm
 		width: 100%
+
+
+section.pricing
+	padding: 50px 0
+	margin-bottom: 25px
+	background-color: $color-background-light
+	+clearfix
+	+media-xs
+		padding: 0
+
+	h2
+		text-align: center
+		font-size: 2.3em
+		text-shadow: 1px 1px 0 white
+		margin:
+			top: 10px
+			bottom: 50px
+		padding: 0
+
+		+media-xs
+			font-size: 1.6em
+
+	.box
+		margin-top: 40px
+		padding: 20px 20px 60px 20px
+		border: 1px solid $color-text-dark-hint
+		background-color: white
+		position: relative
+		text-align: center
+		border-top: 3px solid rgba($color-text-dark-secondary, .5)
+		border-bottom-left-radius: 3px
+		border-bottom-right-radius: 3px
+
+		+media-xs
+			margin-bottom: 15px
+
+		&.yearly
+			border-top: 3px solid $color-info
+			transform: scale(1.1)
+
+			+media-xs
+				transform: scale(1)
+
+			a.sign-up-now
+				+button($color-primary, 3px, true)
+
+		h3
+			font:
+				size: 1.8em
+				family: $font-body
+			padding-bottom: 0
+			margin: 25px 0 0 10px
+
+		.pricing-display
+			position: relative
+			color: $color-info
+			padding: 10px 0
+
+			.currency-sign,
+			.digit-dec
+				font-size: 1.7em
+				position: relative
+				top: -25px
+				font-weight: 100
+
+			.digit-int
+				font-size: 4.5em
+				font-weight: 100
+
+		.pricing-caption
+			color: $color-text-dark-hint
+			text-align: center
+			padding-bottom: 25px
+
+			ul
+				text-align: left
+
+		+list-bullets
+
+		ul
+			color: $color-text-dark-primary
+			padding-left: 10px
+			margin-top: 15px
+
+			li
+				padding-bottom: 8px
+
+		.sign-up-now
+			position: absolute
+			bottom: 25px
+			width: 65%
+			left: 50%
+			transform: translateX(-50%)
+			font-size: 1.2em
+
+			+button($color-primary, 3px)
+			padding: 5px 25px
+			white-space: nowrap
+			text-align: center
+
+	.education
+		color: $color-text-dark-primary
+		font-size: 1.1em
+		padding: 25px 15px 0
+		text-align: center
+
+		h3
+			color: $color-primary-dark
+
+		.btn
+			margin-top: 15px
+			min-width: 200px

src/templates/homepage.pug

@@ -14,13 +14,13 @@ meta(name="twitter:title", content="Blender Cloud")
 meta(property="og:description", content="Blender Cloud is a web based service developed by Blender Institute that allows people to access the training videos and all the data from the open projects.")
 meta(name="twitter:description", content="Blender Cloud is a web based service developed by Blender Institute that allows people to access the training videos and all the data from the open projects.")
 
-meta(property="og:image", content="{% if main_project.picture_header %}{{ main_project.picture_header.thumbnail('l', api=api) }}{% else %}{{ url_for('static', filename='assets/img/backgrounds/background_caminandes_3_02.jpg')}}{% endif %}")
+meta(property="og:image", content="{% if main_project.picture_header %}{{ main_project.picture_header.thumbnail('l', api=api) }}{% else %}{{ url_for('static', filename='assets/img/backgrounds/background_agent327_04.jpg')}}{% endif %}")
-meta(name="twitter:image", content="{% if main_project.picture_header %}{{ main_project.picture_header.thumbnail('l', api=api) }}{% else %}{{ url_for('static', filename='assets/img/backgrounds/background_caminandes_3_02.jpg')}}{% endif %}")
+meta(name="twitter:image", content="{% if main_project.picture_header %}{{ main_project.picture_header.thumbnail('l', api=api) }}{% else %}{{ url_for('static', filename='assets/img/backgrounds/background_agent327_04.jpg')}}{% endif %}")
 | {% endblock %}
 
 | {% block body %}
 .dashboard-container
-	section#side
+	section.dashboard-main
 
 		section.blog-stream
 			ul.blog-stream__list
@@ -47,9 +47,25 @@ meta(name="twitter:image", content="{% if main_project.picture_header %}{{ main_
 				i.pi-rss
 
 
-	section#main
+	section.dashboard-secondary
 		| {{ navigation_tabs(title) }}
 
+		section.dashboard-in-production
+			h4 In Production
+			span.section-lead.
+				Check out the projects currently under 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
 
 			h4 Latest Assets