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 8a9260fe9f7a1c7b8e96584e9908e07f61b1856b..16d953d7f96f83c55fdd0daafd8ff0e4969824fd 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 28837321ec4cbf694d62fb139ee74032c33a7e57..47106b95353560dc57479d313c2d68107536c246 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 453c17234db6795528682b5ff1adf28acf1c132a..2837d47e17b4a52d40a37b3dd0bf272c54ac8d95 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 025e3048dabf6db39d935e4b451c87602f8a0d16..7d5dad50339982908c1b3150d541689d43993bc9 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 aea611d41108e0bef05b365133899cd06f082aa1..c68a55588cf07ff01906717ac13a0b7e3fb5c2bc 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 c8084bc225bec1f90548e90adcc909464edf0b18..78782f0cf9b2d59b62512b76e96ebab7cfe34f47 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)),