about: Wrap team members into blocks

This creates better spacing between the top row and the one below.

Signed-off-by: Michael Tremer <michael.tremer@ipfire.org>

diff --git a/src/templates/about.html b/src/templates/about.html
index 59d7077301575497188ba4fcee8bcd1c33ffd29b..7752571d49120bb7d2aa27a7c7049096a5bbd40c 100644 (file)
--- a/src/templates/about.html
+++ b/src/templates/about.html
@@ -98,16 +98,18 @@
 
                        {% set core_team = backend.groups.get_by_gid("core-team") %}
 
-                       <div class="columns is-multiline is-mobile">
-                               {% for account in sorted(core_team, key=lambda a: a.created_at) %}
-                                       <div class="column has-text-centered">
-                                               <figure class="image is-128x128 is-inline-block">
-                                                       <img class="is-rounded" src="{{ account.avatar_url(size=128) }}">
-                                               </figure>
-
-                                               <h4 class="title is-4 has-text-weight-bold">{{ account.name or account.nickname }}</h5>
-                                       </div>
-                               {% end %}
+                       <div class="block">
+                               <div class="columns is-multiline is-mobile">
+                                       {% for account in sorted(core_team, key=lambda a: a.created_at) %}
+                                               <div class="column has-text-centered">
+                                                       <figure class="image is-128x128 is-inline-block">
+                                                               <img class="is-rounded" src="{{ account.avatar_url(size=128) }}">
+                                                       </figure>
+
+                                                       <h4 class="title is-4 has-text-weight-bold">{{ account.name or account.nickname }}</h5>
+                                               </div>
+                                       {% end %}
+                               </div>
                        </div>
 
                        {% set team = [
@@ -115,21 +117,23 @@
                        ] %}
 
                        {% if team %}
-                               <div class="columns is-multiline is-mobile">
-                                       {% for account in sorted(team, key=lambda a: a.created_at) %}
-                                               <div class="column is-half-mobile is-one-third-tablet is-one-quarter-desktop is-one-fifth-widescreen is-one-fifth-fullhd">
-                                                       <div class="columns is-vcentered is-mobile">
-                                                               <div class="column is-narrow">
-                                                                       <figure class="image is-48x48">
-                                                                               <img class="is-rounded" src="{{ account.avatar_url(size=48) }}">
-                                                                       </figure>
-                                                               </div>
-                                                               <div class="column">
-                                                                       <h6 class="title is-6 has-text-weight-bold">{{ account.name or account.nickname }}</h6>
+                               <div class="block">
+                                       <div class="columns is-multiline is-mobile">
+                                               {% for account in sorted(team, key=lambda a: a.created_at) %}
+                                                       <div class="column is-half-mobile is-one-third-tablet is-one-quarter-desktop is-one-fifth-widescreen is-one-fifth-fullhd">
+                                                               <div class="columns is-vcentered is-mobile">
+                                                                       <div class="column is-narrow">
+                                                                               <figure class="image is-48x48">
+                                                                                       <img class="is-rounded" src="{{ account.avatar_url(size=48) }}">
+                                                                               </figure>
+                                                                       </div>
+                                                                       <div class="column">
+                                                                               <h6 class="title is-6 has-text-weight-bold">{{ account.name or account.nickname }}</h6>
+                                                                       </div>
                                                                </div>
                                                        </div>
-                                               </div>
-                                       {% end %}
+                                               {% end %}
+                                       </div>
                                </div>
                        {% end %}