From f6ea9459c1a6548037693dd03a2360d8aef255e4 Mon Sep 17 00:00:00 2001
From: xaralis <filip.varecha@fragaria.cz>
Date: Fri, 6 May 2022 09:11:20 +0200
Subject: [PATCH] refactor: fine-tune hero banners
---
...lections-hero-multiple-candidacies.mustache | 8 ++++----
.../03-hero/elections-hero.mustache | 8 ++++----
.../02-organisms/03-hero/hero.mustache | 2 +-
.../02-organisms/03-hero/home-hero.mustache | 4 ++--
.../02-organisms/03-hero/image-hero.mustache | 18 +++++-------------
source/css/organisms/hero.pcss | 10 +++++++++-
6 files changed, 25 insertions(+), 25 deletions(-)
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
index 8a9260f..16d953d 100644
--- a/source/_patterns/02-organisms/03-hero/elections-hero-multiple-candidacies.mustache
+++ b/source/_patterns/02-organisms/03-hero/elections-hero-multiple-candidacies.mustache
@@ -2,12 +2,12 @@
<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>
+ <h1 class="head-alt-lg 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 class="mt-4 md:mt-8 space-y-4 md:space-x-2 md:space-y-0 text-center md:text-left">
+ {{> atoms-basic-button(classes: "block md:inline-block m-auto btn--white btn--hoveractive btn--autowidth text-base md:text-lg") }}
+ {{> atoms-basic-button(classes: "block md:inline-block m-auto btn--white btn--hoveractive btn--autowidth text-base md:text-lg") }}
</div>
</div>
<div class="lg:row-span-3 lg:col-span-4 order-2">
diff --git a/source/_patterns/02-organisms/03-hero/elections-hero.mustache b/source/_patterns/02-organisms/03-hero/elections-hero.mustache
index 2883732..47106b9 100644
--- a/source/_patterns/02-organisms/03-hero/elections-hero.mustache
+++ b/source/_patterns/02-organisms/03-hero/elections-hero.mustache
@@ -2,12 +2,12 @@
<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>
+ <h1 class="head-alt-lg 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 class="mt-4 md:mt-8 space-y-4 md:space-x-2 md:space-y-0 text-center md:text-left">
+ {{> atoms-basic-button(classes: "block md:inline-block m-auto btn--white btn--hoveractive btn--autowidth text-base md:text-lg") }}
+ {{> atoms-basic-button(classes: "block md:inline-block m-auto btn--white btn--hoveractive btn--autowidth text-base md:text-lg") }}
</div>
</div>
<div class="lg:row-span-3 lg:col-span-4 order-2">
diff --git a/source/_patterns/02-organisms/03-hero/hero.mustache b/source/_patterns/02-organisms/03-hero/hero.mustache
index 453c172..2837d47 100644
--- a/source/_patterns/02-organisms/03-hero/hero.mustache
+++ b/source/_patterns/02-organisms/03-hero/hero.mustache
@@ -5,7 +5,7 @@
</div>
<div class="lg:row-span-1 lg:col-span-3 order-3">
<div class="mt-4 md:mt-8">
- {{> atoms-icon-button(classes: "btn--black btn--hoveractive btn--fullwidth md:btn--autowidth text-lg", icon: "ico--chevron-right") }}
+ {{> atoms-icon-button(classes: "btn--black block md:inline-block m-auto btn--hoveractive btn--autowidth text-base md:text-lg", icon: "ico--chevron-right") }}
</div>
</div>
<div class="lg:row-span-5 lg:col-span-4 order-2">
diff --git a/source/_patterns/02-organisms/03-hero/home-hero.mustache b/source/_patterns/02-organisms/03-hero/home-hero.mustache
index 025e304..7d5dad5 100644
--- a/source/_patterns/02-organisms/03-hero/home-hero.mustache
+++ b/source/_patterns/02-organisms/03-hero/home-hero.mustache
@@ -1,11 +1,11 @@
<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 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>
+ <h1 class="head-alt-lg 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 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") }}
+ {{> atoms-icon-button(icon: "ico--chevron-right", classes: "block md:inline-block m-auto btn--hoveractive btn--autowidth text-base md:text-lg") }}
</div>
</div>
<div class="lg:row-span-3 lg:col-span-4 order-2">
diff --git a/source/_patterns/02-organisms/03-hero/image-hero.mustache b/source/_patterns/02-organisms/03-hero/image-hero.mustache
index aea611d..c68a555 100644
--- a/source/_patterns/02-organisms/03-hero/image-hero.mustache
+++ b/source/_patterns/02-organisms/03-hero/image-hero.mustache
@@ -1,16 +1,8 @@
-<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 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 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 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>
- </div>
- <div class="lg:row-span-5 lg:col-span-4 order-2">
- <img src="/images/hero-profile-img.png" />
+<article class="hero hero--image hero--condensed {{ classes }}" style="--image-url: url({{ img.landscape-16x9-fullhd.src }})">
+ <div class="container text-center">
+ <h1 class="head-alt-md md:head-alt-xl text-shadow-lg">{{ claim }}{{^ claim }}{{ headline.medium }}{{/ claim }}</h1>
+ <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--autowidth text-sm md:text-lg") }}
</div>
</div>
</article>
diff --git a/source/css/organisms/hero.pcss b/source/css/organisms/hero.pcss
index c8084bc..78782f0 100644
--- a/source/css/organisms/hero.pcss
+++ b/source/css/organisms/hero.pcss
@@ -1,11 +1,19 @@
.hero {
- @apply py-4;
+ @apply py-8;
@screen md {
@apply py-24;
}
}
+.hero--condensed {
+ @apply py-8;
+
+ @screen md {
+ @apply py-16;
+ }
+}
+
.hero--image {
background:
linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.9)),
--
GitLab