Disable the flamenco-resume-job-archiving celery task until we have tested the job manually first

Jobs are considered stuck if they are in status "archiving" and hasn't been updated in a day.

.gitignore

@@ -7,8 +7,7 @@ __pycache__
 *.css.map
 
 /cloud/templates/
-/cloud/static/assets/css/
-/cloud/static/assets/js/bootstrap.min.js
+/cloud/static/assets/
 node_modules/
 
 /config_local.py

cloud/__init__.py

@@ -41,6 +41,8 @@ class CloudExtension(PillarExtension):
             'EXTERNAL_SUBSCRIPTIONS_MANAGEMENT_SERVER': 'https://store.blender.org/api/',
             'EXTERNAL_SUBSCRIPTIONS_TIMEOUT_SECS': 10,
             'BLENDER_ID_WEBHOOK_USER_CHANGED_SECRET': 'oos9wah1Zoa0Yau6ahThohleiChephoi',
+            'NODE_TAGS': ['animation', 'modeling', 'rigging', 'sculpting', 'shading', 'texturing', 'lighting',
+                          'character-pipeline',  'effects', 'video-editing'],
         }
 
     def eve_settings(self):

cloud/routes.py

@@ -391,6 +391,13 @@ def privacy():
     return render_template('privacy.html')
 
 
+@blueprint.route('/production')
+def production():
+    return render_template(
+        'production.html',
+        title='production')
+
+
 @blueprint.route('/emails/welcome.send')
 @login_required
 def emails_welcome_send():

cloud/tagged/__init__.py

@@ -0,0 +1,3 @@
+"""Routes for fetching tagged assets."""
+
+

cloud/tagged/routes.py

@@ -0,0 +1,16 @@
+import logging
+import datetime
+import functools
+
+from flask import Blueprint, jsonify
+
+blueprint = Blueprint('cloud.tagged', __name__, url_prefix='/tagged')
+
+log = logging.getLogger(__name__)
+
+
+@blueprint.route('/')
+def index():
+    """Return all tagged assets as JSON, grouped by tag."""
+
+

docker/4_run/config_local.py

@@ -113,6 +113,10 @@ CELERY_BEAT_SCHEDULE = {
         'schedule': 600,  # every N seconds
         'args': ('gcs', 500)
     },
+    # 'flamenco-resume-job-archiving': {
+    #     'task': 'flamenco.celery.job_archival.resume_job_archiving',
+    #     'schedule': 3600,  # every N seconds
+    # },
 }
 
 SVNMAN_REPO_URL = 'https://svn.blender.cloud/repo/'

gulpfile.js

@@ -31,9 +31,7 @@ var destination = {
 }
 
 var source = {
-    pillar: '../pillar/',
-    bootstrap: 'node_modules/bootstrap/',
-    popper: 'node_modules/popper.js/'
+    pillar: '../pillar/'
 }
 
 
@@ -71,6 +69,9 @@ gulp.task('templates', function() {
 });
 
 
+/* Tutti gets built by Pillar. See gulpfile.js in pillar.*/
+
+
 /* Individual Uglified Scripts */
 gulp.task('scripts', function() {
     gulp.src('src/scripts/*.js')
@@ -86,44 +87,6 @@ gulp.task('scripts', function() {
 });
 
 
-/* Collection of scripts in src/scripts/tutti/ to merge into tutti.min.js */
-/* Since it's always loaded, it's only for functions that we want site-wide */
-gulp.task('scripts_concat_tutti', function() {
-    gulp.src('src/scripts/tutti/**/*.js')
-        .pipe(gulpif(enabled.failCheck, plumber()))
-        .pipe(gulpif(enabled.maps, sourcemaps.init()))
-        .pipe(concat("tutti.min.js"))
-        .pipe(gulpif(enabled.uglify, uglify()))
-        .pipe(gulpif(enabled.maps, sourcemaps.write(".")))
-        .pipe(gulpif(enabled.chmod, chmod(644)))
-        .pipe(gulp.dest(destination.js))
-        .pipe(gulpif(argv.livereload, livereload()));
-});
-
-
-// Combine all needed Bootstrap JavaScript into a single file.
-gulp.task('scripts_concat_bootstrap', function() {
-
-    toUglify = [
-        source.popper    + 'dist/umd/popper.min.js',
-        source.bootstrap + 'js/dist/index.js',
-        source.bootstrap + 'js/dist/util.js',
-        source.bootstrap + 'js/dist/tooltip.js',
-        source.bootstrap + 'js/dist/dropdown.js',
-    ];
-
-    gulp.src(toUglify)
-        .pipe(gulpif(enabled.failCheck, plumber()))
-        .pipe(gulpif(enabled.maps, sourcemaps.init()))
-        .pipe(concat("bootstrap.min.js"))
-        .pipe(gulpif(enabled.uglify, uglify()))
-        .pipe(gulpif(enabled.maps, sourcemaps.write(".")))
-        .pipe(gulpif(enabled.chmod, chmod(644)))
-        .pipe(gulp.dest(destination.js))
-        .pipe(gulpif(argv.livereload, livereload()));
-});
-
-
 // While developing, run 'gulp watch'
 gulp.task('watch',function() {
     // Only listen for live reloads if ran with --livereload
@@ -133,12 +96,11 @@ gulp.task('watch',function() {
 
     gulp.watch('src/styles/**/*.sass',['styles']);
     gulp.watch(source.pillar + 'src/styles/**/*.sass',['styles']);
-
-    gulp.watch('src/templates/**/*.pug',['templates']);
     gulp.watch('src/scripts/*.js',['scripts']);
-    gulp.watch('src/scripts/tutti/**/*.js',['scripts_concat_tutti']);
+    gulp.watch('src/templates/**/*.pug',['templates']);
 });
 
+
 // Erases all generated files in output directories.
 gulp.task('cleanup', function() {
     var paths = [];
@@ -157,4 +119,4 @@ gulp.task('cleanup', function() {
 var tasks = [];
 if (enabled.cleanup) tasks.push('cleanup');
 
-gulp.task('default', tasks.concat(['styles', 'templates', 'scripts', 'scripts_concat_tutti', 'scripts_concat_bootstrap']));
+gulp.task('default', tasks.concat(['styles', 'templates', 'scripts']));

package.json

@@ -26,6 +26,7 @@
 	"dependencies": {
 		"bootstrap": "^4.1.3",
 		"jquery": "^3.3.1",
-		"popper.js": "^1.14.4"
+		"popper.js": "^1.14.4",
+		"video.js": "^7.2.2"
 	}
 }

src/scripts/tagged_assets.js

@@ -0,0 +1,145 @@
+/**
+ * Support for fetching & rendering assets by tags.
+ */
+(function($) {
+    /* How many nodes to load initially, and when clicked on the 'Load Next' link. */
+    const LOAD_INITIAL_COUNT = 5;
+    const LOAD_NEXT_COUNT = 3;
+
+    /* Renders a node as an asset card, returns a jQuery object. */
+    function renderAsset(node) {
+        let card = $('<a class="card asset card-image-fade pr-0 mx-0 mb-2">')
+            .addClass('js-tagged-asset')
+            .attr('href', '/nodes/' + node._id + '/redir')
+            .attr('title', node.name);
+
+        let thumbnail_container = $('<div class="embed-responsive embed-responsive-16by9">');
+
+        function warnNoPicture() {
+            let card_icon = $('<div class="card-img-top card-icon embed-responsive-item">');
+            card_icon.html('<i class="pi-' + node.node_type + '">');
+            thumbnail_container.append(card_icon);
+        }
+
+        if (!node.picture) {
+            warnNoPicture();
+        } else {
+            // TODO: show 'loading' thingy
+            $.get('/api/files/' + node.picture)
+                .fail(function(error) {
+                    let msg = xhrErrorResponseMessage(error);
+                    console.log(msg);
+                })
+                .done(function(resp) {
+                    // Render the picture if it has the proper size.
+                    var show_variation = null;
+                    if (typeof resp.variations != 'undefined') {
+                        for (variation of resp.variations) {
+                            if (variation.size != 'm') continue;
+                            show_variation = variation;
+                            break;
+                        }
+                    }
+
+                    if (show_variation == null) {
+                        warnNoPicture();
+                        return;
+                    }
+
+                    let img = $('<img class="card-img-top embed-responsive-item">')
+                        .attr('alt', node.name)
+                        .attr('src', variation.link)
+                        .attr('width', variation.width)
+                        .attr('height', variation.height);
+                    thumbnail_container.append(img);
+                });
+        }
+
+        card.append(thumbnail_container);
+
+        /* Card body for title and meta info. */
+        let card_body = $('<div class="card-body py-2 d-flex flex-column">');
+        let card_title = $('<div class="card-title mb-1 font-weight-bold">');
+        card_title.text(node.name);
+        card_body.append(card_title);
+
+        let card_meta = $('<ul class="card-text list-unstyled d-flex text-black-50 mt-auto">');
+        card_meta.append('<li>' + node._created + '</li>');
+        card_body.append(card_meta);
+
+        /* Video progress and 'watched' label. */
+        if (node.view_progress){
+            let card_progress = $('<div class="progress rounded-0">');
+            let card_progress_bar = $('<div class="progress-bar">');
+            card_progress_bar.css('width', node.view_progress.progress_in_percent);
+            card_progress.append(card_progress_bar);
+            card_body.append(card_progress);
+
+            if (node.view_progress.done){
+                let card_progress_done = $('<div class="card-label">WATCHED</div>');
+                card_body.append(card_progress_done);
+            }
+        }
+
+        /* 'Free' ribbon for public assets. */
+        if (node.permissions && node.permissions.world){
+            card.addClass('free');
+        }
+
+        card.append(card_body);
+
+        return card;
+    }
+
+    function loadNext(card_deck_element) {
+        let $card_deck = $(card_deck_element);
+        let tagged_assets = card_deck_element.tagged_assets;  // Stored here by loadTaggedAssets().
+        let already_loaded = $card_deck.find('a.js-tagged-asset').length;
+
+        let load_next = $card_deck.find('a.js-load-next');
+
+        let nodes_to_load = tagged_assets.slice(already_loaded, already_loaded + LOAD_NEXT_COUNT);
+        for (node of nodes_to_load) {
+            let link = renderAsset(node);
+            load_next.before(link);
+        }
+
+        if (already_loaded + LOAD_NEXT_COUNT >= tagged_assets.length)
+            load_next.remove();
+    }
+
+    $.fn.loadTaggedAssets = function(LOAD_INITIAL_COUNT, LOAD_NEXT_COUNT) {
+        this.each(function(index, card_deck_element) {
+            // TODO(Sybren): show a 'loading' animation.
+            $.get('/api/nodes/tagged/' + card_deck_element.dataset.assetTag)
+                .fail(function(error) {
+                    let msg = xhrErrorResponseMessage(error);
+                    $('<a>').addClass('bg-danger').text(msg).appendTo(card_deck_element);
+                })
+                .done(function(resp) {
+                    // 'resp' is a list of node documents.
+                    // Store the response on the DOM card_deck_element so that we can later render more.
+                    card_deck_element.tagged_assets = resp;
+
+                    // Here render the first N.
+                    for (node of resp.slice(0, LOAD_INITIAL_COUNT)) {
+                        let li = renderAsset(node);
+                        li.appendTo(card_deck_element);
+                    }
+
+                    // Don't bother with a 'load next' link if there is no more.
+                    if (resp.length <= LOAD_INITIAL_COUNT) return;
+
+                    if (LOAD_NEXT_COUNT > 0) {
+                        // Construct the 'load next' link.
+                        let link = $('<a class="btn btn-outline-primary px-5 mb-auto mx-3 btn-block">')
+                            .addClass('js-load-next')
+                            .attr('href', 'javascript:void(0);')
+                            .click(function() { loadNext(card_deck_element); return false; })
+                            .text('Load More');
+                        link.appendTo(card_deck_element);
+                    }
+                });
+        });
+    };
+}(jQuery));

src/styles/_homepage.sass

@@ -1,496 +1,5 @@
-
-
-.title-underline
-	padding-bottom: 5px
-	position: relative
-	margin-bottom: 20px
-
-	&:before
-		background-color: $primary
-		content: ' '
-		display: block
-		height: 2px
-		top: 125%
-		position: absolute
-		width: 50px
-
-
-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
-
-.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
-
-			&: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
-						+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
-				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
-
-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
-					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%
-
-					i
-						+position-center-translate
-						color: white
-						font-size: 3em
-						text-shadow: 0 0 25px black
-						transition: font-size 150ms ease-in-out
-
-					&:hover
-						i
-							font-size: 3.5em
-						img
-							opacity: .85
-
-				ul.meta
-					+list-meta
-					padding-bottom: 10px
-
-
-section.announcement
-	+container-box
-	margin-left: 15px
-	margin-right: 15px
-
-	.header-icons
-		display: flex
-		align-items: center
-		justify-content: center
-		padding: 20px 0 5px 0
-
-		i
-			font-size: 2.5em
-			color: $color-info
-
-			&.pi-heart-filled
-				color: $color-danger
-				margin-left: 5px
-
-	img.header
-		width: 100%
-		margin: 0 auto
-		border-top-left-radius: 3px
-		border-top-right-radius: 3px
-
-	iframe
-		width: 100%
-		position: relative
-		left: 15px
-		margin: 25px auto
-
-		+media-sm
-			height: 500px
-		+media-md
-			height: 520px
-		+media-lg
-			height: 580px
-
-	.text
-		padding: 15px
-
-		.title
-			padding-bottom: 10px
-
-			+media-xs
-				font-size: 1.4em
-
-			strong
-				color: $color-primary-dark
-
-			a
-				color: $color-text-dark-primary
-
-		.lead
-			font-size: 1em
-			+list-bullets
-
-			ul
-				margin-top: 10px
-				padding-left: 10px
-
-			hr
-				border: none
-				height: 1px
-				width: 100%
-				margin: 10px 0
-				background-color: $color-background
-				clear: both
-
-			+media-xs
-				padding-left: 10px
-
-		.buttons
-			margin: 15px auto 0 auto
-			display: flex
-			align-items: center
-			justify-content: space-around
-			flex-wrap: wrap
-
-
 body.homepage
 	.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%
-
 		.jumbotron
 			padding-top: 6em
 			padding-bottom: 6em

src/styles/_project-landing.sass

@@ -0,0 +1,212 @@
+$node-latest-thumbnail-size: 160px
+$node-latest-gallery-thumbnail-size: 200px
+
+.landing
+	.node-details-description
+		iframe
+			max-width: 100%
+
+	.node-extra
+		display: flex
+		flex-direction: column
+		width: 100%
+
+		.node-updates
+			flex: 1
+			font-size: 1.1em
+
+			ul
+				padding: 0
+				margin: 0 0 15px 0
+				display: flex
+				flex-direction: row
+				flex-wrap: wrap
+
+				li
+					display: flex
+					flex-direction: column
+					list-style: none
+					padding: 5px
+					cursor: pointer
+					width: 33.3333%
+
+					+media-xs
+						width: 100%
+
+					&.texture, &.group_texture
+						width: 25%
+
+					&:hover
+						img
+							opacity: .9
+						a.title
+							//color: $color-primary
+							text-decoration: underline
+
+					&.post
+						.info .title
+							//color: $node-type-post
+							font-size: 1.1em
+						a.image
+							border: none
+							//border-color: $node-type-post
+							background-color: hsl(hue($node-type-post), 20%, 55%)
+
+					&.asset.image a.image
+						border-color: $node-type-asset_image
+						background-color: hsl(hue($node-type-asset_image), 20%, 55%)
+					&.asset.file a.image
+						border-color: $node-type-asset_file
+						background-color: hsl(hue($node-type-asset_file), 20%, 55%)
+					&.asset.video a.image
+						border-color: $node-type-asset_video
+						background-color: hsl(hue($node-type-asset_video), 20%, 55%)
+
+					.image
+						width: 100%
+						height: $node-latest-thumbnail-size
+						min-height: $node-latest-thumbnail-size
+						max-height: $node-latest-thumbnail-size
+						background-color: $color-background
+						margin: 5px auto 10px auto
+						position: relative
+						overflow: hidden
+						border-radius: 0
+
+						img
+							max-height: $node-latest-thumbnail-size
+							+position-center-translate
+
+						i
+							color: rgba(white, .9)
+							font-size: 1.8em
+							position: absolute
+							bottom: 3px
+							left: 5px
+							text-shadow: 1px 1px 0 rgba(black, .2)
+
+							&.pi-file-archive
+								font-size: 1.5em
+								bottom: 5px
+							&.pi-newspaper
+								font-size: 1.6em
+								left: 7px
+
+					.info
+						width: 100%
+						height: 100%
+						display: flex
+						flex-direction: column
+						justify-content: space-between
+						word-break: break-word
+
+						.description
+							font-size: 1em
+							line-height: 1.8em
+							padding-top: 8px
+							color: $color-text-dark-primary
+
+						.title
+							display: block
+							font-size: 1.3em
+							color: $color-text-dark
+							font-weight: 600
+							+clearfix
+							+text-overflow-ellipsis
+
+						span.details
+							width: 100%
+							display: block
+							font-size: 1em
+							line-height: 1.2em
+							padding: 5px 0
+							color: $color-text-dark-secondary
+							+clearfix
+
+							.who
+								margin-left: 3px
+							.what
+								text-transform: capitalize
+
+
+	$bg-color: #444
+	$bg-color2: #666
+	$yellow: rgb(249,229,89)
+	$almost-white: rgb(255,255,255)
+	$btn-transparent-color: rgba(249,229,89,1)
+	$btn-transparent-bg: rgba(249,229,89,0)
+
+
+	.gallery
+		max-width: 1024px
+
+		.thumbnail
+			float: left
+			position: relative
+			width: 23%
+			padding-bottom: 23%
+			margin: 0.83%
+			overflow: hidden
+
+			&:hover
+				box-shadow: 2px 2px 50px 0 rgba(0,0,0,0.3)
+
+		.img-container
+			position: absolute
+			width: 100%
+			height: 100%
+
+			img
+				width: 300%
+				transform: translate(-20%,-10%)
+
+			&:hover .img-caption
+				top: 0
+				left: 0
+				.btn-trans
+					background: rgba(255,255,255,0.4)
+
+		.img-caption
+			position: absolute
+			width: 100%
+			height: 100%
+			background: rgba(0, 0, 0, 0.3)
+			text-align: center
+
+		.table
+			display: table
+			.table-cell
+				display: table-cell
+				vertical-align: bottom
+				border: none
+
+		@media screen and (max-width: 992px)
+			.thumbnail
+				width: 22%
+				padding-bottom: 22%
+				margin: 1.5%
+
+			.img-container:hover .img-caption
+					top: 0
+					left: 0
+
+			.img-caption
+				position: absolute
+				width: 100%
+				height: 100%
+				background: rgba(0, 0, 0, .7)
+				text-align: center
+				a
+					color: $yellow
+
+		@media screen and (max-width: 720px)
+			.thumbnail
+				width: 29%
+				padding-bottom: 29%
+				margin: 2.16%
+
+		@media screen and (max-width: 470px)
+			.thumbnail
+				width: 44%
+				padding-bottom: 44%
+				margin: 3%

src/styles/main.sass

@@ -1,51 +1,50 @@
 // Bootstrap variables and utilities.
-@import "../../node_modules/bootstrap/scss/functions"
-@import "../../node_modules/bootstrap/scss/variables"
-@import "../../node_modules/bootstrap/scss/mixins"
+@import "../../../pillar/node_modules/bootstrap/scss/functions"
+@import "../../../pillar/node_modules/bootstrap/scss/variables"
+@import "../../../pillar/node_modules/bootstrap/scss/mixins"
 
 // Pillar variables and utilities.
 @import "../../../pillar/src/styles/config"
 @import "../../../pillar/src/styles/utils"
 
-
 // Bootstrap components.
-@import "../../node_modules/bootstrap/scss/root"
-@import "../../node_modules/bootstrap/scss/reboot"
+@import "../../../pillar/node_modules/bootstrap/scss/root"
+@import "../../../pillar/node_modules/bootstrap/scss/reboot"
 
-@import "../../node_modules/bootstrap/scss/type"
-@import "../../node_modules/bootstrap/scss/images"
+@import "../../../pillar/node_modules/bootstrap/scss/type"
+@import "../../../pillar/node_modules/bootstrap/scss/images"
 
-@import "../../node_modules/bootstrap/scss/code"
-@import "../../node_modules/bootstrap/scss/grid"
-@import "../../node_modules/bootstrap/scss/tables"
-@import "../../node_modules/bootstrap/scss/forms"
-@import "../../node_modules/bootstrap/scss/buttons"
-@import "../../node_modules/bootstrap/scss/transitions"
-@import "../../node_modules/bootstrap/scss/dropdown"
-@import "../../node_modules/bootstrap/scss/button-group"
-@import "../../node_modules/bootstrap/scss/input-group"
-@import "../../node_modules/bootstrap/scss/custom-forms"
+@import "../../../pillar/node_modules/bootstrap/scss/code"
+@import "../../../pillar/node_modules/bootstrap/scss/grid"
+@import "../../../pillar/node_modules/bootstrap/scss/tables"
+@import "../../../pillar/node_modules/bootstrap/scss/forms"
+@import "../../../pillar/node_modules/bootstrap/scss/buttons"
+@import "../../../pillar/node_modules/bootstrap/scss/transitions"
+@import "../../../pillar/node_modules/bootstrap/scss/dropdown"
+@import "../../../pillar/node_modules/bootstrap/scss/button-group"
+@import "../../../pillar/node_modules/bootstrap/scss/input-group"
+@import "../../../pillar/node_modules/bootstrap/scss/custom-forms"
 
-@import "../../node_modules/bootstrap/scss/nav"
-@import "../../node_modules/bootstrap/scss/navbar"
+@import "../../../pillar/node_modules/bootstrap/scss/nav"
+@import "../../../pillar/node_modules/bootstrap/scss/navbar"
 
-@import "../../node_modules/bootstrap/scss/card"
-@import "../../node_modules/bootstrap/scss/breadcrumb"
-@import "../../node_modules/bootstrap/scss/pagination"
-@import "../../node_modules/bootstrap/scss/badge"
-@import "../../node_modules/bootstrap/scss/jumbotron"
-@import "../../node_modules/bootstrap/scss/alert"
-@import "../../node_modules/bootstrap/scss/progress"
-@import "../../node_modules/bootstrap/scss/media"
-@import "../../node_modules/bootstrap/scss/list-group"
-@import "../../node_modules/bootstrap/scss/close"
-@import "../../node_modules/bootstrap/scss/modal"
-@import "../../node_modules/bootstrap/scss/tooltip"
-@import "../../node_modules/bootstrap/scss/popover"
-@import "../../node_modules/bootstrap/scss/carousel"
+@import "../../../pillar/node_modules/bootstrap/scss/card"
+@import "../../../pillar/node_modules/bootstrap/scss/breadcrumb"
+@import "../../../pillar/node_modules/bootstrap/scss/pagination"
+@import "../../../pillar/node_modules/bootstrap/scss/badge"
+@import "../../../pillar/node_modules/bootstrap/scss/jumbotron"
+@import "../../../pillar/node_modules/bootstrap/scss/alert"
+@import "../../../pillar/node_modules/bootstrap/scss/progress"
+@import "../../../pillar/node_modules/bootstrap/scss/media"
+@import "../../../pillar/node_modules/bootstrap/scss/list-group"
+@import "../../../pillar/node_modules/bootstrap/scss/close"
+@import "../../../pillar/node_modules/bootstrap/scss/modal"
+@import "../../../pillar/node_modules/bootstrap/scss/tooltip"
+@import "../../../pillar/node_modules/bootstrap/scss/popover"
+@import "../../../pillar/node_modules/bootstrap/scss/carousel"
 
-@import "../../node_modules/bootstrap/scss/utilities"
-@import "../../node_modules/bootstrap/scss/print"
+@import "../../../pillar/node_modules/bootstrap/scss/utilities"
+@import "../../../pillar/node_modules/bootstrap/scss/print"
 
 
 // Pillar components.

src/styles/project-landing.sass

@@ -1,384 +0,0 @@
-// Bootstrap variables and utilities.
-@import "../../node_modules/bootstrap/scss/functions"
-@import "../../node_modules/bootstrap/scss/variables"
-@import "../../node_modules/bootstrap/scss/mixins"
-
-// Pillar variables and utilities.
-@import "../../../pillar/src/styles/config"
-@import "../../../pillar/src/styles/utils"
-
-// Bootstrap components.
-@import "../../node_modules/bootstrap/scss/root"
-@import "../../node_modules/bootstrap/scss/reboot"
-
-@import "../../node_modules/bootstrap/scss/type"
-@import "../../node_modules/bootstrap/scss/images"
-
-@import "../../node_modules/bootstrap/scss/code"
-@import "../../node_modules/bootstrap/scss/grid"
-@import "../../node_modules/bootstrap/scss/tables"
-@import "../../node_modules/bootstrap/scss/forms"
-@import "../../node_modules/bootstrap/scss/buttons"
-@import "../../node_modules/bootstrap/scss/transitions"
-@import "../../node_modules/bootstrap/scss/dropdown"
-@import "../../node_modules/bootstrap/scss/button-group"
-@import "../../node_modules/bootstrap/scss/input-group"
-@import "../../node_modules/bootstrap/scss/custom-forms"
-
-@import "../../node_modules/bootstrap/scss/nav"
-@import "../../node_modules/bootstrap/scss/navbar"
-
-@import "../../node_modules/bootstrap/scss/card"
-@import "../../node_modules/bootstrap/scss/breadcrumb"
-@import "../../node_modules/bootstrap/scss/pagination"
-@import "../../node_modules/bootstrap/scss/badge"
-@import "../../node_modules/bootstrap/scss/jumbotron"
-@import "../../node_modules/bootstrap/scss/alert"
-@import "../../node_modules/bootstrap/scss/progress"
-@import "../../node_modules/bootstrap/scss/media"
-@import "../../node_modules/bootstrap/scss/list-group"
-@import "../../node_modules/bootstrap/scss/close"
-@import "../../node_modules/bootstrap/scss/modal"
-@import "../../node_modules/bootstrap/scss/tooltip"
-@import "../../node_modules/bootstrap/scss/popover"
-@import "../../node_modules/bootstrap/scss/carousel"
-
-@import "../../node_modules/bootstrap/scss/utilities"
-@import "../../node_modules/bootstrap/scss/print"
-
-
-// Pillar components.
-@import "../../../pillar/src/styles/apps_base"
-@import "../../../pillar/src/styles/error"
-
-@import "../../../pillar/src/styles/components/base"
-
-@import "../../../pillar/src/styles/components/jumbotron"
-@import "../../../pillar/src/styles/components/alerts"
-@import "../../../pillar/src/styles/components/navbar"
-@import "../../../pillar/src/styles/components/dropdown"
-@import "../../../pillar/src/styles/components/footer"
-@import "../../../pillar/src/styles/components/shortcode"
-@import "../../../pillar/src/styles/components/statusbar"
-@import "../../../pillar/src/styles/components/search"
-
-@import "../../../pillar/src/styles/components/flyout"
-@import "../../../pillar/src/styles/components/inputs"
-@import "../../../pillar/src/styles/components/buttons"
-@import "../../../pillar/src/styles/components/popover"
-@import "../../../pillar/src/styles/components/tooltip"
-@import "../../../pillar/src/styles/components/checkbox"
-@import "../../../pillar/src/styles/components/overlay"
-@import "../../../pillar/src/styles/components/card"
-
-@import "../../../pillar/src/styles/notifications"
-
-@import "../../../pillar/src/styles/_search"
-
-$node-latest-thumbnail-size: 160px
-$node-latest-gallery-thumbnail-size: 200px
-
-nav.navbar
-	.navbar-header
-		+media-xs
-			width: 100%
-
-	.navbar-toggle
-		border: none
-		color: $color-text
-		position: absolute
-		right: 10px
-
-	.navbar-nav
-		+media-xs
-			padding: 10px
-
-	.search-input
-		display: none
-
-.node-details-container
-	max-width: 620px
-	font-size: 1.3em
-	line-height: 1.5em
-	margin: 0 auto 40px auto
-	padding-bottom: 40px
-
-	+media-xs
-		padding-left: 10px
-		padding-right: 10px
-
-	p
-		margin-bottom: 1.3em
-
-header
-	display: flex
-	flex-direction: column   /* stack flex items vertically */
-	position: relative
-	img.header
-		width: 100%
-		flex-direction: column   /* stack flex items vertically */
-		position: relative
-	a.page-card-cta
-		position: absolute
-		left: 76%
-		top: 50%
-		transform: translate(-50%, -50%)
-		color: white
-		font-weight: bold
-		background: #ff4970
-		border-radius: 3px
-		border: none
-		box-shadow: 1px 1px 0 rgba(black, .2)
-		padding: 7px 20px
-		text-decoration: none
-		text-shadow: none
-
-		&:hover
-			background: lighten(#ff4970, 5%)
-
-.landing
-	h2
-		text-align: center
-		margin-bottom: 40px
-
-section
-	max-width: 1024px
-	padding-top: 20px
-	border-top: thin solid $color-background
-	margin: 0 auto
-
-.navbar-secondary
-	max-width: 620px
-	margin: 0 auto
-
-	.navbar-collapse
-		padding-left: 0
-
-	li
-		a
-			padding-left: 20px
-			padding-right: 20px
-			color: $color-text
-			&:hover
-			&.active
-				background: none
-				color: black
-				box-shadow: 0px 2px 0 rgba(red, .8)
-
-.node-extra
-	display: flex
-	flex-direction: column
-
-	//padding: 0 20px
-	width: 100%
-
-
-	.node-updates
-		flex: 1
-		font-size: 1.1em
-
-		ul
-			padding: 0
-			margin: 0 0 15px 0
-			display: flex
-			flex-direction: row
-			flex-wrap: wrap
-
-			li
-				display: flex
-				flex-direction: column
-				list-style: none
-				padding: 5px
-				cursor: pointer
-				width: 33.3333%
-
-				+media-xs
-					width: 100%
-
-				&.texture, &.group_texture
-					width: 25%
-
-				&:hover
-					img
-						opacity: .9
-					a.title
-						//color: $color-primary
-						text-decoration: underline
-
-				&.post
-					.info .title
-						//color: $node-type-post
-						font-size: 1.1em
-					a.image
-						border: none
-						//border-color: $node-type-post
-						background-color: hsl(hue($node-type-post), 20%, 55%)
-
-				&.asset.image a.image
-					border-color: $node-type-asset_image
-					background-color: hsl(hue($node-type-asset_image), 20%, 55%)
-				&.asset.file a.image
-					border-color: $node-type-asset_file
-					background-color: hsl(hue($node-type-asset_file), 20%, 55%)
-				&.asset.video a.image
-					border-color: $node-type-asset_video
-					background-color: hsl(hue($node-type-asset_video), 20%, 55%)
-
-				.image
-					width: 100%
-					height: $node-latest-thumbnail-size
-					min-height: $node-latest-thumbnail-size
-					max-height: $node-latest-thumbnail-size
-					background-color: $color-background
-					margin: 5px auto 10px auto
-					position: relative
-					overflow: hidden
-					border-radius: 0
-
-					img
-						max-height: $node-latest-thumbnail-size
-						+position-center-translate
-
-					i
-						color: rgba(white, .9)
-						font-size: 1.8em
-						position: absolute
-						bottom: 3px
-						left: 5px
-						text-shadow: 1px 1px 0 rgba(black, .2)
-
-						&.pi-file-archive
-							font-size: 1.5em
-							bottom: 5px
-						&.pi-newspaper
-							font-size: 1.6em
-							left: 7px
-
-					.ribbon
-						+ribbon
-
-				.info
-					width: 100%
-					height: 100%
-					display: flex
-					flex-direction: column
-					justify-content: space-between
-					word-break: break-word
-
-					.description
-						font-size: 1em
-						line-height: 1.8em
-						padding-top: 8px
-						color: $color-text-dark-primary
-
-					.title
-						display: block
-						font-size: 1.3em
-						color: $color-text-dark
-						font-weight: 600
-						+clearfix
-						+text-overflow-ellipsis
-
-					span.details
-						width: 100%
-						display: block
-						font-size: 1em
-						line-height: 1.2em
-						padding: 5px 0
-						color: $color-text-dark-secondary
-						+clearfix
-
-						.who
-							margin-left: 3px
-						.what
-							text-transform: capitalize
-
-
-$bg-color: #444
-$bg-color2: #666
-$yellow: rgb(249,229,89)
-$almost-white: rgb(255,255,255)
-$btn-transparent-color: rgba(249,229,89,1)
-$btn-transparent-bg: rgba(249,229,89,0)
-
-
-section.gallery
-	max-width: 1024px
-	margin: 60px auto 0 auto
-	text-align: center
-	padding-bottom: 40px
-
-	p
-		color: $almost-white
-		padding: 0 40px
-
-
-	.thumbnail
-		float: left
-		position: relative
-		width: 23%
-		padding-bottom: 23%
-		margin: 0.83%
-		overflow: hidden
-		&:hover
-			box-shadow: 2px 2px 50px 0 rgba(0,0,0,0.3)
-
-	.img-container
-		position: absolute
-		width: 100%
-		height: 100%
-
-		img
-			width: 300%
-			transform: translate(-20%,-10%)
-
-		&:hover .img-caption
-			top: 0
-			left: 0
-			.btn-trans
-				background: rgba(255,255,255,0.4)
-
-	.img-caption
-		position: absolute
-		width: 100%
-		height: 100%
-		background: rgba(0, 0, 0, 0.3)
-		text-align: center
-
-	.table
-		display: table
-		.table-cell
-			display: table-cell
-			vertical-align: bottom
-			border: none
-
-	@media screen and (max-width: 992px)
-		.thumbnail
-			width: 22%
-			padding-bottom: 22%
-			margin: 1.5%
-
-		.img-container:hover .img-caption
-				top: 0
-				left: 0
-
-		.img-caption
-			position: absolute
-			width: 100%
-			height: 100%
-			background: rgba(0, 0, 0, .7)
-			text-align: center
-			a
-				color: $yellow
-
-	@media screen and (max-width: 720px)
-		.thumbnail
-			width: 29%
-			padding-bottom: 29%
-			margin: 2.16%
-
-	@media screen and (max-width: 470px)
-		.thumbnail
-			width: 44%
-			padding-bottom: 44%
-			margin: 3%

src/styles/project-main.sass

@@ -0,0 +1,86 @@
+// Bootstrap variables and utilities.
+@import "../../../pillar/node_modules/bootstrap/scss/functions"
+@import "../../../pillar/node_modules/bootstrap/scss/variables"
+@import "../../../pillar/node_modules/bootstrap/scss/mixins"
+
+// Pillar variables and utilities.
+@import "../../../pillar/src/styles/_config"
+@import "../../../pillar/src/styles/_utils"
+
+// Bootstrap components.
+@import "../../../pillar/node_modules/bootstrap/scss/root"
+@import "../../../pillar/node_modules/bootstrap/scss/reboot"
+
+@import "../../../pillar/node_modules/bootstrap/scss/type"
+@import "../../../pillar/node_modules/bootstrap/scss/images"
+
+@import "../../../pillar/node_modules/bootstrap/scss/code"
+@import "../../../pillar/node_modules/bootstrap/scss/grid"
+@import "../../../pillar/node_modules/bootstrap/scss/tables"
+@import "../../../pillar/node_modules/bootstrap/scss/forms"
+@import "../../../pillar/node_modules/bootstrap/scss/buttons"
+@import "../../../pillar/node_modules/bootstrap/scss/transitions"
+@import "../../../pillar/node_modules/bootstrap/scss/dropdown"
+@import "../../../pillar/node_modules/bootstrap/scss/button-group"
+@import "../../../pillar/node_modules/bootstrap/scss/input-group"
+@import "../../../pillar/node_modules/bootstrap/scss/custom-forms"
+
+@import "../../../pillar/node_modules/bootstrap/scss/nav"
+@import "../../../pillar/node_modules/bootstrap/scss/navbar"
+
+@import "../../../pillar/node_modules/bootstrap/scss/card"
+@import "../../../pillar/node_modules/bootstrap/scss/breadcrumb"
+@import "../../../pillar/node_modules/bootstrap/scss/pagination"
+@import "../../../pillar/node_modules/bootstrap/scss/badge"
+@import "../../../pillar/node_modules/bootstrap/scss/jumbotron"
+@import "../../../pillar/node_modules/bootstrap/scss/alert"
+@import "../../../pillar/node_modules/bootstrap/scss/progress"
+@import "../../../pillar/node_modules/bootstrap/scss/media"
+@import "../../../pillar/node_modules/bootstrap/scss/list-group"
+@import "../../../pillar/node_modules/bootstrap/scss/close"
+@import "../../../pillar/node_modules/bootstrap/scss/modal"
+@import "../../../pillar/node_modules/bootstrap/scss/tooltip"
+@import "../../../pillar/node_modules/bootstrap/scss/popover"
+@import "../../../pillar/node_modules/bootstrap/scss/carousel"
+
+@import "../../../pillar/node_modules/bootstrap/scss/utilities"
+@import "../../../pillar/node_modules/bootstrap/scss/print"
+
+// Pillar components.
+@import "../../../pillar/src/styles/apps_base"
+@import "../../../pillar/src/styles/components/base"
+
+@import "../../../pillar/src/styles/components/jumbotron"
+@import "../../../pillar/src/styles/components/alerts"
+@import "../../../pillar/src/styles/components/navbar"
+@import "../../../pillar/src/styles/components/dropdown"
+@import "../../../pillar/src/styles/components/footer"
+@import "../../../pillar/src/styles/components/shortcode"
+@import "../../../pillar/src/styles/components/statusbar"
+@import "../../../pillar/src/styles/components/search"
+
+@import "../../../pillar/src/styles/components/flyout"
+@import "../../../pillar/src/styles/components/forms"
+@import "../../../pillar/src/styles/components/inputs"
+@import "../../../pillar/src/styles/components/buttons"
+@import "../../../pillar/src/styles/components/popover"
+@import "../../../pillar/src/styles/components/tooltip"
+@import "../../../pillar/src/styles/components/checkbox"
+@import "../../../pillar/src/styles/components/overlay"
+@import "../../../pillar/src/styles/components/card"
+
+@import "../../../pillar/src/styles/_notifications"
+@import "../../../pillar/src/styles/_comments"
+
+@import "../../../pillar/src/styles/_project"
+@import "../../../pillar/src/styles/_project-sharing"
+@import "../../../pillar/src/styles/_project-dashboard"
+@import "../../../pillar/src/styles/_error"
+
+@import "../../../pillar/src/styles/_search"
+
+@import "../../../pillar/src/styles/plugins/_jstree"
+@import "../../../pillar/src/styles/plugins/_js_select2"
+
+// Cloud components.
+@import "_project-landing"

src/templates/_footer.pug

@@ -0,0 +1,112 @@
+.footer-wrapper
+	| {% block footer_navigation %}
+	.footer-navigation
+		.container
+			.row
+				.col-md-4.col-xs-6
+					h4
+						a(href="{{ url_for('main.homepage') }}")
+							i.pi-blender-cloud-logo
+
+					p.pl-2.
+						Blender Cloud is the creative hub for your projects,
+						powered by Free and Open Source Software.
+
+					h5.d-flex
+						a.px-2(href="https://twitter.com/Blender_Cloud",
+							title="Follow us on Twitter")
+							i.pi-social-youtube
+
+						a.px-2(href="https://twitter.com/Blender_Cloud",
+							title="Follow us on Twitter")
+							i.pi-social-twitter
+
+						a.px-2(href="https://www.facebook.com/BlenderCloudOfficial/",
+							title="Follow us on Facebook")
+							i.pi-social-facebook
+
+				.col-md-2.col-xs-6
+					h7.font-weight-bold
+						| TRAINING
+
+					ul.list-unstyled
+						li
+							a(href="{{ url_for('cloud.courses') }}")
+								| Courses
+						li
+							a(href="{{ url_for('cloud.workshops') }}")
+								| Workshops
+						li
+							a(href="{{ url_for('projects.view', project_url='gallery') }}")
+								| Art Gallery
+
+				.col-md-2.col-xs-6
+					h7.font-weight-bold
+						| LIBRARIES
+
+					ul.list-unstyled
+						li
+							a(href="{{ url_for('projects.view', project_url='hdri') }}",
+								title="HDRI Library")
+								| HDRIs
+						li
+							a(href="{{ url_for('projects.view', project_url='textures') }}",
+								title="Texture Library")
+								| Textures
+						li
+							a(href="{{ url_for('projects.view', project_url='characters') }}",
+								title="Characters")
+								| Characters
+
+				.col-md-2.col-xs-6
+					h7.font-weight-bold
+						a(href="{{ url_for('cloud.services') }}")
+							| SERVICES
+
+					ul.list-unstyled
+						li
+							a(href="{{ url_for('cloud.services') }}#blender-cloud-add-on",
+								title="Blender Cloud add-on")
+								| Add-on
+						li
+							a(href="{{ url_for('projects.home_project') }}",
+								title="Your synced Blender settings")
+								| Blender Sync
+						li
+							a(href="/attract",
+								title="Production management")
+								| Attract
+						li
+							a(href="/flamenco",
+								title="Render management")
+								| Flamenco
+						li
+							a(href="{{ url_for('projects.home_project_shared_images')}}",
+								title="Share your images from within Blender")
+								| Image Sharing
+
+				.col-md-2.col-xs-6
+					h7.font-weight-bold
+						| RESOURCES
+					ul.list-unstyled
+						li
+							a(href="{{ url_for('main.main_blog') }}",
+								title="Blender Cloud Blog")
+								| Blog
+						li
+							a(href="{{ url_for('cloud.terms_and_conditions') }}",
+								title="Terms and Conditions")
+								| Terms and Conditions
+						li
+							a(href="{{ url_for('cloud.privacy') }}",
+							title="Privacy")
+								| Privacy
+						li
+							a(href="https://www.blender.org",
+								title="Home of Blender, the Free and Open Source creative suite")
+								| blender.org
+
+	| {% endblock footer_navigation %}
+
+	#hop(title="Be awesome in space")
+		i.pi-angle-up

src/templates/_macros/_navigation.pug

@@ -1,26 +1,55 @@
-include ../mixins/components
+include ../../../../pillar/src/templates/mixins/components
 
-| {% macro navigation_tabs(title) %}
+| {% macro navigation_homepage(title) %}
 +nav-secondary()
 	+nav-secondary-link(
-			class="{% if title == 'homepage' %}active{% endif %}",
-			href="{{ url_for('main.homepage') }}")
-		| Activity
+		href="{{ url_for('cloud.open_projects') }}")
+		span Films
 
 	+nav-secondary-link(
-			class="{% if title == 'home' %}active{% endif %}",
-			href="{{ url_for('projects.home_project') }}")
-		| Home
+		href="{{ url_for('cloud.courses') }}")
+		span Courses
 
 	+nav-secondary-link(
-			class="{% if title == 'dashboard' %}active{% endif %}",
-			href="{{ url_for('projects.index') }}")
-		| My Projects
+		href="{{ url_for('cloud.workshops') }}")
+		span Workshops
 
-	| {% if current_user.has_organizations() %}
 	+nav-secondary-link(
-			class="{% if title == 'organizations' %}active{% endif %}",
-			href="{{ url_for('pillar.web.organizations.index') }}")
-		| My Organizations
+		href="{{ url_for('projects.view', project_url='textures') }}")
+		span Textures
+
+	+nav-secondary-link(
+		href="{{ url_for('projects.view', project_url='hdri') }}")
+		span HDRI
+
+	+nav-secondary-link(
+		class="{% if title == 'services' %}active{% endif %}",
+		href="{{ url_for('cloud.services') }}")
+		span Services
+| {% endmacro %}
+
+| {% macro navigation_collection(title) %}
++nav-secondary
+	| {% if title in ['courses', 'workshops', 'production'] %}
+	+nav-secondary-link(
+			class="{% if title == 'courses' %}active{% endif %}",
+			href="{{ url_for('cloud.courses') }}")
+		span Courses
+
+	+nav-secondary-link(
+			class="{% if title == 'workshops' %}active{% endif %}",
+			href="{{ url_for('cloud.workshops') }}")
+		span Workshops
+
+	+nav-secondary-link(
+		class="{% if title == 'production' %}active{% endif %}",
+		href="{{ url_for('cloud.production') }}")
+		span.new Production Lessons
+
+	| {% elif title in ['open-projects'] %}
+	+nav-secondary-link(
+			class="{% if title == 'open-projects' %}active{% endif %}",
+			href="{{ url_for('projects.view', project_url='gallery') }}")
+		span Open Projects
 	| {% endif %}
 | {% endmacro %}

src/templates/homepage.pug

@@ -1,7 +1,10 @@
 | {% extends 'layout.html' %}
-| {% from '_macros/_navigation.html' import navigation_tabs %}
+| {% from '_macros/_navigation.html' import navigation_homepage %}
+| {% from '_macros/_asset_list_item.html' import asset_list_item %}
 | {% from 'nodes/custom/blog/_macros.html' import render_blog_post %}
 
+include ../../../pillar/src/templates/mixins/components
+
 | {% set title = 'homepage' %}
 
 | {% block og %}
@@ -19,23 +22,21 @@ meta(name="twitter:image", content="{% if main_project.picture_header %}{{ main_
 | {% endblock %}
 
 | {% block navigation_tabs %}
-| {{ navigation_tabs(title) }}
+| {{ navigation_homepage(title) }}
 | {% endblock navigation_tabs %}
 
 | {% block body %}
 .container-fluid.dashboard-container.imgs-fluid
 	.row
-		.col-md-8
+		.col-md-8.col-xl-9
 			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 %}
+				| {% if latest_posts %}
+				| {% for node in latest_posts %}
+				| {{ render_blog_post(node) }}
+				| {% endfor %}
+				| {% else %}
+				| No blog entries... yet!
+				| {% endif %}
 
 				.d-block.text-center
 					a.d-inline-block.p-3.text-muted(href="{{ url_for('main.main_blog') }}")
@@ -49,198 +50,86 @@ meta(name="twitter:image", content="{% if main_project.picture_header %}{{ main_
 						i.pi-rss
 						| RSS Feed
 
-		.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')}}")
+		.col-md-4.col-xl-3
+			section.pt-3
+				h6.title-underline
+					a.text-muted(href="{{ url_for('cloud.open_projects') }}")
+						| Films In Production
 
-					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].
+				a(href="/p/spring/")
+					img.rounded(
+						alt="Spring Open Movie Project",
+						src="{{ url_for('static', filename='assets/img/projects/spring_02_450x150.jpg')}}")
 
-				section.stream.py-3
-					h6.title-underline Latest Assets
+				p.text-muted.pt-2.
+					A poetic short film about a mountain spirit and her wise little dog. #[a.text-muted(href="/p/spring/") Check it out].
 
-					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 %}
+			section.py-3
+				h6.title-underline What's Going On
 
-								.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 %}
+				| {% if activity_stream %}
+				+card-deck()(class='card-deck-vertical pl-3')
+					| {% for child in activity_stream %}
+					| {% if child.node_type not in ['comment'] %}
+					| {{ asset_list_item(child, current_user) }}
+					| {% endif %}
+					| {% endfor %}
+				| {% else %}
+				.card
+					.card-body
+						h6.card-title
+							| No assets.
+				| {% endif %}
 
+			section.py-3.border-bottom.mb-3
+				h6.title-underline
+					a.text-muted(href="{{ url_for('main.nodes_search_index') }}")
+						| Random Awesome
 
-							.activity-stream__list-details
-								a.title(href="{{ n.url }}")
-									| {{ n.name }}
+				| {% if random_featured %}
+				+card-deck()(class='card-deck-vertical pl-3')
+					| {% for child in random_featured %}
+					| {% if child.node_type not in ['comment'] %}
+					| {{ asset_list_item(child, current_user) }}
+					| {% endif %}
+					| {% endfor %}
+				| {% else %}
+				.card
+					.card-body
+						h6.card-title
+							| No random featured.
+				| {% 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 %}
+			section.py-3
+				h6.title-underline Latest Comments
 
-									| {% 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 %}
+				ul.list-unstyled.pt-2
+					| {% if latest_comments %}
+					| {% for n in latest_comments %}
+					li.pb-2.mb-2.border-bottom.text-truncate
 
-								| {% 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 %}
-
-						li.activity-stream__list-item.empty#activity-stream__empty
-							| No items to list.
-
-
-				section.random-asset.py-3
-					h6.title-underline
-						a(href="/search") Explore the Cloud
-					.pb-3.text-muted Random selection of the best assets & 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 %}
-
-						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 }}
+						a.js-comment-content.text-muted(href="{{ n.url }}")
+							| {{ n.properties.content | striptags | truncate(200) }}
 
+						| {% if n.attached_to %}
+						.d-flex.align-items-baseline
+							a.text-muted.text-truncate(href="{{ n.attached_to.url }}")
+								small.pr-2.font-weight-bold {{ n.project.name }}
+								small {{ n.attached_to.name }}
 						| {% endif %}
-						| {% endfor %}
 
+						.d-flex.align-items-baseline
+							small.pr-2.font-weight-bold {{ n.user.full_name }}
 
-				section.comments.py-3
-					h6.title-underline Latest Comments
+							a.text-muted(href="{{ n.url }}", title="{{ n._created }}")
+								small {{ n._created | pretty_date }}
+					| {% endfor %}
 
-					ul.list-unstyled
-						| {% if latest_comments %}
-						| {% for n in latest_comments %}
-						li(
-							class="{{ n.node_type }}",
-							data-url="{{ n.url }}")
+					| {% else %}
+					span
+						| No comments... yet!
 
-							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 %}
-						li.activity-stream__list-item.empty#activity-stream__empty
-							| No comments... yet!
-
-						| {% endif %}
+					| {% endif %}
 
 | {% endblock %}
 
@@ -250,16 +139,10 @@ script.
 	$(function () {
 
 	/* cleanup mentions in comments  */
-	$('.comment-content').each(function(){
+	$('.js-comment-content').each(function(){
 		$(this).text($(this).text().replace(/\*|\@|\<(.*?)\>/g, ''));
 	});
 
-	/* Click on the whole asset/comment row to go */
-	$('.activity-stream__list li, .comments ul li').click(function(e){
-		window.location.href = $(this).data('url');
-		$(this).addClass('active');
-	});
-
 	hopToTop(); // Display jump to top button
 	});
 | {% endblock %}

src/templates/layout.pug

@@ -1,3 +1,5 @@
+include ../../../pillar/src/templates/mixins/components
+
 doctype
 html(lang="en")
 	head
@@ -29,20 +31,13 @@ html(lang="en")
 		meta(name="twitter:image", content="{{ url_for('static', filename='assets/img/backgrounds/background_gleb_locomotive.jpg')}}")
 		| {% endblock og %}
 
-		script(src="{{ url_for('static_pillar', filename='assets/js/vendor/jquery-3.1.0.min.js')}}")
+		script(src="{{ url_for('static_pillar', filename='assets/js/tutti.min.js') }}")
 		script(src="{{ url_for('static_pillar', filename='assets/js/vendor/jquery.typeahead-0.11.1.min.js')}}")
 		script(src="{{ url_for('static_pillar', filename='assets/js/vendor/js.cookie-2.0.3.min.js')}}")
 		| {% if current_user.is_authenticated %}
 		script(src="{{ url_for('static_pillar', filename='assets/js/vendor/clipboard.min.js')}}")
 		| {% endif %}
 
-		| {% if current_user.has_cap('subscriber') %}
-		| {# Only load if we can comment (for converting markdown as-we-type) #}
-		script(src="{{ url_for('static_pillar', filename='assets/js/markdown.min.js') }}")
-		| {% endif %}
-
-		script(src="{{ url_for('static_pillar', filename='assets/js/tutti.min.js') }}")
-
 		link(href="{{ url_for('static', filename='assets/img/favicon.png') }}", rel="shortcut icon")
 		link(href="{{ url_for('static', filename='assets/img/apple-touch-icon-precomposed.png') }}", rel="icon apple-touch-icon-precomposed", sizes="192x192")
 
@@ -72,211 +67,62 @@ html(lang="en")
 		| {% endwith %}
 
 		nav.navbar.navbar-expand-md.fixed-top.bg-white
-			a.navbar-brand(
-				href="{{ url_for('main.homepage') }}",
-				title="Blender Cloud")
-				span.app-logo
-					i.pi-blender-cloud
+			+nav-secondary()
+				button.navbar-toggler(
+					data-target=".sarasa",
+					data-toggle="collapse",
+					type="button")
+					span.sr-only Toggle Navigation
+					span.navbar-toggler-icon.d-flex.align-items-center
+						i.pi-menu
 
-			button.navbar-toggler.text-light(
-				data-target=".navbar-collapse",
-				data-toggle="collapse",
-				type="button")
-				span.sr-only Toggle navigation
-				span.navbar-toggler-icon.d-flex.align-items-center
-					i.pi-menu
+				li.nav-item.dropdown.large
+					a.nav-link.dropdown-toggle.px-2(
+					href="{{ url_for('main.homepage') }}"
+					data-toggle="dropdown")
+						i.pi-blender-cloud
+						i.pi-angle-down
+
+					| {% include 'menus/_dropdown_main.html' %}
 
 			| {% block navigation_tabs %}
 			| {% endblock navigation_tabs %}
 
 			| {% block navigation_search %}
-			// TODO (pablo) - bring it back asap
-				.search-input
-					input#cloud-search(
-						type="text",
-						placeholder="Search assets, tutorials...")
-					i.search-icon.pi-search
 			| {% endblock navigation_search %}
 
-			.collapse.navbar-collapse
-				ul.navbar-nav.ml-auto
-					| {% if node and node.properties and node.properties.category %}
-					| {% set category = node.properties.category %}
-					| {% else %}
-					| {% set category = title %}
-					| {% endif %}
+			+nav-secondary()(class="ml-auto")
+				| {% if node and node.properties and node.properties.category %}
+				| {% set category = node.properties.category %}
+				| {% else %}
+				| {% set category = title %}
+				| {% endif %}
 
-					| {% block navigation_sections %}
-					li
-						a.navbar-item(
-							href="{{ url_for('main.main_blog') }}",
-							title="Blender Cloud Blog",
-							data-toggle="tooltip",
-							data-placement="bottom",
-							class="{% if category == 'blog' %}active{% endif %}")
-							span Blog
+				| {% block navigation_sections %}
 
-					li.dropdown
-						a.navbar-item.dropdown-toggle(
-							href="",
-							data-toggle="dropdown",
-							title="Libraries")
-							span Libraries
-							i.pi-angle-down
+				+nav-secondary-link(
+					href="{{ url_for('main.nodes_search_index') }}",
+					title="Search Blender Cloud",
+					data-toggle="tooltip",
+					data-placement="bottom",
+					class="py-2 px-2 text-muted")
+					i.pi-search
 
-						ul.dropdown-menu.p-0
-							li
-								a.navbar-item(
-									href="{{ url_for('projects.view', project_url='hdri') }}",
-									title="HDRI Library",
-									data-toggle="tooltip",
-									data-placement="left")
-									i.pi-globe
-									| HDRI
-							li
-								a.navbar-item(
-									href="{{ url_for('projects.view', project_url='textures') }}",
-									title="Textures Library",
-									data-toggle="tooltip",
-									data-placement="left")
-									i.pi-folder-texture
-									| Textures
-							li
-								a.navbar-item(
-									href="{{ url_for('projects.view', project_url='characters') }}",
-									title="Character Library",
-									data-toggle="tooltip",
-									data-placement="left")
-									i.pi-character
-									| Characters
+				| {% endblock navigation_sections %}
 
+				| {% block navigation_user %}
+				| {% include 'menus/notifications.html' %}
+				| {% include 'menus/user.html' %}
+				| {% endblock navigation_user %}
 
-					li(class="dropdown")
-						a.navbar-item.dropdown-toggle(
-						href="{{ url_for('cloud.workshops') }}"
-						data-toggle="dropdown",
-						title="Training")
-							span Training
-							i.pi-angle-down
+				| {% if current_user.is_anonymous %}
+				li
+					a.btn.btn-sm.btn-primary.px-4.mx-1(
+						href="https://store.blender.org/product/membership/",
+						title="Sign up") Sign up
+				| {% endif %}
 
-						ul.dropdown-menu
-							li
-								a.navbar-item(
-								href="{{ url_for('cloud.courses') }}",
-								title="Courses",
-								data-toggle="tooltip",
-								data-placement="left")
-									i.pi-graduation-cap
-									| Courses
-							li
-								a.navbar-item(
-								href="{{ url_for('cloud.workshops') }}",
-								title="Workshops",
-								data-toggle="tooltip",
-								data-placement="left")
-									i.pi-lightbulb
-									| Workshops
-							li
-								a.navbar-item(
-								href="{{ url_for('projects.view', project_url='gallery') }}",
-								title="Curated artwork collection",
-								data-toggle="tooltip",
-								data-placement="left")
-									i.pi-image
-									| Art Gallery
-
-					li(class="dropdown")
-						a.navbar-item.dropdown-toggle(
-							href="{{ url_for('cloud.open_projects') }}",
-							title="Browse all the Open Projects",
-							data-toggle="dropdown",
-							class="{% if category in ['open-projects', 'film'] %}active{% endif %}")
-							span Open Projects
-							i.pi-angle-down
-
-						ul.dropdown-menu
-							li
-								a.navbar-item(href="/p/spring")
-									span.px-2 Spring
-							li
-								a.navbar-item(href="/p/hero")
-									span.px-2 Hero
-							li
-								a.navbar-item(href="/p/dailydweebs")
-									span.px-2 The Daily Dweebs
-							li
-								a.navbar-item(href="/p/agent-327")
-									span.px-2 Agent 327
-							li
-								a.navbar-item(href="/p/caminandes-3")
-									span.px-2 Caminandes: Llamigos
-
-							li.dropdown-divider
-
-							li
-								a.navbar-item(href="{{ url_for('cloud.open_projects') }}")
-									span.pl-2 All Open Projects
-
-					li(class="dropdown")
-						a.navbar-item.dropdown-toggle(
-							href="{{ url_for('cloud.services') }}",
-							title="Blender Cloud Services",
-							data-toggle="dropdown",
-							class="{% if category == 'services' %}active{% endif %}")
-							span Services
-							i.pi-angle-down
-
-						ul.dropdown-menu
-							li
-								a.navbar-item(
-								href="/attract",
-								title="Production Management",
-								data-toggle="tooltip",
-								data-placement="left")
-									i.pi-attract
-									| Attract
-							li
-								a.navbar-item(
-								href="/flamenco",
-								title="Render Management",
-								data-toggle="tooltip",
-								data-placement="left")
-									i.pi-flamenco
-									| Flamenco
-
-							li
-								a.navbar-item(
-								href="/services#blender-cloud-add-on",
-								title="Blender Sync, Texture Browser and more",
-								data-toggle="tooltip",
-								data-placement="left")
-									i.pi-blender
-									| Blender Cloud Add-on
-
-							li.dropdown-divider
-
-							li
-								a.navbar-item(
-								href="{{ url_for('cloud.services') }}",
-								title="All Blender Cloud services",
-								data-toggle="tooltip",
-								data-placement="left")
-									i.pi-list
-									| All Services
-
-					| {% endblock navigation_sections %}
-
-					| {% block navigation_user %}
-					| {% include 'menus/notifications.html' %}
-					| {% include 'menus/user.html' %}
-					| {% endblock navigation_user %}
-
-					| {% if current_user.is_anonymous %}
-					li.pt-1
-						a.btn.btn-sm.btn-primary.px-3.mx-1(
-							href="https://store.blender.org/product/membership/",
-							title="Sign up") Sign up
-					| {% endif %}
+			.loader-bar
 
 		.page-content
 			#search-overlay
@@ -287,114 +133,7 @@ html(lang="en")
 				| {% block body %}{% endblock %}
 
 		| {% block footer_container %}
-		.footer-wrapper
-			| {% block footer_navigation %}
-			.footer-navigation
-				.container
-					.row
-						.col-md-4.col-xs-6
-							h4
-								a(href="{{ url_for('main.homepage') }}")
-									i.pi-blender-cloud-logo
-
-							p.pl-2.
-								Blender Cloud is the creative hub for your projects,
-								powered by Free and Open Source Software.
-
-							h5.d-flex
-								a.px-2(href="https://twitter.com/Blender_Cloud",
-									title="Follow us on Twitter")
-									i.pi-social-youtube
-
-								a.px-2(href="https://twitter.com/Blender_Cloud",
-									title="Follow us on Twitter")
-									i.pi-social-twitter
-
-								a.px-2(href="https://www.facebook.com/BlenderCloudOfficial/",
-									title="Follow us on Facebook")
-									i.pi-social-facebook
-
-						.col-md-2.col-xs-6
-							h7.font-weight-bold
-								| TRAINING
-
-							ul.list-unstyled
-								li
-									a(href="{{ url_for('cloud.courses') }}")
-										| Courses
-								li
-									a(href="{{ url_for('cloud.workshops') }}")
-										| Workshops
-								li
-									a(href="{{ url_for('projects.view', project_url='gallery') }}")
-										| Art Gallery
-
-						.col-md-2.col-xs-6
-							h7.font-weight-bold
-								| LIBRARIES
-
-							ul.list-unstyled
-								li
-									a(href="{{ url_for('main.main_blog') }}",
-										title="Blender Cloud Blog")
-										| HDRIs
-								li
-									a(href="{{ url_for('cloud.services') }}",
-										title="Blender Cloud Services")
-										| Textures
-								li
-									a(href="{{ url_for('cloud.about') }}",
-										title="About Blender Cloud")
-										| Characters
-
-						.col-md-2.col-xs-6
-							h7.font-weight-bold
-								a(href="{{ url_for('cloud.services') }}")
-									| SERVICES
-
-							ul.list-unstyled
-								li
-									a(href="{{ url_for('main.main_blog') }}",
-										title="Blender Cloud Blog")
-										| Add-on
-								li
-									a(href="{{ url_for('main.main_blog') }}",
-										title="Blender Cloud Blog")
-										| Blender Sync
-								li
-									a(href="{{ url_for('cloud.services') }}",
-										title="Blender Cloud Services")
-										| Attract
-								li
-									a(href="{{ url_for('cloud.about') }}",
-										title="About Blender Cloud")
-										| Flamenco
-								li
-									a(href="{{ url_for('cloud.about') }}",
-										title="About Blender Cloud")
-										| Image Sharing
-
-						.col-md-2.col-xs-6
-							h7.font-weight-bold
-								| BLENDER
-							ul.list-unstyled
-								li
-									a(href="{{ url_for('main.main_blog') }}",
-										title="Blender Cloud Blog")
-										| blender.org
-								li
-									a(href="{{ url_for('cloud.terms_and_conditions') }}",
-										title="Terms and Conditions")
-										| Terms and Conditions
-								li
-									a(href="{{ url_for('cloud.privacy') }}",
-									title="Privacy")
-										| Privacy
-			| {% endblock footer_navigation %}
-
-			#hop(title="Be awesome in space")
-				i.pi-angle-up
-
+		| {% include '_footer.html' %}
 		| {% endblock footer_container %}
 
 		#notification-pop(data-url="", data-read-toggle="")
@@ -407,8 +146,6 @@ html(lang="en")
 					span.nc-date
 						a(href="")
 
-		script(src="{{ url_for('static_cloud', filename='assets/js/bootstrap.min.js') }}")
-
 		| {% if current_user.is_authenticated %}
 		script(src="{{ url_for('static_pillar', filename='assets/js/vendor/jquery.typewatch-3.0.0.min.js') }}")
 		script.
@@ -433,10 +170,22 @@ html(lang="en")
 				{% endif %}
 			});
 
+			// Enable all tooltips.
 			if (typeof $().tooltip != 'undefined'){
 				$('[data-toggle="tooltip"]').tooltip({'delay' : {'show': 0, 'hide': 0}});
 			}
 
+			// Main dropdown menu logic.
+			$('[data-toggle="dropdown-tab"]').hover(function(){
+				let tab = $(this).data('tab-target');
+
+				$('[data-toggle="dropdown-tab"]').removeClass('active');
+				$(this).addClass('active');
+
+				$('[data-tab]').removeClass('show');
+				$('[data-tab="' + tab + '"]').addClass('show');
+			});
+
 		| {% block footer_scripts_pre %}{% endblock %}
 		| {% block footer_scripts %}{% endblock %}
 

src/templates/menus/_dropdown_main.pug

@@ -0,0 +1,177 @@
+include ../../../../pillar/src/templates/mixins/components
+
+ul.dropdown-menu.nav-main
+	+nav-secondary()(
+		class="nav-secondary-vertical float-left bg-light border-left rounded-left")
+		+nav-secondary-link(
+			href="{{ url_for('main.homepage') }}",
+			data-toggle='dropdown-tab',
+			data-tab-target='home')
+			i.mr-2.pi-home
+			span Blender Cloud
+
+		+nav-secondary-link(
+			href="{{ url_for('cloud.open_projects') }}",
+			data-toggle='dropdown-tab',
+			data-tab-target='films')
+			i.mr-2.pi-film-thick
+			span Open Projects
+
+		li.nav-item
+			.nav-link(
+				data-toggle='dropdown-tab',
+				data-tab-target='training')
+				i.mr-2.pi-graduation-cap
+				span Learn
+
+		li.nav-item
+			.nav-link(
+				data-toggle='dropdown-tab',
+				data-tab-target='libraries')
+				i.mr-2.pi-file-archive
+				span Libraries
+
+		+nav-secondary-link(
+			href="{{ url_for('cloud.services') }}",
+			data-toggle='dropdown-tab',
+			data-tab-target='services',
+			class="{% if title == 'services' %}active{% endif %}")
+			i.mr-2.pi-whoosh
+			span Services
+
+	.dropdown-menu-tab(data-tab='home')
+		.dropdown-menu-column
+			+nav-secondary()(class="nav-secondary-vertical rounded-right border-left overflow-hidden")
+				+nav-secondary-link(
+					href="{{ url_for('main.main_blog') }}")
+					i.pi-newspaper
+					span Blog
+
+				+nav-secondary-link(
+					href="{{ url_for('projects.index') }}")
+					i.pi-star
+					span My Projects
+
+				| {% if current_user.has_organizations() %}
+				+nav-secondary-link(
+					href="{{ url_for('pillar.web.organizations.index') }}")
+					i.pi-users
+					span My Organizations
+				| {% endif %}
+
+				+nav-secondary-link(
+					href="{{ url_for('projects.home_project_shared_images')}}")
+					i.pi-picture
+					span Image Sharing
+
+				+nav-secondary-link(
+					href="{{ url_for('projects.home_project') }}")
+					i.pi-blender
+					span Blender Sync
+
+	.dropdown-menu-tab(data-tab='films')
+		.dropdown-menu-column
+			+nav-secondary()(class="nav-secondary-vertical rounded-right border-left overflow-hidden")
+				+nav-secondary-link(
+					href="{{ url_for('cloud.open_projects') }}",
+					class="nav-see-more border-bottom")
+					span.font-weight-bold
+						| All Open Projects
+					i.pi-angle-right.pl-2
+
+				+nav-secondary-link(
+					href="{{ url_for('projects.view', project_url='spring') }}")
+					span Spring
+
+				+nav-secondary-link(
+					href="{{ url_for('projects.view', project_url='hero') }}")
+					span Hero
+
+				+nav-secondary-link(
+					href="{{ url_for('projects.view', project_url='dailydweebs') }}")
+					span The Daily Dweebs
+
+				+nav-secondary-link(
+					href="{{ url_for('projects.view', project_url='agent-327') }}")
+					span Agent 327
+
+	.dropdown-menu-tab(data-tab='training')
+		.dropdown-menu-column
+			+nav-secondary()(class="nav-secondary-vertical rounded-right border-left overflow-hidden")
+				li.nav-item
+					.nav-link.border-bottom.pointer-events-none
+						span.font-weight-bold
+							| Learn
+
+				+nav-secondary-link(
+					href="{{ url_for('cloud.courses') }}")
+					i.pi-graduation-cap
+					span Courses
+
+				+nav-secondary-link(
+					href="{{ url_for('cloud.workshops') }}")
+					i.pi-lightbulb
+					span Workshops
+
+				+nav-secondary-link(
+					href="{{ url_for('cloud.production') }}")
+					i.pi-puzzle
+					span.new Production Lessons
+
+	.dropdown-menu-tab(data-tab='libraries')
+		.dropdown-menu-column
+			+nav-secondary()(class="nav-secondary-vertical rounded-right border-left overflow-hidden")
+				li.nav-item
+					.nav-link.border-bottom.pointer-events-none
+						span.font-weight-bold
+							| Libraries
+
+				+nav-secondary-link(
+					href="{{ url_for('projects.view', project_url='textures') }}")
+					i.pi-folder-texture
+					span Textures
+
+				+nav-secondary-link(
+					href="{{ url_for('projects.view', project_url='hdri') }}")
+					i.pi-globe
+					span HDRI
+
+				+nav-secondary-link(
+					href="{{ url_for('projects.view', project_url='characters') }}")
+					i.pi-character
+					span Characters
+
+				+nav-secondary-link(
+					href="{{ url_for('projects.view', project_url='gallery') }}")
+					i.pi-picture
+					span Art Gallery
+
+	.dropdown-menu-tab(data-tab='services')
+		.dropdown-menu-column
+			+nav-secondary()(class="nav-secondary-vertical rounded-right border-left overflow-hidden")
+				+nav-secondary-link(
+					href="{{ url_for('cloud.services') }}",
+					class="nav-see-more border-bottom")
+					span.font-weight-bold
+						| All Services
+					i.pi-angle-right.pl-2
+
+				+nav-secondary-link(
+					href="/attract")
+					i.pi-attract
+					span Attract
+
+				+nav-secondary-link(
+					href="/flamenco")
+					i.pi-attract
+					span Flamenco
+
+				+nav-secondary-link(
+					href="{{ url_for('cloud.services') }}#blender-cloud-add-on")
+					i.pi-blender
+					span Blender Cloud add-on
+
+				+nav-secondary-link(
+					href="{{ url_for('cloud.services') }}#texture-browser")
+					i.pi-texture
+					span Texture & HDRI Browser

src/templates/menus/user.pug

@@ -9,8 +9,8 @@
 | {% endif %}
 
 | {% block menu_avatar %}
-a.navbar-item.dropdown-toggle(href="#", data-toggle="dropdown", title="{{ current_user.email }}")
-	img.gravatar(
+a.navbar-item.dropdown-toggle(href="{{ url_for('settings.profile') }}", data-toggle="dropdown")
+	img.gravatar.rounded-circle(
 	src="{{ current_user.gravatar }}",
 	class="{{ subscription }}",
 	alt="Avatar")
@@ -28,26 +28,26 @@ a.navbar-item.dropdown-toggle(href="#", data-toggle="dropdown", title="{{ curren
 | {% block menu_list %}
 li.subscription-status(class="{{ subscription }}")
 	| {% if subscription == 'subscriber' %}
-	a.navbar-item(
-	href="{{url_for('settings.billing')}}"
-	title="View subscription info")
+	a.navbar-item.pt-2.pl-2.pr-3(
+		href="{{ url_for('settings.billing') }}"
+		title="View subscription info")
 		i.pi-grin
-		span Your subscription is active!
+		span.subitem Your subscription is active!
 	| {% elif subscription == 'demo' %}
-	a.navbar-item(
-	href="{{url_for('settings.billing')}}"
-	title="View subscription info")
+	a.navbar-item.pt-2.pl-2.pr-3(
+		href="{{url_for('settings.billing')}}"
+		title="View subscription info")
 		i.pi-heart-filled
-		span You have a free account.
+		span.subitem You have a free account.
 	| {% elif current_user.has_cap('can-renew-subscription') %}
-	a.navbar-item(target='_blank', href="/renew", title="Renew subscription")
+	a.navbar-item.pt-2.pl-2.pr-3(target='_blank', href="/renew", title="Renew subscription")
 		i.pi-heart
 		span.info Your subscription is not active.
 			span.renew Click here to renew.
 	| {% else %}
 	a.navbar-item(
-	href="https://store.blender.org/product/membership/"
-	title="Renew subscription")
+		href="https://store.blender.org/product/membership/"
+		title="Renew subscription")
 		i.pi-unhappy
 		span.info Your subscription is not active.
 			span.renew Click here to renew.
@@ -56,9 +56,9 @@ li.subscription-status(class="{{ subscription }}")
 | {{ super() }}
 
 li
-	a.navbar-item(
-	href="{{ url_for('settings.billing') }}"
-	title="Billing")
+	a.navbar-item.px-2(
+		href="{{ url_for('settings.billing') }}"
+		title="Billing")
 		i.pi-credit-card
 		| Subscription
 | {% endblock menu_list %}

src/templates/mixins/components.pug

@@ -1,69 +0,0 @@
-// {#
-// Header of landing pages. title or text can be skipped:
-// +jumbotron("{{ page_title }}", null, "{{ page_header_image }}")
-// Any extra attributes added (in a separate group) will be passed as is:
-// +jumbotron("{{ page_title }}", null, "{{ page_header_image }}")(data-node-id='{{ node._id }}')
-// #}
-mixin jumbotron(title, text, image, url)
-	if url
-		a.jumbotron.jumbotron-overlay.text-white(
-			style='background-image: url(' + image + ');',
-			href=url)&attributes(attributes)
-			.container
-				.row
-					.col-md-9
-						if title
-							.display-4.text-uppercase.font-weight-bold
-								=title
-						if text
-							.lead
-								=text
-	else
-		.jumbotron.jumbotron-overlay.text-white(style='background-image: url(' + image + ');')&attributes(attributes)
-			.container
-				.row
-					.col-md-9
-						if title
-							.display-4.text-uppercase.font-weight-bold
-								=title
-						if text
-							.lead
-								=text
-
-// {# Secondary navigation.
-// e.g. Workshops, Courses. #}
-mixin nav-secondary(title)
-	ul.nav.nav-secondary&attributes(attributes)
-		if title
-			li.font-weight-bold.px-2
-				=title
-
-		if block
-			block
-		else
-			p No items defined.
-
-mixin nav-secondary-link()
-	li.nav-item
-		a.nav-link&attributes(attributes)
-			block
-
-// {# Takes as argument the number of columns to use in this deck. 1-6 #}
-mixin card-deck(columns)
-	.card-deck.card-padless(class='card-' + columns + '-columns')
-		if block
-			block
-		else
-			p No cards defined.
-
-// {#
-// Passes all attributes to the card.
-// You can do fun stuff in a loop even like:
-// +card(data-url="{{ url_for('projects.view', project_url=project.url) }}", tabindex='{{ loop.index }}')
-// #}
-mixin card()
-	.card.card-fade.cursor-pointer.mb-4.js-project-go&attributes(attributes)
-		if block
-			block
-		else
-			p No card content defined.

src/templates/nodes/custom/blog/_macros.pug

@@ -1,4 +1,4 @@
-include ../../../mixins/components
+include ../../../../../../pillar/src/templates/mixins/components
 
 | {% import 'projects/_macros.html' as projectmacros %}
 | {% macro render_blog_post(node, project=None, pages=None) %}
@@ -7,12 +7,13 @@ include ../../../mixins/components
 	| {% if node.picture %}
 	+jumbotron(
 		"{{ node.name }}",
-		"{{ node._created | pretty_date }}",
+		"{{ node._created | pretty_date }}{% if node.user.full_name %} · {{ node.user.full_name }}{% endif %}",
 		"{{ node.picture.thumbnail('h', api=api) }}",
-		"{{ node.url }}")(class="row")
+		"{{ node.url }}")(
+		class="jumbotron-overlay")
 	| {% else %}
-	.pt-3.text-center.text-muted
-		h2
+	.pt-5.text-center.text-muted
+		h2.pb-2
 			a.text-muted(href="{{ node.url }}")
 				| {{ node.name }}
 		ul.d-flex.list-unstyled.justify-content-center
@@ -30,87 +31,86 @@ include ../../../mixins/components
 			li
 				a.px-2(href="{{ node.url }}#comments")
 					| Leave a comment
-
-			| {% if node.has_method('PUT') %}
-			li
-				a.px-2(href="{{url_for('nodes.edit', node_id=node._id)}}")
-					i.pi-edit
-					| Edit Post
-			| {% endif %}
 	| {% endif %}
 
-	| {% if project and project._id != config.MAIN_PROJECT_ID %}
-	| {{ projectmacros.render_secondary_navigation(project, pages=pages) }}
-	| {% endif %}
+	.node-details-description.mx-auto.py-5
+		| {{ node.properties | markdowned('content') }}
 
-	.row
-		.col-md-9.mx-auto
+	hr.my-4
 
-			.item-content.pt-4
-				| {{ node.properties | markdowned('content') }}
-
-			hr.my-4
+	#comments-embed.d-flex.justify-content-center.mx-auto
 | {% endmacro %}
 
 //- ******************************************************* -//
 | {% macro render_blog_list_item(node) %}
-.row.position-relative.py-2
-	.col-md-1
+a.card.asset.card-image-fade.pr-0.mx-0.mb-4(
+	href="{{ node.url }}")
+	.embed-responsive.embed-responsive-16by9
 		| {% if node.picture %}
-		a.imgs-fluid(href="{{ node.url }}")
-			img(src="{{ node.picture.thumbnail('s', api=api) }}")
+		.card-img-top.embed-responsive-item(style="background-image: url({{ node.picture.thumbnail('m', api=api) }})")
 		| {% else %}
-		.bg-primary.rounded.h-100
-			a.d-flex.align-items-center.justify-content-center.h-100.text-white(href="{{ node.url }}")
-				i.pi-document-text
+		.card-img-top.card-icon.embed-responsive-item
+			i.pi-document-text
 		| {% endif %}
 
-	.col-md-11
-		h5
-			a.text-muted(href="{{ node.url }}") {{node.name}}
+	.card-body.py-2.d-flex.flex-column
+		.card-title.mb-1.font-weight-bold
+			| {{ node.name }}
 
-		.text-muted.
-			#[span(title="{{node._created}}") {{node._created | pretty_date }}]
-			{% if node._created != node._updated %}
-			#[span(title="{{node._updated}}") (updated {{node._updated | pretty_date }})]
-			{% endif %}
-			{% if node.properties.category %} · {{node.properties.category}}{% endif %}
-			· {{node.user.full_name}}
-			{% if node.properties.status != 'published' %} · {{ node.properties.status}} {% endif %}
+		ul.card-text.list-unstyled.d-flex.text-black-50.mt-auto
+			li.pr-2 {{ node.user.full_name }}
+			li {{ node._created | pretty_date }}
+			| {% if node.properties.status != 'published' %}
+			li.text-info.font-weight-bold {{ node.properties.status}}
+			| {% endif %}
 
 | {% endmacro %}
 
 
 //- ******************************************************* -//
-| {% macro render_blog_index(project, posts, can_create_blog_posts, api, more_posts_available, posts_meta, pages=None) %}
-| {% if can_create_blog_posts %}
+| {% macro render_blog_index(current_post, project, posts, can_create_blog_posts, api, more_posts_available, posts_meta, pages=None) %}
+
+| {% if can_create_blog_posts or current_post.has_method('PUT') %}
 +nav-secondary
+	| {% if can_create_blog_posts %}
 	+nav-secondary-link(href="{{url_for('nodes.posts_create', project_id=project._id)}}")
-		span.text-success
-			i.pi-plus
-			| Create New Blog Post
+		i.pi-plus.pr-2
+		span Create New Blog Post
+	| {% endif %}
+	| {% if current_post.has_method('PUT') %}
+	+nav-secondary-link(href="{{url_for('nodes.edit', node_id=current_post._id)}}")
+		i.pi-edit.pr-2
+		span Edit Post
+	| {% endif %}
 | {% endif %}
 
 | {% if posts %}
-| {{ render_blog_post(posts[0], project=project, pages=pages) }}
+| {{ render_blog_post(current_post, project=project, pages=pages) }}
 
 .container
-	.row
-		.col-md-9.mx-auto
-			| {% for node in posts[1:] %}
-			| {% if loop.first %}
-			h5.text-muted.text-center Blasts from the past
-			| {% endif %}
-			| {{ render_blog_list_item(node) }}
-			| {% endfor %}
-
+	.pt-4.text-center
+		h5
 			| {% if more_posts_available %}
-			.blog-archive-navigation
-				a(href="{{ project.blog_archive_url }}")
-					| {{posts_meta.total - posts|length}} more blog posts over here
-					i.pi-angle-right
+			a.text-muted.py-3.d-block(href="{{ project.blog_archive_url }}")
+				| More from {{ project.name }} blog
+			| {% else %}
+			| More from {{ project.name }} blog
 			| {% endif %}
 
+	+card-deck(class="px-2 justify-content-center")
+		| {% for node in posts %}
+		| {# Skip listing the current post #}
+		| {% if node._id != current_post._id %}
+		| {{ render_blog_list_item(node) }}
+		| {% endif %}
+		| {% endfor %}
+
+	| {% if more_posts_available %}
+	a.d-block.pb-4.text-center(href="{{ project.blog_archive_url }}")
+		| {{posts_meta.total - posts|length}} more blog posts over here
+		i.pi-angle-right
+	| {% endif %}
+
 | {% else %}
 
 .text-center
@@ -122,29 +122,29 @@ include ../../../mixins/components
 
 //- Macro for rendering the navigation buttons for prev/next pages -//
 | {% macro render_archive_pagination(project) %}
-.blog-archive-navigation
+.d-flex.justify-content-center
 	| {% if project.blog_archive_prev %}
-	a.archive-nav-button(
+	a.px-5.py-3(
 		href="{{ project.blog_archive_prev }}", rel="prev")
 		i.pi-angle-left
 		| Previous page
 	| {% else %}
-	span.archive-nav-button
+	span.px-5.py-3.text-black-50
 		i.pi-angle-left
 		| Previous page
 	| {% endif %}
 
-	a.archive-nav-button(
+	a.px-5.py-3(
 		href="{{ url_for('main.project_blog', project_url=project.url) }}")
 		| Blog Index
 
 	| {% if project.blog_archive_next %}
-	a.archive-nav-button(
+	a.px-5.py-3(
 		href="{{ project.blog_archive_next }}", rel="next")
 		| Next page
 		i.pi-angle-right
 	| {% else %}
-	span.archive-nav-button
+	span.px-5.py-3.text-black-50
 		| Next page
 		i.pi-angle-right
 	| {% endif %}
@@ -155,9 +155,10 @@ include ../../../mixins/components
 
 | {{ render_archive_pagination(project) }}
 
-| {% for node in posts %}
-| {{ render_blog_list_item(node) }}
-| {% endfor %}
++card-deck(class="px-2")
+	| {% for node in posts %}
+	| {{ render_blog_list_item(node) }}
+	| {% endfor %}
 
 | {{ render_archive_pagination(project) }}
 

src/templates/organizations/index.pug

@@ -1,6 +1,6 @@
 | {% extends 'layout.html' %}
 | {% from '_macros/_navigation.html' import navigation_tabs %}
-include ../mixins/components
+include ../../../../pillar/src/templates/mixins/components
 
 | {% set title = 'organizations' %}
 | {% block page_title %}Organizations{% endblock %}

src/templates/production.pug

@@ -0,0 +1,52 @@
+| {% extends 'layout.html' %}
+| {% from '_macros/_navigation.html' import navigation_collection %}
+
+include ../../../pillar/src/templates/mixins/components
+
+mixin group(title, tag)
+	.row
+		section.py-3.my-3.border-bottom.col-12
+
+			h4.title-underline.mb-4= title
+			+card-deck(data-asset-tag=tag, class="js-asset-list py-3")
+
+| {% block page_title %}Production Lessons{% endblock %}
+| {% set page_header_text = "Tips and tricks by the Open Movie crew." %}
+
+| {% block navigation_tabs %}
+| {{ navigation_collection(title) }}
+| {% endblock navigation_tabs %}
+
+| {% block head %}
+script(src="{{ url_for('static_cloud', filename='assets/js/tagged_assets.min.js') }}")
+
+script.
+	$(function() {
+		$('.js-asset-list').loadTaggedAssets(5, 3);
+	});
+| {% endblock %}
+| {% block body %}
++jumbotron(
+	'{{ self.page_title() }}',
+	'{{ page_header_text }}',
+	"{{ url_for('static', filename='assets/img/backgrounds/background_agent327_04.jpg')}}")(
+		class="jumbotron-overlay")
+
+.container
+	+group('Modeling', 'modeling')
+	+group('Sculpting', 'sculpting')
+	+group('Animation', 'animation')
+	+group('Shading', 'shading')
+	+group('Texturing', 'texturing')
+	+group('Character Pipeline', 'character-pipeline')
+	+group('Rigging', 'rigging')
+	+group('Lighting & Rendering', 'lighting')
+	+group('Simulation & Effects', 'effects')
+	+group('Video Editing', 'video-editing')
+
+	a.d-block.py-5.text-center.text-muted(
+		href="{{ url_for('main.nodes_search_index') }}")
+		| Search Blender Cloud to find even more content
+		i.pi-angle-right.pl-1
+
+| {% endblock body%}

src/templates/projects/home_layout.pug

@@ -1,6 +1,6 @@
 | {% extends 'layout.html' %}
 | {% from '_macros/_navigation.html' import navigation_tabs %}
-include ../mixins/components
+include ../../../../pillar/src/templates/mixins/components
 
 | {% set title = 'home' %}
 
@@ -29,10 +29,10 @@ meta(name="twitter:image", content="{{ url_for('static', filename='assets/img/ba
 	section#projects.bg-white
 		+nav-secondary()(id='sub-nav-tabs__list')
 			+nav-secondary-link(id="subtab-blender_sync", data-tab-url="{{ url_for('projects.home_project')}}")
-				| Blender Sync
+				span Blender Sync
 
 			+nav-secondary-link(id="subtab-images", data-tab-url="{{ url_for('projects.home_project_shared_images')}}")
-				| Images
+				span Images
 
 		| {% block currenttab %}{% endblock %}
 | {% endblock %}

src/templates/projects/index_dashboard.pug

@@ -1,6 +1,6 @@
 | {% extends 'layout.html' %}
 | {% from '_macros/_navigation.html' import navigation_tabs %}
-include ../mixins/components
+include ../../../../pillar/src/templates/mixins/components
 
 | {% set title = 'dashboard' %}
 
@@ -47,34 +47,39 @@ style.
 .dashboard-container
 	section.dashboard-main
 		section#projects.bg-white
-			+nav-secondary()(id='sub-nav-tabs__list')
-				+nav-secondary-link(data-tab-toggle='own_projects', class="active")
-					| Own Projects
-					| {% if projects_user|length != 0 %}
-					span ({{ projects_user|length }})
-					| {% endif %}
+			.d-flex
+				+nav-secondary()(id='sub-nav-tabs__list')
+					+nav-secondary-link(data-tab-toggle='own_projects', class="active")
+						span
+							| Own Projects
+							| {% if projects_user | length != 0 %}
+							.d-inline.text-muted.pl-1 ({{ projects_user|length }})
+							| {% endif %}
 
-				+nav-secondary-link(data-tab-toggle='shared')
-					| Shared with me
-					| {% if projects_shared|length != 0 %}
-					span ({{ projects_shared|length }})
-					| {% endif %}
+					+nav-secondary-link(data-tab-toggle='shared')
+						span
+							| Shared with me
+							| {% if projects_shared | length != 0 %}
+							.d-inline.text-muted.pl-1 ({{ projects_shared|length }})
+							| {% endif %}
 
-				| {% if current_user.has_cap('subscriber') %}
-				+nav-secondary-link(
-						id="project-create",
-						data-url="{{ url_for('projects.create') }}",
-						href="{{ url_for('projects.create') }}")
-						span.text-success
-							| #[i.pi-plus] Create New Project
-				| {% elif current_user.has_cap('can-renew-subscription') %}
-				+nav-secondary-link(
-						id="project-create",
-						data-url="{{ url_for('projects.create') }}",
-						href="/renew",
-						target="_blank")
-						| #[i.pi-heart-filled.text-danger] Resubscribe to Create a Project
-				| {% endif %}
+				+nav-secondary()()
+					| {% if current_user.has_cap('subscriber') %}
+					+nav-secondary-link(
+							id="project-create",
+							data-url="{{ url_for('projects.create') }}",
+							href="{{ url_for('projects.create') }}")
+							span.text-success Create New Project...
+
+					| {% elif current_user.has_cap('can-renew-subscription') %}
+					+nav-secondary-link(
+							id="project-create",
+							data-url="{{ url_for('projects.create') }}",
+							href="/renew",
+							target="_blank")
+							i.pi-heart-filled.text-danger.pr-1
+							span Resubscribe to Create a Project
+					| {% endif %}
 
 			nav.nav-tabs__tab.active#own_projects
 				.deleted-projects-toggle

src/templates/projects/landing.pug

@@ -1,5 +1,8 @@
-| {% import 'projects/_macros.html' as projectmacros %}
 | {% extends 'layout.html' %}
+include ../../../../pillar/src/templates/mixins/components
+
+| {% import 'projects/_macros.html' as projectmacros %}
+| {% from '_macros/_asset_list_item.html' import asset_list_item %}
 
 | {% block page_title %}{{ project.name }}{% endblock%}
 
@@ -70,95 +73,77 @@ meta(property="og:url", content="{{url_for('projects.view', project_url=project.
 #others
 | {% endblock %}
 
-| {% block head %}
-
-script(src="{{ url_for('static_pillar', filename='assets/js/vendor/videojs-6.2.8.min.js') }}")
-script(src="{{ url_for('static_pillar', filename='assets/js/vendor/videojs-ga-0.4.2.min.js') }}")
-script(src="{{ url_for('static_pillar', filename='assets/js/vendor/videojs-hotkeys-0.2.20.min.js') }}")
-| {% endblock %}
-
 | {% block css %}
-link(href="{{ url_for('static_cloud', filename='assets/css/project-landing.css') }}", rel="stylesheet")
+link(href="{{ url_for('static_pillar', filename='assets/css/font-pillar.css') }}", rel="stylesheet")
+link(href="{{ url_for('static_cloud', filename='assets/css/project-main.css') }}", rel="stylesheet")
 | {% endblock %}
 
+| {% block navigation_tabs %}
+| {{ projectmacros.render_secondary_navigation(project, navigation_links, title) }}
+| {% endblock navigation_tabs %}
+
 | {% block body %}
-header
-	//a(href="{{ url_for( 'projects.view', project_url=project.url) }}")
-	img.header(src="{{ project.picture_header.thumbnail('h', api=api) }}")
++jumbotron(null, null, "{{ project.picture_header.thumbnail('h', api=api) }}")
 
-| {% block navbar_secondary %}
-| {{ projectmacros.render_secondary_navigation(project, pages=pages) }}
+.container-fluid.landing
+	.row
+		.col-md-8.mx-auto
+			h2.pt-5 {{ project.name }}
 
-| {% endblock navbar_secondary %}
-#container.landing
-	section.node-details-container.project
-		.node-details-title
-			h1 {{ project.name }}
+			| {% if project.description %}
+			.node-details-description
+				| {{ project | markdowned('description') }}
+			| {% endif %}
 
-		| {% if project.description %}
-		.node-details-description
-			| {{ project | markdowned('description') }}
-		| {% endif %}
+	.row
+		.col-md-10.mx-auto
+			section.py-5
+				h2.pb-3.text-center Gallery
+
+				.gallery
+					| {% for n in activity_stream %}
+					| {% if n.node_type not in ['comment', 'post'] and n.picture %}
+					.thumbnail.expand-image-links
+						.img-container
+							a.js-open-overlay(href="{{ n.picture.thumbnail('l', api=api) }}", data-node_id="{{ n._id }}")
+								img(src="{{ n.picture.thumbnail('l', api=api) }}", alt="{{ n.name }}")
+								.img-caption.table
+									| {# Not using for the moment
+									span.table-cell {{ n.name }}
+									| #}
+					| {% endif %}
+					| {% endfor %}
+					div(class="clearfix")
+					| {% if project.nodes_featured %}
+					| {# In some cases featured_nodes might might be embedded #}
+					| {% if '_id' in project.nodes_featured[0] %}
+					| {% set featured_node_id=project.nodes_featured[0]._id %}
+					| {% else %}
+					| {% set featured_node_id=project.nodes_featured[0] %}
+					| {% endif %}
+					.text-center.p-5
+						a.btn.btn-outline-secondary.px-5(
+							href="{{ url_for('projects.view_node', project_url=project.url, node_id=featured_node_id) }}")
+							| See More Artwork
+					| {% endif %}
 
 
-	section.gallery
-		h2 Gallery
-		| {% for n in activity_stream %}
-		| {% if n.node_type not in ['comment', 'post'] and n.picture %}
-		.thumbnail.expand-image-links
-			.img-container
-				a(href="{{ n.picture.thumbnail('l', api=api) }}", data-node_id="{{ n._id }}")
-					img(src="{{ n.picture.thumbnail('l', api=api) }}", alt="{{ n.name }}")
-					.img-caption.table
-						| {# Not using for the moment
-						span.table-cell {{ n.name }}
-						| #}
-		| {% endif %}
-		| {% endfor %}
-		div(class="clearfix")
-		| {% if project.nodes_featured %}
-		| {# In some cases featured_nodes might might be embedded #}
-		| {% if '_id' in project.nodes_featured[0] %}
-		| {% set featured_node_id=project.nodes_featured[0]._id %}
-		| {% else %}
-		| {% set featured_node_id=project.nodes_featured[0] %}
-		| {% endif %}
-		a.btn(href="{{ url_for('projects.view_node', project_url=project.url, node_id=featured_node_id) }}") See more
-		| {% endif %}
+	.row
+		.col-md-10.mx-auto
 
+			h2.pb-3.text-center Latest Updates
 
-	section.node-extra
-		h2 Latest Updates
+			| {% if activity_stream %}
+			+card-deck(class="px-2")
+					| {% for n in activity_stream %}
+					| {% if n.node_type == 'post' %}
+					| {{ asset_list_item(n, current_user) }}
+					| {% endif %}
+					| {% endfor %}
+			| {% endif %}
 
-		| {% if activity_stream %}
-		.node-updates
-			ul.node-updates-list
-				| {% for n in activity_stream %}
-				| {% if n.node_type == 'post' %}
-				li.node-updates-list-item(
-				data-node_id="{{ n._id }}",
-				class="{{ n.node_type }} {{ n.properties.content_type | hide_none }}")
-					a.image(href="{{ url_for_node(node=n) }}")
-						| {% if n.picture %}
-						img(src="{{ n.picture.thumbnail('l', api=api) }}")
-						| {% endif %}
-
-					.info
-						a.title(href="{{ url_for_node(node=n) }}") {{ n.name }}
-						p.description(href="{{ url_for_node(node=n) }}")
-							| {% if n.node_type == 'post' %}
-							| {{ n.properties | markdowned('content') | striptags | truncate(140, end="... <small>read more</small>") | safe | hide_none }}
-							| {% else %}
-							| {{ n | markdowned('description') | striptags | truncate(140, end="... <small>read more</small>") | safe | hide_none }}
-							| {% endif %}
-						//span.details
-						//	span.what {% if n.properties.content_type %}{{ n.properties.content_type | undertitle }}{% else %}{{ n.node_type | undertitle }}{% endif %} ·
-						//	span.when  {{ n._updated | pretty_date }} by
-						//	span.who {{ n.user.full_name }}
-				| {% endif %}
-				| {% endfor %}
-		| {% endif %}
-		a.btn(href="{{ url_for('main.project_blog', project_url=project.url) }}") See all updates
+.text-center.p-5
+	a.btn.btn-outline-secondary.px-5(href="{{ url_for('main.project_blog', project_url=project.url) }}") See All Updates
 
 | {% endblock body %}
 
@@ -181,11 +166,10 @@ script.
 		}
 	});
 
-	$("a[data-node_id]").on( "click", function(e) {
-		// var nodeId = $(this).data('node_id');
-		// displayNode(nodeId);
+	$("a.js-open-overlay").on( "click", function(e) {
 		e.preventDefault();
 		e.stopPropagation();
+
 		$('#page-overlay').addClass('active');
 		var url = $(this).attr('href');
 		$('#page-overlay').html('<img src="' + url + '"/>')

src/templates/projects/view.pug

@@ -1,6 +1,8 @@
 | {% extends 'layout.html' %}
 | {% from '_macros/_add_new_menu.html' import add_new_menu %}
-include ../mixins/components
+| {% from 'projects/_macros.html' import render_secondary_navigation %}
+
+include ../../../../pillar/src/templates/mixins/components
 
 | {% block page_title %}{{ project.name }}{% endblock%}
 | {% set title = 'project' %}
@@ -73,7 +75,7 @@ link(href="{{ url_for('static_pillar', filename='assets/jstree/themes/default/st
 link(rel="amphtml", href="{{ url_for('nodes.view', node_id=node._id, _external=True, format='amp') }}")
 | {% endif %}
 
-script(src="{{ url_for('static_pillar', filename='assets/js/vendor/videojs-6.2.8.min.js') }}")
+script(src="{{ url_for('static_pillar', filename='assets/js/vendor/video.min.js') }}")
 script(src="{{ url_for('static_pillar', filename='assets/js/vendor/videojs-ga-0.4.2.min.js') }}")
 script(src="{{ url_for('static_pillar', filename='assets/js/vendor/videojs-hotkeys-0.2.20.min.js') }}")
 script(src="{{ url_for('static_pillar', filename='assets/js/video_plugins.min.js') }}")
@@ -81,46 +83,11 @@ script(src="{{ url_for('static_pillar', filename='assets/js/video_plugins.min.js
 
 | {% block css %}
 link(href="{{ url_for('static_pillar', filename='assets/css/font-pillar.css') }}", rel="stylesheet")
-link(href="{{ url_for('static_pillar', filename='assets/css/project-main.css') }}", rel="stylesheet")
+link(href="{{ url_for('static_cloud', filename='assets/css/project-main.css') }}", rel="stylesheet")
 | {% endblock %}
 
 | {% block navigation_tabs %}
-+nav-secondary()(class="bg-white")
-	| {% if project.category == 'course' %}
-	li.text-capitalize
-		a.nav-link.text-muted.px-0(href="{{ url_for('cloud.courses') }}")
-			| Courses
-	| {% elif project.category == 'workshop' %}
-	li.text-capitalize
-		a.nav-link.text-muted.px-0(href="{{ url_for('cloud.workshops') }}")
-			| Workshops
-	li.px-1
-		i.pi-angle-right
-	| {% endif %}
-
-	+nav-secondary-link(
-		class="px-0",
-		href="{{url_for('projects.view', project_url=project.url, _external=True)}}")
-		| {{ project.name }}
-
-	| {% if project.category == "open_project" %}
-	+nav-secondary-link(
-		class="active",
-		href="{{url_for('projects.view', project_url=project.url, _external=True)}}")
-		| Explore
-	+nav-secondary-link(
-		href="{{url_for('projects.view', project_url=project.url, _external=True)}}")
-		| Blog
-	+nav-secondary-link(
-		href="{{url_for('projects.view', project_url=project.url, _external=True)}}")
-		| About
-	+nav-secondary-link(
-		href="{{url_for('projects.view', project_url=project.url, _external=True)}}")
-		| Team
-	+nav-secondary-link(
-		href="{{url_for('projects.view', project_url=project.url, _external=True)}}")
-		| Awards
-	| {% endif %}
+| {{ render_secondary_navigation(project, navigation_links, title) }}
 | {% endblock navigation_tabs %}
 
 | {% block body %}
@@ -128,21 +95,10 @@ link(href="{{ url_for('static_pillar', filename='assets/css/project-main.css') }
 	#project-side-container
 		#project_sidebar.bg-white
 			ul.project-tabs.p-0
-				//- li.tabs-thumbnail(class="{% if project.picture_square %}image{% endif %}")
-				//- 	a(href="{{url_for('projects.view', project_url=project.url)}}")
-				//- 		#project-loading
-				//- 			i.pi-spin
-				//- 		| {% if project.picture_square %}
-				//- 		img(src="{{ project.picture_square.thumbnail('b', api=api) }}")
-				//- 		| {% else %}
-				//- 		i.pi-home
-				//- 		| {% endif %}
-
-				li.tabs-browse(
+				li.tabs-browse.active(
 					title="Browse",
 					data-toggle="tooltip",
-					data-placement="right",
-					class="active")
+					data-placement="right")
 					a(href="{{url_for('projects.view', project_url=project.url, _external=True)}}")
 						i.pi-folder
 
@@ -178,115 +134,120 @@ link(href="{{ url_for('static_pillar', filename='assets/css/project-main.css') }
 		#project_nav(class="{{ title }}")
 			#project_nav-container
 				| {% if title != 'about' %}
-				//- +nav-secondary(class="bg-white")
-				//- 	+nav-secondary-link(
-				//- 		class="active",
-				//- 		href="{{url_for('projects.view', project_url=project.url, _external=True)}}")
-				//- 		| {{ project.name }}
-				//- #project_nav-header.bg-white
-
-					//- a.project-title.p-2.font-weight-bold.text-dark(
-					//- 	href="{{url_for('projects.view', project_url=project.url, _external=True)}}")
-					//- 	| {{ project.name }}
-
 				| {% block project_tree %}
-				#project_tree.bg-white
+				#project_tree.bg-light.px-1.py-2.border-right
 				| {% endblock project_tree %}
 				| {% endif %}
 
 
-	#project_context-container.border-left
+	#project_context-container
 		| {% if project.has_method('PUT') %}
-		#project_context-header.bg-white
-			span#status-bar
-
-			ul.project-edit-tools.disabled
-				li.dropdown
-					button#item_add.project-mode-view.btn.btn-sm.btn-outline-secondary.dropdown-toggle(
+		#project_context-header.position-fixed
+			ul.project-edit-tools.disabled.d-flex.list-unstyled.py-2.mb-0
+				li.dropdown(
+					title="Create...",
+					data-toggle="tooltip",
+					data-placement="left")
+					button.dropdown-toggle.btn.btn-sm.btn-outline-secondary(
+						id="item_add",
+						class="project-mode-view",
 						type="button",
 						data-toggle="dropdown",
 						aria-haspopup="true",
 						aria-expanded="false")
-						i.button-add-icon.pi-collection-plus
-						| New...
+						i.pi-collection-plus
 
-					ul.dropdown-menu.add_new-menu
+					ul.dropdown-menu.dropdown-menu-right(
+						class="add_new-menu")
 						| {{ add_new_menu(project.node_types) }}
 
 				li.button-edit
-					a#item_edit.project-mode-view.btn.btn-sm.btn-outline-secondary.ml-2(
+					a.btn.btn-sm.btn-outline-secondary.ml-2.px-2(
+						id="item_edit",
+						class="project-mode-view",
 						href="javascript:void(0);",
 						title="Edit",
-						data-project_id="{{project._id}}")
+						data-project_id="{{project._id}}",
+						data-toggle="tooltip",
+						data-placement="top")
 						i.button-edit-icon.pi-edit
-						| Edit Project
 
 				li.dropdown
-					button.dropdown-toggle.project-mode-view.btn.btn-sm.btn-outline-secondary.mx-2(
+					button.dropdown-toggle.btn.btn-sm.btn-outline-secondary.mx-2(
+						class="project-mode-view",
 						type="button",
 						data-toggle="dropdown",
 						aria-haspopup="true",
 						aria-expanded="false")
 						i.pi-more-vertical.p-0
 
-					ul.dropdown-menu
+					ul.dropdown-menu.dropdown-menu-right
 						| {% if current_user.has_cap('admin') %}
-						li.dropdown-item
-							a#item_featured(
+						li
+							a.dropdown-item(
+								id="item_featured",
 								href="javascript:void(0);",
 								title="Feature on project's homepage",
 								data-toggle="tooltip",
 								data-placement="left")
-								i.pi-star
+								i.pi-star.pr-2
 								| Toggle Featured
 
-						li.dropdown-item
-							a#item_toggle_public(
+						li
+							a.dropdown-item(
+								id="item_toggle_public",
 								href="javascript:void(0);",
 								title="Make it accessible to anyone",
 								data-toggle="tooltip",
 								data-placement="left")
-								i.pi-lock-open
+								i.pi-lock-open.pr-2
 								| Toggle Public
 						| {% endif %}
 
-						li.dropdown-item
-							a#item_toggle_projheader(
+						li
+							a.dropdown-item(
+								id="item_toggle_projheader",
 								href="javascript:void(0);",
 								title="Feature as project's header",
 								data-toggle="tooltip",
 								data-placement="left")
-								i.pi-star
+								i.pi-star.pr-2
 								| Toggle Project Header video
 
-						li.dropdown-item.button-move
-							a#item_move(
+						li.button-move
+							a.dropdown-item(
+								id="item_move",
 								href="javascript:void(0);",
 								title="Move into a folder...",
 								data-toggle="tooltip",
 								data-placement="left")
-								i.button-move-icon.pi-move
+								i.button-move-icon.pi-move.pr-2
 								| Move
 
-						li.dropdown-item.button-delete
-							a#item_delete(
+						li.button-delete
+							a.dropdown-item(
+								id="item_delete",
 								href="javascript:void(0);",
 								title="Can be undone within a month",
 								data-toggle="tooltip",
 								data-placement="left")
-								i.pi-trash
+								i.pi-trash.pr-2
 								| Delete Project
 
 				// Edit Mode
 				li.button-cancel
-					a#item_cancel.project-mode-edit.btn.btn-outline-secondary(
+					a.btn.btn-outline-secondary(
+						id="item_cancel",
+						class="project-mode-edit",
 						href="javascript:void(0);",
 						title="Cancel changes")
 						i.button-cancel-icon.pi-cancel
 						| Cancel
 
 				li.button-save
-					a#item_save.project-mode-edit.btn.btn-outline-success.mx-2(
+					a.btn.btn-outline-success.mx-2(
+						id="item_save",
+						class="project-mode-edit",
 						href="javascript:void(0);",
 						title="Save changes")
 						i.button-save-icon.pi-check
@@ -388,7 +349,7 @@ script.
 
 		// TODO: Maybe remove this, now it's also in loadNodeContent(), but double-check
 		// it's done like that in all users of updateUi().
-		$('#project-loading').removeAttr('class');
+		$('.loader-bar').removeClass('active');
 	}
 | {% endblock %}
 
@@ -416,7 +377,7 @@ script.
 
 
 	function loadNodeContent(url, nodeId) {
-		$('#project-loading').addClass('active');
+		$('.loader-bar').addClass('active');
 		$.get(url, function(dataHtml) {
 			// Update the DOM injecting the generate HTML into the page
 			$('#project_context').html(dataHtml);
@@ -429,14 +390,14 @@ script.
 			$('#server_error').attr('src', url);
 		})
 		.always(function(){
-			$('#project-loading').removeAttr('class');
+			$('.loader-bar').removeClass('active');
 			$('.button-edit-icon').addClass('pi-edit').removeClass('pi-spin spin');
 		});
 	}
 
 
 	function loadProjectContent(url) {
-		$('#project-loading').addClass('active');
+		$('.loader-bar').addClass('active');
 
 		$.get(url, function(dataHtml) {
 			// Update the DOM injecting the generated HTML into the page
@@ -452,7 +413,7 @@ script.
 			$('#server_error').attr('src', url);
 		})
 		.always(function(){
-			$('#project-loading').removeAttr('class');
+			$('.loader-bar').removeClass('active');
 			$('.button-edit-icon').addClass('pi-edit').removeClass('pi-spin spin');
 		});
 	}
@@ -593,7 +554,7 @@ script.
 						"image" : {"icon": "pi-image", "max_children": 0},
 						"hdri" : {"icon": "pi-globe", "max_children": 0},
 						"texture" : {"icon": "pi-texture", "max_children": 0},
-						"video" : {"icon": "pi-play", "max_children": 0},
+						"video" : {"icon": "pi-film-thick", "max_children": 0},
 						"blog" : {"icon": "pi-newspaper", "max_children": 0},
 						"page" : {"icon": "pi-document-text", "max_children": 0},
 						"default" : {"icon": "pi-document"}
@@ -673,10 +634,6 @@ script.
 	/* UI Stuff */
 	$(window).on("load resize",function(){
 		containerResizeY($(window).height());
-
-		if ($(window).width() > 480) {
-			project_container.style.height = (window.innerHeight - project_container.offsetTop) + "px";
-		}
 	});
 
 	{% if current_user_is_subscriber %}

src/templates/projects_index_collection.pug

@@ -1,6 +1,7 @@
 | {% extends 'layout.html' %}
+| {% from '_macros/_navigation.html' import navigation_collection %}
 
-include mixins/components
+include ../../../pillar/src/templates/mixins/components
 
 | {# Default case is Open Projects #}
 | {% set page_title = 'Open Projects' %}
@@ -41,62 +42,69 @@ meta(name="twitter:image", content="{{ page_header_image }}")
 | {% endblock %}
 
 | {% block navigation_tabs %}
-
-| {% if title in ['courses', 'workshops'] %}
-+nav-secondary
-	+nav-secondary-link(
-			class="{% if title == 'workshops' %}active{% endif %}",
-			href="{{ url_for('cloud.workshops') }}")
-		| Workshops
-
-	+nav-secondary-link(
-			class="{% if title == 'courses' %}active{% endif %}",
-			href="{{ url_for('cloud.courses') }}")
-		| Courses
-
-	+nav-secondary-link(
-			class="{% if title == 'gallery' %}active{% endif %}",
-			href="{{ url_for('projects.view', project_url='gallery') }}")
-		| Art Gallery
-| {% endif %}
-
+| {{ navigation_collection(title) }}
 | {% endblock navigation_tabs %}
 
 | {% block body %}
 
+| {# Specify the URL of projects in production. These are hidden from the listing below. #}
+| {% set projects_in_production = ['spring'] %}
+- var jumbotron_title = 'SPRING';
+- var jumbotron_lead  = 'A poetic short film about a mountain spirit and her wise little dog. Check it out.';
++jumbotron(
+	jumbotron_title,
+	jumbotron_lead,
+	"{{ url_for('static', filename='assets/img/backgrounds/background_spring_01.jpg')}}")(
+		class="jumbotron-overlay")
+
+	a.btn.btn-primary.mt-4.px-4(
+		href="{{ url_for('projects.view', project_url='spring') }}") Browse the Project
+	a.btn.btn-link-light.mt-4(
+		style="color: white",
+		href="{{ url_for('main.project_blog', project_url='spring') }}")
+		| Read the Blog
+		i.pi-angle-right.px-1
+
 .container.pb-5
-	.pt-4
-		h2.text-uppercase.font-weight-bold
-			| {{ page_title }}
-		.lead
-			| {{ page_header_text }}
+	.row
+		.col-12
+			.pt-4
+				h2.text-uppercase.font-weight-bold
+					| {{ page_title }}
+				.lead
+					| {{ page_header_text }}
 
-		hr.pb-2
+				hr.pb-2
 
-	+card-deck(3)
-		| {% for project in projects %}
+			+card-deck(3)
+				| {% for project in projects %}
 
-		| {% if (project.status == 'published') or (project.status == 'pending' and current_user.is_authenticated) and project._id != config.MAIN_PROJECT_ID %}
-		+card(data-url="{{ url_for('projects.view', project_url=project.url) }}", tabindex='{{ loop.index }}')
-			| {% if project.picture_header %}
-			a(href="{{ url_for('projects.view', project_url=project.url) }}")
-				img.card-img-top(
-					src="{{ project.picture_header.thumbnail('l', api=api) }}", alt="{{ project.name }}")
-			| {% endif %}
-
-			.card-body
-				h5.card-title
-					| {{ project.name }}
-					| {% if project.status == 'pending' and current_user.is_authenticated and current_user.has_role('admin') %}
-					small (pending)
+				| {% if project.url not in projects_in_production %}
+				| {% if (project.status == 'published') or (project.status == 'pending' and current_user.is_authenticated) and project._id != config.MAIN_PROJECT_ID %}
+				+card(
+					class='js-project-go card-fade cursor-pointer mb-4 mx-0',
+					data-url="{{ url_for('projects.view', project_url=project.url) }}",
+					tabindex='{{ loop.index }}')
+					| {% if project.picture_header %}
+					a(href="{{ url_for('projects.view', project_url=project.url) }}")
+						img.card-img-top(
+							src="{{ project.picture_header.thumbnail('l', api=api) }}", alt="{{ project.name }}")
 					| {% endif %}
 
-				| {% if project.summary %}
-				p.card-text
-					| {{project.summary|safe}}
+					.card-body
+						h5.card-title
+							| {{ project.name }}
+							| {% if project.status == 'pending' and current_user.is_authenticated and current_user.has_role('admin') %}
+							small (pending)
+							| {% endif %}
+
+						| {% if project.summary %}
+						p.card-text
+							| {{project.summary|safe}}
+						| {% endif %}
 				| {% endif %}
-		| {% endif %}
-		| {% endfor %}
+				| {% endif %}
+				| {% endfor %}
 
 | {% endblock %}
 

src/templates/services.pug

@@ -1,7 +1,9 @@
 | {% extends 'layout.html' %}
+| {% from '_macros/_navigation.html' import navigation_homepage %}
+
 | {% block page_title %}Services{% endblock %}
 | {% set title = 'services' %}
-include mixins/components
+include ../../../pillar/src/templates/mixins/components
 
 | {% block og %}
 meta(property="og:type", content="website")
@@ -15,6 +17,10 @@ meta(property="og:image", content="{{ url_for('static', filename='assets/img/bac
 meta(name="twitter:image", content="{{ url_for('static', filename='assets/img/backgrounds/background_services.jpg')}}")
 | {% endblock %}
 
+| {% block navigation_tabs %}
+| {{ navigation_homepage(title) }}
+| {% endblock navigation_tabs %}
+
 | {% block page_overlay %}
 #page-overlay.video
 	.video-embed
@@ -22,7 +28,7 @@ meta(name="twitter:image", content="{{ url_for('static', filename='assets/img/ba
 
 | {% block body %}
 - var header_text = "On Blender Cloud you can create and share personal projects, access our texture and HDRI library (or create your own), keep track of your production, manage your renders and much more!";
-+jumbotron("Services", header_text, "{{ url_for('static', filename='assets/img/backgrounds/services_projects.jpg')}}")
++jumbotron("Services", header_text, "{{ url_for('static', filename='assets/img/backgrounds/services_projects.jpg')}}")(class="jumbotron-overlay")
 
 - var addon_text = 'Available through the <a href="{{ url_for(\'cloud.services\') }}#blender-cloud-add-on">Blender Cloud add-on</a>';
 section#blender-cloud-add-on.page-card

src/templates/users/settings/billing.pug

@@ -12,7 +12,7 @@ style(type='text/css').
 
 //--------------------------------------------------------------------------------------------------
 | {% if user_cls == 'demo' %}
-h3.subscription-demo
+h4.text-info.py-3
 	i.pi-heart-filled
 	| You have a free account
 hr
@@ -23,7 +23,7 @@ p.
 
 //--------------------------------------------------------------------------------------------------
 | {% elif user_cls == 'outsider' %}
-h3.subscription-missing
+h4.text-info.py-3
 	i.pi-info
 	| You do not have an active subscription.
 hr
@@ -33,23 +33,23 @@ h3
 //--------------------------------------------------------------------------------------------------
 | {% elif user_cls == 'subscriber-expired' %}
 | {% set renew_url = url_for('cloud.renew_subscription') %}
-h3.subscription-missing
+h4.text-info.py-3
 	i.pi-info
 	a(href="{{renew_url}}") Your subscription can be renewed
 hr
 p.text-danger Subscription expired on: <strong>{{ expiration_date }}</strong>
 p
-	a.btn.btn-success(href="{{renew_url}}") Renew now
+	a.btn.btn-success.px-5(href="{{renew_url}}") Renew now
 
 //--------------------------------------------------------------------------------------------------
 | {% elif current_user.has_cap('subscriber') %}
-h3.subscription-active
-	i.pi-check
+h4.text-success.py-3
+	i.pi-heart-filled.text-danger.pr-2
 	| Your subscription is active
 
 //---------------------------------
 | {% if user_cls == 'subscriber' %}
-h4 Thank you for supporting us!
+h5 Thank you for supporting Blender!
 hr
 p Subscription expires on: <strong>{{ expiration_date }}</strong>
 p
@@ -64,10 +64,9 @@ p Your organisation provides you with your subscription.
 | {% endif %}
 
 hr
-p
-	button#recheck_subscription.btn.btn-outline-secondary(onclick="javascript:recheck_subscription(this)") Re-check my subscription
 
-hr
+button#recheck_subscription.btn.btn-sm.btn-outline-secondary.px-5(onclick="javascript:recheck_subscription(this)")
+	| Re-check my Subscription
 
 script.
 	function recheck_subscription(button) {

src/templates/users/settings/emails.pug

@@ -10,8 +10,9 @@
 			{{ subfield.label }}
 		| {% endfor %}
 
-		.buttons
-			button.btn.btn-outline-success.button-submit(type='submit')
-				i.pi-check
-				| Save Changes
+		.py-3
+			button.btn.btn-outline-success.px-5.button-submit(type='submit')
+				i.pi-check.pr-2
+				| {{ _("Save Changes") }}
+
 | {% endblock %}

src/templates/users/settings/page.pug

@@ -1,14 +1,16 @@
 | {% extends 'users/settings/base.html' %}
+include ../../../../../pillar/src/templates/mixins/components
+
 | {% block settings_sidebar_menu %}
 | {{ super() }}
-a(class="{% if title == 'emails' %}active{% endif %}",
-        href="{{ url_for('settings.emails') }}")
-    li
-        i.pi-email
-        | Emails
-a(class="{% if title == 'billing' %}active{% endif %}",
-        href="{{ url_for('settings.billing') }}")
-    li
-        i.pi-credit-card
-        | Subscription
++nav-secondary-link(
+	class="{% if title == 'emails' %}active{% endif %}",
+	href="{{ url_for('settings.emails') }}")
+	i.pr-3.pi-email
+	span Emails
++nav-secondary-link(
+	class="{% if title == 'billing' %}active{% endif %}",
+	href="{{ url_for('settings.billing') }}")
+	i.pr-3.pi-credit-card
+	span Subscription
 | {% endblock %}

src/templates/welcome.pug

@@ -1,4 +1,6 @@
 | {% extends 'layout.html' %}
+include ../../../pillar/src/templates/mixins/components
+
 | {% block page_title %}Welcome{% endblock %}
 
 | {% set title = 'join' %}
@@ -19,26 +21,21 @@ meta(property="og:image", content="{{ url_for('static', filename='assets/img/bac
 
 | {% block navigation_search %}{% endblock %}
 | {% block navigation_sections %}
-li
-	a.navbar-item(href="{{ url_for('main.main_blog') }}")
-		span Blog
-li
-	a.navbar-item(href="#pricing")
-		span Pricing
++nav-secondary-link(href="#pricing")
+	span Pricing
 | {% endblock navigation_sections %}
 
 | {% block navigation_user %}
-li.pt-1.pr-1
+li.pr-1
 	| {% if current_user.is_anonymous %}
-	a.btn.btn-outline-success(href="{{ url_for('users.login', next='/') }}")
-		| Log in and Explore
+	a.btn.btn-sm.btn-outline-primary.px-3(href="{{ url_for('users.login', next='/') }}")
+		| Log in & Explore
 	| {% else %}
-	a.btn.btn-outline-success(href="{{ url_for('main.homepage') }}")
+	a.btn.btn-sm.btn-outline-primary.px-3(href="{{ url_for('main.homepage') }}")
 		| Explore
 	| {% endif %}
 | {% endblock navigation_user %}
 
-
 | {% block body %}
 #page-container.join
 	#page-header(