Services page: move to bootstrap 4

src/templates/services.pug

@@ -20,26 +20,17 @@ meta(name="twitter:image", content="{{ url_for('static', filename='assets/img/ba
 | {% endblock %}
 
 | {% block body %}
-#page-container
+.jumbotron.jumbotron-overlay.text-white.mb-1(style="background-image: url({{ url_for('static', filename='assets/img/backgrounds/services_projects.jpg')}})")
-	#page-header(style="background-image: url({{ url_for('static', filename='assets/img/backgrounds/services_projects.jpg')}})")
 	.container
-			.page-title
+		.row
-				| Blender Cloud Services
+			.col-md-8
-			.page-title-summary
+				.display-4.text-uppercase.font-weight-bold
-				span.text-background
+					| Services
-					p.
+				.lead.
-						Blender Cloud is the creative hub for your projects, powered by Free and Open Source software.
-
-					p.
 					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!
 
-		.navbar-backdrop-overlay
-
 - var addon_text = 'Available through the <a href="{{ url_for(\'cloud.services\') }}#blender-cloud-add-on">Blender Cloud add-on</a>'
-
-	#page-content
-
 section#blender-cloud-add-on.page-card
 	.page-card-side
 		h2.page-card-title
@@ -54,7 +45,7 @@ meta(name="twitter:image", content="{{ url_for('static', filename='assets/img/ba
 
 			small Blender Cloud add-on requires Blender 2.78 or newer
 
-				a.page-card-cta.download(
+		a.btn-success(
 			href="https://cloud.blender.org/r/downloads/blender_cloud-latest-addon.zip")
 			i.pi-download
 			| Download add-on &nbsp;<small>v</small> {{ config.BLENDER_CLOUD_ADDON_VERSION }}
@@ -97,7 +88,7 @@ meta(name="twitter:image", content="{{ url_for('static', filename='assets/img/ba
 
 			.tip !{addon_text}
 
-				a.page-card-cta.js-watch-video.download(
+		a.btn-success.js-watch-video(
 			href="https://www.youtube.com/watch?v=-srXYv2Osjw",
 			data-youtube-id="-srXYv2Osjw")
 			i.pi-play
@@ -117,7 +108,7 @@ meta(name="twitter:image", content="{{ url_for('static', filename='assets/img/ba
 
 			.tip !{addon_text}
 
-				a.page-card-cta.download.js-watch-video(
+		a.btn-success.js-watch-video(
 			href="https://www.youtube.com/watch?v=yvtqeMBOAyk",
 			data-youtube-id="yvtqeMBOAyk")
 			i.pi-play
@@ -155,7 +146,7 @@ meta(name="twitter:image", content="{{ url_for('static', filename='assets/img/ba
 		.page-card-summary.
 			Production-management software for your film, game, or commercial projects.
 
-				a.page-card-cta.download.js-watch-video(
+		a.btn-success.js-watch-video(
 			href="https://www.youtube.com/watch?v=b9x1rlyyt_o",
 			data-youtube-id="b9x1rlyyt_o")
 			i.pi-play
@@ -178,7 +169,7 @@ meta(name="twitter:image", content="{{ url_for('static', filename='assets/img/ba
 		.page-card-summary.
 			Take control of your computing infrastructure and get things done.
 
-				a.page-card-cta.download.js-watch-video(
+		a.btn-success.js-watch-video(
 			href="https://www.youtube.com/watch?v=7cnFKhsM67Q",
 			data-youtube-id="7cnFKhsM67Q")
 			i.pi-play
@@ -195,15 +186,17 @@ meta(name="twitter:image", content="{{ url_for('static', filename='assets/img/ba
 
 
 | {% if not current_user.has_role('subscriber') %}
-		section.page-card.subscribe(
+section.page-card(
 	style="background-image: url({{ url_for('static', filename='assets/img/backgrounds/pattern_01.jpg')}})")
 	.page-card-side
+
 		h2.page-card-title
 			| All of this, plus hours of training and production assets.
-				.page-card-summary
+
+		.page-card-summary.text-white
 			| Join us for only $9.90/month!
-				a.page-card-cta(
+
-					href="https://store.blender.org/product/membership/")
+		a.page-card-cta(href="https://store.blender.org/product/membership/")
 			| Subscribe Now
 | {% endif %}
 
@@ -212,12 +205,13 @@ meta(name="twitter:image", content="{{ url_for('static', filename='assets/img/ba
 
 | {% block footer_scripts %}
 script.
-	// Click anywhere in the page to hide the overlay
+	// Hide the video overlay.
 	function hideOverlay() {
 		$('#page-overlay.video').removeClass('active');
 		$('#page-overlay.video .video-embed').html('');
 	}
 
+	// Click anywhere in the page or hit Esc to hide the overlay.
 	$(document).click(function() {
 		hideOverlay();
 	});
@@ -229,12 +223,12 @@ script.
 	});
 
 	$('a.js-watch-video').click(function(e){
+		var videoId = $(this).attr('data-youtube-id');
+
 		e.preventDefault();
 		e.stopPropagation();
 
 		$('#page-overlay.video').addClass('active');
-
-		var videoId = $(this).attr('data-youtube-id');
 		$('#page-overlay .video-embed').html('<iframe src="https://www.youtube.com/embed/' + videoId +'?rel=0&amp;showinfo=0;autoplay=1" frameborder="0" allowfullscreen></iframe>')
 	});