Blog: Check if blog_archive_prev/next exist before showing link

Also minor cleanup of the classes and excessive indenting.

src/styles/blog.sass

@@ -201,12 +201,13 @@
 			width: 75%
 
 		.blog_index-header
-			width: 100%
-			overflow: hidden
-			position: relative
-			display: block
 			border-top-left-radius: 3px
 			border-top-right-radius: 3px
+			display: block
+			overflow: hidden
+			position: relative
+			text-align: center
+			width: 100%
 
 			img
 				width: 100%
@@ -588,7 +589,6 @@
 						left: 25px
 						right: 25px
 
-
 				.item-header
 					width: 50px
 					height: 50px
@@ -613,30 +613,6 @@
 				a.item-title, .item-info
 					padding-left: 70px
 
-		h4.blog_index-title
-			color: $color-text-dark-secondary
-			margin-left: 80px
-			padding-top: 25px
-
-			&.blog-archive
-				display: flex
-				font-size: 1em
-				margin-left: 0
-				padding: 0
-				text-align: center
-
-				a
-					flex: 1
-					padding: 15px
-
-					&.disabled
-						color: $color-text-dark-hint
-						pointer-events: none
-
-		h3.blog-archive-title
-			text-align: center
-
-
 	#blog_index-container,
 	#blog_post-container
 		.blog_index-item
@@ -655,17 +631,38 @@
 					padding: 15px 10px
 					margin: 0
 
-		h4.blog_index-title
-			margin-left: 35px
-
 	&.cloud-blog #blog_post-container,
 	#blog_post-container
 		.blog_index-item
 			padding-top: 55px
 			font-size: .9em
 
-.blog-archive h1
-	border-bottom: thin solid $color-background
-	padding-bottom: 0.3ex
+
+.blog-archive-navigation
+	+media-xs
+		font-size: 1em
+		max-width: initial
+
+	border-bottom: thin solid $color-background-dark
+	display: flex
+	font:
+		size: 1.2em
+		weight: 300
+	margin: 0 auto
+	max-width: 90%
 	text-align: center
-	color: $color-text-dark-secondary
+	+text-overflow-ellipsis
+
+	&:last-child
+		border: none
+
+	a, span
+		+media-xs
+			padding: 10px
+
+		flex: 1
+		padding: 25px 15px
+
+	span
+		color: $color-text-dark-secondary
+		pointer-events: none

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

@@ -64,13 +64,14 @@ a.btn.btn-default.button-create(href="{{url_for('nodes.posts_create', project_id
 
 | {% for node in posts[1:] %}
 | {% if loop.first %}
-h4.blog_index-title Blasts from the past
+.blog-archive-navigation
+	span Blasts from the past
 | {% endif %}
 | {{ render_blog_list_item(node) }}
 | {% endfor %}
 
 | {% if more_posts_available %}
-h4.blog_index-title.blog-archive
+.blog-archive-navigation
 	a(href="{{ project.blog_archive_url }}")
 		| {{posts_meta.total - posts|length}} more blog posts over here
 		i.pi-angle-right
@@ -84,22 +85,36 @@ h4.blog_index-title.blog-archive
 | {% endif %} {# posts #}
 | {% endmacro %}
 
-//- ******************************************************* -//
 
+//- Macro for rendering the navigation buttons for prev/next pages -//
 | {% macro render_archive_pagination(project) %}
-h4.blog_index-title.blog-archive
-	a(class="{% if not project.blog_archive_prev %}disabled{% endif %}",
+.blog-archive-navigation
+	| {% if project.blog_archive_prev %}
+	a.archive-nav-button(
 		href="{{ project.blog_archive_prev }}", rel="prev")
 		i.pi-angle-left
 		| Previous page
+	| {% else %}
+	span.archive-nav-button
+		i.pi-angle-left
+		| Previous page
+	| {% endif %}
 
-	a(href="{{ url_for('main.project_blog', project_url=project.url) }}", rel="prev")
+	a.archive-nav-button(
+		href="{{ url_for('main.project_blog', project_url=project.url) }}")
 		| Blog Index
 
-	a(class="{% if not project.blog_archive_next %}disabled{% endif %}",
+	| {% if project.blog_archive_next %}
+	a.archive-nav-button(
 		href="{{ project.blog_archive_next }}", rel="next")
 		| Next page
 		i.pi-angle-right
+	| {% else %}
+	span.archive-nav-button
+		| Next page
+		i.pi-angle-right
+	| {% endif %}
+
 | {% endmacro %}
 
 | {% macro render_archive(project, posts, posts_meta) %}

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

@@ -2,7 +2,7 @@
 | {% import 'nodes/custom/blog/_macros.html' as blogmacros %}
 
 | {% block project_context %}
-#blog_container.blog-archive
+#blog_container
 	#blog_index-container.expand-image-links
 		| {{ blogmacros.render_archive(project, posts, posts_meta) }}
-| {% endblock %}
+| {% endblock project_context%}

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

@@ -2,11 +2,11 @@
 | {% import 'nodes/custom/blog/_macros.html' as blogmacros %}
 
 | {% block body %}
-.container.blog-archive
+.container
 	#blog_container.cloud-blog
 		#blog_index-container
 			.blog_index-header
-				h3.blog-archive-title
-					| Blog Archive
+				h3 Blog Archive
+
 			| {{ blogmacros.render_archive(project, posts, posts_meta) }}
-| {% endblock %}
+| {% endblock body %}