Start of "production videos", a.k.a. tagged assets overview

Tagged assets are shown in a list per tag. The list is dynamically
loaded with JavaScript.

cloud/__init__.py

@@ -41,8 +41,7 @@ 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'],
+            'NODE_TAGS': ['animation', 'modelling', 'rigging'],
         }
 
     def eve_settings(self):

cloud/routes.py

@@ -393,9 +393,7 @@ def privacy():
 
 @blueprint.route('/production')
 def production():
-    return render_template(
-        'production.html',
-        title='production')
+    return render_template('production.html')
 
 
 @blueprint.route('/emails/welcome.send')

docker/4_run/config_local.py

@@ -113,10 +113,6 @@ 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,7 +31,9 @@ var destination = {
 }
 
 var source = {
-    pillar: '../pillar/'
+    pillar: '../pillar/',
+    bootstrap: 'node_modules/bootstrap/',
+    popper: 'node_modules/popper.js/'
 }
 
 
@@ -69,9 +71,6 @@ 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')
@@ -87,6 +86,44 @@ 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
@@ -96,10 +133,11 @@ gulp.task('watch',function() {
 
     gulp.watch('src/styles/**/*.sass',['styles']);
     gulp.watch(source.pillar + 'src/styles/**/*.sass',['styles']);
-    gulp.watch('src/scripts/*.js',['scripts']);
-    gulp.watch('src/templates/**/*.pug',['templates']);
-});
 
+    gulp.watch('src/templates/**/*.pug',['templates']);
+    gulp.watch('src/scripts/*.js',['scripts']);
+    gulp.watch('src/scripts/tutti/**/*.js',['scripts_concat_tutti']);
+});
 
 // Erases all generated files in output directories.
 gulp.task('cleanup', function() {
@@ -119,4 +157,4 @@ gulp.task('cleanup', function() {
 var tasks = [];
 if (enabled.cleanup) tasks.push('cleanup');
 
-gulp.task('default', tasks.concat(['styles', 'templates', 'scripts']));
+gulp.task('default', tasks.concat(['styles', 'templates', 'scripts', 'scripts_concat_tutti', 'scripts_concat_bootstrap']));

package.json

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

src/scripts/tagged_assets.js

@@ -6,29 +6,28 @@
     const LOAD_INITIAL_COUNT = 5;
     const LOAD_NEXT_COUNT = 3;
 
-    /* Renders a node as an asset card, returns a jQuery object. */
+    /* Renders a node as a <li> element, 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')
+        let li = $('<li>').addClass('tagged-asset');
+        let link = $('<a>')
             .attr('href', '/nodes/' + node._id + '/redir')
-            .attr('title', node.name);
-
-        let thumbnail_container = $('<div class="embed-responsive embed-responsive-16by9">');
+            .appendTo(li);
 
         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);
+            li.addClass('warning');
+            link.text('no picture for node ' + node._id);
         }
 
         if (!node.picture) {
             warnNoPicture();
-        } else {
+            return li;
+        }
+
         // TODO: show 'loading' thingy
         $.get('/api/files/' + node.picture)
             .fail(function(error) {
                 let msg = xhrErrorResponseMessage(error);
-                    console.log(msg);
+                li.addClass('error').text(msg);
             })
             .done(function(resp) {
                 // Render the picture if it has the proper size.
@@ -46,99 +45,64 @@
                     return;
                 }
 
-                    let img = $('<img class="card-img-top embed-responsive-item">')
+                let img = $('<img>')
                     .attr('alt', node.name)
                     .attr('src', variation.link)
                     .attr('width', variation.width)
                     .attr('height', variation.height);
-                    thumbnail_container.append(img);
+                link.append(img);
             });
+
+        return li;
     }
 
-        card.append(thumbnail_container);
+    function loadNext(ul_element) {
+        let $ul = $(ul_element);
+        let tagged_assets = ul_element.tagged_assets;  // Stored here by loadTaggedAssets().
+        let already_loaded = $ul.find('li.tagged-asset').length;
 
-        /* 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 load_next = $ul.find('li.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);
+            let li = renderAsset(node);
+            load_next.before(li);
         }
 
         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) {
+    $.fn.loadTaggedAssets = function(api_base_url) {
+        this.each(function(index, ul_element) {
             // TODO(Sybren): show a 'loading' animation.
-            $.get('/api/nodes/tagged/' + card_deck_element.dataset.assetTag)
+            $.get('/api/nodes/tagged/' + ul_element.dataset.assetTag)
                 .fail(function(error) {
                     let msg = xhrErrorResponseMessage(error);
-                    $('<a>').addClass('bg-danger').text(msg).appendTo(card_deck_element);
+                    $('<li>').addClass('error').text(msg).appendTo(ul_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;
+                    // Store the response on the DOM <ul>-element so that we can later render more.
+                    ul_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);
+                        li.appendTo(ul_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')
+                    let load_next = $('<li>').addClass('load-next');
+                    let link = $('<a>')
                         .attr('href', 'javascript:void(0);')
-                            .click(function() { loadNext(card_deck_element); return false; })
-                            .text('Load More');
-                        link.appendTo(card_deck_element);
-                    }
+                        .click(function() { loadNext(ul_element); return false; })
+                        .text('Load next')
+                        .appendTo(load_next);
+                    load_next.appendTo(ul_element);
                 });
         });
     };

src/styles/_homepage.sass

@@ -1,5 +1,496 @@
+
+
+.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

@@ -1,212 +0,0 @@
-$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,50 +1,51 @@
 // 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"
+@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 "../../../pillar/node_modules/bootstrap/scss/root"
-@import "../../../pillar/node_modules/bootstrap/scss/reboot"
+@import "../../node_modules/bootstrap/scss/root"
+@import "../../node_modules/bootstrap/scss/reboot"
 
-@import "../../../pillar/node_modules/bootstrap/scss/type"
-@import "../../../pillar/node_modules/bootstrap/scss/images"
+@import "../../node_modules/bootstrap/scss/type"
+@import "../../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 "../../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/nav"
-@import "../../../pillar/node_modules/bootstrap/scss/navbar"
+@import "../../node_modules/bootstrap/scss/nav"
+@import "../../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 "../../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/utilities"
-@import "../../../pillar/node_modules/bootstrap/scss/print"
+@import "../../node_modules/bootstrap/scss/utilities"
+@import "../../node_modules/bootstrap/scss/print"
 
 
 // Pillar components.

src/styles/project-landing.sass

@@ -0,0 +1,384 @@
+// 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

@@ -1,86 +0,0 @@
-// 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

@@ -1,112 +0,0 @@
-.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,55 +1,26 @@
-include ../../../../pillar/src/templates/mixins/components
+include ../mixins/components
 
-| {% macro navigation_homepage(title) %}
+| {% macro navigation_tabs(title) %}
 +nav-secondary()
 	+nav-secondary-link(
-		href="{{ url_for('cloud.open_projects') }}")
-		span Films
+			class="{% if title == 'homepage' %}active{% endif %}",
+			href="{{ url_for('main.homepage') }}")
+		| Activity
 
 	+nav-secondary-link(
-		href="{{ url_for('cloud.courses') }}")
-		span Courses
+			class="{% if title == 'home' %}active{% endif %}",
+			href="{{ url_for('projects.home_project') }}")
+		| Home
 
 	+nav-secondary-link(
-		href="{{ url_for('cloud.workshops') }}")
-		span Workshops
+			class="{% if title == 'dashboard' %}active{% endif %}",
+			href="{{ url_for('projects.index') }}")
+		| My Projects
 
+	| {% if current_user.has_organizations() %}
 	+nav-secondary-link(
-		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
+			class="{% if title == 'organizations' %}active{% endif %}",
+			href="{{ url_for('pillar.web.organizations.index') }}")
+		| My Organizations
 	| {% endif %}
 | {% endmacro %}

src/templates/homepage.pug

@@ -1,10 +1,7 @@
 | {% extends 'layout.html' %}
-| {% from '_macros/_navigation.html' import navigation_homepage %}
-| {% from '_macros/_asset_list_item.html' import asset_list_item %}
+| {% from '_macros/_navigation.html' import navigation_tabs %}
 | {% from 'nodes/custom/blog/_macros.html' import render_blog_post %}
 
-include ../../../pillar/src/templates/mixins/components
-
 | {% set title = 'homepage' %}
 
 | {% block og %}
@@ -22,19 +19,21 @@ meta(name="twitter:image", content="{% if main_project.picture_header %}{{ main_
 | {% endblock %}
 
 | {% block navigation_tabs %}
-| {{ navigation_homepage(title) }}
+| {{ navigation_tabs(title) }}
 | {% endblock navigation_tabs %}
 
 | {% block body %}
 .container-fluid.dashboard-container.imgs-fluid
 	.row
-		.col-md-8.col-xl-9
+		.col-md-8
 			section.blog
+				ul.list-unstyled
 					| {% if latest_posts %}
 					| {% for node in latest_posts %}
 					| {{ render_blog_post(node) }}
 					| {% endfor %}
 					| {% else %}
+					li
 						| No blog entries... yet!
 					| {% endif %}
 
@@ -50,83 +49,195 @@ meta(name="twitter:image", content="{% if main_project.picture_header %}{{ main_
 						i.pi-rss
 						| RSS Feed
 
-		.col-md-4.col-xl-3
+		.col-md-4
+			.dashboard-sidebar
 				section.pt-3
-				h6.title-underline
-					a.text-muted(href="{{ url_for('cloud.open_projects') }}")
-						| Films In Production
-
+					h6.title-underline In Production
 					a(href="/p/spring/")
-					img.rounded(
-						alt="Spring Open Movie Project",
-						src="{{ url_for('static', filename='assets/img/projects/spring_02_450x150.jpg')}}")
+						img(src="{{ url_for('static', filename='assets/img/projects/spring_450x150.jpg')}}")
 
 					p.text-muted.pt-2.
-					A poetic short film about a mountain spirit and her wise little dog. #[a.text-muted(href="/p/spring/") Check it out].
+						A poetic short film about a mountain spirit and her wise little dog. #[a(href="/p/spring/") Check it out].
 
-			section.py-3
-				h6.title-underline What's Going On
+				section.stream.py-3
+					h6.title-underline Latest Assets
 
-				| {% 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) }}
+					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 %}
-					| {% endfor %}
+
+								.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 %}
-				.card
-					.card-body
-						h6.card-title
-							| No assets.
+									i.pi-folder
+									| {% endif %}
 									| {% endif %}
 
-			section.py-3.border-bottom.mb-3
-				h6.title-underline
-					a.text-muted(href="{{ url_for('main.nodes_search_index') }}")
-						| Random Awesome
 
-				| {% 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) }}
+							.activity-stream__list-details
+								a.title(href="{{ n.url }}")
+									| {{ n.name }}
+
+								| {% if n.permissions.world %}
+								.ribbon
+									span free
 								| {% endif %}
-					| {% endfor %}
-				| {% else %}
-				.card
-					.card-body
-						h6.card-title
-							| No random featured.
+								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
-
-				ul.list-unstyled.pt-2
-					| {% if latest_comments %}
-					| {% for n in latest_comments %}
-					li.pb-2.mb-2.border-bottom.text-truncate
-
-						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 }}
+									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 %}
 
-						.d-flex.align-items-baseline
-							small.pr-2.font-weight-bold {{ n.user.full_name }}
+								| {% 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 %}
 
-							a.text-muted(href="{{ n.url }}", title="{{ n._created }}")
-								small {{ n._created | pretty_date }}
+						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 }}
+
+						| {% endif %}
+						| {% endfor %}
+
+
+				section.comments.py-3
+					h6.title-underline Latest Comments
+
+					ul.list-unstyled
+						| {% if latest_comments %}
+						| {% for n in latest_comments %}
+						li(
+							class="{{ n.node_type }}",
+							data-url="{{ n.url }}")
+
+							a.comment-content(href="{{ n.url }}")
+								| {{ n.properties.content | striptags | truncate(200) }}
+
+							ul.list-unstyled.d-flex.text-muted
+								li.who {{ n.user.full_name }}
+								| {% if n.attached_to %}
+
+								li.where-parent
+									a(href="{{ n.attached_to.url }}") {{ n.attached_to.name }}
+								| {% endif %}
+
+								li.when
+									a(href="{{ n.url }}", title="{{ n._created }}")
+										| {{ n._created | pretty_date_time }}
 						| {% endfor %}
 
 						| {% else %}
-					span
+						li.activity-stream__list-item.empty#activity-stream__empty
 							| No comments... yet!
 
 						| {% endif %}
@@ -139,10 +250,16 @@ script.
 	$(function () {
 
 	/* cleanup mentions in comments  */
-	$('.js-comment-content').each(function(){
+	$('.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,5 +1,3 @@
-include ../../../pillar/src/templates/mixins/components
-
 doctype
 html(lang="en")
 	head
@@ -31,13 +29,20 @@ 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/tutti.min.js') }}")
+		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/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")
 
@@ -67,31 +72,34 @@ html(lang="en")
 		| {% endwith %}
 
 		nav.navbar.navbar-expand-md.fixed-top.bg-white
-			+nav-secondary()
-				button.navbar-toggler(
-					data-target=".sarasa",
+			a.navbar-brand(
+				href="{{ url_for('main.homepage') }}",
+				title="Blender Cloud")
+				span.app-logo
+					i.pi-blender-cloud
+
+			button.navbar-toggler.text-light(
+				data-target=".navbar-collapse",
 				data-toggle="collapse",
 				type="button")
-					span.sr-only Toggle Navigation
+				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 %}
 
-			+nav-secondary()(class="ml-auto")
+			.collapse.navbar-collapse
+				ul.navbar-nav.ml-auto
 					| {% if node and node.properties and node.properties.category %}
 					| {% set category = node.properties.category %}
 					| {% else %}
@@ -99,14 +107,162 @@ html(lang="en")
 					| {% endif %}
 
 					| {% block navigation_sections %}
-
-				+nav-secondary-link(
-					href="{{ url_for('main.nodes_search_index') }}",
-					title="Search Blender Cloud",
+					li
+						a.navbar-item(
+							href="{{ url_for('main.main_blog') }}",
+							title="Blender Cloud Blog",
 							data-toggle="tooltip",
 							data-placement="bottom",
-					class="py-2 px-2 text-muted")
-					i.pi-search
+							class="{% if category == 'blog' %}active{% endif %}")
+							span Blog
+
+					li.dropdown
+						a.navbar-item.dropdown-toggle(
+							href="",
+							data-toggle="dropdown",
+							title="Libraries")
+							span Libraries
+							i.pi-angle-down
+
+						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
+
+
+					li(class="dropdown")
+						a.navbar-item.dropdown-toggle(
+						href="{{ url_for('cloud.workshops') }}"
+						data-toggle="dropdown",
+						title="Training")
+							span Training
+							i.pi-angle-down
+
+						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 %}
 
@@ -116,14 +272,12 @@ html(lang="en")
 					| {% endblock navigation_user %}
 
 					| {% if current_user.is_anonymous %}
-				li
-					a.btn.btn-sm.btn-primary.px-4.mx-1(
+					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
 			| {% block page_overlay %}
@@ -133,7 +287,114 @@ html(lang="en")
 				| {% block body %}{% endblock %}
 
 		| {% block footer_container %}
-		| {% include '_footer.html' %}
+		.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
+
 		| {% endblock footer_container %}
 
 		#notification-pop(data-url="", data-read-toggle="")
@@ -146,6 +407,8 @@ 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.
@@ -170,22 +433,10 @@ 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

@@ -1,177 +0,0 @@
-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="{{ url_for('settings.profile') }}", data-toggle="dropdown")
-	img.gravatar.rounded-circle(
+a.navbar-item.dropdown-toggle(href="#", data-toggle="dropdown", title="{{ current_user.email }}")
+	img.gravatar(
 	src="{{ current_user.gravatar }}",
 	class="{{ subscription }}",
 	alt="Avatar")
@@ -28,19 +28,19 @@ a.navbar-item.dropdown-toggle(href="{{ url_for('settings.profile') }}", data-tog
 | {% block menu_list %}
 li.subscription-status(class="{{ subscription }}")
 	| {% if subscription == 'subscriber' %}
-	a.navbar-item.pt-2.pl-2.pr-3(
-		href="{{ url_for('settings.billing') }}"
+	a.navbar-item(
+	href="{{url_for('settings.billing')}}"
 	title="View subscription info")
 		i.pi-grin
-		span.subitem Your subscription is active!
+		span Your subscription is active!
 	| {% elif subscription == 'demo' %}
-	a.navbar-item.pt-2.pl-2.pr-3(
+	a.navbar-item(
 	href="{{url_for('settings.billing')}}"
 	title="View subscription info")
 		i.pi-heart-filled
-		span.subitem You have a free account.
+		span You have a free account.
 	| {% elif current_user.has_cap('can-renew-subscription') %}
-	a.navbar-item.pt-2.pl-2.pr-3(target='_blank', href="/renew", title="Renew subscription")
+	a.navbar-item(target='_blank', href="/renew", title="Renew subscription")
 		i.pi-heart
 		span.info Your subscription is not active.
 			span.renew Click here to renew.
@@ -56,7 +56,7 @@ li.subscription-status(class="{{ subscription }}")
 | {{ super() }}
 
 li
-	a.navbar-item.px-2(
+	a.navbar-item(
 	href="{{ url_for('settings.billing') }}"
 	title="Billing")
 		i.pi-credit-card

src/templates/mixins/components.pug

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

src/templates/production.pug

@@ -1,52 +1,35 @@
 | {% 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 page_title %}Production of Stuff{% endblock %}
 | {% block head %}
 script(src="{{ url_for('static_cloud', filename='assets/js/tagged_assets.min.js') }}")
 
 script.
 	$(function() {
-		$('.js-asset-list').loadTaggedAssets(5, 3);
-	});
+		$('ul.asset-list').loadTaggedAssets();
+	})
 | {% endblock %}
 | {% block body %}
-+jumbotron(
-	'{{ self.page_title() }}',
-	'{{ page_header_text }}',
-	"{{ url_for('static', filename='assets/img/backgrounds/background_agent327_04.jpg')}}")(
-		class="jumbotron-overlay")
+#page-container
+	#page-content
+		h2 Production of Stuff
+		p.
+			Here are our hand-selected assets 'bout stuff.
 
-.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')
+		h3 Animation
+		ul.asset-list(data-asset-tag="animation")
 
-	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
+		h3 Modelling
+		ul.asset-list(data-asset-tag="modelling")
 
+		h3 Rigging
+		ul.asset-list(data-asset-tag="rigging")
+
+		h3 pipeline
+		ul.asset-list(data-asset-tag="pipeline")
+
+		h3 lookdev
+		ul.asset-list(data-asset-tag="lookdev")
+
+		h3 crazyspace
+		ul.asset-list(data-asset-tag="crazyspace")
 | {% endblock body%}

src/templates/projects/home_layout.pug

@@ -1,6 +1,6 @@
 | {% extends 'layout.html' %}
 | {% from '_macros/_navigation.html' import navigation_tabs %}
-include ../../../../pillar/src/templates/mixins/components
+include ../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')}}")
-				span Blender Sync
+				| Blender Sync
 
 			+nav-secondary-link(id="subtab-images", data-tab-url="{{ url_for('projects.home_project_shared_images')}}")
-				span Images
+				| 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 ../../../../pillar/src/templates/mixins/components
+include ../mixins/components
 
 | {% set title = 'dashboard' %}
 
@@ -47,38 +47,33 @@ style.
 .dashboard-container
 	section.dashboard-main
 		section#projects.bg-white
-			.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 }})
+					| {% if projects_user|length != 0 %}
+					span ({{ projects_user|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 }})
+					| {% if projects_shared|length != 0 %}
+					span ({{ projects_shared|length }})
 					| {% 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...
-
+						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.pr-1
-							span Resubscribe to Create a Project
+						| #[i.pi-heart-filled.text-danger] Resubscribe to Create a Project
 				| {% endif %}
 
 			nav.nav-tabs__tab.active#own_projects

src/templates/projects/landing.pug

@@ -1,8 +1,5 @@
-| {% 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 %}
+| {% extends 'layout.html' %}
 
 | {% block page_title %}{{ project.name }}{% endblock%}
 
@@ -73,39 +70,44 @@ meta(property="og:url", content="{{url_for('projects.view', project_url=project.
 #others
 | {% endblock %}
 
-| {% block css %}
-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")
+| {% 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 navigation_tabs %}
-| {{ projectmacros.render_secondary_navigation(project, navigation_links, title) }}
-| {% endblock navigation_tabs %}
+| {% block css %}
+link(href="{{ url_for('static_cloud', filename='assets/css/project-landing.css') }}", rel="stylesheet")
+| {% endblock %}
 
 | {% block body %}
-+jumbotron(null, null, "{{ project.picture_header.thumbnail('h', api=api) }}")
+header
+	//a(href="{{ url_for( 'projects.view', project_url=project.url) }}")
+	img.header(src="{{ project.picture_header.thumbnail('h', api=api) }}")
 
-.container-fluid.landing
-	.row
-		.col-md-8.mx-auto
-			h2.pt-5 {{ project.name }}
+| {% block navbar_secondary %}
+| {{ projectmacros.render_secondary_navigation(project, pages=pages) }}
+
+| {% 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 %}
 
-	.row
-		.col-md-10.mx-auto
-			section.py-5
-				h2.pb-3.text-center Gallery
 
-				.gallery
+	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.js-open-overlay(href="{{ n.picture.thumbnail('l', api=api) }}", data-node_id="{{ n._id }}")
+				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
@@ -121,29 +123,42 @@ link(href="{{ url_for('static_cloud', filename='assets/css/project-main.css') }}
 		| {% 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
+		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")
+		.node-updates
+			ul.node-updates-list
 				| {% for n in activity_stream %}
 				| {% if n.node_type == 'post' %}
-					| {{ asset_list_item(n, current_user) }}
+				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 %}
-
-.text-center.p-5
-	a.btn.btn-outline-secondary.px-5(href="{{ url_for('main.project_blog', project_url=project.url) }}") See All Updates
+		a.btn(href="{{ url_for('main.project_blog', project_url=project.url) }}") See all updates
 
 | {% endblock body %}
 
@@ -166,10 +181,11 @@ script.
 		}
 	});
 
-	$("a.js-open-overlay").on( "click", function(e) {
+	$("a[data-node_id]").on( "click", function(e) {
+		// var nodeId = $(this).data('node_id');
+		// displayNode(nodeId);
 		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,8 +1,6 @@
 | {% extends 'layout.html' %}
 | {% from '_macros/_add_new_menu.html' import add_new_menu %}
-| {% from 'projects/_macros.html' import render_secondary_navigation %}
-
-include ../../../../pillar/src/templates/mixins/components
+include ../mixins/components
 
 | {% block page_title %}{{ project.name }}{% endblock%}
 | {% set title = 'project' %}
@@ -75,7 +73,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/video.min.js') }}")
+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') }}")
 script(src="{{ url_for('static_pillar', filename='assets/js/video_plugins.min.js') }}")
@@ -83,11 +81,46 @@ 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_cloud', filename='assets/css/project-main.css') }}", rel="stylesheet")
+link(href="{{ url_for('static_pillar', filename='assets/css/project-main.css') }}", rel="stylesheet")
 | {% endblock %}
 
 | {% block navigation_tabs %}
-| {{ render_secondary_navigation(project, navigation_links, title) }}
++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 %}
 | {% endblock navigation_tabs %}
 
 | {% block body %}
@@ -95,10 +128,21 @@ link(href="{{ url_for('static_cloud', filename='assets/css/project-main.css') }}
 	#project-side-container
 		#project_sidebar.bg-white
 			ul.project-tabs.p-0
-				li.tabs-browse.active(
+				//- 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(
 					title="Browse",
 					data-toggle="tooltip",
-					data-placement="right")
+					data-placement="right",
+					class="active")
 					a(href="{{url_for('projects.view', project_url=project.url, _external=True)}}")
 						i.pi-folder
 
@@ -134,120 +178,115 @@ link(href="{{ url_for('static_cloud', 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-light.px-1.py-2.border-right
+				#project_tree.bg-white
 				| {% endblock project_tree %}
 				| {% endif %}
 
 
-	#project_context-container
+	#project_context-container.border-left
 		| {% if project.has_method('PUT') %}
-		#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",
+		#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(
 						type="button",
 						data-toggle="dropdown",
 						aria-haspopup="true",
 						aria-expanded="false")
-						i.pi-collection-plus
+						i.button-add-icon.pi-collection-plus
+						| New...
 
-					ul.dropdown-menu.dropdown-menu-right(
-						class="add_new-menu")
+					ul.dropdown-menu.add_new-menu
 						| {{ add_new_menu(project.node_types) }}
 
 				li.button-edit
-					a.btn.btn-sm.btn-outline-secondary.ml-2.px-2(
-						id="item_edit",
-						class="project-mode-view",
+					a#item_edit.project-mode-view.btn.btn-sm.btn-outline-secondary.ml-2(
 						href="javascript:void(0);",
 						title="Edit",
-						data-project_id="{{project._id}}",
-						data-toggle="tooltip",
-						data-placement="top")
+						data-project_id="{{project._id}}")
 						i.button-edit-icon.pi-edit
+						| Edit Project
 
 				li.dropdown
-					button.dropdown-toggle.btn.btn-sm.btn-outline-secondary.mx-2(
-						class="project-mode-view",
+					button.dropdown-toggle.project-mode-view.btn.btn-sm.btn-outline-secondary.mx-2(
 						type="button",
 						data-toggle="dropdown",
 						aria-haspopup="true",
 						aria-expanded="false")
 						i.pi-more-vertical.p-0
 
-					ul.dropdown-menu.dropdown-menu-right
+					ul.dropdown-menu
 						| {% if current_user.has_cap('admin') %}
-						li
-							a.dropdown-item(
-								id="item_featured",
+						li.dropdown-item
+							a#item_featured(
 								href="javascript:void(0);",
 								title="Feature on project's homepage",
 								data-toggle="tooltip",
 								data-placement="left")
-								i.pi-star.pr-2
+								i.pi-star
 								| Toggle Featured
 
-						li
-							a.dropdown-item(
-								id="item_toggle_public",
+						li.dropdown-item
+							a#item_toggle_public(
 								href="javascript:void(0);",
 								title="Make it accessible to anyone",
 								data-toggle="tooltip",
 								data-placement="left")
-								i.pi-lock-open.pr-2
+								i.pi-lock-open
 								| Toggle Public
 						| {% endif %}
 
-						li
-							a.dropdown-item(
-								id="item_toggle_projheader",
+						li.dropdown-item
+							a#item_toggle_projheader(
 								href="javascript:void(0);",
 								title="Feature as project's header",
 								data-toggle="tooltip",
 								data-placement="left")
-								i.pi-star.pr-2
+								i.pi-star
 								| Toggle Project Header video
 
-						li.button-move
-							a.dropdown-item(
-								id="item_move",
+						li.dropdown-item.button-move
+							a#item_move(
 								href="javascript:void(0);",
 								title="Move into a folder...",
 								data-toggle="tooltip",
 								data-placement="left")
-								i.button-move-icon.pi-move.pr-2
+								i.button-move-icon.pi-move
 								| Move
 
-						li.button-delete
-							a.dropdown-item(
-								id="item_delete",
+						li.dropdown-item.button-delete
+							a#item_delete(
 								href="javascript:void(0);",
 								title="Can be undone within a month",
 								data-toggle="tooltip",
 								data-placement="left")
-								i.pi-trash.pr-2
+								i.pi-trash
 								| Delete Project
 
 				// Edit Mode
 				li.button-cancel
-					a.btn.btn-outline-secondary(
-						id="item_cancel",
-						class="project-mode-edit",
+					a#item_cancel.project-mode-edit.btn.btn-outline-secondary(
 						href="javascript:void(0);",
 						title="Cancel changes")
 						i.button-cancel-icon.pi-cancel
 						| Cancel
 
 				li.button-save
-					a.btn.btn-outline-success.mx-2(
-						id="item_save",
-						class="project-mode-edit",
+					a#item_save.project-mode-edit.btn.btn-outline-success.mx-2(
 						href="javascript:void(0);",
 						title="Save changes")
 						i.button-save-icon.pi-check
@@ -349,7 +388,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().
-		$('.loader-bar').removeClass('active');
+		$('#project-loading').removeAttr('class');
 	}
 | {% endblock %}
 
@@ -377,7 +416,7 @@ script.
 
 
 	function loadNodeContent(url, nodeId) {
-		$('.loader-bar').addClass('active');
+		$('#project-loading').addClass('active');
 		$.get(url, function(dataHtml) {
 			// Update the DOM injecting the generate HTML into the page
 			$('#project_context').html(dataHtml);
@@ -390,14 +429,14 @@ script.
 			$('#server_error').attr('src', url);
 		})
 		.always(function(){
-			$('.loader-bar').removeClass('active');
+			$('#project-loading').removeAttr('class');
 			$('.button-edit-icon').addClass('pi-edit').removeClass('pi-spin spin');
 		});
 	}
 
 
 	function loadProjectContent(url) {
-		$('.loader-bar').addClass('active');
+		$('#project-loading').addClass('active');
 
 		$.get(url, function(dataHtml) {
 			// Update the DOM injecting the generated HTML into the page
@@ -413,7 +452,7 @@ script.
 			$('#server_error').attr('src', url);
 		})
 		.always(function(){
-			$('.loader-bar').removeClass('active');
+			$('#project-loading').removeAttr('class');
 			$('.button-edit-icon').addClass('pi-edit').removeClass('pi-spin spin');
 		});
 	}
@@ -554,7 +593,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-film-thick", "max_children": 0},
+						"video" : {"icon": "pi-play", "max_children": 0},
 						"blog" : {"icon": "pi-newspaper", "max_children": 0},
 						"page" : {"icon": "pi-document-text", "max_children": 0},
 						"default" : {"icon": "pi-document"}
@@ -634,6 +673,10 @@ 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,7 +1,6 @@
 | {% extends 'layout.html' %}
-| {% from '_macros/_navigation.html' import navigation_collection %}
 
-include ../../../pillar/src/templates/mixins/components
+include mixins/components
 
 | {# Default case is Open Projects #}
 | {% set page_title = 'Open Projects' %}
@@ -42,32 +41,30 @@ meta(name="twitter:image", content="{{ page_header_image }}")
 | {% endblock %}
 
 | {% block navigation_tabs %}
-| {{ navigation_collection(title) }}
+
+| {% 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 %}
+
 | {% 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
-	.row
-		.col-12
 	.pt-4
 		h2.text-uppercase.font-weight-bold
 			| {{ page_title }}
@@ -79,12 +76,8 @@ meta(name="twitter:image", content="{{ page_header_image }}")
 	+card-deck(3)
 		| {% for project in projects %}
 
-				| {% 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 }}')
+		+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(
@@ -103,7 +96,6 @@ meta(name="twitter:image", content="{{ page_header_image }}")
 					| {{project.summary|safe}}
 				| {% endif %}
 		| {% endif %}
-				| {% endif %}
 		| {% endfor %}
 
 | {% endblock %}

src/templates/services.pug

@@ -1,9 +1,7 @@
 | {% extends 'layout.html' %}
-| {% from '_macros/_navigation.html' import navigation_homepage %}
-
 | {% block page_title %}Services{% endblock %}
 | {% set title = 'services' %}
-include ../../../pillar/src/templates/mixins/components
+include mixins/components
 
 | {% block og %}
 meta(property="og:type", content="website")
@@ -17,10 +15,6 @@ 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
@@ -28,7 +22,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')}}")(class="jumbotron-overlay")
++jumbotron("Services", header_text, "{{ url_for('static', filename='assets/img/backgrounds/services_projects.jpg')}}")
 
 - 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' %}
-h4.text-info.py-3
+h3.subscription-demo
 	i.pi-heart-filled
 	| You have a free account
 hr
@@ -23,7 +23,7 @@ p.
 
 //--------------------------------------------------------------------------------------------------
 | {% elif user_cls == 'outsider' %}
-h4.text-info.py-3
+h3.subscription-missing
 	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') %}
-h4.text-info.py-3
+h3.subscription-missing
 	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.px-5(href="{{renew_url}}") Renew now
+	a.btn.btn-success(href="{{renew_url}}") Renew now
 
 //--------------------------------------------------------------------------------------------------
 | {% elif current_user.has_cap('subscriber') %}
-h4.text-success.py-3
-	i.pi-heart-filled.text-danger.pr-2
+h3.subscription-active
+	i.pi-check
 	| Your subscription is active
 
 //---------------------------------
 | {% if user_cls == 'subscriber' %}
-h5 Thank you for supporting Blender!
+h4 Thank you for supporting us!
 hr
 p Subscription expires on: <strong>{{ expiration_date }}</strong>
 p
@@ -64,9 +64,10 @@ 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
 
-button#recheck_subscription.btn.btn-sm.btn-outline-secondary.px-5(onclick="javascript:recheck_subscription(this)")
-	| Re-check my Subscription
+hr
 
 script.
 	function recheck_subscription(button) {

src/templates/users/settings/emails.pug

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

src/templates/users/settings/page.pug

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

src/templates/welcome.pug

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