Add JS workaround for last row of flexbox justify-content: space-between

style.css

@@ -1,12 +1,12 @@
 /*---------------------------------------------------------------------------------
 
-  Theme Name: Hemingway Author Child Theme
-  Theme URI: http://www.andersnoren.se/teman/hemingway-wordpress-theme/
+  Theme Name: Author - Hemingway Child Theme
+  Theme URI: https://github.com/andrewserong/author-hemingway-child-theme
   Description: A child theme for Hemingway, with additional templates useful for authors
   Author: Andrew Serong
   Author URI: http://www.andrewserong.com
   Template: hemingway
-  Version: 1.0.7
+  Version: 1.0.8
   License: GNU General Public License v2 or later
   License URI: http://www.gnu.org/licenses/gpl-2.0.html
   Tags: author, responsive, novel, novels, novelist, books
@@ -58,7 +58,7 @@
 .tiles-container {
   display: -webkit-flex;
   display: flex;
-  -webkit-justify-content: center;
+  -webkit-justify-content: space-between;
   justify-content: space-between;
   -webkit-flex-direction: row;
   flex-direction: row;

template-pages-listing.php

@@ -39,7 +39,7 @@
 
 			</div> <!-- /post -->
 
-			<div class="tiles-container">
+			<div class="tiles-container" id="tiles-container">
 
 			<?php
 			// reference: https://codex.wordpress.org/Function_Reference/get_pages
@@ -85,4 +85,38 @@
 
 </div> <!-- /wrapper section-inner -->
 
-<?php get_footer(); ?>
+<?php get_footer(); ?>
+
+<script>
+
+// progressive enhancement workaround for last row of justify-content: space-between
+// add additional empty tiles so that last row appears left aligned
+// adjusted very slightly for this template from the code snippet by Lewis Walsh
+// thanks to: https://lewiswalsh.com/flexbox-space-between-and-the-last-row/
+//
+// there will technically be flicker on page load using this, but since the tiles begin
+// 'beneath the fold', this shouldn't be visible to the user
+
+	function checkCount(current_total, next) {
+	  if (current_total % 6) { // Divisible by 3
+	    current_total += 1; // Proper way to do ++
+	    checkCount(current_total, next); // Recursion!
+	  } else {
+	    next(current_total);
+	  }
+	}
+	function addDummyElementsToCards(container_id) {
+	  var container = document.getElementById(container_id);
+	  var card_count = container.children.length;
+	  checkCount(card_count, function(final_count){
+	    var dummy_element;
+	    for(i=0; i<(final_count-card_count); i++) {
+	      dummy_element = document.createElement('div');
+	      dummy_element.className = 'tile-outer';
+	      container.appendChild(dummy_element);
+	    }
+	  });
+	}
+	addDummyElementsToCards('tiles-container'); 
+
+</script>