modified cards layout, introduced sort order

theme/static/css/custom.css

@@ -231,7 +231,7 @@ a {
   flex-flow: row wrap;
   list-style-type: none;
   padding-left: inherit;
-  justify-content: space-between;
+  column-gap: var(--pico-block-spacing-horizontal);
 }
 
 /* flexitem settings for cards, flex settings for single card */

theme/templates/cards.html

@@ -3,21 +3,20 @@
 {% block content_body %}
 {% set selector_value = page.card_selector_value if page.card_selector_value is defined else page.title %}
 <section class="cards">
-  {% for article in articles if article[page.card_selector_key] == selector_value %}
+  {% set article_list = [] %}
+  {% for article in articles if article[page.card_selector_key] == selector_value %}{% do article_list.append(article) %}{% endfor %}
+  {% for article in article_list | sort(attribute="order") %}
   <article class="card">
     <header class="article-header">
       <h3><a href="{{ SITEURL }}/{{ article.save_as }}" title="{{ article.title }}">{{ article.title }}</a></h3>
     </header>
     <div class="article-body">
       {% if article.titelbild %}
-      <a href="{{ SITEURL }}/{{ article.save_as }}" title="{{ article.title }}"><img
+      <a href="{{ SITEURL }}/{{ article.save_as }}" title="{{ article.title }}"><img alt='Titelbild zu "{{ article.title }}"' src="{{ SITEURL }}/{{ article.titelbild }}" /></a>
-          alt='Titelbild zu "{{ article.title }}"' src="{{ SITEURL }}/{{ article.titelbild }}" /></a>
       {% endif %}
-
+      {# {% if article.summary %}
-      {% if article.summary %}
       <p>{{ article.summary }}</p>
-      {% endif %}
+      {% endif %} #}
-
     </div>
   </article>
   {% endfor %}