From 9e5609e452c19a46907f6477a3da33321830f298 Mon Sep 17 00:00:00 2001
From: xaralis <filip.varecha@fragaria.cz>
Date: Fri, 6 May 2022 08:45:11 +0200
Subject: [PATCH] feat: improve hero banners + add elections hero with multiple
candidacies
---
...ections-hero-multiple-candidacies.mustache | 35 +++++++++++++++++++
.../03-hero/elections-hero.mustache | 6 ++--
.../02-organisms/03-hero/hero.mustache | 2 +-
.../02-organisms/03-hero/home-hero.mustache | 4 +--
.../02-organisms/03-hero/image-hero.mustache | 6 ++--
5 files changed, 44 insertions(+), 9 deletions(-)
create mode 100644 source/_patterns/02-organisms/03-hero/elections-hero-multiple-candidacies.mustache
diff --git a/source/_patterns/02-organisms/03-hero/elections-hero-multiple-candidacies.mustache b/source/_patterns/02-organisms/03-hero/elections-hero-multiple-candidacies.mustache
new file mode 100644
index 0000000..8a9260f
--- /dev/null
+++ b/source/_patterns/02-organisms/03-hero/elections-hero-multiple-candidacies.mustache
@@ -0,0 +1,35 @@
+<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 text-center md:text-left">
+ <div class="lg:row-span-2 lg:col-span-3 order-1">
+ {{> atoms-basic-flag(font: "bg-violet-400 text-white head-alt-base", cta: "Volte ÄŤ. 2", classes: "mb-6") }}
+ <h1 class="head-alt-md md:head-alt-xl text-shadow-lg">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 md:space-x-2 md:space-y-0">
+ {{> 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" class="h-32 lg:h-80 lg:m-auto hidden md:block object-contain" />
+ </div>
+ </div>
+ <div class="container container--default text-white text-center md:text-left">
+ <hr class="hr--big opacity-25" />
+ <div class="leading-loose grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 text-shadow-lg text-base md:text-sm">
+ <span><a href="#" class="font-bold">Radnice</a></span>
+ <span><a href="#">Praha 1</a></span>
+ <span><a href="#">Praha 2</a></span>
+ <span><a href="#">Praha 3</a></span>
+ <span><a href="#">Praha 4</a></span>
+ <span><a href="#">Praha 5</a></span>
+ <span><a href="#">Praha 6</a></span>
+ <span><a href="#">Praha 7</a></span>
+ <span><a href="#">Praha 8</a></span>
+ <span><a href="#">Praha 9</a></span>
+ <span><a href="#">Praha 10</a></span>
+ <span><a href="#">Praha 11</a></span>
+ <span><a href="#">Praha 12</a></span>
+ </div>
+ </div>
+</article>
diff --git a/source/_patterns/02-organisms/03-hero/elections-hero.mustache b/source/_patterns/02-organisms/03-hero/elections-hero.mustache
index 18795ee..2883732 100644
--- a/source/_patterns/02-organisms/03-hero/elections-hero.mustache
+++ b/source/_patterns/02-organisms/03-hero/elections-hero.mustache
@@ -1,11 +1,11 @@
<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="container container--default grid lg:grid-rows-3 lg:grid-cols-7 gap-2 items-center text-center md:text-left">
<div class="lg:row-span-2 lg:col-span-3 order-1">
{{> atoms-basic-flag(font: "bg-violet-400 text-white head-alt-base", cta: "Volte ÄŤ. 2", classes: "mb-6") }}
- <h1 class="head-alt-md md:head-alt-xl">Krajské volby 2020</h1>
+ <h1 class="head-alt-md md:head-alt-xl text-shadow-lg">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">
+ <div class="mt-4 md:mt-8 space-y-4 md:space-x-2 md:space-y-0">
{{> 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>
diff --git a/source/_patterns/02-organisms/03-hero/hero.mustache b/source/_patterns/02-organisms/03-hero/hero.mustache
index e8bc00f..453c172 100644
--- a/source/_patterns/02-organisms/03-hero/hero.mustache
+++ b/source/_patterns/02-organisms/03-hero/hero.mustache
@@ -1,5 +1,5 @@
<article class="hero {{ classes }}">
- <div class="container grid lg:grid-rows-5 lg:grid-cols-7 gap-2 items-center">
+ <div class="container grid lg:grid-rows-5 lg:grid-cols-7 gap-2 items-center text-center md:text-left">
<div class="lg:row-span-4 lg:col-span-3 order-1">
<h1 class="head-alt-md sm:head-alt-lg md:head-alt-xl">{{ claim }}{{^ claim }}Piráti<br>Pardubického<br>kraje{{/ claim }}</h1>
</div>
diff --git a/source/_patterns/02-organisms/03-hero/home-hero.mustache b/source/_patterns/02-organisms/03-hero/home-hero.mustache
index 695d522..025e304 100644
--- a/source/_patterns/02-organisms/03-hero/home-hero.mustache
+++ b/source/_patterns/02-organisms/03-hero/home-hero.mustache
@@ -1,10 +1,10 @@
<article class="hero py-8 lg:py-16 {{ classes }}">
- <div class="container container--default grid lg:grid-rows-3 lg:grid-cols-7 gap-2 items-center">
+ <div class="container container--default grid lg:grid-rows-3 lg:grid-cols-7 gap-2 items-center text-center md:text-left">
<div class="lg:row-span-2 lg:col-span-3 order-1">
<h1 class="head-alt-md md:head-alt-xl">Piráti Pardubického kraje</h1>
</div>
<div class="lg:row-span-1 lg:col-span-3 order-3">
- <div class="mt-4 md:mt-8 space-y-4">
+ <div class="mt-4 md:mt-8 space-y-4 md:space-x-2 md:space-y-0">
{{> atoms-icon-button(icon: "ico--chevron-right", classes: "btn--hoveractive btn--fullwidth md:btn--autowidth text-lg") }}
</div>
</div>
diff --git a/source/_patterns/02-organisms/03-hero/image-hero.mustache b/source/_patterns/02-organisms/03-hero/image-hero.mustache
index c3547df..aea611d 100644
--- a/source/_patterns/02-organisms/03-hero/image-hero.mustache
+++ b/source/_patterns/02-organisms/03-hero/image-hero.mustache
@@ -1,10 +1,10 @@
<article class="hero hero--image {{ classes }}" style="--image-url: url({{ img.landscape-16x9-fullhd.src }})">
- <div class="container grid lg:grid-rows-5 lg:grid-cols-7 gap-2 items-center">
+ <div class="container grid lg:grid-rows-5 lg:grid-cols-7 gap-2 items-center text-center md:text-left">
<div class="lg:row-span-4 lg:col-span-3 order-1">
- <h1 class="head-alt-md md:head-alt-xl">{{ claim }}{{^ claim }}{{ headline.medium }}{{/ claim }}</h1>
+ <h1 class="head-alt-md md:head-alt-xl text-shadow-lg">{{ claim }}{{^ claim }}{{ headline.medium }}{{/ claim }}</h1>
</div>
<div class="lg:row-span-1 lg:col-span-3 order-3">
- <div class="mt-4 md:mt-8 space-y-4">
+ <div class="mt-4 md:mt-8 space-y-4 md:space-x-2 md:space-y-0">
{{> atoms-basic-button(classes: "btn--white btn--fullwidth md:btn--autowidth text-lg") }}
{{> atoms-basic-button(classes: "btn--white btn--fullwidth md:btn--autowidth text-lg") }}
</div>
--
GitLab