Add contact page

source/_patterns/01-molecules/00-badge/basic-badge.mustache

 <div class="badge {{ classes }}">
-  {{> atoms-basic-avatar(classes: "avatar--md") }}
+  {{^ hideAvatar }}
+    {{> atoms-basic-avatar(classes: "avatar--md badge__avatar") }}
+  {{/ hideAvatar}}
   <div class="badge__body">
-    <span class="head-heavy-sm">{{ person.first }} {{ person.last }}</span>
+    <span class="head-heavy-xs">{{ person.first }} {{ person.last }}</span>
+    {{^ hideOccupation }}
       <p class="badge__occupation">{{ occupation }}{{^ occupation }}{{ person.occupation }}{{/ occupation }}</p>
+    {{/ hideOccupation}}
     {{> atoms-responsive-contact-line(icon: "fas fa-phone", caption: "+420 777 123 123", classes: "badge__link") }}
     {{> atoms-responsive-contact-line(icon: "fas fa-envelope", classes: "badge__link") }}
   </div>

source/_patterns/01-molecules/00-badge/condensed-badge.mustache

 <div class="badge badge--condensed {{ classes }}">
-  {{> atoms-basic-avatar(classes: "avatar--sm") }}
+  {{> atoms-basic-avatar(classes: "avatar--sm badge__avatar") }}
   <div class="badge__body">
     <span class="head-heavy-xs badge__title">{{ person.first }} {{ person.last }}</span>
     {{^ hideOccupation }}

source/_patterns/01-molecules/00-badge/no-avatar-badge.mustache

+{{> molecules-basic-badge(hideAvatar: true) }}

source/_patterns/01-molecules/subsidiary-card/subsidiary-card.mustache

+<article class="card elevation-0 bg-grey-50">
+  <div class="card__body flex space-x-8 items-start">
+    <img src="/images/city-banner.png" />
+    <div class="space-y-4 flex-grow">
+      <div>
+        <h1 class="head-alt-base mb-2"><a href="#">Svitavy</a></h1>
+        <div class="flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-4">
+          {{> atoms-responsive-contact-line(icon: "fas fa-envelope", caption: "svitavsko@pirati.cz", classes: "font-light") }}
+          {{> atoms-contact-line(icon: "fab fa-facebook-f text-brands-facebook", caption: "Svitavsko", classes: "font-light") }}
+        </div>
+      </div>
+      {{> molecules-basic-badge(hideAvatar: true, hideOccupation: true) }}
+    </div>
+    <div class="hidden md:block">
+      <a href="#"><i class="fas fa-chevron-right text-3xl"></i></a>
+    </div>
+  </div>
+</article>

source/_patterns/03-templates/contact.mustache

+{{> organisms-header }}
+
+<div class="container container--default py-8 lg:py-24">
+  <article class="space-y-16">
+    <div class="lg:flex mt-8 space-y-16 lg:space-y-0 lg:space-x-8 xl:space-x-16">
+      <section class="lg:w-3/5 xl:w-2/3">
+        <h1 class="head-alt-md md:head-alt-lg max-w-5xl mb-8">Kontaktní informace</h1>
+
+        <div class="space-y-8">
+          <div>
+            <h2 class="head-heavy-sm mb-2 lg:mb-4">Předseda krajského sdružení</h2>
+            <div class="card elevation-3">
+              <div class="card__body">
+                {{> molecules-basic-badge }}
+              </div>
+            </div>
+          </div>
+          <div>
+            <h2 class="head-heavy-sm mb-2 lg:mb-4">Kontakt pro novináře</h2>
+            <div class="card elevation-3">
+              <div class="card__body">
+                {{> molecules-basic-badge }}
+              </div>
+            </div>
+          </div>
+          <div>
+            <h2 class="head-heavy-sm mb-2 lg:mb-4">Kontakt pro dobrovolníky</h2>
+            <div class="card elevation-3">
+              <div class="card__body">
+                {{> molecules-basic-badge }}
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+      <section class="lg:w-2/5 xl:w-1/3 lg:pt-0">
+        <div class="card elevation-10">
+          <div class="card__body content-block">
+            <h2>Základní údaje</h2>
+            <div class="space-y-4">
+              <div>
+                <h6>Emailová adresa</h6>
+                {{> atoms-contact-line(icon: "fas fa-envelope") }}
+              </div>
+              <div>
+                <h6>Podatelna</h6>
+                {{> atoms-contact-line(icon: "fas fa-envelope") }}
+              </div>
+              <div>
+                <h6>Telefon</h6>
+                {{> atoms-contact-line(icon: "fas fa-phone", cta: "+420 777 123 123") }}
+              </div>
+            </div>
+            <hr class="hr">
+            <h2>Sídlo a kontaktní centrum</h2>
+            <p>
+              <strong>Piráti Pardubický kraj</strong><br>
+              Budova T-STRING<br>
+              Masarykovo náměstí 1484<br>
+              530 02 Pardubice I
+            </p>
+            {{> atoms-icon-button(cta: "Pirátské centrum", icon: "fas fa-chevron-right", classes: "btn--black btn--hoveractive btn--fullwidth md:btn--autowidth") }}
+          </div>
+        </div>
+      </section>
+    </div>
+    <section>
+      <h1 class="head-alt-md md:head-alt-lg max-w-5xl mb-4">Místní sdružení</h1>
+
+      <div class="grid grid-cols-1 lg:grid-cols-2 gap-4 lg:gap-8">
+        {{> molecules-subsidiary-card }}
+        {{> molecules-subsidiary-card }}
+        {{> molecules-subsidiary-card }}
+        {{> molecules-subsidiary-card }}
+      </div>
+    </section>
+
+    <div class="flex flex-col lg:flex-row space-y-4 lg:space-y-0 lg:space-x-8">
+      {{> atoms-super-button(cta: "Sledujte nás na Facebooku", icon: "fab fa-facebook", classes: "bg-brands-facebook text-white w-full") }}
+      {{> atoms-super-button(cta: "Sledujte naše fórum", icon: "fa fa-comments", classes: "bg-black text-white w-full") }}
+    </div>
+  </article>
+</div>
+
+{{> organisms-footer }}

source/_patterns/03-templates/election-program-point.mustache

 {{> organisms-header }}
 
 <div class="container container--default py-8 lg:py-24">
-  <article>
+  <main>
     <div class="lg:flex mt-8 lg:space-x-8 xl:space-x-16">
-      <div class="lg:w-3/5 xl:w-2/3">
+      <section class="lg:w-3/5 xl:w-2/3">
         <h1 class="head-alt-md md:head-alt-lg max-w-5xl mb-4">Řízení a organizační struktura města</h1>
         <p class="font-bold text-lg leading-normal mb-8">{{ excerpt.medium }}</p>
         {{> molecules-content-block(classes: "w-full", noStartHeadline: true) }}
-      </div>
-      <div class="pt-8 lg:w-2/5 xl:w-1/3 lg:pt-0">
+      </section>
+      <section class="pt-8 lg:w-2/5 xl:w-1/3 lg:pt-0">
         <div class="card elevation-10">
           <div class="card__body">
-            {{> molecules-basic-badge(occupation: "Garant programového bodu") }}
+            {{> molecules-basic-badge(occupation: "Garant") }}
             <hr class="hr--condensed">
             <div class="content-block">
               <h2>Volby</h2>
@@ -31,9 +31,9 @@
             </div>
           </div>
         </div>
+      </section>
     </div>
-    </div>
-  </article>
+  </main>
 </div>
 
 {{> organisms-footer }}

source/css/atoms/contact-line.pcss

@@ -3,7 +3,7 @@
     @apply mr-2;
   }
 
-  &.contanct-line--responsive {
+  &.contact-line--responsive {
     i {
       @apply hidden;
 

source/css/atoms/heading.pcss

 @responsive {
-  .head-alt-xl {
+  .head-alt-xl,
+  .content-block .head-alt-xl {
     @apply text-7xl font-alt font-normal leading-negative;
   }
 
-  .head-alt-lg {
+  .head-alt-lg,
+  .content-block .head-alt-lg {
     @apply text-6xl font-alt font-normal leading-negative;
   }
 
-  .head-alt-md {
+  .head-alt-md,
+  .content-block .head-alt-md {
     @apply text-4xl font-alt font-normal leading-negative;
   }
 
-  .head-alt-base {
+  .head-alt-base,
+  .content-block .head-alt-base {
     @apply text-3xl font-alt font-normal leading-negative;
   }
 
-  .head-alt-sm {
+  .head-alt-sm,
+  .content-block .head-alt-sm {
     @apply text-2xl font-alt font-normal leading-negative;
   }
 
-  .head-alt-xs {
+  .head-alt-xs,
+  .content-block .head-alt-xs {
     @apply text-xl font-alt font-normal leading-negative;
   }
 
-  .head-alt-2xs {
+  .head-alt-2xs,
+  .content-block .head-alt-2xs {
     @apply text-lg font-alt font-normal leading-negative;
   }
 
 
 
-  .head-base {
+  .head-base,
+  .content-block .head-base {
     @apply text-3xl font-condensed font-medium leading-tight;
   }
 
-  .head-sm {
+  .head-sm,
+  .content-block .head-sm {
     @apply text-2xl font-condensed font-medium leading-tight;
   }
 
-  .head-xs {
+  .head-xs,
+  .content-block .head-xs {
     @apply text-xl font-condensed font-medium leading-tight;
   }
 
-  .head-2xs {
+  .head-2xs,
+  .content-block .head-2xs {
     @apply text-lg font-condensed font-medium leading-tight;
   }
 
 
 
-  .head-heavy-base {
+  .head-heavy-base,
+  .content-block .head-heavy-base {
     @apply text-3xl font-condensed font-bold leading-tight;
   }
 
-  .head-heavy-sm {
+  .head-heavy-sm,
+  .content-block .head-heavy-sm {
     @apply text-2xl font-condensed font-bold leading-tight;
   }
 
-  .head-heavy-xs {
+  .head-heavy-xs,
+  .content-block .head-heavy-xs {
     @apply text-xl font-condensed font-bold leading-tight;
   }
 
-  .head-heavy-2xs {
+  .head-heavy-2xs,
+  .content-block .head-heavy-2xs {
     @apply text-lg font-condensed font-bold leading-tight;
   }
 
 
 
-  .head-allcaps-2xs {
-    @apply text-lg font-condensed uppercase leading-tight;
+  .head-allcaps-2xs,
+  .content-block .head-allcaps-2xs {
+    @apply text-lg font-condensed font-normal uppercase leading-tight;
   }
 
-  .head-allcaps-3xs {
-    @apply text-base font-condensed uppercase leading-tight;
+  .head-allcaps-3xs,
+  .content-block .head-allcaps-3xs {
+    @apply text-base font-condensed font-normal uppercase leading-tight;
   }
 
-  .head-allcaps-4xs {
-    @apply text-sm font-condensed uppercase leading-tight;
+  .head-allcaps-4xs,
+  .content-block .head-allcaps-4xs {
+    @apply text-sm font-condensed font-normal uppercase leading-tight;
   }
 
 
 
 
-  .head-allcaps-heavy-2xs {
+  .head-allcaps-heavy-2xs,
+  .content-block .head-allcaps-heavy-2xs {
     @apply text-lg font-condensed font-bold uppercase leading-tight;
   }
 
-  .head-allcaps-heavy-3xs {
+  .head-allcaps-heavy-3xs,
+  .content-block .head-allcaps-heavy-3xs {
     @apply text-base font-condensed font-bold uppercase leading-tight;
   }
 
-  .head-allcaps-heavy-4xs {
+  .head-allcaps-heavy-4xs,
+  .content-block .head-allcaps-heavy-4xs {
     @apply text-sm font-condensed font-bold uppercase leading-tight;
   }
 }

source/css/molecules/article-card.pcss

@@ -53,7 +53,7 @@
 }
 
 .article-card__headline {
-  @apply head-heavy-xs mb-4 break-words;
+  @apply text-xl font-condensed font-bold leading-tight mb-4 break-words;
 }
 
 .article-card__excerpt {

source/css/molecules/badge.pcss

 .badge {
   @apply flex items-center font-body;
 
+  .badge__avatar {
+    @apply mr-6;
+  }
+
   .badge__body {
-    @apply text-left ml-6;
+    @apply text-left;
   }
 
   .badge__title {
@@ -10,7 +14,7 @@
   }
 
   .badge__occupation {
-    @apply uppercase text-sm max-w-sm my-2;
+    @apply uppercase text-sm max-w-sm my-1;
   }
 
   .badge__link {
@@ -23,8 +27,8 @@
 }
 
 .badge.badge--condensed {
-  .badge__body {
-    @apply ml-4;
+  .badge__avatar {
+    @apply mr-4;
   }
 
   .badge__occupation {

source/css/molecules/content-block.pcss

@@ -6,11 +6,17 @@
     @apply font-condensed font-bold leading-tight;
   }
 
+  h5,
+  h6 {
+    @apply font-condensed uppercase leading-tight;
+  }
+
   h1,
   h2,
   h3,
   h4,
-  h5 {
+  h5,
+  h6 {
     margin-bottom: .5em;
 
     &:not(:first-child) {
@@ -35,7 +41,11 @@
   }
 
   h5 {
-    @apply text-base font-condensed uppercase leading-tight;
+    @apply text-base;
+  }
+
+  h6 {
+    @apply text-sm;
   }
 
   p, ul, ol {

tailwind.config.js

@@ -42,6 +42,7 @@ module.exports = {
       condensed: ['Roboto Condensed', 'Helvetica', 'Arial', 'sans-serif'],
     },
     fontSize: {
+      '2xs': '.65rem',
       'xs': '.75rem',
       'sm': '.875rem',
       'base': '1rem',