From 36ba8ee8c72e7d76c2fcec63910da01cf3530d21 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0t=C4=9Bp=C3=A1n=20Farka?= <stepanfarka11@gmail.com>
Date: Tue, 23 Aug 2022 15:37:46 +0200
Subject: [PATCH] [FIX] homepage
---
.../_patterns/molecules/box-link.mustache | 5 ++
.../organisms/box-links-section.mustache | 61 ++++---------------
.../organisms/newsletter-section.mustache | 2 +-
.../organisms/region-section.mustache | 6 +-
.../source/css/atoms/container.pcss | 4 +-
.../source/css/atoms/form-field.pcss | 4 +-
main/styleguide/source/css/atoms/heading.pcss | 4 ++
.../source/js/components/RegionMap.vue | 4 +-
8 files changed, 31 insertions(+), 59 deletions(-)
create mode 100644 main/styleguide/source/_patterns/molecules/box-link.mustache
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 00000000..ae5ba2c1
--- /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 0c62595d..07c64168 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 3663fe57..b7bbc28b 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 48c0f501..d6fe80cf 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 c02379ce..14e26d67 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 71840aa6..d01851d4 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 ef1bf5aa..c87c7ec6 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 881146bb..53fb1228 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"
--
GitLab