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

data/_includes/contacts/summary-table.html

@@ -1,58 +1,64 @@
-<table>
-  <tbody>
-    {% if site.contactSummaryItems %}
-      {% for line in site.contactSummaryItems %}
-        <tr>
-          {% if line.type == 'organizationEmail' %}
-            <td><i class="fa fa-envelope"></i>&nbsp;&nbsp;Emailová adresa:</td>
-            <td><a class="c-emphasized-anchor" href="mailto:{{ site.organization.email }}">{{ site.organization.email }}</a></td>
-          {% elsif line.type == 'organizationRedmineLink' %}
-            <td><i class="fa fa-envelope"></i>&nbsp;&nbsp;Podatelna (Redmine):</td>
-            <td><a class="c-emphasized-anchor" href="{{ site.organization.redmineLink }}">podatelna</a></td>
-          {% elsif line.type == 'organizationPhone' %}
-            <td><i class="fa fa-phone"></i>&nbsp;&nbsp;Telefonický kontakt</td>
-            <td><a class="c-emphasized-anchor" href="tel:{{ site.organization.phone }}">{{ site.organization.phone }}</a></td>
-          {% elsif line.type == 'organizationTransparentAccount' %}
-            <td><i class="fa fa-university"></i>&nbsp;&nbsp;Transparentní {% if line.includeMoreLink %}účty{% else %}účet{% endif %}</td>
-            <td>{{ site.organization.transparentAccount }}{% if line.includeMoreLink %} a <a class="c-emphasized-anchor" href="https://wiki.pirati.cz/fo/seznam_uctu">další účty</a>{% endif %}</td>
-          {% elsif line.type == 'organizationDataBox' %}
-            <td><i class="fa fa-files-o"></i>&nbsp;&nbsp;Datová schránka</td>
-            <td>{{ site.organization.dataBoxId }}</td>
-          {% elsif line.type == 'piratiRootWebsite' %}
-            <td><i class="fa fa-desktop"></i>&nbsp;&nbsp;Celostátní web</td>
-            <td><a class="c-emphasized-anchor" href="https://www.pirati.cz">www.pirati.cz</a></td>
-          {% elsif line.type == 'custom' %}
-            <td>{% if line.iconClass %}<i class="{{ line.iconClass }}"></i>&nbsp;&nbsp;{% endif %}{{ line.label }}</td>
-            <td class="c-content-block">{{ line.body }}</td>
-          {% endif %}
-        </tr>
-      {% endfor %}
-    {% else %}
-      {% comment %}Support legacy configuration where site.contactSummaryItems is undefined{% endcomment %}
-      <tr>
-        <td><i class="fa fa-envelope"></i>&nbsp;&nbsp;Emailová adresa:</td>
-        <td><a class="c-emphasized-anchor" href="mailto:{{ site.organization.email }}">{{ site.organization.email }}</a></td>
-      </tr>
-      <tr>
-          <td><i class="fa fa-envelope"></i>&nbsp;&nbsp;Podatelna (Redmine):</td>
-          <td><a class="c-emphasized-anchor" href="{{ site.organization.redmineLink }}">podatelna</a></td>
-      </tr>
-      <tr>
-          <td><i class="fa fa-phone"></i>&nbsp;&nbsp;Telefonický kontakt</td>
-          <td><a class="c-emphasized-anchor" href="tel:{{ site.organization.phone }}">{{ site.organization.phone }}</a></td>
-      </tr>
-      <tr>
-          <td><i class="fa fa-desktop"></i>&nbsp;&nbsp;Celostátní web</td>
-          <td><a class="c-emphasized-anchor" href="https://www.pirati.cz">www.pirati.cz</a></td>
-      </tr>
-      <tr>
-          <td><i class="fa fa-files-o"></i>&nbsp;&nbsp;Datová schránka</td>
-          <td>{{ site.organization.dataBoxId | default: 'b2i4r6j' }}</td>
-      </tr>
-      <tr>
-          <td><i class="fa fa-university"></i>&nbsp;&nbsp;Transparentní účty</td>
-          <td>{{ site.organization.transparentAccount | default: '2100048174/2010' }} a <a class="c-emphasized-anchor" href="https://wiki.pirati.cz/fo/seznam_uctu">další účty</a></td>
-      </tr>
-    {% endif %}
-  </tbody>
-</table>
+{% if site.contactSummaryItems %}
+  {% for line in site.contactSummaryItems %}
+    <div>
+      {% if line.type == 'organizationEmail' %}
+        <h4>Emailová adresa</h4>
+        {% capture href %}mailto:{{ site.organization.email }}{% endcapture %}
+        {% include contact-line.html href=href icon="ico--envelope" caption=site.organization.email %}
+      {% elsif line.type == 'organizationRedmineLink' %}
+        <h4>Podatelna (Redmine)</h4>
+        {% include contact-line.html href=site.organization.redmineLink icon="ico--envelope" caption=site.organization.email %}
+      {% elsif line.type == 'organizationPhone' %}
+        <h4>Telefonický kontakt</h4>
+        {% capture href %}tel:{{ site.organization.phone }}{% endcapture %}
+        {% include contact-line.html href=href icon="ico--phone" caption=site.organization.phone %}
+      {% elsif line.type == 'organizationTransparentAccount' %}
+        <h4>Transparentní {% if line.includeMoreLink %}účty{% else %}účet{% endif %}</h4>
+        {% capture href %}tel:{{ site.organization.phone }}{% endcapture %}
+        {{ site.organization.transparentAccount }}{% if line.includeMoreLink %} a <a href="https://wiki.pirati.cz/fo/seznam_uctu">další účty</a>{% endif %}
+      {% elsif line.type == 'organizationDataBox' %}
+        <h4>Datová schránka</h4>
+        {% include contact-line.html icon="ico--drawer" caption=site.organization.dataBoxId %}
+      {% elsif line.type == 'piratiRootWebsite' %}
+        <h4>Celostátní web</h4>
+        {% include contact-line.html href="https://www.pirati.cz" icon="ico--pirati" caption="www.pirati.cz" %}
+      {% elsif line.type == 'custom' %}
+        <h4>{{ line.body }}</h4>
+        {% if line.iconClass %}
+          {% include contact-line.html icon=line.iconClass caption=line.label %}
+        {% else %}
+          {{ line.label }}
+        {% endif %}
+      {% endif %}
+    </div>
+  {% endfor %}
+{% else %}
+  {% comment %}Support legacy configuration where site.contactSummaryItems is undefined{% endcomment %}
+  <div>
+    <h4>Emailová adresa</h4>
+    {% capture href %}mailto:{{ site.organization.email }}{% endcapture %}
+    {% include contact-line.html href=href icon="ico--envelope" caption=site.organization.email %}
+  </div>
+  <div>
+    <h4>Podatelna (Redmine)</h4>
+    {% include contact-line.html href=site.organization.redmineLink icon="ico--envelope" caption=site.organization.email %}
+  </div>
+  <div>
+    <h4>Telefonický kontakt</h4>
+    {% capture href %}tel:{{ site.organization.phone }}{% endcapture %}
+    {% include contact-line.html href=href icon="ico--phone" caption=site.organization.phone %}
+  </div>
+  <div>
+    <h4>Celostátní web</h4>
+    {% include contact-line.html href="https://www.pirati.cz" icon="ico--pirati" caption="www.pirati.cz" %}
+  </div>
+  <div>
+    <h4>Datová schránka</h4>
+    {% include contact-line.html icon="ico--drawer" caption=site.organization.dataBoxId %}
+  </div>
+  <div>
+    <h4>Transparentní {% if line.includeMoreLink %}účty{% else %}účet{% endif %}</h4>
+    {% capture href %}tel:{{ site.organization.phone }}{% endcapture %}
+    {{ site.organization.transparentAccount | default: '2100048174/2010' }}{% if line.includeMoreLink %} a <a href="https://wiki.pirati.cz/fo/seznam_uctu">další účty</a>{% endif %}
+  </div>
+{% endif %}

data/_includes/countdown.html

@@ -0,0 +1,13 @@
+<aside class="bg-black text-white px-4 py-12 lg:py-16 lg:px-24 {{ include.classes }}">
+  <div class="flex flex-col lg:flex-row items-center">
+    <h1 class="head-alt-md md:head-alt-xl flex-grow text-center lg:text-left mb-8 lg:mb-0">Do voleb<br>nám zbývá</h1>
+    <div class="__js-root">
+      <ui-flip-clock
+        clock-classes="text-6xl md:text-7xl lg:text-9xl"
+        slot-classes="text-2xl md:text-3xl lg:text-4xl"
+        deadline="{{ include.deadline }}"
+        units="days,hours"
+      />
+    </div>
+  </div>
+</aside>

data/_includes/footer.html

@@ -1,139 +1,103 @@
-<a href="{{ site.github.url }}edit/{{ site.github.branch }}/{{ page.path }}" class="c-suggest-improvement show-for-medium hide-for-print">
-  <i class="fa fa-pencil"></i>
-  Navrhni úpravu
-</a>
-
-<footer class="o-section o-section--darker o-section--bigger u-inverted u-cf">
-  <div class="o-section-inner">
-    <div class="row">
-      <div class="medium-12 large-3 u-stacked--medium-down u-center--medium-down columns">
-        <img src="/assets/img/brand/logo_napis_white.svg" alt='Česká pirátská strana' class="logo u-center-medium-down u-stacked">
-        <p class="u-noWrap u-stacked u-smaller-line-height show-for-large">
-          <span class="u-mirror-horizontally">&copy;</span> Piráti, {{ site.time | date: '%Y' }}. Všechna práva vyhlazena.
-          <br>Sdílejte a nechte ostatní sdílet za stejných
-          <br>podmínek.
-      </div>
-      <div class="medium-12 large-6 u-stacked--medium-down u-center--medium-down columns show-for-medium">
-        <div class="row">
+<footer class="footer bg-grey-700 text-white __js-root">
+  <ui-app inline-template>
+    <div>
+      <div class="footer__main py-4 lg:py-16 container container--default">
+        <section class="footer__brand">
+          <img src="{{ site.styleguide_base_url }}/images/logo-full-white.svg" alt="Pirátská strana" class="w-32 md:w-40 pb-6" />
+          <p class="para hidden md:block md:mb-4 lg:mb-0 text-grey-200">
+            Piráti, {{ site.time | date: '%Y' }}. Všechna práva vyhlazena.
+            Sdílejte a nechte ostatní sdílet za stejných podmínek.
+          </p>
+        </section>
+        <section class="footer__main-links bg-grey-700 text-white lg:grid grid-cols-3 gap-4">
           {% for linkGroup in site.data.menu.bottom %}
-            <div class="columns {{ linkGroup.class }}">
-                <nav class="c-vertical-navigation u-center---medium-down">
-                  {% if linkGroup.title %}
-                    <h3 class="c-vertical-navigation__title">{{ linkGroup.title }}</h3>
-                  {% endif %}
-                  <ul class="c-vertical-navigation-items">
-                    {% for linkGroupItem in linkGroup.links %}
-                    <li class="c-vertical-navigation__item">
+            <div class="{% if forloop.first %}pt-8 pb-4 lg:py-0{% else %}py-4 lg:py-0 border-t border-grey-400 lg:border-t-0{% endif %}">
+              <ui-footer-collapsible label="{{ linkGroup.title }}">
+                <ul class="mt-6 space-y-2 text-grey-200">
+                  {% for linkGroupItem in linkGroup.links %}
+                    <li>
                       <a href="{{ linkGroupItem.link }}">{{ linkGroupItem.name }}</a>
                     </li>
-                    {% endfor %}
-                  </ul>
-                </nav>
+                  {% endfor %}
+                </ul>
+              </ui-footer-collapsible>
             </div>
           {% endfor %}
-        </div>
-      </div>
-      <div class="medium-12 large-3 u-stacked--medium-down columns u-center--medium-down">
-        <nav class="c-vertical-navigation u-stacked">
-          <h3 class="c-vertical-navigation__title">Buďte s námi v síti</h3>
-          <ul class="c-vertical-navigation-items c-vertical-navigation-items--horizontal">
-            {% if site.facebook.profilePage %}
-            <li class="c-vertical-navigation__item">
-              <a href="{{ site.facebook.profilePage }}" rel="noopener noreferrer" title="Facebook - {{ site.organization.shortName }}">
-                <i class="fa fa-facebook c-icon c-icon--big" aria-hidden="true"></i>
-              </a>
-            </li>
-            {% endif %}
-            {% if site.twitter.profile %}
-            <li class="c-vertical-navigation__item">
-              <a href="https://www.twitter.com/{{ site.twitter.profile }}" rel="noopener noreferrer" title="Twitter - {{ site.organization.shortName }}">
-                <i class="fa fa-twitter c-icon c-icon--big" aria-hidden="true"></i>
-              </a>
-            </li>
-            {% endif %}
-            {% if site.instagram.profilePage %}
-            <li class="c-vertical-navigation__item">
-              <a href="{{ site.instagram.profilePage }}" rel="noopener noreferrer" title="Instagram - {{ site.organization.shortName }}">
-                <i class="fa fa-instagram c-icon c-icon--big" aria-hidden="true"></i>
-              </a>
-            </li>
+        </section>
+        <section class="footer__social lg:text-right">
+          <div class="mb-4">
+            {% include social-icon-group.html class="space-x-2 text-white pb-4" %}
+            {% if site.organization.email %}
+              {% capture href %}mailto:{{ site.organization.email }}{% endcapture %}
+              {% include contact-line.html href=href icon="ico--envelope" caption="Dejte nám vědět" %}
             {% endif %}
-            {% if site.gplus.profilePage %}
-            <li class="c-vertical-navigation__item">
-              <a href="{{ site.gplus.profilePage }}" rel="noopener noreferrer" title="Google Plus - {{ site.organization.shortName }}">
-                <i class="fa fa-google-plus c-icon c-icon--big" aria-hidden="true"></i>
-              </a>
-            </li>
-            {% endif %}
-          </ul>
-        </nav>
-        <p class=" u-stacked u-maxWidth80percent u-smaller-line-height hide-for-large">
-          <span class="u-mirror-horizontally">&copy;</span> Piráti, {{ site.time | date: '%Y' }}. Všechna práva vyhlazena.
-          <br> Sdílejte a nechte ostatní sdílet za stejných podmínek.
-      </div>
-    </div>
-  </div>
-</footer>
-
-{% if site.data.menu.contact %}
-    <aside class="o-section o-section--bigger c-contact-bar u-inverted u-center--medium-down show-for-medium">
-      <div class="o-section-inner">
-        <div class="row">
-          <div class="small-12 columns">
-            <header class="c-contact-bar-header u-stacked--medium-down">
-              <h3 class="c-contact-bar__heading"> <a href="{{ '/kontakt/' | relative_url }}">Kontakt</a> </h3>
-            </header>
+          </div>
+          <div class="flex flex-col md:flex-row lg:flex-col lg:items-end space-y-2 md:space-y-0 md:space-x-2 lg:space-x-0 lg:space-y-2">
+            <a href="https://dary.pirati.cz" rel="noopener noreferrer" target="_blank" class="btn btn--icon btn--cyan-200 btn--hoveractive text-lg btn--fullwidth sm:btn--autowidth">
+              <div class="btn__body-wrap">
+                <div class="btn__body ">Přispěj</div>
+                <div class="btn__icon ">
+                  <i class="ico--pig"></i>
+                </div>
+              </div>
+            </a>
 
-            {% for contact in site.data.menu.contact %}
-            {% assign person = site.people | where_exp:"item","item.uid contains contact.id" | first %}
-            <ul class="c-contact-bar-items u-stacked--medium-down">
-              <li class="c-contact-bar__item u-stacked--medium-down">
-                {% if contact.position %}
-                <div class="c-contact-bar__section"> {{ contact.position }} </div>
-                {% endif %}
-                <div class="c-contact-bar__description"> 
-                  <a href="{{ person.url }}">{{ person.name }}</a>, 
-                  <a href="mailto:{{ person.mail }}">{{ person.mail }}</a>
+            <a href="https://nalodeni.pirati.cz" rel="noopener noreferrer" target="_blank" class="btn btn--icon btn--blue-300 btn--hoveractive text-lg btn--fullwidth sm:btn--autowidth">
+              <div class="btn__body-wrap">
+                <div class="btn__body ">Naloď se</div>
+                <div class="btn__icon ">
+                  <i class="ico--anchor"></i>
                 </div>
-              </li>
-            </ul>
-            {% endfor %}
+              </div>
+            </a>
 
           </div>
-        </div>
+        </section>
       </div>
-    </aside>
-{% else %}
-{% assign contactPerson = site.people | where_exp: "item","item.uid contains site.organization.contactUid" | first %}
-{% assign contactPersons = site.people | where_exp: "item","item.category contains 'kontaktni_osoba'" | sort:"ordpak" %}
-{% unless contactPersons == empty or contactPersons == blank or contactPersons == nil %}
-<aside class="o-section o-section--bigger c-contact-bar u-inverted u-center--medium-down show-for-medium">
-  <div class="o-section-inner">
-    <div class="row">
-      <div class="small-12 columns">
-        <header class="c-contact-bar-header u-stacked--medium-down">
-          <h3 class="c-contact-bar__heading"> <a href="{{ '/kontakt/' | relative_url }}">Kontakt</a> </h3>
-        </header>
 
-        {% for person in contactPersons %}
-	<ul class="c-contact-bar-items u-stacked--medium-down">
-          <li class="c-contact-bar__item u-stacked--medium-down">
- 	    {% if person.contactType %}
-        <div class="c-contact-bar__section"> {{ person.contactType }} </div>
-            {% endif %}
-            <div class="c-contact-bar__description"> 
-              <a href="{{ person.url }}">{{ person.name }}</a>, 
-              <a href="mailto:{{ person.mail }}">{{ person.mail }}</a>
-            </div>
-          </li>
-        </ul>
-        {% endfor %}
+      {% if site.data.menu.transparencySection %}
+        <section class="footer__sub-links lg:border-t border-grey-400">
+          <div class="container container--default">
+            <ui-footer-collapsible label="Otevřenost" labelClass="lg:w-1/4" wrapperClass="flex flex-col lg:flex-row lg:space-x-4 lg:items-center py-4 lg:py-8 border-t border-grey-400 lg:border-t-0" slotWrapperclass="lg:w-2/4">
+              <ul class="lg:w-full lg:pr-8 grid grid-cols-1 lg:grid-cols-3 lg:gap-4 items-center mt-6 space-y-2 lg:mt-0 lg:space-y-0 text-grey-200">
+                <li class="w-full">
+                  <a href="https://ucet.pirati.cz" rel="noreferrer noopener" target="_blank">Transparentní účet</a>
+                </li>
+                <li class="w-full">
+                  <a href="https://smlouvy.pirati.cz" rel="noreferrer noopener" target="_blank">Registr smluv</a>
+                </li>
+                <li class="w-full">
+                  <a href="https://wiki.pirati.cz/fo/otevrene_ucetnictvi" rel="noreferrer noopener" target="_blank">Otevřené účetnictví</a>
+                </li>
+              </ul>
+            </ui-footer-collapsible>
+          </div>
+        </section>
+      {% endif %}
 
-      </div>
+      <section class="bg-black py-4 lg:py-12">
+        <div class="container container--default">
+          <div class="grid gap-4 grid-cols-1 md:grid-cols-2 xl:grid-cols-3">
+            {% if site.data.menu.contact %}
+              {% for contact in site.data.menu.contact %}
+                {% assign person = site.people | where_exp:"item","item.uid contains contact.id" | first %}
+                {% include people/profile-badge.html item=person description=contact.position %}
+              {% endfor %}
+            {% else %}
+              {% assign contactPerson = site.people | where_exp: "item","item.uid contains site.organization.contactUid" | first %}
+              {% assign contactPersons = site.people | where_exp: "item","item.category contains 'kontaktni_osoba'" | sort:"ordpak" %}
+              {% unless contactPersons == empty or contactPersons == blank or contactPersons == nil %}
+                {% for person in contactPersons %}
+                  {% include people/profile-badge.html item=person %}
+                {% endfor %}
+              {% endunless %}
+            {% endif %}
+          </div>
+        </div>
+      </section>
     </div>
-  </div>
-</aside>
-{% endunless %}
-{% endif %}
+  </ui-app>
+</footer>
+
+
 
-<div class="__vue-root" data-app="ScrollTop"></div>

data/_includes/head.html

@@ -44,14 +44,14 @@
     <meta property="og:description"   content="{{ description }}" />
     {% if page.layout == 'post' %}
         {% if site.mediaStorage %}
-            {% capture imgPath %}https://a.pirati.cz/{{ site.mediaStorage }}/img/{{ include.image }}{% endcapture %}
+            {% capture img_path %}https://a.pirati.cz/{{ site.mediaStorage }}/img/{{ page.image }}{% endcapture %}
         {% else %}
             {% capture img_path %}{% asset '{{ page.image }}' @path %}{% endcapture %}
         {% endif %}
         <meta property="og:image"         content="{{ img_path | absolute_url }}" />
     {% elsif page.img %}
         {% if site.mediaStorage %}
-            {% capture imgPath %}https://a.pirati.cz/{{ site.mediaStorage }}/img/{{ include.img }}{% endcapture %}
+            {% capture img_path %}https://a.pirati.cz/{{ site.mediaStorage }}/img/{{ page.img }}{% endcapture %}
         {% else %}
             {% capture img_path %}{% asset '{{ page.img }}' @path %}{% endcapture %}
         {% endif %}
@@ -61,9 +61,7 @@
     {% endif %}
     <!-- Fonts -->
     {% if page.layout != 'blank' %}
-    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
-    {% comment %}This actually points to assets/css/main.scss{% endcomment %}
-    <link rel="stylesheet" href="{% asset 'main.css' @path !type %}">
+    <link rel="stylesheet" href="{{ site.styleguide_base_url }}/css/styles.css">
     {% endif %}
     <!-- API Mapy.cz that has to be in the header -->
     {% if page.mapycz_api %}

data/_includes/header.html

@@ -1,70 +1,143 @@
-<aside class="o-section o-section--smaller c-header-bar u-center--medium-down">
-  <div class="row">
-    <div class="o-section-inner" style="padding: 3px;">
-      <div class="medium-12 columns">
-        {% if site.organization.name %}
-        <a href="{{ '/' | absolute_url }}">
-          <span class="c-header-bar__title">{{ site.organization.name }}</span>
-        </a>
-        <div class="c-header-bar-divider show-for-medium"></div>
-        {% endif %}
-
-        <ul class="c-header-bar-items show-for-medium">
-          {% if site.facebook.profilePage %}
-          <li class="c-header-bar__item c-header-bar__item--smallerSpace">
-            <a href="{{ site.facebook.profilePage }}" rel="noopener noreferrer" target="_blank" title="Naše stránka na Facebooku">
-              <i class="fa fa-facebook" aria-hidden="true"></i>
-          </a></li>
-          {% endif %}
-          {% if site.twitter.profile %}
-          <li class="c-header-bar__item c-header-bar__item--smallerSpace">
-            <a href="https://www.twitter.com/{{ site.twitter.profile }}" rel="noopener noreferrer" target="_blank" title="Náš účet na Twitteru">
-              <i class="fa fa-twitter" aria-hidden="true"></i>
-            </a>
-          </li>
-          {% endif %}
-          {% if site.youtube.channel %}
-          <li class="c-header-bar__item c-header-bar__item--smallerSpace">
-            <a href="https://www.youtube.com/channel/{{ site.youtube.channel }}" rel="noopener noreferrer" target="_blank" title="Náš účet na Youtube">
-              <i class="fa fa-youtube" aria-hidden="true"></i>
-            </a>
-          </li>
-          {% endif %}
-          {% if site.organization.name %}
-          <li class="c-header-bar__item c-header-bar__item--smallerSpace">
-            <a href="{{'/feed.xml' | relative_url }}" rel="noopener noreferrer" target="_blank" title="Články tohoto webu v RSS">
-              <i class="fa fa-rss" aria-hidden="true"></i>
+<nav class="navbar __js-root">
+  <ui-app inline-template>
+    <ui-navbar inline-template>
+      <div>
+        <div class="container container--wide navbar__content" :class="{'navbar__content--initialized': true}">
+          <div class="navbar__brand my-4 flex items-center lg:block lg:pr-8 lg:my-0">
+            <a href="{{ '/' | absolute_url }}">
+              <img src="{{ site.styleguide_base_url }}/images/logo-round-white.svg" class="w-8 lg:w-full lg:border-r lg:border-grey-300 lg:pr-8" />
             </a>
-          </li>
-          {% endif %}
-          {% if site.instagram.profilePage %}
-          <li class="c-header-bar__item c-header-bar__item--smallerSpace">
-            <a href={{ site.instagram.profilePage }} rel="noopener noreferrer" target="_blank" title="Instagram - Česká pirátská strana">
-              <i class="fa fa-instagram" aria-hidden="true"></i>
+            <span class="lg:hidden pl-4 font-bold text-xl">Pirátská strana</span>
+          </div>
+          <div class="navbar__menutoggle my-4 flex justify-end lg:hidden">
+            <a href="#" @click="show = !show" class="no-underline hover:no-underline">
+              <i class="ico--menu text-3xl"></i>
             </a>
-          </li>
-          {% endif %}
-          {% if site.flicker.profilePage %}
-          <li class="c-header-bar__item c-header-bar__item--smallerSpace">
-            <a href={{ site.flicker.profilePage }} rel="noopener noreferrer" target="_blank" title="Flickr - Česká pirátská strana">
-              <i class="fa fa-flickr" aria-hidden="true"></i>
+          </div>
+          <div v-if="show || isLgScreenSize" class="navbar__external navbar__section navbar__section--expandable container-padding--zero lg:container-padding--auto lg:flex lg:space-x-8 lg:pb-2">
+            <div class="text-grey-200 text-sm lg:space-x-8 leading-loose lg:leading-normal">
+              {% for item in site.data.menu.top %}
+                {% include contact-line.html href=item.url icon=item.icon caption=item.link class="lg:inline-block" target="_blank" %}
+              {% endfor %}
+            </div>
+            {% include social-icon-group.html class="space-x-2 text-grey-200 py-4 lg:py-0" %}
+          </div>
+          <div v-if="show || isLgScreenSize" class="navbar__main navbar__section navbar__section--expandable container-padding--zero lg:container-padding--auto">
+            {% if site.data.menu.main %}
+              <ul class="navbar-menu text-white">
+                {% for item in site.data.menu.main %}
+                  <li class="navbar-menu__item">
+                    {% if item.submenu %}
+                      <ui-navbar-subitem label="{{ item.name }}">
+                        <ul class="navbar-menu__submenu">
+                          {% for subitem in item.submenu %}
+                            <li><a href="{{ subitem.link }}" class="navbar-menu__link">{{ subitem.name }}</a></li>
+                          {% endfor %}
+                        </ul>
+                      </ui-navbar-subtitem>
+                    {% else %}
+                      <a href="{{ item.link | relative_url }}" class="navbar-menu__link">{{ item.name }}</a>
+                    {% endif %}
+                  </li>
+                {% endfor %}
+              </ul>
+            {% endif %}
+          </div>
+          <div v-if="show || isLgScreenSize" class="navbar__actions navbar__section navbar__section--expandable container-padding--zero lg:container-padding--auto self-start flex flex-col sm:flex-row lg:flex-col sm:space-x-4 space-y-2 sm:space-y-0 lg:space-y-2 xl:flex-row xl:space-x-2 xl:space-y-0">
+            <a href="https://dary.pirati.cz" rel="noopener noreferrer" target="_blank" class="btn btn--icon btn--cyan-200 btn--hoveractive btn--condensed btn--fullwidth md:btn--autowidth lg:text-sm xl:text-base">
+              <div class="btn__body-wrap">
+                <div class="btn__body ">Přispěj</div>
+                <div class="btn__icon ">
+                  <i class="ico--pig"></i>
+                </div>
+              </div>
             </a>
-          </li>
-          {% endif %}
-        </ul>
-        <div class="c-header-bar-divider show-for-large"></div>
-
-        <ul class="c-header-bar-items show-for-large">
-          {% for item in site.data.menu.top %}
-          <li class="c-header-bar__item">
-            <a href="{{ item.url }}" rel="noopener noreferrer" target="_blank">
-              <i class="{{ item.icon }}" aria-hidden="true"></i>
-              <span class="c-header-bar__itemDescription">{{ item.link }}</span>
+            <a href="https://nalodeni.pirati.cz" rel="noopener noreferrer" target="_blank" class="btn btn--icon btn--blue-300 btn--hoveractive btn--condensed btn--fullwidth md:btn--autowidth lg:text-sm xl:text-base">
+              <div class="btn__body-wrap">
+                <div class="btn__body ">Naloď se</div>
+                <div class="btn__icon ">
+                  <i class="ico--anchor"></i>
+                </div>
+              </div>
             </a>
-          </li>
-          {% endfor %}
-        </ul>
+          </div>
+        </div>
       </div>
-    </div>
-  </div>
-</aside>
+    </ui-navbar>
+  </ui-app>
+</nav>
+
+<div class="__js-root">
+  <ui-app inline-template>
+    {% if site.env.GOOGLE_CALENDAR_APIKEY and site.calendar.id %}
+      <ui-calendar-google-provider v-slot="{ events, onShowMore, hasMore }" :calendar-id="'{{ site.calendar.id }}'" :api-key="'{{ site.env.GOOGLE_CALENDAR_APIKEY }}'">
+      {% assign calendarProvided = true %}
+    {% endif %}
+
+    <ui-view-provider :initial="{regions: false, calendar: false}" v-slot="{ isCurrentView, toggleView }">
+      <nav class="subnav">
+        <div class="container container--wide">
+          <div class="flex">
+            <button @click="toggleView('regions')" class="btn btn--condensed btn--grey-500 btn--hoveractive btn--to-white text-sm mr-2" :class="{'btn--activated': isCurrentView('regions')}">
+              <div class="btn__body">
+                <span>{{ site.organization.name }}</span>
+                <i class="ico--chevron-down ml-4"></i>
+              </div>
+            </button>
+
+            <button @click="toggleView('calendar')" class="btn btn--inline-icon btn--condensed btn--hoveractive btn--grey-500 btn--to-orange-300 text-sm" :class="{'btn--activated': isCurrentView('calendar')}">
+              <div class="btn__body">
+                <i class="btn__inline-icon ico--calendar mr-0 md:mr-2 text-orange-300"></i>
+                <span class="hidden md:block">{{ site.calendar.title }}</span>
+              </div>
+            </button>
+
+            {% if calendarProvided %}
+              <a href="#" class="btn text-sm max-w-full hidden lg:block" @click="toggleView('calendar')" v-if="events.length > 0">
+                <div class="btn__body bg-grey-800 text-grey-200 flex divide-x">
+                  <span class="pr-4">&#123;{events[0].title}&#125;</span>
+                  <span class="pl-4">&#123;{events[0].allDay ? 'Celý den' :  events[0].startDateVerbose + ', ' + events[0].startTimeVerbose}&#125;</span>
+                </div>
+              </a>
+            {% endif %}
+
+            {% if site.facebook.profilePage %}
+              <a href="{{ site.facebook.profilePage }}" target="_blank" rel="noopener noreferrer" class="btn btn--inline-icon btn--condensed btn--hoveractive btn--grey-500 btn--to-brands-facebook text-sm ml-2">
+                <div class="btn__body">
+                  <i class="btn__inline-icon ico--facebook mr-0 md:mr-2 text-brands-facebook"></i>
+                  <span class="hidden md:block">{{ site.facebook.profilePageName }}</span>
+                </div>
+              </a>
+            {% endif %}
+          </div>
+        </div>
+      </nav>
+
+      <aside class="subnav-aside">
+        <div class="subnav-aside__item" :class="{'subnav-aside__item--visible': isCurrentView('regions')}">
+          <a @click="toggleView('regions')" class="subnav-aside__close"><i class="ico--close"></i></a>
+          <ui-region-map class="container container--default" />
+        </div>
+        <div class="subnav-aside__item" :class="{'subnav-aside__item--visible': isCurrentView('calendar')}">
+          <a @click="toggleView('calendar')" class="subnav-aside__close"><i class="ico--close"></i></a>
+          <div class="container container--default">
+            {% if calendarProvided %}
+              <ui-calendar-renderer :events="events" :on-show-more="onShowMore" :has-more="hasMore" :name="'{{ site.calendar.title }}'"></ui-calendar-renderer>
+            {% elsif site.calendar.page %}
+              <iframe src="{{ site.calendar.page }}" style="border-width:0; width: 100%; height: 410px; border: 0; overflow: hidden;"></iframe>
+              <p class="mt-4">
+                <a class="btn btn--orange-200 btn--hoveractive" href="{{ site.calendar.page | relative_url }}">
+                  <span class="btn__body">Zobrazit všechny akce</span>
+                </a>
+              </p>
+            {% endif %}
+          </div>
+        </div>
+      </aside>
+    </ui-view-provider>
+
+    {% if calendarProvided %}
+      </ui-calendar-google-provider>
+    {% endif %}
+  </ui-app>
+</div>