Add super buttons

source/_patterns/00-atoms/super-buttons/super-button-color-variants.mustache

+{{> atoms-super-button(classes: "bg-grey-125") }}
+{{> atoms-super-button(classes: "bg-black text-white") }}
+{{> atoms-super-button(classes: "bg-brands-facebook text-white") }}

source/_patterns/00-atoms/super-buttons/super-button-hover-effects.mustache

+{{> atoms-super-button(classes: "bg-grey-125 hover:bg-black hover:text-white") }}

source/_patterns/00-atoms/super-buttons/super-button.mustache

+<a href="#" class="super-button {{ classes }}">
+  <span class="super-button__body">{{ cta }}</span>
+  <i class="super-button__icon {{ icon }}"></i>
+</a>

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

@@ -52,6 +52,11 @@
   <div class="text-center pt-4">
     {{> atoms-icon-button(cta: "Zobrazit vše", classes: "text-xl btn--black btn--hoveractive", icon: "fas fa-chevron-right") }}
   </div>
+
+  <div class="flex space-x-4 pt-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>
 
 

source/css/atoms/super-button.pcss

+.super-button {
+  @apply inline-flex font-alt text-4xl py-4 px-3 transition duration-200;
+
+  &:hover {
+    @apply no-underline;
+  }
+}
+
+.super-button__body {
+  @apply flex-grow;
+}
+
+.super-button__icon {
+  @apply ml-4;
+}

source/css/style.pcss

@@ -24,6 +24,7 @@
 @import "./atoms/heading.pcss";
 @import "./atoms/paragraph.pcss";
 @import "./atoms/social-icon.pcss";
+@import "./atoms/super-button.pcss";
 
 @import "./molecules/article-card.pcss";
 @import "./molecules/badge.pcss";