jekyll-theme-pirati 7.7.0 → 8.0.0.pre.alpha4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 573944f836836fb81e21fbb110724eaaf509f3927373a29f12dae087a1e86be9
-  data.tar.gz: 71c4e0e2dcb03f4d2a81056c9e150103fb74603dc327b19bfc8c5e6e73a2e3be
+  metadata.gz: 5a2d5bf0efa5cd7c98975f58ac635361ecf7362cc711d9d072011ccc6a0c45e4
+  data.tar.gz: 197b48523325184bfb7f8358614548766d81e8852f2c8f7fbcf67aa82b0137be
 SHA512:
-  metadata.gz: dd8c121ec23b490c14f4c155178282b5a838b9e8315e47946e326731d7d90c0636d64ceabe36b7829c4e7280a34afe1f8e7bc81dc0f58e21f60c07d6491630cb
-  data.tar.gz: 861c8a93de623ffe2821942b1c69ef2ed18667ca71c29e1df79a3ad69459564f3def60fb1f0900ce0b5f4797aaca828f420207b533d2a081f429c9543e225d5c
+  metadata.gz: 8125fbcce0bd61691e926d3c170521d1c7d14eea9d3d780214349e02fc49951767a36bb44c2a140a5ffea5441183bb86063139e4d5d3403cc1dc6f1d220030d5
+  data.tar.gz: 76672595c85165eab0c173a0ffc50c104b0c093d907c7e46e761c8093769b068d3f2f7b71da1f0947847545d8428b2c95cba44cca0ebb419b9f25d89a43b430e

data/_data/campaigns.yml

@@ -3,6 +3,15 @@
 
 - groupUid: volby-2018  # identifier of the group, to be used in program point
   title: Volby 2018     # title of the campaign group
+  subLinks:
+    - title: Povolební strategie
+      icon: ico--strategy
+      classes: bg-grey-125 hover:bg-black hover:text-white
+      href: /
+    - title: Financování kampaně
+      icon: ico--calculator
+      classes: bg-black text-white hover:bg-grey-125 hover:text-black
+      href: /
   campaigns:
     - title: Program na radnici   # individual campaigns within the group
       categoryUid: praha2018

data/_data/menu.yml

@@ -1,13 +1,13 @@
 top:
   - link: "pirati.cz"
     url:  "https://www.pirati.cz"
-    icon: "fa fa-home"
-  - link: "wiki.pirati.cz"
-    url:  "https://wiki.pirati.cz"
-    icon: "fa fa-home"
+    icon: "ico--home"
+  - link: "piratskyobchod.cz"
+    url:  "https://piratskyobchod.cz"
+    icon: "ico--cart"
   - link: "Pirátské listy"
     url:  "http://www.piratskelisty.cz"
-    icon: "fa fa-newspaper-o"
+    icon: "ico--newspaper"
 
 main:
   - link: /
@@ -45,6 +45,9 @@ main:
   - link: /pripoj-se/
     name: Připoj se
     match: pripoj-se
+  - link: /piratske-centrum/
+    name: Piratské centrum
+    match: piratske-centrum
   - link: /kontakt/
     name: Kontakt
     match: kontakt
@@ -66,15 +69,9 @@ bottom:
         name: Volby
       - link: /aktuality/
         name: Aktuality
-  - class: small-12 medium-4
-    title: Otevřenost
-    links:
-      - link: https://ucet.pirati.cz
-        name: Transparentní účet
-      - link: https://smlouvy.pirati.cz
-        name: Registr smluv
-      - link: https://wiki.pirati.cz/fo/otevrene_ucetnictvi
-        name: Otevřené účetnictví
+
+# Display transparency section in the footer?
+transparencySection: true
 
 contact:
   - id: jakub.pirat

data/_includes/404.html

@@ -1,20 +1,4 @@
-<style type="text/css" media="screen">
-  .container {
-    margin: 10px auto;
-    max-width: 600px;
-    text-align: center;
-  }
-  h1 {
-    margin: 30px 0;
-    font-size: 4em;
-    line-height: 1;
-    letter-spacing: -1px;
-  }
-</style>
-
-<div class="container">
-  <h1>404</h1>
-
-  <p><strong>404 Stránka nebyla nalezena :(</strong></p>
+<div class="container container--default content-block py-8 lg:py-24">
+  <h1 class="head-alt-lg">404 Stránka nebyla nalezena :(</h1>
   <p>Litujeme, ale požadovaná stránka nebyla na našem serveru nalezena.</p>
 </div>

data/_includes/article-infobox.html

@@ -1 +1,5 @@
-<div class="c-article-infobox">{{ include.content }}</div>
+<div class="card elevation-10">
+  <div class="card__body content-block">
+    {{ include.content }}
+  </div>
+</div>

data/_includes/articles/author.html

@@ -1,8 +1,8 @@
 {% if include.article.authorId %}
-{% assign author = site.people | where_exp:"item","item.uid contains include.article.authorId" | first %}
-<a href={{author.url}}>
+  {% assign author = site.people | where_exp:"item","item.uid contains include.article.authorId" | first %}
+  <a href={{author.url}}>
     {{author.name}}
-</a>
+  </a>
 {% else %}
-{{ include.article.author }}
+  {{ include.article.author }}
 {% endif %}

data/_includes/articles/horizontal-article.html

@@ -4,7 +4,11 @@
   <div class="c-article-listing__row">
     <div class="c-article-listing__photobox">
       <div itemprop="image" itemtype="http://schema.org/ImageObject" class="c-article-listing__image {% if include.article.youtubeVideoId %}c-article-listing__image--videoicon{% endif %}" itemscope="">
-        {% capture imgPath %}{% asset '{{ include.article.image }}' magick:resize="348x232^" magick:gravity='center' magick:crop='348x232+0+0' @path %}{% endcapture %}
+        {% if site.mediaStorage %}
+            {% capture imgPath %}https://a.pirati.cz/resize/348x232/{{ site.mediaStorage }}/img/{{ include.article.image }}{% endcapture %}
+        {% else %}
+            {% capture imgPath %}{% asset '{{ include.article.image }}' magick:resize="348x232^" magick:gravity='center' magick:crop='348x232+0+0' @path %}{% endcapture %}
+        {% endif %}
         <a href="{{ include.article.url | relative_url }}">
           <img src="{{ imgPath }}" alt="{{ include.article.title }}">
         </a>

data/_includes/articles/list-responsive.html

@@ -1,9 +1,5 @@
-<div class="o-section-block">
-  <div class="row u-uniform-size-row">
-    {% for article in include.posts %}
-      <div class="medium-6 large-4 columns {% if forloop.last %}end{% endif %}">
-        {% include articles/vertical-article.html article=article %}
-      </div>
-    {% endfor %}
-  </div>
+<div class="article-card-list grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 lg:gap-8">
+  {% for article in include.posts %}
+    {% include articles/vertical-article.html article=article %}
+  {% endfor %}
 </div>

data/_includes/articles/pagination.html

@@ -1,27 +1,26 @@
-<ul class="c-pagination text-center" role="navigation" aria-label="Pagination">
-  {% if include.paginator.page != 1 %}
-  <li class="c-pagination__previous c-pagination__link">
-    <a class="c-pagination__anchor" href="{{ include.paginator.previous_page_path }}" aria-label="Předchozí stránka">Předchozí</a>
-  </li>
-  {% endif %}
+<div class="pagination-container" role="navigation" aria-label="Pagination">
+  <nav class="pagination space-x-1">
+    {% if include.paginator.page != 1 %}
+      {% include buttons/icon.html href=include.paginator.previous_page_path cta="Předchozí" icon="ico--chevron-left" class="btn--grey-125 btn--hoveractive btn--to-black btn--condensed btn--inverted-icon" aria_label="Předchozí stránka" %}
+    {% endif %}
 
-  {% for page in (1..include.paginator.total_pages) %}
-  <li class="c-pagination__link{% if page == include.paginator.page %}  c-pagination__link--current{% endif %}">
-    {% if page == include.paginator.page %}
-      <span class="c-pagination__anchor">{{ forloop.index }}</span>
-    {% else %}
-      {% if forloop.index == 1 %}
-        <a class="c-pagination__anchor" href="/aktuality/" aria-label="Stránka {{ forloop.index }}">{{ forloop.index }}</a>
+    {% for page in (1..include.paginator.total_pages) %}
+      {% if page == include.paginator.page %}
+        {% include buttons/basic.html href=include.paginator.previous_page_path cta=forloop.index class="btn--grey-500 btn--condensed hidden md:inline-block" %}
       {% else %}
-        <a class="c-pagination__anchor" href="/aktuality/{{forloop.index}}/" aria-label="Stránka {{ forloop.index }}">{{ forloop.index }}</a>
+        {% capture aria_label %}Stránka {{ forloop.index }}{% endcapture %}
+        {% if forloop.index == 1 %}
+          {% include buttons/basic.html href="/aktuality/" href=include.paginator.previous_page_path cta=forloop.index class="btn--grey-125 btn--hoveractive btn--to-black btn--condensed hidden md:inline-block" aria_label=aria_label %}
+        {% else %}
+          {% capture href %}/aktuality/{{forloop.index}}/{% endcapture %}
+          {% include buttons/basic.html href="/aktuality/" href=href cta=forloop.index class="btn--grey-125 btn--hoveractive btn--to-black btn--condensed hidden md:inline-block" aria_label=aria_label %}
+        {% endif %}
       {% endif %}
+    {% endfor %}
+
+    {% if include.paginator.page != include.paginator.total_pages %}
+      {% include buttons/icon.html href=include.paginator.next_page_path cta="Další" icon="ico--chevron-right" class="btn--grey-125 btn--hoveractive btn--to-black btn--condensed" aria_label="Další stránka" %}
     {% endif %}
-  </li>
-  {% endfor %}
+  </nav>
+</div>
 
-  {% if include.paginator.page != include.paginator.total_pages %}
-  <li class="c-pagination__next c-pagination__link">
-    <a class="c-pagination__anchor" href="{{ include.paginator.next_page_path }}" aria-label="Další stránka">Další</a>
-  </li>
-  {% endif %}
-</ul>

data/_includes/articles/vertical-article.html

@@ -1,50 +1,69 @@
 <!-- include.article -->
-<article itemtype="http://schema.org/BlogPosting" class="c-article-listing c-article-listing--vertical" itemscope="">
+<article itemtype="http://schema.org/BlogPosting" class="card card--hoveractive article-card {% if include.article.important %}bg-black{% endif %}" itemscope="">
   <link itemprop="mainEntityOfPage" href="{{ include.article.url }}">
 
-  <div class="c-article-listing__photobox">
-    <a href="{{ include.article.url }}">
-      <div itemprop="image" itemtype="http://schema.org/ImageObject" class="c-article-listing__image {% if include.article.youtubeVideoId %}c-article-listing__image--videoicon{% endif %}" itemscope="">
-        {% if site.mediaStorage %}
-            {% capture imgPath %}https://a.pirati.cz/resize/348x232/{{ site.mediaStorage }}/img/{{ include.article.image }}{% endcapture %}
-        {% else %}
-            {% capture imgPath %}{% asset '{{ include.article.image }}' magick:resize='751x422^' magick:gravity='center' magick:crop='751x422+0+0' @path %}{% endcapture %}
-        {% endif %}
-        <img src="{{ imgPath }}" alt="{{ include.article.title }}">
-        <meta itemprop="url" content="{{ imgPath }}">
-      </div>
+  <div class="article-card-cover">
+    <a href="{{ include.article.url | relative_url }}" itemprop="image" itemtype="http://schema.org/ImageObject" itemscope="">
+      {% if site.mediaStorage %}
+          {% capture imgPath %}https://a.pirati.cz/resize/348x232/{{ site.mediaStorage }}/img/{{ include.article.image }}{% endcapture %}
+      {% else %}
+          {% capture imgPath %}{% asset '{{ include.article.image }}' magick:resize='751x422^' magick:gravity='center' magick:crop='751x422+0+0' @path %}{% endcapture %}
+      {% endif %}
+      <img src="{{ imgPath }}" alt="{{ include.article.title }}">
+      <meta itemprop="url" content="{{ imgPath }}">
     </a>
-  </div>
 
-  <div class="c-article-listing__meta">
-    <div class="c-metadata-block-section">
-      <!-- Date published -->
-      <span itemprop="description" class="c-metadata-block-section__item">
-        <i class="fa fa-calendar-o" aria-hidden="true"></i> {{ include.article.date | date: "%d.%m.%Y" }}
-        <meta itemprop="datePublished" content="{{ include.article.date | date_to_xmlschema }}" />
-      </span>
+    <div class="article-card-cover__details">
+      <div class="article-card-sharing">
+        <div class="social-icon-group">
+          <a
+            href="https://www.facebook.com/sharer/sharer.php?u={{ include.article.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="social-icon social-icon--fill bg-brands-facebook text-white text-sm social-icon--4"
+          ><i class="ico--facebook"></i></a>
+          <a
+            href="https://twitter.com/intent/tweet?text={{ include.article.title }}&url={{ include.article.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="social-icon social-icon--fill bg-brands-twitter text-white text-sm social-icon--4"
+          ><i class="ico--twitter"></i></a>
+        </div>
+      </div>
 
-      <!-- Authors -->
-      <span itemprop="author" itemtype="http://schema.org/Person" class="c-metadata-block-section__item" itemscope="">
-        <i class="fa fa-user" aria-hidden="true"></i>
-        <span itemprop="name">
-            {% include articles/author.html article=include.article %}
+      <div class="article-card-meta"  class="c-metadata-block-section__item" >
+        <span itemprop="description" class="article-card-meta__item">
+          {{ include.article.date | date: "%d.%m.%Y" }}
+          <meta itemprop="datePublished" content="{{ include.article.date | date_to_xmlschema }}" />
+        </span>
+        <span class="article-card-meta__item" itemprop="author" itemtype="http://schema.org/Person" itemscope="">
+          {% capture author_name %}
+            {% if include.article.authorId -%}
+              {% assign author = site.people | where_exp:"item","item.uid contains include.article.authorId" | first %}
+              {{ author.name }}
+            {%- else -%}
+              {{ include.article.author }}
+            {%- endif %}
+          {% endcapture %}
+          <span itemprop="name">{{ author_name }}</span>
         </span>
-      </span>
+      </div>
+
     </div>
   </div>
-
-  <div class="c-article-listing__content">
-    <!-- Headline -->
-    <h1 itemprop="headline" class="c-article-listing__headline t-h4">
-      <a class="c-headline-anchor" href="{{ include.article.url | relative_url }}" itemprop="url">{{ include.article.title }}</a>
-    </h1>
-    <p itemprop="description" class="c-article-listing__perex u-stacked t-font-features">{{ include.article.excerpt | truncatewords: 35 | strip_html }}</p>
-    <a class="c-emphasized-anchor u-stacked" href="{{ include.article.url | relative_url }}">Přečíst celý článek &rsaquo;</a>
+  <div class="card__body article-card__body">
+    <a href="{{ include.article.url | relative_url }}" {% if include.article.important %}class="hover:line-white"{% endif %}><h1 class="card-headline mb-4 {% if include.article.important %}text-white{% endif %}">{{ include.article.title }}</h1></a>
+    <p class="card-body-text flex-grow {% if include.article.important %}text-white{% endif %}">{{ include.article.excerpt | truncatewords: 35 | strip_html }}</p>
+    {% if include.article.tags %}
+      <div class="inline-block-nogap mt-4">
+        {% for tag in include.article.tags %}
+          {% capture tagUrl %}{{ tag | prepend: '/tags/#' | relative_url }}{% endcapture %}
+          {% capture tagClass %}article-card__category-button btn--condensed text-sm font-light {% if include.article.important %}btn--grey-700{% else %}btn--grey-125{% endif %}{% endcapture %}
+          {% include buttons/basic.html class=tagClass cta=tag href=tagUrl %}
+        {% endfor %}
+      </div>
+    {% endif %}
   </div>
 
-  <!-- Publisher -->
-  <div itemprop="publisher" itemtype="http://schema.org/Organization" class="u-hidden" itemscope="">
+  <div itemprop="publisher" itemtype="http://schema.org/Organization" class="hidden" itemscope="">
     <div itemprop="logo" itemtype="http://schema.org/ImageObject" itemscope="">
       <meta itemprop="url" content="{{ 'assets/img/brand/logo.svg' | relative_url }}">
     </div>

data/_includes/avatar.html

@@ -0,0 +1,9 @@
+{% if include.url %}
+  <a href="{{ include.url }}" class="avatar {% if include.class %}{{ include.class }}{% endif %}">
+    <img src="{{ include.src }}" alt="{{ include.alt }}" />
+  </a>
+{% else %}
+  <div class="avatar {% if include.class %}{{ include.class }}{% endif %}">
+    <img src="{{ include.src }}" alt="{{ include.alt }}" />
+  </div>
+{% endif %}

data/_includes/buttons/basic.html

@@ -0,0 +1,3 @@
+<{% if include.href %}a href="{{ include.href }}"{% else %}button{% endif %} class="btn {{ include.class }}"  {% if include.rel %}rel="{{ include.rel }}"{% endif %} {% if include.aria_label %}aria-label="{{ include.aria_label }}"{% endif %}>
+  <div class="btn__body {{ include.body_class }}">{{ include.cta }}</div>
+</{% if include.href %}a{% else %}button{% endif %}>

data/_includes/buttons/icon.html

@@ -0,0 +1,8 @@
+<{% if include.href %}a href="{{ include.href }}"{% else %}button{% endif %} class="btn btn--icon {{ include.class }}" {% if include.rel %}rel="{{ include.rel }}"{% endif %} {% if include.aria_label %}aria-label="{{ include.aria_label }}"{% endif %}>
+  <div class="btn__body-wrap">
+    <div class="btn__body {{ include.body_class }}">{{ include.cta }}</div>
+    <div class="btn__icon {{ include.icon_class }}">
+      <i class="{{ include.icon }}"></i>
+    </div>
+  </div>
+</{% if include.href %}a{% else %}button{% endif %}>

data/_includes/buttons/super.html

@@ -0,0 +1,4 @@
+<a href="{{ include.href }}" class="super-button {{ include.class }}"  {% if include.rel %}rel="{{ include.rel }}"{% endif %} {% if include.aria_label %}aria-label="{{ include.aria_label }}"{% endif %}>
+  <span class="super-button__body">{{ include.cta }}</span>
+  <i class="super-button__icon {{ include.icon }}"></i>
+</a>

data/_includes/calendar.html

@@ -0,0 +1,21 @@
+<div class="__js-root">
+  {% if site.env.GOOGLE_CALENDAR_APIKEY and include.calendarId %}
+    <ui-calendar-google-provider v-slot="{ events, onShowMore, hasMore }" :calendar-id="'{{ include.calendarId }}'" :api-key="'{{ site.env.GOOGLE_CALENDAR_APIKEY }}'">
+      <ui-calendar-renderer
+        :events="events"
+        :on-show-more="onShowMore"
+        :has-more="hasMore" :name="'{{ include.calendarTitle | default: 'Kalendář' }}'"
+        {% if include.hideBanner %}:show-banner="false"{% endif %}
+      ></ui-calendar-renderer>
+    </ui-calendar-google-provider>
+  {% else %}
+    {% if include.calendarPage %}
+      <iframe src="{{ include.calendarPage }}" 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="{{ include.calendarPage | relative_url }}">
+          <span class="btn__body">Zobrazit všechny akce</span>
+        </a>
+      </p>
+    {% endif %}
+  {% endif %}
+</div>

data/_includes/candidate-badge.html

@@ -1,27 +1,51 @@
-<div class="c-program-candidate-badge">
-  <a class="c-program-candidate-badge__body" href="{{ include.candidatePage.url | relative_url }}">
-      <span class="c-program-candidate-badge__rank"><span>{{ include.rank }}</span></span>
-      <div class="c-program-candidate-badge__avatar">
-          {% if include.candidatePage.img %}
-            {% if site.mediaStorage %}
-                {% capture img %}https://a.pirati.cz/resize/225x225/{{ site.mediaStorage }}/img/{{ include.candidatePage.img }}{% endcapture %}
-            {%- else -%}
-                {% capture img %}{% asset '{{ include.candidatePage.img }}' magick:resize='225x225^' magick:gravity='center' magick:crop='225x225+0+0' @path %}{% endcapture %}
-            {%- endif -%}
-          {% else %}
-            {% capture img %}https://a.pirati.cz/common/img/people/unknown-pirate.svg{% endcapture %}
-          {% endif %}
-          <img src="{{ img }}" alt="{% include people/fullname.html person=include.candidatePage plain=true %}" class="c-program-candidate-badge__avatar-image">
+<div class="candidate-card container-padding--zero sm:container-padding--auto {{ include.class }}">
+  <div class="candidate-card__wrapper {{ include.wrapperClass }}">
+    <div class="card candidate-card__body elevation-0 hover:elevation-10 transition duration-200">
+      <div class="candidate-card__avatar">
+        <div class="candidate-card__position">{{ include.rank }}</div>
+
+        {% if include.candidatePage.img %}
+          {% if site.mediaStorage %}
+              {% capture img %}https://a.pirati.cz/resize/225x225/{{ site.mediaStorage }}/img/{{ include.candidatePage.img }}{% endcapture %}
+          {%- else -%}
+              {% capture img %}{% asset '{{ include.candidatePage.img }}' magick:resize='225x225^' magick:gravity='center' magick:crop='225x225+0+0' @path %}{% endcapture %}
+          {%- endif -%}
+        {% else %}
+          {% capture img %}https://a.pirati.cz/common/img/people/unknown-pirate.svg{% endcapture %}
+        {% endif %}
+
+        {% capture img_alt %}{% include people/fullname.html person=include.candidatePage plain=true %}{% endcapture %}
+        {% include avatar.html url=include.candidatePage.url class="avatar--sm sm:avatar--lg" src=img alt=img_alt %}
       </div>
-      <div class="c-program-candidate-badge__description">
-          <h4 class="c-program-candidate-badge__name"><span class="c-headline-anchor">{% include people/fullname.html person=include.candidatePage %}</span></h4>
-          <strong class="c-program-candidate-badge__profession">
-              {% if include.candidate.age %} {{ include.candidate.age }} let, {% endif %}
-              {{ include.candidate.profession }}{% if include.candidate.party %}, {{ include.candidate.party }} {% endif %}
-          </strong>
-          {% if include.candidate.description %}
-          <p class="c-program-candidate-badge__bio">{{ include.candidate.description }}</p>
-          {% endif %}
+      <div class="candidate-card__bio">
+        <h1 class="head-heavy-xs">
+          <a href="{{ include.candidatePage.url|relative_url }}">{% include people/fullname.html person=include.candidatePage %}</a>
+        </h1>
+        {% if include.candidatePage.mail %}
+          <a href="mailto:{{ include.candidatePage.mail }}" class="block font-light mb-4">{{ include.candidatePage.mail }}</a>
+        {% endif %}
+        <h2 class="head-allcaps-4xs md:head-allcaps-3xs">{{ include.candidate.profession }}</h2>
       </div>
-  </a>
+      <div class="candidate-card__affiliation">
+        {% if include.candidate.age %}<div>{{ include.candidate.age }} let</div>{% endif %}
+
+        {% if include.candidate.party %}
+          <div>
+            {% if include.candidate.partyImg %}
+              {% comment %}We expect an SVG format here to make things scalable{% endcomment %}
+              {% capture partyImg %}{{ include.candidate.partyImg | prepend: "/assets/img/" | absolute_url }}{% endcapture %}
+              {% include avatar.html class="w-6 mr-2" alt=include.candidate.party src=partyImg %}
+            {% endif %}
+            <span class="font-bold font-condensed">{{ include.candidate.party }}</span>
+          </div>
+        {% endif %}
+      </div>
+      <div class="card__body candidate-card__social">
+        {% if include.candidate.description %}
+          <p class="font-light text-sm leading-snug italic mb-4 hidden md:block">{{ include.candidate.description }}</p>
+        {% endif %}
+        {% comment %} {{> molecules-basic-social-icon-group }} {% endcomment %}
+      </div>
+    </div>
+  </div>
 </div>

data/_includes/contact-line.html

@@ -0,0 +1,4 @@
+<{% if include.href %}a href="{{ include.href }}"{% else %}span{% endif %} class="contact-line icon-link {{ include.class }}" {% if include.target == "_blank" %}target="_blank" rel="noopener noreferrer"{% endif %}>
+  <i class="{{ include.icon }}"></i>
+  <span>{{ include.caption }}</span>
+</{% if include.href %}a{% else %}span{% endif %}>

data/_includes/contacts/residence.html

@@ -6,40 +6,26 @@
 {% endif  %}
 
 
-<div class="o-media">
-    {% if residence.residenceImg %}
-    	<div class="o-media__section">
-            {% asset '{{ residence.residenceImg }}' magick:resize='200x' alt='Sídlo' %}
-   	</div>
-    {% endif %}
-    <div class="o-media__section">
-	{% if residence.url %} 
-	    <a href="{{residence.url}}">
-               <h3 class="t-h5-super">{{ residence.name }}</h3>
-	    </a>
-        {% else  %}
-            <h3 class="t-h5-super">{{ residence.name }}</h3>
-        {% endif  %}
-        <p>
-	   {{ residence.address | newline_to_br }}
-	</p>
-        {% if residence.spravce %}
-           {% assign spravce = site.people | where_exp: "item","item.uid contains residence.spravce" | first %}
-           <p>
-           <div>
-	   Kontakt: 
-	   {{ spravce.name }},
-              <i class="fa fa-envelope-o"></i> 
-              <a class="c-emphasized-anchor" href="mailto:{{ include.item.mail }}">
-                  {{ spravce.mail }}
-              </a>
-	   </div>
-	</p>
-        {% endif %}
-        {% if residence.mapLink %}
-          <p>
-            <a class="c-emphasized-anchor" href="{{ site.organization.mapLink }}">Zobrazit mapu ›</a>
-          </p>
-        {% endif %}
-    </div>
-</div>
+{% if residence.residenceImg %}
+  <div class="mb-2">
+    {% asset '{{ residence.residenceImg }}' magick:resize='400x' alt='Sídlo' class="w-full" %}
+  </div>
+{% endif %}
+
+{% if residence.url %}
+  <a href="{{ residence.url }}"><strong>{{ residence.name }}</strong></a>
+{% else  %}
+  <strong>{{ residence.name }}</strong>
+{% endif  %}
+
+<p>
+  {{ residence.address | newline_to_br }}
+</p>
+
+{% if residence.spravce %}
+  {% assign spravce = site.people | where_exp: "item","item.uid contains residence.spravce" | first %}
+  {% include people/profile-badge.html item=spravce %}
+{% endif %}
+{% if residence.mapLink %}
+  {% include buttons/icon.html href=site.organization.mapLink icon="ico--map" class="btn--fullwidth" cta="Zobrazit mapu" %}
+{% endif %}