[enh] handle 1 to 3 covers per line on the index

static/css/style.css

@@ -19,7 +19,15 @@ body {
     height: 100%;
 }
 
-.gallery-square {
+.covers-1 .gallery-square {
+    width: 47%;
+    height: 100%;
+    margin: auto;
+    padding-bottom: 47%;
+    position: relative;
+}
+
+.covers-2 .gallery-square {
     width: 47%;
     height: 100%;
     float: left;
@@ -28,6 +36,15 @@ body {
     position: relative;
 }
 
+.covers-3 .gallery-square {
+    width: 33.333333333%;
+    height: 100%;
+    margin: 0;
+    padding-bottom: 47%;
+    position: relative;
+    display: inline-block;
+}
+
 .gallery-square > a {
     position: absolute;
     top: 0px;

templates/index.html

@@ -19,10 +19,10 @@
   </div>
 
   <div class="galleries-grid">
-      {% for galleries_line in galleries|batch(2) %}
-      <div class="galleries-line">
-          {% for gallery in galleries_line %}
-          <div class="gallery-square">
+      {% for galleries_line in galleries|batch(3) %}
+      <div class="galleries-line covers-{{ galleries_line|length }}">
+        {% for gallery in galleries_line %}<!-- comment tricks against space between inline-block
+        --><div class="gallery-square">
           <a href="{{ gallery.link }}">
             <div class="gallery-title">
               <h2>{{ gallery.title }}</h2>
@@ -31,8 +31,8 @@
             </div>
           </a>
           <div class="gallery-cover" style="background-image: url('{{ gallery.cover }}');"></div>
-          </div>
-          {% endfor %}
+        </div><!-- comment tricks against space between inline-block
+        -->{% endfor %}
       </div>
       {% endfor %}
   </div>