UI Libraries: Use single-column listing.

Uses component from components.pug

src/templates/libraries.pug

@@ -11,10 +11,9 @@ include ../../../pillar/src/templates/mixins/components
 | {% endblock navigation_tabs %}
 
 | {% block body %}
-.container.pb-5
+.container.py-4
 	.row
 		.col-12
-			.pt-4
 			h2.text-uppercase.font-weight-bold
 				| Libraries
 			.lead
@@ -22,48 +21,35 @@ include ../../../pillar/src/templates/mixins/components
 
 			hr.pb-2
 
-	.page-triplet-container.homepage.p-0
+	+category_list_item(
-		.row
+		'TEXTURES',
-			.col-md-4
+		'More than 1500 texture maps. Browse online or from Blender with our add-on.',
-				.triplet-card(data-url="{{ url_for('projects.view', project_url='textures') }}")
+		"{{ url_for('projects.view', project_url='textures') }}",
-					.triplet-card-thumbnail
+		"{{ url_for('static', filename='assets/img/features/textures_01.jpg')}}")
-						img(
-							alt="Textures",
-							src="{{ url_for('static', filename='assets/img/features/textures_01.jpg')}}")
-					.triplet-card-info
-						h3 Textures
-						p.
-								More than 1500 texture maps.
-								Browse online or from Blender with our add-on.
 
-						a.triplet-cta(href="{{ url_for('projects.view', project_url='textures') }}")
+	hr
-							| LEARN MORE
 
-			.col-md-4
+	+category_list_item(
-				.triplet-card(data-url="{{ url_for('projects.view', project_url='hdri') }}")
+		'HDRI',
-					.triplet-card-thumbnail
+		'Up to 16K and 24 EVs (extremely high) HDR images to light your renders.',
-						img(
+		"{{ url_for('projects.view', project_url='hdri') }}",
-							alt="HDRI",
+		"{{ url_for('static', filename='assets/img/features/hdri_01.jpg')}}")
-							src="{{ url_for('static', filename='assets/img/features/hdri_01.jpg')}}")
-					.triplet-card-info
-						h3 HDRI
-						p.
-							Up to 16K and 24 EVs (extremely high) HDR images to light your renders.
-						a.triplet-cta(href="{{ url_for('projects.view', project_url='hdri') }}")
-							| LEARN MORE
 
-			.col-md-4
+	hr
-				.triplet-card(data-url="{{ url_for('projects.view', project_url='characters') }}")
+
-					.triplet-card-thumbnail
+	+category_list_item(
-						img(
+		'CHARACTERS',
-							alt="Characters",
+		'Production quality, fully rigged and shaded characters ready to animate.',
-							src="{{ url_for('static', filename='assets/img/features/characters_01.jpg')}}")
+		"{{ url_for('projects.view', project_url='hdri') }}",
-					.triplet-card-info
+		"{{ url_for('static', filename='assets/img/features/characters_01.jpg')}}")
-						h3 Characters
+
-						p.
+	hr
-							Production quality, fully rigged and shaded characters ready to animate.
+
-						a.triplet-cta(href="{{ url_for('projects.view', project_url='characters') }}")
+	+category_list_item(
-							| LEARN MORE
+		'ART GALLERY',
+		'Learn by example.',
+		"{{ url_for('projects.view', project_url='gallery') }}",
+		"{{ url_for('static', filename='assets/img/features/training_bob_forest.jpg')}}")
 
 | {% endblock body %}