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

data/_includes/right-bar/bar_garant.html

@@ -1,16 +1,5 @@
 {% if page.garant %}
-<div class="o-section-block--spaceBot">
-  <ul class="c-widget-accordion" data-accordion="" data-allow-all-closed="true">
-    <li class="c-widget-accordion-item is-active" data-accordion-item="">
-      <a href="#toc" class="c-widget-accordion-link">
-        <span class="c-widget-accordion__title">Garant</span>
-      </a>
-      <div class="c-widget-accordion-content" data-tab-content="" id="toc">
-        {% assign garant = site.people | where:"uid",page.garant | first %}
-        {% include people/profile-badge.html item=garant style='card' viewMode='single' showDescription=false class='c-profile-badge--bottomalign' headlineClass='t-h6-super' %}
-      </div>
-    </li>
-  </ul>
-</div>
+{% assign garant = site.people | where:"uid",page.garant | first %}
+{% include people/profile-badge.html item=garant description="Garant" class="badge--condensed" %}
 {% endif %}
 

data/_includes/right-bar/bar_people.html

@@ -1,19 +1,14 @@
-<div class="o-section-block">
-    <ul class="c-widget-accordion" data-accordion="" data-allow-all-closed="true">
-      <li class="c-widget-accordion-item is-active" data-accordion-item="">
-        <a class="c-widget-accordion-link c-widget-accordion-link--nofill">
-          <span class="c-widget-accordion__title">Lidé</span>
-        </a>
-        <div class="c-widget-accordion-content" data-tab-content="">
-            {% assign persons = site.people | sample:3 %}
-            {% for person in persons %}
-              {% include people/profile-badge.html item=person style='card' showContactInfo=false class='c-profile-badge--stacked c-profile-badge--bottomalign' headlineClass='t-h6-super' %}
-            {% endfor %}
-          <div class="c-widget-accordion-content__cta">
-            {% assign peopleCol = site.collections | where: "label", "people" | first %}
-            <a class="expanded button large u-0margin" href="{% if peopleCol.root %}{{ peopleCol.root }}{% else %}{{ '/lide/' | relative_url }}{% endif %}"> Poznejte celý náš tým! </a>
-          </div>
-        </div>
-      </li>
-    </ul>
-  </div>
+
+<div class="content-block">
+  <h2>Lidé</h2>
+</div>
+
+<div class="space-y-4">
+  {% assign persons = site.people | sample:3 %}
+  {% for person in persons %}
+    {% include people/profile-badge.html item=person style='card' showContactInfo=false class='c-profile-badge--stacked c-profile-badge--bottomalign' headlineClass='t-h6-super' %}
+  {% endfor %}
+</div>
+
+{% capture href %}{% if peopleCol.root %}{{ peopleCol.root }}{% else %}{{ '/lide/' | relative_url }}{% endif %}{% endcapture %}
+{% include buttons/icon.html icon="ico--chevron-right" class="btn--violet-400 btn--fullwidth lg:btn--autowidth pt-4" cta="Poznejte celý náš tým" href=href %}

data/_includes/right-bar/bar_profile.html

@@ -0,0 +1,73 @@
+{% if page.img %}
+  <div class="text-center mb-8">
+    {% if site.mediaStorage %}
+        {% capture img %}https://a.pirati.cz/resize/225x225/{{ site.mediaStorage }}/img/{{ page.img }}{% endcapture %}
+    {%- else -%}
+        {% capture img %}{% asset '{{ page.img }}' magick:resize="225x" @path %}{% endcapture %}
+    {%- endif -%}
+
+    {% include avatar.html src=img class="avatar--2xl lg:avatar--3xl avatar--bordered candidate-detail__avatar" %}
+  </div>
+{% endif %}
+
+{% if page.profiles.wikipedia or page.profiles.facebook or page.profiles.twitter or page.profiles.github or page.profiles.forum or page.profiles.redmine or page.profiles.web or page.profiles.blog %}
+  {% include right-bar/rbar_profiles.html %}
+  <hr />
+{% endif %}
+
+<div class="content-block">
+  {% if page.mail or page.mob or page.profiles.report %}
+    <div class="space-y-4">
+      {% if page.mob %}
+        <div>
+          <h4>Telefon</h4>
+          {% capture href %}tel:{{ page.mob }}{% endcapture %}
+          {% include contact-line.html icon="ico--phone" href=href caption=page.mob %}
+        </div>
+      {% endif %}
+      {% if page.mail %}
+        <div>
+          <h4>Email</h4>
+          {% capture href %}mailto:{{ page.mail }}{% endcapture %}
+          {% include contact-line.html icon="ico--envelope" href=href caption=page.mail %}
+        </div>
+      {% endif %}
+      {% if page.profiles.report %}
+        <div>
+          <h4>Report poslance</h4>
+          {% include contact-line.html icon="ico--folder" href=page.profiles.report caption="Zobrazit report" %}
+        </div>
+      {% endif %}
+    </div>
+    <hr />
+  {% endif %}
+
+  {% if page.asistenti %}
+    <h2>Asistenti</h2>
+    <div class="space-y-4 mt-4">
+      {% for asistent in page.asistenti %}
+        {% include people/profile-badge.html class="badge--condensed" item=asistent description=asistent.position %}
+      {% endfor %}
+    </div>
+    <hr />
+  {% endif %}
+
+  {% if page.office %}
+    {% assign kancl = page.office | first %}
+    <h2>{{ kancl.name }}</h2>
+    <p>{{ kancl.address }}</p>
+
+    {% if kancl.opening %}
+      <h4>Otevírací doba</h4>
+      <p>{{ kancl.opening}}</p>
+    {% endif %}
+    <iframe
+      height="150"
+      frameborder="0"
+      style="border:0; width:100%"
+      src="https://www.google.com/maps/embed/v1/place?key=AIzaSyCRuL_FU0HdeKCHVNfVJkv2nhNZPr05AJM&q={{ kancl.address | replace: ' ', '+' }}" allowfullscreen>
+    </iframe>
+  {% endif %}
+  <!-- Mobile divider -->
+  <hr class="block lg:hidden" />
+</div>

data/_includes/right-bar/bar_program.html

@@ -3,30 +3,25 @@
 {% endif %}
 
 {% if campaignGroup %}
-<div class="o-section-block--spaceBot show-for-large">
-    <ul class="c-widget-accordion" data-accordion="" data-allow-all-closed="true">
-        <li class="c-widget-accordion-item is-active" data-accordion-item="">
-            <a href="#toc" class="c-widget-accordion-link">
-                <span class="c-widget-accordion__title">{{ campaignGroup.title }}</span>
-            </a>
-            <div class="c-widget-accordion-content" data-tab-content="" id="toc">
-                {% for campaign in campaignGroup.campaigns %}
-                <h3 class="t-h5">{{ campaign.title }}</h3>
-                <ul class="c-widget-accordion-list">
-                    <ul>
-                        {% assign programSections = site.program | where: "campaignCategoryUid", campaign.categoryUid | sort:"order" %}
-                        {% for programSection in programSections %}
-                        <li><a class="c-emphasized-anchor {% if page.uid == programSection.uid %}active{% endif %}" href="{{ programSection.url | relative_url }}">{{ programSection.title }}</a></li>
-                        {% endfor %}
-                    </ul>
-                </ul>
-                {% endfor %}
+<div class="content-block">
+  <h2>{{ campaignGroup.title }}</h2>
 
-                {% comment %}Allows to add custom content to program rbar{% endcomment %}
-                {% include right-bar/program-extras.html %}
-            </div>
-        </li>
+  {% for campaign in campaignGroup.campaigns %}
+    {% assign programSections = site.program | where: "campaignCategoryUid", campaign.categoryUid | sort:"order" %}
+
+    <h3>{{ campaign.title }}</h3>
+
+    <ul class="unordered-list unordered-list--linked">
+      {% for programSection in programSections %}
+        <li><a {% if page.uid == programSection.uid %}class="font-bold"{% endif %} href="{{ programSection.url | relative_url }}">{{ programSection.title }}</a></li>
+      {% endfor %}
     </ul>
+    {% unless forloop.last %}
+      <hr>
+    {% endunless %}
+  {% endfor %}
 
+  {% comment %}Allows to add custom content to program rbar{% endcomment %}
+  {% include right-bar/program-extras.html %}
 </div>
 {% endif %}

data/_includes/right-bar/rbar.html

@@ -1,57 +1,54 @@
-<aside class="o-section">
-  <div class="o-section-inner o-section-inner--rightBlock">
-    {% for rbar in  page.rbar %}
-        {% if rbar contains 'foto' %}
-          {% include right-bar/bar_foto.html %}
-        {% endif %}
-        {% if rbar contains 'personContact' %}
-          {% include right-bar/bar_person_contact.html %}
-        {% endif %}
-        {% if rbar contains 'garant' %}
-          {% include right-bar/bar_garant.html %}
-        {% endif %}
-        {% if rbar contains 'kodo' %}
-          {% include right-bar/bar_kodo.html %}
-        {% endif %}
-        {% if rbar contains 'program' %}
-          {% include right-bar/bar_program.html %}
-        {% endif %}
-        {% if rbar contains 'cal' and site.calendar %}
-          {% include right-bar/bar_cal.html %}
-        {% endif %}
-        {% if rbar contains 'people' %}
-          {% include right-bar/bar_people.html %}
-        {% endif %}
-        {% if rbar contains 'video' %}
-          {% include right-bar/bar_video.html %}
-        {% endif %}
-        {% if rbar contains 'fb' and site.facebook.profilePage %}
-          {% include right-bar/bar_fb.html %}
-        {% endif %}
-        {% if rbar contains 'tw' and site.twitter.profile %}
-          {% include right-bar/bar_tw.html %}
-        {% endif %}
-        {% if rbar contains 'textbox' %}
-          {% include right-bar/bar_textbox.html %}
-        {% endif %}
-        {% if rbar contains 'map' %}
-          {% include right-bar/bar_map.html %}
-        {% endif %}
-        {% if rbar contains 'personArticles' %}
-          {% include right-bar/bar_person_articles.html %}
-        {% endif %}
-        {% if rbar contains 'board' %}
-          {% include right-bar/bar_board.html %}
-        {% endif %}
-        {% if rbar contains 'tagArticles' %}
-          {% include right-bar/bar_tag_articles.html %}
-        {% endif %}
-        {% if rbar contains 'pageContact' %}
-          {% include right-bar/bar_page_contact.html %}
-        {% endif %}
+<aside class="container-padding--zero lg:container-padding--auto lg:card lg:elevation-10">
+  <div class="lg:card__body {{ include.cardBodyClass }}">
+    {% for rbar in page.rbar %}
+      {% if rbar contains 'profile' %}
+        {% include right-bar/bar_profile.html %}
+      {% endif %}
+      {% if rbar contains 'garant' %}
+        {% include right-bar/bar_garant.html %}
+      {% endif %}
+      {% if rbar contains 'kodo' %}
+        {% include right-bar/bar_kodo.html %}
+      {% endif %}
+      {% if rbar contains 'program' %}
+        {% include right-bar/bar_program.html %}
+      {% endif %}
+      {% if rbar contains 'cal' and site.calendar %}
+        {% include right-bar/bar_cal.html %}
+      {% endif %}
+      {% if rbar contains 'people' %}
+        {% include right-bar/bar_people.html %}
+      {% endif %}
+      {% if rbar contains 'video' %}
+        {% include right-bar/bar_video.html %}
+      {% endif %}
+      {% if rbar contains 'fb' and site.facebook.profilePage %}
+        {% include right-bar/bar_fb.html %}
+      {% endif %}
+      {% if rbar contains 'tw' and site.twitter.profile %}
+        {% include right-bar/bar_tw.html %}
+      {% endif %}
+      {% if rbar contains 'textbox' %}
+        {% include right-bar/bar_textbox.html %}
+      {% endif %}
+      {% if rbar contains 'map' %}
+        {% include right-bar/bar_map.html %}
+      {% endif %}
+      {% if rbar contains 'personArticles' %}
+        {% include right-bar/bar_person_articles.html %}
+      {% endif %}
+      {% if rbar contains 'board' %}
+        {% include right-bar/bar_board.html %}
+      {% endif %}
+      {% if rbar contains 'tagArticles' %}
+        {% include right-bar/bar_tag_articles.html %}
+      {% endif %}
+      {% if rbar contains 'pageContact' %}
+        {% include right-bar/bar_page_contact.html %}
+      {% endif %}
 
-        {% comment %}Allows to append custom right bars variants{% endcomment %}
-        {% include right-bar/custom-bars.html rbar=rbar %}
+      {% comment %}Allows to append custom right bars variants{% endcomment %}
+      {% include right-bar/custom-bars.html rbar=rbar %}
     {% endfor %}
   </div>
 </aside>

data/_includes/right-bar/rbar_profiles.html

@@ -1,7 +1,18 @@
-{% if page.profiles.report %}<i class="fa fa-file-text-o"></i> <a href="{{page.profiles.report}}">Report poslance</a><br/>{% endif %}
-{% if page.profiles.redmine %}<i class="fa fa-check-square-o"></i> <a href="{{ page.profiles.redmine }}">Přiřazené úkoly</a><br/>{% endif %}
-{% if page.profiles.wikipedia %}<i class="fa fa-wikipedia-w"></i> <a href="{{ page.profiles.wikipedia }}">W: {{ page.profiles.wikipedia | remove: "https://cs.wikipedia.org/wiki/" }}</a><br/>{% endif %}
-{% if page.profiles.facebook %}<i class="fa fa-facebook"></i> <a href="{{ page.profiles.facebook }}">FB: {{ page.profiles.facebook | remove: "https://www.facebook.com/" }}</a><br/>{% endif %}
-{% if page.profiles.twitter %}<i class="fa fa-twitter"></i> <a href="{{ page.profiles.twitter }}">TW: {{ page.profiles.twitter | remove: "https://twitter.com/" }}</a><br/>{% endif %}
-{% if page.profiles.github %}<i class="fa fa-github"></i> <a href="{{ page.profiles.github }}">GH: {{ page.profiles.github | remove: "https://github.com/"}}</a><br/>{% endif %}
-{% if page.profiles.forum %}<i class="fa fa-comments-o"></i> <a href="{{ page.profiles.forum }}">Forum: {{ page.profiles.forum | remove: "https://forum.pirati.cz/" }}</a><br/>{% endif %}
+<div class="flex flex-wrap item-center">
+  <div class="social-icon-group space-x-0/5">
+    {% if page.profiles.wikipedia %}<a class="social-icon" target="_blank" rel="noreferrer noopener" href="{{ page.profiles.wikipedia }}"><i class="ico--wikipedia"></i></a>{% endif %}
+    {% if page.profiles.facebook %}<a class="social-icon" target="_blank" rel="noreferrer noopener" href="{{ page.profiles.facebook }}"><i class="ico--facebook"></i></a>{% endif %}
+    {% if page.profiles.twitter %}<a class="social-icon" target="_blank" rel="noreferrer noopener" href="{{ page.profiles.twitter }}"><i class="ico--twitter"></i></a>{% endif %}
+    {% if page.profiles.github %}<a class="social-icon" target="_blank" rel="noreferrer noopener" href="{{ page.profiles.github }}"><i class="ico--github"></i></a>{% endif %}
+    {% if page.profiles.forum %}<a class="social-icon" target="_blank" rel="noreferrer noopener" href="{{ page.profiles.forum }}"><i class="ico--bubbles"></i></a>{% endif %}
+    {% if page.profiles.redmine %}<a class="social-icon" target="_blank" rel="noreferrer noopener" href="{{ page.profiles.redmine }}"><i class="ico--tasks"></i></a>{% endif %}
+    {% if page.profiles.web %}<a class="social-icon" target="_blank" rel="noreferrer noopener" href="{{ page.profiles.web }}"><i class="ico--globe"></i></a>{% endif %}
+    {% if page.profiles.blog %}<a class="social-icon" target="_blank" rel="noreferrer noopener" href="{{ page.profiles.blog }}"><i class="ico--write"></i></a>{% endif %}
+  </div>
+
+  {% if page.profiles.flickr %}
+    <div class="flex-grow text-right">
+      <a href="{{ page.profiles.flickr }}" class="inline-flex items-center"><span class="font-light text-sm">Více fotografií</span><i class="ico--flickr ml-2 no-underline hover:no-underline"></i></a>
+    </div>
+  {% endif %}
+</div>

data/_includes/sharebox.html

@@ -0,0 +1,21 @@
+<div class="sharebox md:card md:elevation-10 {{ include.classes }}">
+  <div class="md:card__body">
+    <span class="head-alt-base md:head-alt-md">Sdílení je aktem lásky</span>
+
+    <div class="flex w-full space-x-4 pt-4 md:pt-8 text-center text-white">
+      <a
+        href="https://www.facebook.com/sharer/sharer.php?u={{ page.url | absolute_url }}"
+        onclick="window.open(this.href, 'pop-up', 'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;"
+        class="bg-brands-facebook px-8 py-3 text-2xl w-full"
+      ><i class="ico--facebook"></i></a>
+      <a
+        href="https://twitter.com/intent/tweet?text={{ page.title }}&url={{ page.url | absolute_url }}"
+        onclick="window.open(this.href, 'pop-up', 'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;"
+        class="bg-brands-twitter px-8 py-3 text-2xl w-full"
+      ><i class="ico--twitter"></i></a>
+    </div>
+  </div>
+  <div class="h-52 overflow-hidden hidden md:block">
+    <img src="{{ site.styleguide_base_url }}/images/flag.png" alt="Pirátská strana" class="w-80 object-cover m-auto" />
+  </div>
+</div>

data/_includes/social-icon-group.html

@@ -0,0 +1,23 @@
+<div class="social-icon-group {{ include.class }}">
+  {% if site.twitter.profile %}
+    <a href="https://www.twitter.com/{{ site.twitter.profile }}" rel="noopener noreferrer" target="_blank" title="Náš účet na Twitteru" class="social-icon "><i class="ico--twitter"></i></a>
+  {% endif %}
+
+  {% if site.youtube.channel %}
+    <a href="https://www.youtube.com/channel/{{ site.youtube.channel }}" rel="noopener noreferrer" target="_blank" title="Náš účet na Youtube" class="social-icon "><i class="ico--youtube"></i></a>
+  {% endif %}
+
+  <a href="{{'/feed.xml' | relative_url }}" rel="noopener noreferrer" target="_blank" title="Články tohoto webu v RSS" class="social-icon "><i class="ico--feed"></i></a>
+
+  {% if site.instagram.profilePage %}
+    <a href={{ site.instagram.profilePage }} rel="noopener noreferrer" target="_blank" title="Instagram - Česká pirátská strana" class="social-icon "><i class="ico--instagram"></i></a>
+  {% endif %}
+
+  {% if site.flicker.profilePage %}
+    <a href={{ site.flicker.profilePage }} rel="noopener noreferrer" target="_blank" title="Flickr - Česká pirátská strana" class="social-icon "><i class="ico--flickr"></i></a>
+  {% endif %}
+
+  {% if site.organization.email %}
+    <a href="mailto:{{ site.organization.email }}" class="social-icon "><i class="ico--envelope"></i></a>
+  {% endif %}
+</div>

data/_layouts/blank-article.html

@@ -2,23 +2,23 @@
 layout: default
 ---
 
-<div class="row">
+<div class="container container--default py-8 lg:py-24">
 	{% if page.article-boxes %}
 		{% include article-box/three-in-row.html article-boxes=page.article-boxes %}
 	{% endif %}
 
-	<div class="medium-12 {% unless page.rbar == empty or page.rbar == blank or page.rbar == nil %} large-8{% endunless %} columns">
+  <main>
+    <div class="{% unless page.nocols or layout.nocols %}lg:flex lg:lg:space-x-8 xl:space-x-16{% endunless %}">
+      <article class="{% unless page.nocols or layout.nocols %}lg:w-3/5 xl:w-2/3{% endunless %}" itemtype="http://schema.org/BlogPosting" itemscope="">
+			  <link itemprop="mainEntityOfPage" href="{{ page.url }}">
+			  {{ content }}
+      </article>
 
-		<!-- Article -->
-		<article itemtype="http://schema.org/BlogPosting" itemscope="">
-			<link itemprop="mainEntityOfPage" href="{{ page.url }}">
-			{{ content }}
-		</article>
-		<!-- /Article -->
-	</div>
-	{% unless page.rbar == empty or page.rbar == blank or page.rbar == nil %}
-	<div class="medium-12 large-4 columns">
-		{% include right-bar/rbar.html %}
-	</div>
-	{% endunless %}
+      {% unless page.rbar == empty or page.rbar == blank or page.rbar == nil %}
+        <div class="pt-8 lg:pt-0 {% unless page.nocols or layout.nocols %}lg:w-2/5 xl:w-1/3{% endunless %}">
+          {% include right-bar/rbar.html %}
+        </div>
+      {% endunless %}
+	  </div>
+  </main>
 </div>

data/_layouts/blank.html

@@ -5,10 +5,6 @@
 <html lang="cs" dir="ltr" itemtype="http://schema.org/WebPage" itemscope="">
   {% include head.html %}
   <body>
-    <div class="page-content">
-      <div class="wrapper">
-        {{ content }}
-      </div>
-    </div>
+    {{ content }}
   </body>
 </html>

data/_layouts/communal-elections.html

@@ -1,103 +1,188 @@
 ---
-layout: blank-article
+layout: default
 ---
 
-<div class="c-corner-ribbon-container">
-  {% assign candidates = site.candidatelists | where: "uid", page.candidateListUid | first %}
-  {% assign programCategories = site.program | where: "campaignCategoryUid", page.campaignCategoryUid | sort:"order" %}
+{% assign group = site.data.campaigns | where: "groupUid", page.campaignGroupUid | first %}
+{% assign candidates = site.candidatelists | where: "uid", page.candidateListUid | first %}
+{% assign programCategories = site.program | where: "campaignCategoryUid", page.campaignCategoryUid | sort:"order" %}
 
-  {% capture headline %}{{ page.title }}{% if candidates.number %}<span class="t-subheader u-1margin--left">&raquo; volte č. {{ candidates.number }} &laquo;</span>{% endif %}{% endcapture %}
-  {% capture headerContent %}
-    <div class="c-content-block c-emphasized-text">{{ content }}</div>
-  {% endcapture %}
+{% if page.img %}
+  {% if site.mediaStorage %}
+      {% capture imgPath %}https://a.pirati.cz/{{ site.mediaStorage }}/img/{{ page.img }}{% endcapture %}
+  {% else %}
+    {% capture imgPath %}{% asset '{{ page.img }}' @path %}{% endcapture %}
+    {% assign imgPath = imgPath | absolute_url %}
+  {% endif %}
+{% endif %}
 
-  {% if candidates.number %}
-    <div class="c-corner-ribbon c-corner-ribbon--top-right show-for-medium">Volte č. {{ candidates.number }}!</div>
+{% if page.heroBgImg %}
+  {% if site.mediaStorage %}
+      {% capture imgBgPath %}https://a.pirati.cz/{{ site.mediaStorage }}/img/{{ page.heroBgImg }}{% endcapture %}
+  {% else %}
+    {% capture imgBgPath %}{% asset '{{ page.heroBgImg }}' @path %}{% endcapture %}
+    {% assign imgBgPath = imgBgPath | absolute_url %}
   {% endif %}
+{% endif %}
 
-  {% include page-header.html headline=headline content=headerContent %}
-</div>
+<div class="__js-root">
+  <ui-view-provider inline-template :initial="{candidates: true, program: false}" v-slot="{ isCurrentView, toggleView }">
+    <main>
+      {% capture mainContent %}
+        {% if candidates.number %}
+          <div class="flag bg-violet-400 text-white head-alt-base mb-6">Volte č. {{ candidates.number }}</div>
+        {% endif %}
+        <h1 class="head-alt-md md:head-alt-xl">{{ page.title }}</h1>
+      {% endcapture %}
+      {% include hero/advanced.html img=page.img bgImg=imgBgPath mainContent=mainContent subContent=content contentClass="content-block" imgClass="h-32 lg:h-80 lg:m-auto hidden md:block" %}
 
-<div class="o-section">
-  <div class="row">
-    {% if programCategories.size > 0 %}    
-      <div class="columns medium-8">
-    {% else %}    
-      <div class="columns medium-12">
-    {% endif %}    
-      <div class="o-section-header o-section-header--bordered">
-        <h3 class="o-section__heading t-h2-super">Kandidátní listina</h3>
-      </div>
-      <div class="c-program-candidates">
+      <div class="container container--default pt-8 lg:py-24">
 
-        {% assign leaderCandidate = site.people | where: "uid", candidates.leader.uid | first %}
-        {% include candidate-badge.html candidate=candidates.leader candidatePage=leaderCandidate rank=1 %}
+        {% if programCategories.size > 0 %}
+          <div class="text-center">
+            <div class="switch">
+              <a @click="toggleView('candidates')" class="switch__item" :class="{'switch__item--active': isCurrentView('candidates')}">Kandidáti</a>
+              <a @click="toggleView('program')" class="switch__item" :class="{'switch__item--active': isCurrentView('program')}">Program</a>
+            </div>
+          </div>
 
-        {% if candidates.head.size %}
-            {% for candidate in candidates.head %}
-              {% assign candidatePage = site.people | where: "uid", candidate.uid  | first %}
-              {% assign candidateRank = forloop.index | plus: 1 %}
-              {% include candidate-badge.html candidate=candidate candidatePage=candidatePage leader=false rank=candidateRank %}
-            {% endfor %}
-        {% endif %}
+          <template v-if="isCurrentView('program')">
+            <h1 class="head-alt-md text-center py-8 lg:pt-24 lg:pb-8">Volební program</h1>
 
-        {% if candidates.tail.size > 0 %}
-          <div class="c-program-candidates__others">
-            {% for candidate in candidates.tail %}
-              <p>
-                <div itemprop="description" class="c-content-block c-emphasized-text">
-                {% assign candidateRank = forloop.index | plus: 1 | plus: candidates.head.size %}
-                <strong> {{ candidateRank }}.
-                    {% if candidate.uid %} 
-                        {% assign candidatePage = site.people | where: "uid", candidate.uid | first %}
-                        <a href={{candidatePage.url}}> {% include people/fullname.html person=candidatePage %}</a>{% if candidate.age or candidate.profession or candidate.party %}, {% endif %}
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+              {% for category in programCategories %}
+                <article class="card card--hoveractive">
+                  {% if category.img %}
+                    {% if site.mediaStorage %}
+                      {% capture img_path %}https://a.pirati.cz/resize/400x225/{{ site.mediaStorage }}/img/{{ category.img }}{% endcapture %}
                     {% else %}
-                        {{ candidate.name }}{% if candidate.age or candidate.profession or candidate.party %}, {% endif %}
+                      {% if category.img contains ".svg" %}
+                        {% capture img_path %}{{ category.img | prepend: "/assets/img/" | absolute_url }}{% endcapture %}
+                      {% else %}
+                        {% capture img_path %}{% asset '{{ category.img }}' magick:resize="400x225^" magick:gravity='center' magick:crop='400x225+0+0' @path %}{% endcapture %}
+                      {% endif %}
                     {% endif %}
-                </strong>
-
-                {% if candidate.age %}
-                    {{ candidate.age }} let{% if candidate.profession or candidate.party %}, {% endif %}
-                {% endif %}
-                {% if candidate.profession %}
-                    {{ candidate.profession }}{% if candidate.party %}, {% endif %}
-                {% endif %}
-                {% if candidate.party %}
-                    {{ candidate.party }}
-                {% endif %}
-                </div>
-              </p>
-            {% endfor %}
-          </div>
+                    <a href="{{ category.url | relative_url }}">
+                      <img class="w-full h-48 object-cover" src="{{ img_path }}" alt="{{ category.title }}" />
+                    </a>
+                  {% endif %}
+                  <div class="card__body p-4">
+                    <h1 class="card-headline mb-2">
+                      <a href="{{ category.url | relative_url }}">{{ category.title }}</a>
+                    </h1>
+                    <p class="card-body-text">{{ category.perex }}</p>
+                  </div>
+                </article>
+              {% endfor %}
+            </div>
+          </template>
         {% endif %}
 
-      </div>
+        <template v-if="isCurrentView('candidates')">
+          <h1 class="head-alt-md text-center py-8 lg:pt-24 lg:pb-8">{{ candidates.title }}</h1>
 
-      {% if candidates.note %}
-        <p><strong>Pozn.:</strong> {{ candidates.note }}</p>
-      {% endif %}
-    </div>
-    {% if programCategories.size > 0 %}    
-    <div class="columns medium-4">
-      <div class="o-section-header o-section-header--bordered">
-        <h3 class="o-section__heading t-h2-super">Program</h3>
-      </div>
-      <div class="c-program-items">
-          {% for category in programCategories %}
-          <div class="c-program-items__item">
-            <div class="c-program-items__item-wrap c-tile c-tile--fill">
-              <div class="c-program-items__item-inner c-tile__body">
-                <a href="{{ category.url | relative_url }}">
-                  <h3 class="c-program-items__item-title c-headline-anchor t-h4">{{ category.title }}</h3>
-                  <p>{{ category.perex }}</p>
-                </a>
+          {% assign leaderCandidate = site.people | where: "uid", candidates.leader.uid | first %}
+
+          <div class="candidate-card-list grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
+            {% include candidate-badge.html candidate=candidates.leader candidatePage=leaderCandidate rank=1 wrapperClass="candidate-card__wrapper sm:candidate-card-list__item-wrapper md:candidate-card-list__item-wrapper--border" %}
+
+            {% if candidates.head.size %}
+                {% for candidate in candidates.head %}
+                  {% assign candidatePage = site.people | where: "uid", candidate.uid  | first %}
+                  {% assign candidateRank = forloop.index | plus: 1 %}
+                  {% assign remainder = forloop.index | modulo: 4 %}
+
+                  {% if remainder == 0 %}
+                    {% capture classes %}candidate-card__wrapper sm:candidate-card-list__item-wrapper md:candidate-card-list__item-wrapper--border{% endcapture %}
+                  {% elsif remainder == 1 %}
+                    {% capture classes %}candidate-card__wrapper sm:candidate-card-list__item-wrapper sm:candidate-card-list__item-wrapper--noborder md:candidate-card-list__item-wrapper--border{% endcapture %}
+                  {% elsif remainder == 2 %}
+                    {% capture classes %}candidate-card__wrapper sm:candidate-card-list__item-wrapper md:candidate-card-list__item-wrapper--noborder lg:candidate-card-list__item-wrapper--border{% endcapture %}
+                  {% else %}
+                    {% capture classes %}candidate-card__wrapper sm:candidate-card-list__item-wrapper sm:candidate-card-list__item-wrapper--noborder md:candidate-card-list__item-wrapper--border lg:candidate-card-list__item-wrapper--noborder{% endcapture %}
+                  {% endif %}
+
+                  {% include candidate-badge.html candidate=candidate candidatePage=candidatePage leader=false rank=candidateRank wrapperClass=classes %}
+
+                {% endfor %}
+            {% endif %}
+          </div>
+
+          <ui-view-provider :initial="{fullCandidateTable: false}" v-slot="{ isCurrentView, setView }">
+            {% if candidates.tail.size > 0 %}
+              <div class="candidate-table pt-8 container-padding--zero lg:container-padding--auto" :class="{'candidate-table--fadeout': !isCurrentView('fullCandidateTable')}">
+                {% for candidate in candidates.tail %}
+
+                  {% comment %}Just a part of candidate table will be displayed intially{% endcomment %}
+                  {% if forloop.index == 10 %}
+                    {% assign partialTable = true %}
+                    <template v-if="isCurrentView('fullCandidateTable')">
+                  {% endif %}
+
+                  {% assign candidateRank = forloop.index | plus: 1 | plus: candidates.head.size %}
+
+                  {% if candidate.uid %}
+                    {% assign candidatePage = site.people | where: "uid", candidate.uid | first %}
+                    {% if candidatePage.img %}
+                      {% if site.mediaStorage %}
+                          {% capture img %}https://a.pirati.cz/resize/225x225/{{ site.mediaStorage }}/img/{{ candidatePage.img }}{% endcapture %}
+                      {%- else -%}
+                          {% capture img %}{% asset '{{ candidatePage.img }}' magick:resize='225x225^' magick:gravity='center' magick:crop='225x225+0+0' @path %}{% endcapture %}
+                      {%- endif -%}
+                    {% endif %}
+                  {% else %}
+                    {% assign candidatePage = false %}
+                    {% capture img %}https://a.pirati.cz/common/img/people/unknown-pirate.svg{% endcapture %}
+                  {% endif %}
+
+                  {% capture img_alt %}{% include people/fullname.html person=candidatePage plain=true %}{% endcapture %}
+
+                  <{% if candidatePage %}a href="{{ candidatePage.url }}"{% else %}div{% endif %} class="candidate-table-row">
+                    <div class="candidate-table-row__position head-allcaps-heavy-2xs text-right">{{ candidateRank }}</div>
+                    {% include avatar.html class="avatar--sm candidate-table-row__avatar" src=img alt=candidate.name %}
+                    <div class="candidate-table-row__name head-heavy-2xs font-bold">{% if candidatePage %}{{ candidatePage.name }}{% else %}{{ candidate.name }}{% endif %}</div>
+                    <div class="candidate-table-row__bio head-allcaps-3xs">{% if candidate.age %}{{ candidate.age }} let{% endif %}{% if candidate.age and candidate.profession %}, {{ candidate.profession }}{% endif %}</div>
+                    {% if candidate.party %}
+                      <div class="candidate-table-row__affiliation">
+                        {% if candidate.partyImg %}
+                          {% comment %}We expect an SVG format here to make things scalable{% endcomment %}
+                          {% capture partyImg %}{{ candidate.partyImg | prepend: "/assets/img/" | absolute_url }}{% endcapture %}
+                          {% include avatar.html class="w-6 mr-2" alt=candidate.party src=partyImg %}
+                        {% endif %}
+                        <span class="font-bold font-condensed">{{ candidate.party }}</span>
+                      </div>
+                    {% endif %}
+                  </{% if candidatePage %}a{% else %}div{% endif %}>
+
+                  {% if forloop.last and partialTable %}</template>{% endif %}
+
+                {% endfor %}
               </div>
-            </div>
+            {% endif %}
+
+            {% if partialTable %}
+              <div class="text-center pt-8" v-if="!isCurrentView('fullCandidateTable')">
+                <button class="btn btn--icon text-xl btn--black btn--hoveractive" @click="setView('fullCandidateTable', true)">
+                  <div class="btn__body-wrap">
+                    <div class="btn__body ">Zobrazit vše</div>
+                    <div class="btn__icon "><i class="ico--chevron-right"></i></div>
+                  </div>
+                </button>
+              </div>
+            {% endif %}
+
+          </ui-view-provider>
+        </template>
+
+        {% if group.subLinks %}
+          <div class="flex flex-col pt-8 lg:pt-24 lg:flex-row lg:space-x-8">
+            {% for subLink in group.subLinks %}
+              {% capture classes %}{{ subLink.classes }} lg:w-full container-padding--zero lg:container-padding--auto{% endcapture %}
+              {% include buttons/super.html href=subLink.href class=classes cta=subLink.title icon=subLink.icon %}
+            {% endfor %}
           </div>
-          {% endfor %}
+        {% endif %}
       </div>
-    </div>
-    {% endif %}    
-  </div>
+    </main>
+  </ui-view-provider>
 </div>