diff --git a/main/styleguide/source/_patterns/organisms/box-links-section.mustache b/main/styleguide/source/_patterns/organisms/box-links-section.mustache
new file mode 100644
index 0000000000000000000000000000000000000000..42a9e7b079020ece7c0c30150a53b87bd896be75
--- /dev/null
+++ b/main/styleguide/source/_patterns/organisms/box-links-section.mustache
@@ -0,0 +1,51 @@
+<div class="section-clip py-32 bg-no-repeat"
+ style="background-image: url('https://i.picsum.photos/id/630/1980/1400.jpg?hmac=WjDo021fzd9SaIlmsi9LtZJApZ02RMzdG0bYLx8iXOo')">
+ <div class="container--wide mx-auto px-4 pt-16">
+ <h2 class="clear-both head-alt-md md:head-alt-lg pb-4 lg:pb-8 text-center mb-16">
+ Buď v tom s námi
+ </h2>
+ <div class="flex flex-col justify-center items-center mb-32 md:flex-row">
+ <div class="mb-1 w-80 h-80 flex bg-white flex-col items-center justify-center md:mr-1">
+ <img src="https://i.picsum.photos/id/865/90/100.jpg?hmac=0E2Zv4lGASwKCcZxquMc_v2Y3Rg68gw21euyRQ1bu80" alt="" class="mb-8">
+ <h5 class="head-alt-md mb-8">naloď se k pirátům</h5>
+ {{> atoms-button-animated(btn-text: "Přidat se k nám") }}
+ </div>
+ <div class="mb-1 w-80 h-80 flex bg-white flex-col items-center justify-center md:mr-1">
+ <img src="https://i.picsum.photos/id/865/90/100.jpg?hmac=0E2Zv4lGASwKCcZxquMc_v2Y3Rg68gw21euyRQ1bu80" alt="" class="mb-8">
+ <h5 class="head-alt-md mb-8">naloď se k pirátům</h5>
+ <a href="" class="btn btn__slide__wrap w-32 mt-">
+ <span class="btn bg-black text-white w-32">
+ Poslanecký klub
+ </span>
+ <span class="btn bg-white text-black w-32">
+ Poslanecký klub
+ </span>
+ </a>
+ </div>
+ <div class="mb-1 w-80 h-80 flex bg-white flex-col items-center justify-center md:mr-1">
+ <img src="https://i.picsum.photos/id/865/90/100.jpg?hmac=0E2Zv4lGASwKCcZxquMc_v2Y3Rg68gw21euyRQ1bu80" alt="" class="mb-8">
+ <h5 class="head-alt-md mb-8">naloď se k pirátům</h5>
+ <a href="" class="btn btn__slide__wrap w-32 mt-">
+ <span class="btn bg-black text-white w-32">
+ Poslanecký klub
+ </span>
+ <span class="btn bg-white text-black w-32">
+ Poslanecký klub
+ </span>
+ </a>
+ </div>
+ <div class="mb-1 w-80 h-80 flex bg-white flex-col items-center justify-center md:mr-1">
+ <img src="https://i.picsum.photos/id/865/90/100.jpg?hmac=0E2Zv4lGASwKCcZxquMc_v2Y3Rg68gw21euyRQ1bu80" alt="" class="mb-8">
+ <h5 class="head-alt-md mb-8">naloď se k pirátům</h5>
+ <a href="" class="btn btn__slide__wrap w-32 mt-">
+ <span class="btn bg-black text-white w-32">
+ Poslanecký klub
+ </span>
+ <span class="btn bg-white text-black w-32">
+ Poslanecký klub
+ </span>
+ </a>
+ </div>
+ </div>
+ </div>
+ </div>
diff --git a/main/styleguide/source/_patterns/templates/contact.mustache b/main/styleguide/source/_patterns/templates/contact.mustache
index 58cb0736ea2a62eca90b2729fcc9bb087f741357..b43816d65004ca13d0dd55d5a248b681f84bb787 100644
--- a/main/styleguide/source/_patterns/templates/contact.mustache
+++ b/main/styleguide/source/_patterns/templates/contact.mustache
@@ -3,179 +3,181 @@
{{> molecules-simple_header(title: "Kontakty") }}
<main role="main">
- <section class="container--medium flex flex-wrap mb-16 pl-44">
- <div class="w-1/2">
- <h2 class="font-alt text-4xl mb-5">
- Kontakty pro veřejnost
- </h2>
- <div class="flex flex-wrap justify-between">
- <div class="leading-5 w-1/2">
- <span class="font-bold">Informační linka:</span><br/>
- +420 703 681 682<br/>
- +420 608 963 111<br/>
- <br/>
- <span class="font-bold">Provozní doba:</span><br/>
- Po, St, Pá: 8-16:30<br/>
- Út, Čt: 11-19:30<br/>
- <br/>
- <span class="font-bold">E-mail:</span><br>
- <a href="mailto:info@pirati.cz" class="text-turquoise-500 underline">
- info@pirati.cz
- </a><br>
- <br>
- <span class="font-bold">International Department</span><br>
- <a href="mailto:international@pirati.cz" class="text-turquoise-500 underline">
- international@pirati.cz
- </a><br>
- <br>
- </div>
- <div class="leading-5 w-5/12">
- <span class="font-bold">Informační linka:</span><br/>
- +420 703 681 682<br/>
- +420 608 963 111<br/>
- <br/>
- <span class="font-bold">Provozní doba:</span><br/>
- Po, St, Pá: 8-16:30<br/>
- Út, Čt: 11-19:30<br/>
- <br/>
- <span class="font-bold">E-mail:</span><br>
- <a href="mailto:info@pirati.cz" class="text-turquoise-500 underline">
- info@pirati.cz
- </a><br>
- <br>
- <span class="font-bold">Transparentní účet</span><br>
- 24190421219/3190 (Fio banka)<br>
- <a href="" class="text-turquoise-500 underline">
- další transparentní účty
- </a><br>
+ <div class="grid-container">
+ <section class="grid-content-with-right-side flex flex-wrap mb-16">
+ <div>
+ <h2 class="font-alt text-4xl mb-5">
+ Kontakty pro veřejnost
+ </h2>
+ <div class="flex flex-wrap justify-between">
+ <div class="leading-5 w-1/2">
+ <span class="font-bold">Informační linka:</span><br/>
+ +420 703 681 682<br/>
+ +420 608 963 111<br/>
+ <br/>
+ <span class="font-bold">Provozní doba:</span><br/>
+ Po, St, Pá: 8-16:30<br/>
+ Út, Čt: 11-19:30<br/>
+ <br/>
+ <span class="font-bold">E-mail:</span><br>
+ <a href="mailto:info@pirati.cz" class="text-turquoise-500 underline">
+ info@pirati.cz
+ </a><br>
+ <br>
+ <span class="font-bold">International Department</span><br>
+ <a href="mailto:international@pirati.cz" class="text-turquoise-500 underline">
+ international@pirati.cz
+ </a><br>
+ <br>
+ </div>
+ <div class="leading-5 w-5/12">
+ <span class="font-bold">Informační linka:</span><br/>
+ +420 703 681 682<br/>
+ +420 608 963 111<br/>
+ <br/>
+ <span class="font-bold">Provozní doba:</span><br/>
+ Po, St, Pá: 8-16:30<br/>
+ Út, Čt: 11-19:30<br/>
+ <br/>
+ <span class="font-bold">E-mail:</span><br>
+ <a href="mailto:info@pirati.cz" class="text-turquoise-500 underline">
+ info@pirati.cz
+ </a><br>
+ <br>
+ <span class="font-bold">Transparentní účet</span><br>
+ 24190421219/3190 (Fio banka)<br>
+ <a href="" class="text-turquoise-500 underline">
+ další transparentní účty
+ </a><br>
+ </div>
</div>
</div>
- </div>
- <div class="w-1/2">
+ <div>
+ <h2 class="font-alt text-4xl mb-5">
+ Regionální kontakty
+ </h2>
+ </div>
+ </section>
+
+ <section class="grid-content-with-right-side mb-20">
<h2 class="font-alt text-4xl mb-5">
- Regionální kontakty
+ Další kontakty
</h2>
- </div>
- </section>
-
- <section class="container--narrow mb-20">
- <h2 class="font-alt text-4xl mb-5">
- Další kontakty
- </h2>
- <div class="flex flex-wrap">
- <div class="contact-box">
- <div>
- <div class="h-16 mx-auto w-16">
- hm, image...
+ <div class="flex flex-wrap">
+ <div class="contact-box">
+ <div>
+ <div class="h-16 mx-auto w-16">
+ hm, image...
+ </div>
+ <h3 class="font-alt mb-3 text-xl">
+ Adresář
+ </h3>
+ <p>
+ Další osoby naleznete na stránce pirati.cz
+ </p>
</div>
- <h3 class="font-alt mb-3 text-xl">
- Adresář
- </h3>
- <p>
- Další osoby naleznete na stránce pirati.cz
- </p>
+ <a href="" class="btn btn__slide__wrap">
+ <span class="btn bg-black text-white w-32">
+ Lidé
+ </span>
+ <span class="btn bg-blue-300 text-white w-32">
+ Lidé
+ </span>
+ </a>
</div>
- <a href="" class="btn btn__slide__wrap">
- <span class="btn bg-black text-white w-32">
- Lidé
- </span>
- <span class="btn bg-blue-300 text-white w-32">
- Lidé
- </span>
- </a>
- </div>
- <div class="contact-box">
- <div>
- <div class="h-16 mx-auto w-16">
- hm, image...
+ <div class="contact-box">
+ <div>
+ <div class="h-16 mx-auto w-16">
+ hm, image...
+ </div>
+ <h3 class="font-alt mb-3 text-xl">
+ Adresář
+ </h3>
+ <p>
+ Další osoby naleznete na stránce pirati.cz
+ </p>
</div>
- <h3 class="font-alt mb-3 text-xl">
- Adresář
- </h3>
- <p>
- Další osoby naleznete na stránce pirati.cz
- </p>
+ <a href="" class="btn btn__slide__wrap">
+ <span class="btn bg-black text-white w-32">
+ Lidé
+ </span>
+ <span class="btn bg-blue-300 text-white w-32">
+ Lidé
+ </span>
+ </a>
</div>
- <a href="" class="btn btn__slide__wrap">
- <span class="btn bg-black text-white w-32">
- Lidé
- </span>
- <span class="btn bg-blue-300 text-white w-32">
- Lidé
- </span>
- </a>
- </div>
- <div class="contact-box">
- <div>
- <div class="h-16 mx-auto w-16">
- hm, image...
+ <div class="contact-box">
+ <div>
+ <div class="h-16 mx-auto w-16">
+ hm, image...
+ </div>
+ <h3 class="font-alt mb-3 text-xl">
+ Adresář
+ </h3>
+ <p>
+ Další osoby naleznete na stránce pirati.cz
+ </p>
</div>
- <h3 class="font-alt mb-3 text-xl">
- Adresář
- </h3>
- <p>
- Další osoby naleznete na stránce pirati.cz
- </p>
- </div>
- <a href="" class="btn btn__slide__wrap">
- <span class="btn bg-black text-white w-32">
- Lidé
- </span>
- <span class="btn bg-blue-300 text-white w-32">
- Lidé
- </span>
- </a>
- </div>
- </div>
- </section>
-
- <section class="container--medium mb-20 pl-44">
- <h2 class="font-alt text-4xl mb-5">
- Kontakty pro média
- </h2>
- <div class="flex flex-wrap">
- <div class="flex mr-4 person-box">
- <div class="mr-7">
- <img class="rounded-full shadow-sm w-40 mb-2" src="https://randomuser.me/api/portraits/women/26.jpg"
- alt="user image">
- </div>
- <div class="flex flex-col py-4">
- <h6 class="font-bold text-3xl">
- Veronika Šmídová
- </h6>
- <span class="mb-6 text-grey-300">
- Tisková mluvčí
- </span>
- <span>
- +420 778 111 466
+ <a href="" class="btn btn__slide__wrap">
+ <span class="btn bg-black text-white w-32">
+ Lidé
</span>
- <span class="text-turquoise-500">
- veronika.smidova@pirati.cz
+ <span class="btn bg-blue-300 text-white w-32">
+ Lidé
</span>
+ </a>
</div>
</div>
- <div class="flex mr-4 person-box">
- <div class="mr-7">
- <img class="rounded-full shadow-sm w-40 mb-2" src="https://randomuser.me/api/portraits/women/26.jpg"
- alt="user image">
- </div>
- <div class="flex flex-col py-4">
- <h6 class="font-bold text-3xl">
- Veronika Šmídová
- </h6>
- <span class="mb-6 text-grey-300">
- Tisková mluvčí
- </span>
- <span>
- +420 778 111 466
+ </section>
+
+ <section class="grid-content-with-right-side mb-20">
+ <h2 class="font-alt text-4xl mb-5">
+ Kontakty pro média
+ </h2>
+ <div class="flex flex-wrap">
+ <div class="flex mr-4 person-box">
+ <div class="mr-7">
+ <img class="rounded-full shadow-sm w-40 mb-2" src="https://randomuser.me/api/portraits/women/26.jpg"
+ alt="user image">
+ </div>
+ <div class="flex flex-col py-4">
+ <h6 class="font-bold text-3xl">
+ Veronika Šmídová
+ </h6>
+ <span class="mb-6 text-grey-300">
+ Tisková mluvčí
</span>
- <span class="text-turquoise-500">
- veronika.smidova@pirati.cz
+ <span>
+ +420 778 111 466
+ </span>
+ <span class="text-turquoise-500">
+ veronika.smidova@pirati.cz
+ </span>
+ </div>
+ </div>
+ <div class="flex mr-4 person-box">
+ <div class="mr-7">
+ <img class="rounded-full shadow-sm w-40 mb-2" src="https://randomuser.me/api/portraits/women/26.jpg"
+ alt="user image">
+ </div>
+ <div class="flex flex-col py-4">
+ <h6 class="font-bold text-3xl">
+ Veronika Šmídová
+ </h6>
+ <span class="mb-6 text-grey-300">
+ Tisková mluvčí
</span>
+ <span>
+ +420 778 111 466
+ </span>
+ <span class="text-turquoise-500">
+ veronika.smidova@pirati.cz
+ </span>
+ </div>
</div>
</div>
- </div>
- </section>
+ </section>
+ </div>
</main>
{{> organisms-footer }}
diff --git a/main/styleguide/source/_patterns/templates/homepage.mustache b/main/styleguide/source/_patterns/templates/homepage.mustache
index 0f5c453681efbd641d6206305e876f738db1ae5a..398d05afa4559ef71ebf1d713a4a6b92ef0362bc 100644
--- a/main/styleguide/source/_patterns/templates/homepage.mustache
+++ b/main/styleguide/source/_patterns/templates/homepage.mustache
@@ -9,65 +9,7 @@
{{> organisms-representatives-section }}
{{> organisms-region-section }}
{{> organisms-newsletter-section }}
-
- <div class="section-clip py-32 bg-no-repeat"
- style="background-image: url('https://i.picsum.photos/id/630/1980/1400.jpg?hmac=WjDo021fzd9SaIlmsi9LtZJApZ02RMzdG0bYLx8iXOo')">
- <div class="container--wide mx-auto px-4 pt-16">
- <h2 class="clear-both head-alt-md md:head-alt-lg pb-4 lg:pb-8 text-center mb-16">
- Buď v tom s námi
- </h2>
- <div class="flex flex-col justify-center items-center mb-32 md:flex-row">
- <div class="mb-1 w-80 h-80 flex bg-white flex-col items-center justify-center md:mr-1">
- <img src="https://i.picsum.photos/id/865/90/100.jpg?hmac=0E2Zv4lGASwKCcZxquMc_v2Y3Rg68gw21euyRQ1bu80" alt="" class="mb-8">
- <h5 class="head-alt-md mb-8">naloď se k pirátům</h5>
- <a href="" class="btn btn__slide__wrap w-32 mt-">
- <span class="btn bg-black text-white w-32">
- Poslanecký klub
- </span>
- <span class="btn bg-white text-black w-32">
- Poslanecký klub
- </span>
- </a>
- </div>
- <div class="mb-1 w-80 h-80 flex bg-white flex-col items-center justify-center md:mr-1">
- <img src="https://i.picsum.photos/id/865/90/100.jpg?hmac=0E2Zv4lGASwKCcZxquMc_v2Y3Rg68gw21euyRQ1bu80" alt="" class="mb-8">
- <h5 class="head-alt-md mb-8">naloď se k pirátům</h5>
- <a href="" class="btn btn__slide__wrap w-32 mt-">
- <span class="btn bg-black text-white w-32">
- Poslanecký klub
- </span>
- <span class="btn bg-white text-black w-32">
- Poslanecký klub
- </span>
- </a>
- </div>
- <div class="mb-1 w-80 h-80 flex bg-white flex-col items-center justify-center md:mr-1">
- <img src="https://i.picsum.photos/id/865/90/100.jpg?hmac=0E2Zv4lGASwKCcZxquMc_v2Y3Rg68gw21euyRQ1bu80" alt="" class="mb-8">
- <h5 class="head-alt-md mb-8">naloď se k pirátům</h5>
- <a href="" class="btn btn__slide__wrap w-32 mt-">
- <span class="btn bg-black text-white w-32">
- Poslanecký klub
- </span>
- <span class="btn bg-white text-black w-32">
- Poslanecký klub
- </span>
- </a>
- </div>
- <div class="mb-1 w-80 h-80 flex bg-white flex-col items-center justify-center md:mr-1">
- <img src="https://i.picsum.photos/id/865/90/100.jpg?hmac=0E2Zv4lGASwKCcZxquMc_v2Y3Rg68gw21euyRQ1bu80" alt="" class="mb-8">
- <h5 class="head-alt-md mb-8">naloď se k pirátům</h5>
- <a href="" class="btn btn__slide__wrap w-32 mt-">
- <span class="btn bg-black text-white w-32">
- Poslanecký klub
- </span>
- <span class="btn bg-white text-black w-32">
- Poslanecký klub
- </span>
- </a>
- </div>
- </div>
- </div>
- </div>
+ {{> organisms-box-links-section }}
</main>
{{> organisms-footer }}
diff --git a/main/styleguide/source/css/atoms/heading.pcss b/main/styleguide/source/css/atoms/heading.pcss
index 97bfa548ea36f0e7d6913f32d401eee6023e702c..43917918b0fe98a59fe26909a292131388879c2c 100644
--- a/main/styleguide/source/css/atoms/heading.pcss
+++ b/main/styleguide/source/css/atoms/heading.pcss
@@ -146,23 +146,24 @@
.head-xl {
- @apply text-base lg:text-xl font-bold leading-7 uppercase;
+ @apply font-alt text-base lg:text-xl font-medium leading-7 uppercase;
}
.head-2xl {
- @apply text-2xl font-bold leading-8 uppercase
+ @apply font-alt text-2xl font-medium leading-8 uppercase;
+ letter-spacing: -0.01em;
}
.head-3xl {
- @apply text-lg leading-4 uppercase xl:text-3xl xl:leading-8;
+ @apply font-alt leading-4 text-lg tracking-tight uppercase xl:text-3xl xl:leading-8;
}
.head-4xl {
- @apply text-xl font-bold leading-7 uppercase mb-5 lg:text-4xl lg:leading-10 lg:text-4xl;
+ @apply font-alt text-xl font-medium leading-7 tracking-tight uppercase mb-5 lg:text-4xl lg:leading-10 lg:text-4xl;
}
.head-7xl {
- @apply text-3xl font-medium uppercase lg:text-7xl;
+ @apply font-alt text-3xl font-medium tracking-tight uppercase lg:text-7xl;
}
diff --git a/main/styleguide/source/css/molecules/carousels.pcss b/main/styleguide/source/css/molecules/carousels.pcss
index f16101df67646c2a15edd367cb11b40ee60b6998..ceb3598a895a1a3179ca1765b8f9009ba268c5cd 100644
--- a/main/styleguide/source/css/molecules/carousels.pcss
+++ b/main/styleguide/source/css/molecules/carousels.pcss
@@ -4,7 +4,7 @@
position: relative;
.header-carousel--text {
- @apply text-2xl uppercase font-medium lg:text-7xl;
+ @apply font-alt text-2xl uppercase lg:text-7xl;
left: 10%;
max-width: 1200px;
position: absolute;