diff --git a/main/styleguide/source/_patterns/molecules/box-link.mustache b/main/styleguide/source/_patterns/molecules/box-link.mustache
new file mode 100644
index 0000000000000000000000000000000000000000..ae5ba2c15597636231b56a916797372920ad0ab0
--- /dev/null
+++ b/main/styleguide/source/_patterns/molecules/box-link.mustache
@@ -0,0 +1,5 @@
+<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-6xl mb-8">naloď se k pirátům</h5>
+ {{> atoms-button-animated(btn-text: "Přidat se k nám") }}
+</div>
diff --git a/main/styleguide/source/_patterns/organisms/box-links-section.mustache b/main/styleguide/source/_patterns/organisms/box-links-section.mustache
index 0c62595d1bd916dc4f72a0e676a521e19356cc94..07c64168b5958770c827249bc0e99cc626455f3c 100644
--- a/main/styleguide/source/_patterns/organisms/box-links-section.mustache
+++ b/main/styleguide/source/_patterns/organisms/box-links-section.mustache
@@ -1,51 +1,14 @@
-<div class="bg-cover bg-no-repeat footer-section section-clip py-32"
- 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 class="bg-cover bg-no-repeat section-clip py-16 lg:py-36"
+ style="background-image: url('https://i.picsum.photos/id/630/1980/1400.jpg?hmac=WjDo021fzd9SaIlmsi9LtZJApZ02RMzdG0bYLx8iXOo')">
+ <div class="container--medium mx-4">
+ <h2 class="head-7xl text-center mb-6 xl:mb-28">
+ Piráti zastupují občany
+ </h2>
+ <div class="flex flex-wrap justify-center items-center">
+ {{> molecules-box-link }}
+ {{> molecules-box-link }}
+ {{> molecules-box-link }}
+ {{> molecules-box-link }}
</div>
</div>
+</div>
diff --git a/main/styleguide/source/_patterns/organisms/newsletter-section.mustache b/main/styleguide/source/_patterns/organisms/newsletter-section.mustache
index 3663fe57dc6a3021e59c76a615e0047a9eb986ca..b7bbc28bd22c96c6fb5f1369a3b19ab2d4a88bbb 100644
--- a/main/styleguide/source/_patterns/organisms/newsletter-section.mustache
+++ b/main/styleguide/source/_patterns/organisms/newsletter-section.mustache
@@ -1,4 +1,4 @@
-<div class="footer-section section-clip bg-cover bg-no-repeat flex"
+<div class="section-clip bg-cover bg-no-repeat flex py-16 lg:py-36"
style="background-image: url('https://images.pexels.com/photos/3073681/pexels-photo-3073681.jpeg')">
<div class="grid-container items-center px-4">
<div class="grid-full flex flex-col">
diff --git a/main/styleguide/source/_patterns/organisms/region-section.mustache b/main/styleguide/source/_patterns/organisms/region-section.mustache
index 48c0f50176b3c6775507ead9d60184f35aa48cf9..d6fe80cf987b3b21bda5515102d798951008d7d3 100644
--- a/main/styleguide/source/_patterns/organisms/region-section.mustache
+++ b/main/styleguide/source/_patterns/organisms/region-section.mustache
@@ -1,11 +1,11 @@
-<div class="bg-cover bg-no-repeat section-clip pt-32 pb-52"
+<div class="bg-cover bg-no-repeat section-clip py-16 lg:py-36"
style="background-image: url('https://i.picsum.photos/id/630/1980/1400.jpg?hmac=WjDo021fzd9SaIlmsi9LtZJApZ02RMzdG0bYLx8iXOo')">
<div class="container--medium mx-auto px-4 ">
- <h2 class="head-7xl text-center mb-14 lg:mb-28">
+ <h2 class="head-7xl text-center mb-6 xl:mb-28">
Piráti v regionech
</h2>
<div class="flex flex-wrap">
- <div class="__js-root w-12/12 flex items-center justify-center lg:w-7/12">
+ <div class="__js-root flex items-center justify-center h-full mb-4 w-full w-12/12 lg:w-7/12">
<ui-region-map class="w-full"></ui-region-map>
</div>
<div class="w-12/12 lg:w-5/12">
diff --git a/main/styleguide/source/css/atoms/container.pcss b/main/styleguide/source/css/atoms/container.pcss
index c02379ce6ad8b1a6b73e4ebeb2a92acdaba76acd..14e26d6733321eed69fa10171775f7015f97f99f 100644
--- a/main/styleguide/source/css/atoms/container.pcss
+++ b/main/styleguide/source/css/atoms/container.pcss
@@ -19,11 +19,11 @@
}
.section-clip {
- clip-path: polygon(0 1%, 100% 0%, 100% 99%, 0% 100%);
+ clip-path: polygon(0 10px, 100% 0%, 100% 99%, 0% 100%);
margin-bottom: -3.2vw;
@screen xl {
- clip-path: polygon(0 5%, 100% 0%, 100% 95%, 0% 100%);
+ clip-path: polygon(0 20px, 100% 0%, 100% 95%, 0% 100%);
margin-bottom: -4.2vw;
}
}
diff --git a/main/styleguide/source/css/atoms/form-field.pcss b/main/styleguide/source/css/atoms/form-field.pcss
index 71840aa6f10ff3a3f271137a53734c92f8441d47..d01851d45e8de23c858aeb7715e7555e867425bd 100644
--- a/main/styleguide/source/css/atoms/form-field.pcss
+++ b/main/styleguide/source/css/atoms/form-field.pcss
@@ -66,7 +66,7 @@
}
.select {
- @apply relative flex items-center w-full py-4;
+ @apply relative flex items-center w-full py-2 xl:py-4;
&:after {
@apply absolute right-0 text-xl font-bold pr-3 transition duration-200;
@@ -77,7 +77,7 @@
}
.select__control {
- @apply w-full appearance-none outline-none bg-grey-25 py-5 pl-4 pr-8 text-lg rounded-none border border-grey-200 transition duration-200;
+ @apply w-full appearance-none outline-none bg-grey-25 py-3 pl-4 pr-8 text-lg rounded-none border border-grey-200 transition duration-200 xl:py-5;
/* Fix FF input not adjusting it's width.
* See: https://stackoverflow.com/a/48326796/303184
diff --git a/main/styleguide/source/css/atoms/heading.pcss b/main/styleguide/source/css/atoms/heading.pcss
index ef1bf5aa5e941d22c52a37c4b96e5fcdddc69c73..c87c7ec6595f6bef70793b95e3ba7bfb41d203de 100644
--- a/main/styleguide/source/css/atoms/heading.pcss
+++ b/main/styleguide/source/css/atoms/heading.pcss
@@ -162,6 +162,10 @@
@apply font-alt text-xl font-medium leading-7 tracking-tight uppercase mb-5 lg:text-4xl lg:leading-10 xl:text-4xl;
}
+.head-6xl {
+ @apply font-alt text-2xl font-medium tracking-tight uppercase xl:text-6xl;
+}
+
.head-7xl {
@apply font-alt text-3xl font-medium tracking-tight uppercase xl:text-7xl;
}
diff --git a/main/styleguide/source/js/components/RegionMap.vue b/main/styleguide/source/js/components/RegionMap.vue
index 881146bb2105c79b0e20ea94e50f6bbf1b6dd4d6..53fb1228204375cb80a63105afdad13716cce28f 100644
--- a/main/styleguide/source/js/components/RegionMap.vue
+++ b/main/styleguide/source/js/components/RegionMap.vue
@@ -1,6 +1,6 @@
<template>
- <div class="region-map flex justify-start items-center space-x-16 ">
- <div class="w-full max-w-xl">
+ <div class="region-map flex justify-center items-center space-x-16 ">
+ <div class="w-full max-w-xl block">
<svg
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns="http://www.w3.org/2000/svg"