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

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>

data/_includes/headline-media.html

@@ -1,17 +1,16 @@
-<div class="o-section-block o-section-block-fill">
-  <div class="c-headline-media">
-    {% capture imgPath %}{% asset '{{ include.image }}' magick:resize='751x422^' magick:gravity='center' magick:crop='751x422+0+0' @path %}{% endcapture %}
-    <div class="c-headline-media__background" style="background-image: url({{ imgPath }})"></div>
-    <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>
+{% 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>
-</div>

data/_includes/hero/advanced.html

@@ -0,0 +1,65 @@
+<section
+  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>
+</section>

data/_includes/hero/simple.html

@@ -0,0 +1,13 @@
+<section
+  class="hero {% if include.bgImg %}hero--image{% endif %} py-16"
+  {% 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.description }}
+    </h2>
+  </div>
+</section>

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 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.412ba80ed3553103b85e.0.css" />
-<link rel="stylesheet" href="/assets/js/main.412ba80ed3553103b85e.css" />
-<script src="/assets/js/0.main.412ba80ed3553103b85e.js"></script>
-<script src="/assets/js/main.412ba80ed3553103b85e.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 %}