jekyll-theme-pirati 7.7.1 → 8.0.0.pre.alpha5

data/_includes/headline-media.html

@@ -1,22 +1,16 @@
-<div class="o-section-block o-section-block-fill">
-  <div class="c-headline-media">
-    {% if site.mediaStorage %}
-        {% capture imgPath %}https://a.pirati.cz/crop/751x422/{{ site.mediaStorage }}/img/{{ include.image }}{% endcapture %}
-    {% else %}
-        {% capture imgPath %}{% asset '{{ include.image }}' magick:resize='751x422^' magick:gravity='center' magick:crop='751x422+0+0' @path %}{% endcapture %}
-    {% endif %}
-    <div class="c-headline-media__background" style="background-image: url({{ imgPath }})"></div>
+{% comment %}If youtube video id is provided, it takes precendece over the image{% endcomment %}
+{%- if include.youtubeVideoId %}
+  {% include youtube.html width="100%" id=include.youtubeVideoId %}
+{% else %}
+  {% if site.mediaStorage %}
+      {% capture imgPath %}https://a.pirati.cz/crop/1200x675/{{ site.mediaStorage }}/img/{{ include.image }}{% endcapture %}
+  {% else %}
+      {% capture imgPath %}{% asset '{{ include.image }}' magick:resize='1200x675^' magick:gravity='center' magick:crop='1200x675+0+0' @path %}{% endcapture %}
+  {% endif %}
+
+  <figure class="figure">
+    <img src="{{ imgPath }}" alt="{{ include.title }}" />
+  </figure>
+{%- endif %}
 
-    <div class="row c-headline-media__body">
-      <div class="small-12 columns">
-        {% comment %}If youtube video id is provided, it takes precendece over the image{% endcomment %}
-        {%- if include.youtubeVideoId %}
-          {% include youtube.html width=751 height=422 id=include.youtubeVideoId %}
-        {% else %}
-          <img src="{{ imgPath }}" alt="{{ include.title }}">
-        {%- endif %}
-      </div>
-    </div>
 
-  </div>
-</div>

data/_includes/hero/advanced.html

@@ -0,0 +1,65 @@
+<header
+  class="hero py-8 lg:py-16 {{ include.class }} {% if include.bgImg %}hero--image{% endif %}"
+  {% if include.bgImg %}style="--image-url: url({{ include.bgImg }})"{% endif %}
+>
+  <div
+    class="
+      container container--default grid
+
+      {% if include.img %}
+        lg:grid-cols-7
+
+        {% if include.subContent %}lg:grid-rows-3{% else %}lg:grid-rows-1{% endif %}
+      {% else %}
+        lg:grid-cols-1
+
+        {% if include.subContent %}lg:grid-rows-2{% else %}lg:grid-rows-1{% endif %}
+      {% endif %}
+
+      gap-2 items-center
+    ">
+    <div class="
+      {% if include.img %}
+        lg:col-span-3
+
+        {% if include.subContent %}lg:row-span-2{% else %}lg:row-span-1{% endif %}
+      {% else %}
+        lg:col-span-1
+        lg:row-span-1
+      {% endif %}
+
+      order-1
+    ">
+      {{ include.mainContent }}
+    </div>
+    {% if include.subContent %}
+    <div class="
+      lg:row-span-1
+      {% if include.img %}lg:col-span-3{% else %}lg:col-span-1{% endif %}
+      order-3
+    ">
+      <div class="mt-4 md:mt-8 space-y-4 {{ include.subContentClass }}">
+        {{ include.subContent }}
+      </div>
+    </div>
+    {% endif %}
+    {% if include.img %}
+      <div class="
+        lg:col-span-4 order-2
+        row-span-1
+        {% if include.subContent %}lg:row-span-3{% else %}lg:row-span-1{% endif %}
+      ">
+        {% if site.mediaStorage %}
+            {% capture img_path %}https://a.pirati.cz/resize/900x500/{{ site.mediaStorage }}/img/{{ include.img }}{% endcapture %}
+        {% else %}
+          {% if include.img contains ".svg" %}
+            {% capture img_path %}{{ include.img | prepend: "/assets/img/" | absolute_url }}{% endcapture %}
+          {% else %}
+            {% capture img_path %}{% asset '{{ include.img }}' magick:resize="900^" @path %}{% endcapture %}
+          {% endif %}
+        {% endif %}
+        <img src="{{ img_path }}" alt="{{ include.title }}" class="object-contain {{ include.imgClass }}" />
+      </div>
+    {% endif %}
+  </div>
+</header>

data/_includes/hero/simple.html

@@ -0,0 +1,13 @@
+<header
+  class="hero {% if include.bgImg %}hero--image{% endif %} {% unless include.heroSpacing %}py-16{% else %}{{ include.heroSpacing }}{% endunless %} {{ include.class }}"
+  {% if include.bgImg %}style="--image-url: url({{ include.bgImg }})"{% endif %}
+>
+  <div class="container container--default">
+    <h1 class="head-alt-md md:head-alt-lg max-w-2xl">
+      {{ include.headline }}
+    </h1>
+    <h2 class="head-xs mt-2 {{ include.descriptionClass }}">
+      {{ include.description }}
+    </h2>
+  </div>
+</header>

data/_includes/homepage/banner.html

@@ -1,16 +1,11 @@
-<div class="row c-hp-banner">
-  <div class="small-12 columns">
-    <a href="{{ include.link }}" title="{{ include.title }}" class="c-hp-banner__link">
-      {% capture img %}{% asset '{{ include.default }}' magick:resize='1135x' @path %}{% endcapture %}
-      {% if include.breakpoint %}
-        <picture class="c-hp-banner__media">
-          <source media="(min-width: {{ include.breakpoint }}px)" srcset="{{ img }}">
-          <img src="{% asset '{{ include.mobile }}' magick:resize='{{ include.breakpoint +"px" }}' @path %}" alt="{{ include.title }}">
-        </picture>
-      {% else %}
-        <img src="{{ img }}" alt="{{ include.title }}"  class="c-hp-banner__media">
-      {% endif %}
-    </a>
-  </div>
-</div>
+{% capture mainContent %}
+<h1 class="head-alt-md md:head-alt-xl">{{ include.title }}</h1>
+{% endcapture %}
 
+{% capture subContent %}
+  {% if include.cta %}
+    {% include buttons/icon.html href=include.href icon="ico--chevron-right" class="btn--hoveractive btn--fullwidth md:btn--autowidth text-lg" cta=include.cta %}
+  {% endif %}
+{% endcapture %}
+
+{% include hero/advanced.html mainContent=mainContent subContent=subContent img=include.img imgClass="h-32 lg:h-80 lg:m-auto hidden md:block" %}

data/_includes/homepage/calendar.html

@@ -0,0 +1,5 @@
+<section class="my-8 lg:my-16 container-padding--zero lg:container-padding--auto __js-root">
+  <ui-app inline-template>
+    {% include calendar.html %}
+  </ui-app>
+</section>

data/_includes/homepage/countdown.html

@@ -0,0 +1,3 @@
+<section class="my-8 lg:my-16 container-padding--zero lg:container-padding--auto">
+  {% include countdown.html deadline=include.deadline %}
+</section>

data/_includes/homepage/news.html

@@ -0,0 +1,9 @@
+<section>
+  <h1 class="head-alt-md md:head-alt-lg pb-4 lg:pb-8">Aktuální témata</h1>
+  {% assign posts = site.posts | slice:0,6 %}
+  {% include articles/list-responsive.html posts=posts %}
+
+  <nav class="text-center">
+    {% include buttons/icon.html href="/aktuality" cta="Další články" icon="ico--chevron-right" class="text-xl pt-8" rel="next" %}
+  </nav>
+</section>

data/_includes/homepage/social.html

@@ -0,0 +1,10 @@
+{% if site.facebook.profilePage or site.forum.page %}
+  <div class="flex flex-col lg:flex-row lg:space-x-8">
+    {% if site.facebook.profilePage %}
+      {% include buttons/super.html href=site.facebook.profilePage cta="Sledujte nás na Facebooku" icon="ico--facebook" class="bg-brands-facebook text-white container-padding--zero lg:container-padding--auto lg:w-full" %}
+    {% endif %}
+    {% if site.forum.page %}
+      {% include buttons/super.html href=site.forum.page cta="Sledujte naše fórum" icon="ico--bubbles" class="bg-black text-white container-padding--zero lg:container-padding--auto lg:w-full" %}
+    {% endif %}
+  </div>
+{% endif %}

data/_includes/js/main.html

@@ -1,11 +1,5 @@
-{% comment %}
-This whole include will be overwritten by built JS files when publishing the
-theme Gem.
-{% endcomment %}
-<link rel="stylesheet" href="/assets/js/main.fbbba5cee41a3fd5443c.0.css" />
-<link rel="stylesheet" href="/assets/js/main.fbbba5cee41a3fd5443c.css" />
-<script src="/assets/js/0.main.fbbba5cee41a3fd5443c.js"></script>
-<script src="/assets/js/main.fbbba5cee41a3fd5443c.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script>
+<script src="{{ site.styleguide_base_url }}/js/main.bundle.js"></script>
 
 {% if site.facebook.loadSDK %}
 <script>
@@ -49,22 +43,20 @@ theme Gem.
 {% endif %}
 
 {% if site.piwik.loadSDK %}
-<script>
-  var _paq = _paq || [];
+<!-- Matomo -->
+<script type="text/javascript">
+  var _paq = window._paq || [];
   /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
   _paq.push(['trackPageView']);
   _paq.push(['enableLinkTracking']);
   (function() {
-    var u="//piwik.pirati.cz/";
-    _paq.push(['setTrackerUrl', u+'piwik.php']);
-    _paq.push(['setSiteId', '{{ site.piwik.siteId }}']);
+    var u="//matomo.pirati.cz/";
+    _paq.push(['setTrackerUrl', u+'matomo.php']);
+    _paq.push(['setSiteId', '110']);
     var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
-    g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'piwik.js'; s.parentNode.insertBefore(g,s);
+    g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
   })();
-
 </script>
-<!-- Piwik -->
-<noscript><p><img src="//piwik.pirati.cz/piwik.php?idsite={{ site.piwik.siteId }}&rec=1" style="border:0;" alt="" /></p></noscript>
-<!-- End Piwik Code -->
+<!-- End Matomo Code -->
 {% endif %}
 

data/_includes/page-header.html

@@ -1,16 +1,9 @@
-<div class="row o-section">
-  <div class="columns large-12">
-    <header class="c-page-header">
-      <h1 itemprop="headline" class="c-page-title">{{ include.headline }}</h1>
-    </header>
+<header>
+  <h1 itemprop="headline" class="head-alt-md md:head-alt-lg max-w-5xl mb-8">{{ include.headline }}</h1>
+</header>
+
+{% if include.content %}
+  <div class="{% if include.contentClass %}{{ include.contentClass }}{% endif %}" itemprop="description">
+    {{ include.content }}
   </div>
-  {% if include.content %}
-    <div class="columns large-12">
-      <div class="{% if include.contentClass %}{{ include.contentClass }}{% endif %}">
-        <div itemprop="description" class="c-content-block c-emphasized-text">
-        	{{ include.content }}
-        </div>
-      </div>
-    </div>
-  {% endif %}
-</div>
+{% endif %}

data/_includes/people/list-group.html

@@ -1,10 +1,4 @@
 {% if include.team.size > 0 %}
-<ul class="c-simple-accordion" data-accordion="" data-options="allowAllClosed: true">
-  <li class="c-simple-accordion-item is-active" data-accordion-item="">
-    <a href="#{{ include.teamShortcut }}" class="c-simple-accordion-title"><h2 class="c-simple-accordion__headline">{{ include.teamName }}</h2></a>
-    <div id="{{ include.teamShortcut }}" class="c-simple-accordion-content" data-tab-content="">
-        {% include people/list-responsive.html team=team %}
-    </div>
-  </li>
-</ul>
+<h2 class="head-heavy-base mb-4">{{ include.teamName }}</h2>
+{% include people/list-responsive.html team=team %}
 {% endif %}

data/_includes/people/list-responsive.html

@@ -3,11 +3,8 @@
    týmů v /clenove
    úspěchů v /otevrenost
 {% endcomment %}
-<div class="c-member-list__row row u-uniform-size-row">
+<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 row-gap-8 col-gap-8">
   {% for item in include.team %}
-    {% assign loopindex = forloop.index | modulo: 2 %}
-    <div class="large-4 medium-6 small-collapse columns c-member-list__item {% if forloop.last %}end{% endif %}">
-      {% include people/profile-badge.html item=item imgSize='small' imgStyle='round' %}
-    </div>
+    {% include people/profile-badge.html item=item headlineClass="head-heavy-xs" avatarClass="avatar--md" %}
   {% endfor %}
 </div>

data/_includes/people/profile-badge.html

@@ -1,56 +1,64 @@
 {% capture label %}
-    {% if include.item.name %}{{ include.item.name }}{% else %}{{ include.item.title }}{% endif %}
+    {% if include.label %}{{ include.label }}{% elsif include.item.name %}{{ include.item.name }}{% else %}{{ include.item.title }}{% endif %}
 {% endcapture %}
 {% if include.item.url contains 'http' %}
     {% assign url = include.item.url %}
 {% else %}
     {% assign url = include.item.url | relative_url %}
 {% endif %}
-<div class="c-profile-badge {% if include.style == 'card' %}c-profile-badge--card{% endif %} {% if include.class %}{{ include.class }}{% endif %}">
-    <div class="c-profile-badge__avatar">
-        {%- if include.item.img -%}
-            {% if site.mediaStorage %}
-              {%- if include.imgSize != 'big' -%}
-                {% capture img %}https://a.pirati.cz/crop/100x100/{{ site.mediaStorage }}/img/{{ include.item.img }}{% endcapture %}
-              {%- else -%}
-                {% capture img %}https://a.pirati.cz/crop/165x165/{{ site.mediaStorage }}/img/{{ include.item.img }}{% endcapture %}
-              {%- endif -%}
-            {%- else -%}
-              {%- if include.imgSize != 'big' -%}
-                {% capture img %}{% asset '{{ include.item.img }}' magick:resize='100x100^' magick:gravity='center' magick:crop='100x100+0+0' @path %}{% endcapture %}
-              {%- else -%}
-                {% capture img %}{% asset '{{ include.item.img }}' magick:resize='165x165^' magick:gravity='center' magick:crop='165x165+0+0' @path %}{% endcapture %}
-              {%- endif -%}
-            {%- endif -%}
+{% capture avatarClass %}
+  badge__avatar {% if include.avatarClass %}{{ include.avatarClass }}{% else %}avatar--sm{% endif %}
+{% endcapture %}
+
+<div class="badge {% if include.class %}{{ include.class }}{% endif %}">
+  {% unless include.hideAvatar %}
+    {%- if include.item.img -%}
+        {% if site.mediaStorage %}
+          {%- if include.imgSize != 'big' -%}
+            {% capture img %}https://a.pirati.cz/crop/100x100/{{ site.mediaStorage }}/img/{{ include.item.img }}{% endcapture %}
+          {%- else -%}
+            {% capture img %}https://a.pirati.cz/crop/165x165/{{ site.mediaStorage }}/img/{{ include.item.img }}{% endcapture %}
+          {%- endif -%}
+        {%- else -%}
+          {%- if include.imgSize != 'big' -%}
+            {% capture img %}{% asset '{{ include.item.img }}' magick:resize='100x100^' magick:gravity='center' magick:crop='100x100+0+0' @path %}{% endcapture %}
+          {%- else -%}
+            {% capture img %}{% asset '{{ include.item.img }}' magick:resize='165x165^' magick:gravity='center' magick:crop='165x165+0+0' @path %}{% endcapture %}
+          {%- endif -%}
+        {%- endif -%}
+    {% else %}
+        {% capture img %}https://a.pirati.cz/common/img/people/unknown-pirate.svg{% endcapture %}
+    {% endif %}
+
+    {% include avatar.html src=img alt=label class=avatarClass url=url %}
+  {% endunless %}
+
+  <div class="badge__body">
+    <h2 class="{% if include.headlineClass %}{{ include.headlineClass }}{% else %}head-heavy-2xs{% endif %} badge__title">
+      <a href="{{ url }}" title="{{ label }}">{{ label }}</a>
+    </h2>
+
+    {% unless include.showDescription == false %}
+      <p class="badge__occupation">
+        {% if include.description %}
+          {{ include.description }}
         {% else %}
-            {% capture img %}https://a.pirati.cz/common/img/people/unknown-pirate.svg{% endcapture %}
+          {{ include.item.description }}
         {% endif %}
-      <a class="c-profile-badge__anchor" href="{{ url }}"><img src="{{ img }}" alt="{{ label }}" class="c-profile-badge__image {% if include.imgStyle == 'round' %}c-profile-badge__image--round{% endif %} {% if include.imgSize != 'big' %}c-profile-badge__image--smaller{% endif %}"></a>
-    </div>
-
-    <div class="c-profile-badge__body">
-        <h2 class="c-profile-badge__headline"><a href="{{ url }}" style="text-decoration: none" class="{% if include.headlineClass %}{{ include.headlineClass }}{% else %}t-h5-super{% endif %}">{{ label }}</a></h2>
-        {% unless include.showDescription == false %}
-        <p class="c-profile-badge__desc">
-            {% if include.description %}
-                {{ include.description }}
-            {% else %}
-                {{ include.item.description }}
-            {% endif %}
-        </p>
-        {% endunless %}
+      </p>
+    {% endunless %}
 
-        {% unless include.showContactInfo == false %}
-            {% if include.item.mob or include.item.mail %}
-                <div class="c-profile-badge__contacts">
-                    {% if include.item.mob %}
-                      <div><i class="fa fa-phone"></i> <a class="c-emphasized-anchor" href="tel:{{ include.item.mob }}">{{ include.item.mob }}</a></div>
-                    {% endif %}
-                    {% if include.item.mail %}
-                      <div><i class="fa fa-envelope-o"></i> <a class="c-emphasized-anchor" href="mailto:{{ include.item.mail }}">{{ include.item.mail }}</a></div>
-                    {% endif %}
-                </div>
-            {% endif %}
-        {% endunless %}
-    </div>
+    {% unless include.showContactInfo == false %}
+      {% if include.item.mob or include.item.mail %}
+        {% if include.item.mob %}
+          {% capture tel %}tel:{{ include.item.mob }}{% endcapture %}
+          {% include contact-line.html icon="ico--phone" href=tel caption=include.item.mob class="contact-line--responsive badge__link" %}
+        {% endif %}
+        {% if include.item.mail %}
+          {% capture mailto %}mailto:{{ include.item.mail }}{% endcapture %}
+          {% include contact-line.html icon="ico--envelope" href=mailto caption=include.item.mail class="contact-line--responsive badge__link" %}
+        {% endif %}
+      {% endif %}
+    {% endunless %}
+  </div>
 </div>

data/_includes/regions/crossroad.html

@@ -1,66 +1,60 @@
 
-<section class="pk-election-crossroad row u-uniform-size-row">
+<section class="grid grid-cols-1 lg:grid-cols-2 gap-4 lg:gap-8">
   {% for place in include.places %}
-    <div class="columns medium-6">
-      <article class="pk-election-crossroad__place">
-        <div class="c-tile c-tile--fill pk-election-crossroad__place-body">
-          <div class="pk-election-crossroad__coa"><img src="{{ place.coa }}" alt="{{ place.locality }}"></div>
-          <div class="c-tile__body">
-            <h2 class="t-h4">{{ place.locality }}</h2>
+    <article class="card elevation-0 bg-grey-50 container-padding--zero md:container-padding--auto">
+      <div class="card__body p-4 lg:p-8 flex space-x-8 items-start">
+        <img src="{{ place.coa }}" class="w-16" alt="{{ place.locality }}" />
+        <div class="space-y-4 flex-grow">
+          <div>
+            <h1 class="head-alt-base mb-2">
+              {% if place.link %}<a href="{{ place.link }}">{% endif %}{{ place.locality }}{% if place.link %}</a>{% endif %}
+            </h1>
+            <div class="flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-4">
+              {% if place.fb %}
+                {% capture caption %}place.fb | remove:"https://www.facebook.com"{% endcapture %}
+                {% include contact-line.html href=place.fb target="_blank" icon="ico--facebook" caption=caption class="font-light" %}
+              {% endif %}
 
-	    {% if place.note %}
-	    <p>{{ place.note }}</p>
-	    {% endif %}
+              {% if place.type and place.type == "local" %}
+                {% assign target = "" %}
+              {% else %}
+                {% assign target = "_blank" %}
+              {% endif %}
 
-	    {% if place.link %}
-	    <div class="pk-election-crossroad__link">
-		    <span class="fa fa-globe"></span> <a href="{{ place.link }}" class="c-emphasized-anchor" target="_blank" rel="noopener">Web</a>
-	    </div>
-	    {% endif %}
-	    {% if place.fb %}
-	    <div class="pk-election-crossroad__link">
-		    <span class="fa fa-facebook"></span> 
-            <a href="{{ place.fb }}" class="c-emphasized-anchor" target="_blank" rel="noopener">
-                {{ place.fb | remove: "https://www.facebook.com/" }}
-            </a>
-	    </div>
-	    {% endif %}
-        <br/>
-	    {% if place.kontakt %}
-	    <div class="pk-election-crossroad__link">
+              {% if place.mail %}
+                {% capture href %}mailto:{{ place.mail }}{% endcapture %}
+                {% include contact-line.html href=href icon="ico--envelope" caption=place.mail class="contact-line--responsive font-light" %}
+              {% endif %}
+
+              {% if place.programLink %}
+                {% include contact-line.html href=place.programLink target=target icon="ico--book" caption="Program" class="font-light" %}
+              {% endif %}
+
+              {% if place.candidateListLink %}
+                {% include contact-line.html href=place.candidateListLink target=target icon="ico--users" caption="Kandidátka" class="font-light" %}
+              {% endif %}
+
+              {% if place.candidateListWithProgramLink %}
+                {% include contact-line.html href=place.candidateListWithProgramLink target=targett icon="ico--book" caption="Program a kandidátka" class="font-light" %}
+              {% endif %}
+            </div>
+            {% if place.note %}
+              <p class="mt-2 font-light text-sm leading-snug">{{ place.note }}</p>
+            {% endif %}
+          </div>
+          {% if place.kontakt %}
             {% assign contactPerson = site.people | where: "uid", place.kontakt | first %}
-		    <span class="fa fa-user"></span> 
-            <a href="{{ contactPerson.url }}" class="c-emphasized-anchor" target="_blank" rel="noopener">
-                {{ contactPerson.name }} 
-            </a>
-	    </div>
-	    {% endif %}
-	    {% if place.mail %}
-	    <div class="pk-election-crossroad__link">
-		    <span class="fa fa-envelope-o"></span> 
-            <a href="mailto:{{ place.mail }}" class="c-emphasized-anchor" target="_blank" rel="noopener">
-                 {{ place.mail }}</a>
+            {% include people/profile-badge.html item=contactPerson hideAvatar=true showDescription=false class="badge--condensed" %}
+          {% endif %}
+        </div>
+        {% if place.link %}
+          <div class="hidden md:block">
+            <a href="{{ place.link }}" class="no-underline hover:no-underline">
+              <i class="ico--chevron-right text-3xl"></i>
             </a>
-	    </div>
-	    {% endif %}
-	    {% if place.programLink %}
-	    <div class="pk-election-crossroad__link">
-		    <span class="fa fa-book"></span> <a href="{{ place.programLink }}" class="c-emphasized-anchor" target="_blank" rel="noopener">Program</a>
-	    </div>
-	    {% endif %}
-	    {% if place.candidateListLink %}
-	    <div class="pk-election-crossroad__link">
-		    <span class="fa fa-users"></span> <a href="{{ place.candidateListLink }}" class="c-emphasized-anchor" target="_blank" rel="noopener">Kandidátka</a>
-	    </div>
-	    {% endif %}
-	    {% if place.candidateListWithProgramLink %}
-	    <div class="pk-election-crossroad__link">
-		    <span class="fa fa-book"></span> <a href="{{ place.candidateListWithProgramLink | relative_url }}" class="c-emphasized-anchor">Program a kandidátka</a>
-	    </div>
-	    {% endif %}
           </div>
-        </div>
-      </article>
-    </div>
+        {% endif %}
+      </div>
+    </article>
   {% endfor %}
 </section>