Add elections program page

source/_patterns/01-molecules/02-article-card/article-card.mustache

-<article class="card article-card {{ classes }}">
+<article class="card card--hoveractive article-card {{ classes }}">
   <div class="article-card-cover">
     <a href="#href">
       <img src="{{ img.landscape-16x9.src }}" />
@@ -14,8 +14,8 @@
     </div>
   </div>
   <div class="card__body article-card__body">
-    <a href="#"><h1 class="article-card__headline">{{ headline.medium }}</h1></a>
-    <p class="article-card__excerpt">{{ excerpt.long }}</p>
+    <a href="#"><h1 class="card-headline mb-4">{{ headline.medium }}</h1></a>
+    <p class="card-body-text flex-grow">{{ excerpt.long }}</p>
     <div class="inline-block-nogap mt-4">
       {{> atoms-basic-button(classes: "article-card__category-button btn--grey-125 btn--condensed text-sm font-light", cta: "Kategorie 1") }}
       {{> atoms-basic-button(classes: "article-card__category-button btn--grey-125 btn--condensed text-sm font-light", cta: "Kategorie 2") }}

source/_patterns/01-molecules/02-article-card/emphasized-article-card.mustache

-<article class="card article-card bg-black {{ classes }}">
+<article class="card card--hoveractive article-card bg-black {{ classes }}">
   <div class="article-card-cover">
     <a href="#href">
       <img src="{{ img.landscape-16x9.src }}" />
@@ -14,8 +14,8 @@
     </div>
   </div>
   <div class="card__body article-card__body">
-    <a href="#" class="hover:line-white"><h1 class="article-card__headline text-white">{{ headline.medium }}</h1></a>
-    <p class="article-card__excerpt text-white">{{ excerpt.long }}</p>
+    <a href="#" class="hover:line-white"><h1 class="card-headline mb-4 text-white">{{ headline.medium }}</h1></a>
+    <p class="card-body-text flex-grow text-white">{{ excerpt.long }}</p>
     <div class="inline-block-nogap mt-4">
       {{> atoms-basic-button(classes: "article-card__category-button btn--grey-800 btn--condensed text-sm font-light", cta: "Kategorie 1") }}
       {{> atoms-basic-button(classes: "article-card__category-button btn--grey-800 btn--condensed text-sm font-light", cta: "Kategorie 2") }}

source/_patterns/01-molecules/switch/binary-switch.mustache

 <div class="switch">
-  <a class="switch__item switch__item--active">{{ cta1 }}{{^ cta1 }}{{ cta }}{{/ cta1 }}</a>
-  <a class="switch__item">{{ cta2 }}{{^ cta2 }}{{ cta }}{{/ cta2 }}</a>
+  <a class="switch__item {{^ secondActive }}switch__item--active{{/ secondActive }}">{{ cta1 }}{{^ cta1 }}{{ cta }}{{/ cta1 }}</a>
+  <a class="switch__item {{# secondActive }}switch__item--active{{/ secondActive }}">{{ cta2 }}{{^ cta2 }}{{ cta }}{{/ cta2 }}</a>
 </div>

source/_patterns/03-templates/elections-main.mustache

-{{> organisms-header }}
-
-<article class="hero hero--image py-16 {{ classes }}" style="--image-url: url({{ img.landscape-16x9-fullhd.src }})">
-  <div class="container container--default grid lg:grid-rows-3 lg:grid-cols-7 gap-2 items-center">
-    <div class="lg:row-span-2 lg:col-span-3 order-1">
-      {{> atoms-basic-flag(font: "bg-green-100 text-white head-alt-base", cta: "Volte č. 2", classes: "mb-6") }}
-      <h1 class="head-alt-md md:head-alt-xl">Krajské volby 2020</h1>
-    </div>
-    <div class="lg:row-span-1 lg:col-span-3 order-3">
-      <div class="mt-4 md:mt-8 space-y-4">
-        {{> atoms-basic-button(classes: "btn--white btn--hoveractive btn--fullwidth md:btn--autowidth text-lg") }}
-        {{> atoms-basic-button(classes: "btn--white btn--hoveractive btn--fullwidth md:btn--autowidth text-lg") }}
-      </div>
-    </div>
-    <div class="lg:row-span-3 lg:col-span-4 order-2">
-      <img src="/images/hero-profile-img.png" />
-    </div>
-  </div>
-</article>
-
-<div class="container container--default pb-24 pt-24">
-  <div class="text-center">
-    {{> molecules-binary-switch(cta1: "Kandidáti", cta2: "Program") }}
-  </div>
-
-  <h1 class="head-alt-md text-center pt-24 pb-8">Kandidátka do krajských voleb</h1>
-
-  <div class="candidate-card-list grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
-    {{> molecules-candidate-card(wrapperClasses: "sm:candidate-card-list__item-wrapper") }}
-    {{> molecules-candidate-card(wrapperClasses: "sm:candidate-card-list__item-wrapper sm:candidate-card-list__item-wrapper--noborder md:candidate-card-list__item-wrapper--border") }}
-    {{> molecules-candidate-card(wrapperClasses: "sm:candidate-card-list__item-wrapper md:candidate-card-list__item-wrapper--noborder lg:candidate-card-list__item-wrapper--border") }}
-    {{> molecules-candidate-card(wrapperClasses: "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") }}
-    {{> molecules-candidate-card(wrapperClasses: "sm:candidate-card-list__item-wrapper md:candidate-card-list__item-wrapper--border") }}
-    {{> molecules-candidate-card(wrapperClasses: "sm:candidate-card-list__item-wrapper sm:candidate-card-list__item-wrapper--noborder lg:candidate-card-list__item-wrapper--border") }}
-    {{> molecules-candidate-card(wrapperClasses: "sm:candidate-card-list__item-wrapper") }}
-    {{> molecules-banner(color: "bg-black", fullwidthButton: true)}}
-  </div>
-
-  <div class="candidate-table candidate-table--fadeout pt-8">
-    {{> molecules-candidate-table-row }}
-    {{> molecules-candidate-table-row }}
-    {{> molecules-candidate-table-row }}
-    {{> molecules-candidate-table-row }}
-    {{> molecules-candidate-table-row }}
-    {{> molecules-candidate-table-row }}
-    {{> molecules-candidate-table-row }}
-    {{> molecules-candidate-table-row }}
-    {{> molecules-candidate-table-row }}
-    {{> molecules-candidate-table-row }}
-  </div>
-
-  <div class="text-center pt-8">
-    {{> atoms-icon-button(cta: "Zobrazit vše", classes: "text-xl btn--black btn--hoveractive", icon: "fas fa-chevron-right") }}
-  </div>
-
-  <div class="flex flex-col pt-24 space-y-8 md:space-y-0 md:flex-row md:space-x-8">
-    {{> atoms-super-button(cta: "Povolební strategie", icon: "fa fa-chess", classes: "bg-grey-125 hover:bg-black hover:text-white w-full") }}
-    {{> atoms-super-button(cta: "Financování kampaně", icon: "fa fa-calculator", classes: "bg-black text-white hover:bg-grey-125 hover:text-black w-full") }}
-  </div>
-</div>
-
-
-{{> organisms-footer }}

source/css/atoms/card.pcss

@@ -5,3 +5,19 @@
 .card__body {
   @apply p-8;
 }
+
+.card--hoveractive {
+  @apply transition duration-200;
+
+  &:hover {
+    @apply elevation-21;
+  }
+}
+
+.card-headline {
+  @apply text-xl font-condensed font-bold leading-tight break-words;
+}
+
+.card-body-text {
+  @apply font-light leading-normal text-sm break-words ;
+}

source/css/molecules/article-card.pcss

 .article-card {
   /* Use flexbox to grow the excerpt to max height (align category buttons at the bottom) */
-  @apply flex flex-col h-full elevation-3 transition duration-200;
-
-  &:hover {
-    @apply elevation-21;
-  }
+  @apply flex flex-col h-full;
 }
 
 .article-card-cover {
@@ -52,14 +48,6 @@
   @apply flex flex-col h-full p-4;
 }
 
-.article-card__headline {
-  @apply text-xl font-condensed font-bold leading-tight mb-4 break-words;
-}
-
-.article-card__excerpt {
-  @apply font-light leading-normal text-sm break-words flex-grow;
-}
-
 .article-card__category-button {
   @apply mr-1 mb-1;
 }