Loading Bar: Utility to turn it on/off

src/scripts/tutti/0_navbar.js

@@ -98,3 +98,15 @@ function statusBarSet(classes, html, icon_name, time){
 	statusBarClear(time, 250);
 };
 
+
+/* Loading Bar
+ * Sets .loader-bar in layout.pug as active when
+ * loading an asset or performing actions.
+ */
+function loadingBarShow(){
+	$('.loading-bar').addClass('active');
+}
+
+function loadingBarHide(){
+	$('.loading-bar').removeClass('active');
+}

src/styles/_apps_base.sass

@@ -400,10 +400,10 @@ nav.sidebar
 			left: -19px
 			z-index: 1
 
-$loader-bar-width: 100px
-$loader-bar-height: 2px
-.loader-bar
-	bottom: -$loader-bar-height
+$loading-bar-width: 100px
+$loading-bar-height: 2px
+.loading-bar
+	bottom: -$loading-bar-height
 	content: ''
 	display: none
 	height: 0
@@ -419,22 +419,22 @@ $loader-bar-height: 2px
 		background-image: linear-gradient(to right, $primary-accent, $primary)
 		content: ''
 		display: block
-		height: $loader-bar-height
-		left: -$loader-bar-width
+		height: $loading-bar-height
+		left: -$loading-bar-width
 		position: absolute
-		width: $loader-bar-width
+		width: $loading-bar-width
 
 	&.active
 		display: block
-		height: $loader-bar-height
+		height: $loading-bar-height
 		visibility: visible
 
 		&:before
-			animation: loader-bar-slide 2s linear infinite
+			animation: loading-bar-slide 2s linear infinite
 
-@keyframes loader-bar-slide
+@keyframes loading-bar-slide
 	from
-		left: -($loader-bar-width / 2)
+		left: -($loading-bar-width / 2)
 		width: 3%
 
 	50%

src/styles/blog.sass

@@ -16,6 +16,7 @@
 @import "../../node_modules/bootstrap/scss/code"
 @import "../../node_modules/bootstrap/scss/grid"
 @import "../../node_modules/bootstrap/scss/buttons"
+@import "../../node_modules/bootstrap/scss/badge"
 @import "../../node_modules/bootstrap/scss/dropdown"
 @import "../../node_modules/bootstrap/scss/custom-forms"
 

src/styles/components/_jumbotron.sass

@@ -54,3 +54,9 @@
 
 		+media-sm
 			font-size: $display4-size
+
+	.display-4
+		font-size: $h2-font-size
+
+		+media-sm
+			font-size: $display4-size

src/templates/nodes/search.pug

@@ -166,12 +166,12 @@ script.
 			$('#search-hit-container').html(dataHtml);
 		})
 		.done(function(){
-			$('.loader-bar').removeClass('active');
+			loadingBarHide();
 			$('#search-error').hide();
 			$('#search-hit-container').show();
 		})
 		.fail(function(data){
-			$('.loader-bar').removeClass('active');
+			loadingBarHide();
 			$('#search-hit-container').hide();
 			$('#search-error').show().html('Houston!\n\n' + data.status + ' ' + data.statusText);
 		});
@@ -180,7 +180,8 @@ script.
 	$('body').on('click', '.js-search-hit', function(e){
 		e.preventDefault();
 
-		$('.loader-bar').removeClass('active').addClass('active');
+		loadingBarHide();
+		loadingBarShow();
 
 		displayNode($(this).data('hit-id'));
 		$('.js-search-hit').removeClass('active');