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 0000000000000000000000000000000000000000..8a9260fe9f7a1c7b8e96584e9908e07f61b1856b --- /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 18795eeb729e66f64911c2be911623f5fe666291..28837321ec4cbf694d62fb139ee74032c33a7e57 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 e8bc00ff7a8459403dd1151bcf05d8c39e77cc37..453c17234db6795528682b5ff1adf28acf1c132a 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 695d522c0049f110f5f96312eeea6553896292af..025e3048dabf6db39d935e4b451c87602f8a0d16 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 c3547df9afaaa7bab0e7e6774d6ca719373c73fd..aea611d41108e0bef05b365133899cd06f082aa1 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>