Center tiles on welcome page

This change centers tiles on welcome page to give a more consistent whitespace look on both sides.
For this, the layout in Isotope JS is changed to masonry.

static/skin/index.css

@@ -31,7 +31,7 @@ body {
     font-size: 1.6rem;
     color: #333333;
     font-family: poppins;
-    margin: 10px 0 -5px;
+    margin: -10px 0 -5px;
     position: relative;
     top: -10px;
     left: 13px;
@@ -129,9 +129,12 @@ body {
 }
 
 .kiwixHomeBody {
-    padding: 20px 15vw;
+    padding: 20px 0;
     min-height: calc(100vh - 170px);
     position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
 }
 
 .tagFilterLabel {
@@ -157,6 +160,8 @@ body {
 
 .book__list {
     position: relative;
+    margin: 0 auto;
+    padding-top: 20px;
 }
 
 .book {
@@ -440,13 +445,16 @@ body {
 @media screen and (max-width: 1100px) {
 
     .kiwixHomeBody {
-        padding: 20px 10vw;
         min-height: calc(100vh - 170px);
     }
 
     .kiwixNav__filters {
         grid-template-columns: repeat(4, 1fr);
     }
+
+    .book__wrapper {
+        margin: 10px;
+    }
 }
 
 @media screen and (max-width: 590px) {
@@ -475,10 +483,4 @@ body {
     .kiwixNav__filters {
         grid-template-columns: 1fr;
     }
-}
-
-@media screen and (max-width: 340px) {
-    .kiwixHomeBody {
-        padding: 20px 5vw;
-    }
-}
+}

static/skin/index.js

@@ -449,10 +449,9 @@
                 }
             },
             sortBy: 'weight',
-            layoutMode: 'cellsByRow',
-            cellsByRow: {
-                columnWidth: '.book',
-                rowHeight: '.book'
+            layoutMode: 'masonry',
+            masonry: {
+                fitWidth: true
             }
         });
         footer = document.getElementById('kiwixfooter');

static/templates/index.html

@@ -63,8 +63,9 @@
       </form>
     </div>
     <div class="kiwixHomeBody">
-      <h3 class="kiwixHomeBody__results"></h3>
-      <div class="book__list"></div>
+      <div class="book__list">
+        <h3 class="kiwixHomeBody__results"></h3>
+      </div>
       <div id="fadeOut" class="fadeOut"></div>
     </div>
     <div class="loader" style="position: absolute; top: 50%"><div class="loader-spinner"></div></div>