From d17baf8a476235e0a3d65c01066f3ab6f89d962b Mon Sep 17 00:00:00 2001
From: OndraRehounek <ondra.rehounek@seznam.cz>
Date: Mon, 22 Aug 2022 15:59:36 +0200
Subject: [PATCH] main: people page tuned
---
.../molecules/simple_header.mustache | 8 +++----
.../organisms/newsletter-section.mustache | 20 +++++++++--------
.../_patterns/templates/people.mustache | 22 +++++++++----------
.../source/css/atoms/container.pcss | 6 +++++
.../source/css/atoms/extra_sizing.pcss | 8 +++++--
.../source/css/molecules/switch.pcss | 6 ++---
main/styleguide/source/css/style.pcss | 2 +-
main/styleguide/tailwind.config.js | 3 ++-
8 files changed, 44 insertions(+), 31 deletions(-)
diff --git a/main/styleguide/source/_patterns/molecules/simple_header.mustache b/main/styleguide/source/_patterns/molecules/simple_header.mustache
index 373d2273b..ac648d393 100644
--- a/main/styleguide/source/_patterns/molecules/simple_header.mustache
+++ b/main/styleguide/source/_patterns/molecules/simple_header.mustache
@@ -1,9 +1,9 @@
<header
- class="bg-black flex items-center h-96 header-clip mb-24 pt-24 w-full"
+ class="bg-black flex items-center simple-header-height header-clip mb-24 pt-24 w-full"
>
- <div class="grid-container header-max-width pt-16">
- <div class="col-start-2 col-end-13">
- <h1 class="font-alt text-7xl text-white">
+ <div class="grid-container header-max-width">
+ <div class="grid-content">
+ <h1 class="font-alt text-8xl text-white">
{{ title }}
</h1>
</div>
diff --git a/main/styleguide/source/_patterns/organisms/newsletter-section.mustache b/main/styleguide/source/_patterns/organisms/newsletter-section.mustache
index 97506b583..8642a4071 100644
--- a/main/styleguide/source/_patterns/organisms/newsletter-section.mustache
+++ b/main/styleguide/source/_patterns/organisms/newsletter-section.mustache
@@ -1,15 +1,17 @@
<div class="footer-section section-clip bg-cover bg-no-repeat flex"
style="background-image: url('https://images.pexels.com/photos/3073681/pexels-photo-3073681.jpeg')">
- <div class="container--medium mx-auto px-4 ">
- <div class="w-6/12 flex flex-col">
- <div class="flex mb-4">
- <i class="ico--anchor text-9xl mb-4 w-1/4"></i>
- <h5 class="uppercase mt-4 head-alt-md w-3/4 md:head-alt-lg">Odebírej náš newsletter</h5>
+ <div class="flex items-center w-full">
+ <div class="grid-container">
+ <div class="flex flex-col items-end grid-left mb-4">
+ <i class="ico--anchor text-9xl mb-4 w-3/4"></i>
+ <span class="font-bold uppercase w-3/4">
+ Fake news tam nenajdeš, ale dozvíš se co chystáme doopravdy!
+ </span>
</div>
- <div class="flex">
- <span class="uppercase font-bold w-1/4">
- Fake news tam nenajdeš, ale dozvíš se co chystáme doopravdy!
- </span>
+ <div class="grid-content-with-right-side">
+ <h5 class="head-alt-md my-4 uppercase w-3/4 md:head-alt-lg">
+ Odebírej náš newsletter
+ </h5>
<div class="w-3/4">
{{> atoms-form-input(placeholder: "Tvůj email", classes: "mb-3 w-full") }}
{{> atoms-form-checkbox(label: "Souhlasím se zpracováním osobních údajů", classes: "mb-3") }}
diff --git a/main/styleguide/source/_patterns/templates/people.mustache b/main/styleguide/source/_patterns/templates/people.mustache
index b0d8d8569..d9d44f198 100644
--- a/main/styleguide/source/_patterns/templates/people.mustache
+++ b/main/styleguide/source/_patterns/templates/people.mustache
@@ -3,17 +3,19 @@
{{> molecules-simple_header(title: "Lidé v pirátské straně") }}
<main role="main">
- <div class="container--narrow">
- <p class="font-alt leading-6 mb-12 text-xl">
- Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
- dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
- Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
- consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
- sed diam voluptua. At vero eos et accusam et justo duo
- </p>
+ <div class="grid-container">
+ <div class="grid-content">
+ <p class="font-alt leading-6 mb-12 text-xl">
+ Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
+ dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
+ Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
+ consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
+ sed diam voluptua. At vero eos et accusam et justo duo
+ </p>
+ </div>
</div>
<div class="container--medium">
- <div class="mb-12">
+ <div class="flex justify-center mb-12">
{{> molecules-multi-state-switch }}
</div>
<div class="flex flex-wrap justify-between mb-12">
@@ -26,6 +28,4 @@
{{> organisms-newsletter-section }}
</main>
-
-
{{> organisms-footer }}
diff --git a/main/styleguide/source/css/atoms/container.pcss b/main/styleguide/source/css/atoms/container.pcss
index 56448fbc2..2fb62920c 100644
--- a/main/styleguide/source/css/atoms/container.pcss
+++ b/main/styleguide/source/css/atoms/container.pcss
@@ -57,10 +57,16 @@
}
}
+
.grid-content {
grid-area: content;
}
+.grid-full {
+ grid-column-start: left-side;;
+ grid-column-end: right-side;
+}
+
.grid-left-side {
grid-area: left-side;
}
diff --git a/main/styleguide/source/css/atoms/extra_sizing.pcss b/main/styleguide/source/css/atoms/extra_sizing.pcss
index 1d108c15c..b8b354328 100644
--- a/main/styleguide/source/css/atoms/extra_sizing.pcss
+++ b/main/styleguide/source/css/atoms/extra_sizing.pcss
@@ -12,10 +12,14 @@
}
.person-box-big {
- max-width: 576px;
- width: 576px;
+ max-width: 575px;
+ width: 100%;
}
.photo-header {
height: 36rem;
}
+
+.simple-header-height {
+ height: 26rem;
+}
diff --git a/main/styleguide/source/css/molecules/switch.pcss b/main/styleguide/source/css/molecules/switch.pcss
index a65505c16..456d92b6a 100644
--- a/main/styleguide/source/css/molecules/switch.pcss
+++ b/main/styleguide/source/css/molecules/switch.pcss
@@ -3,14 +3,14 @@
}
.switch__item {
- @apply py-4 px-8 bg-grey-150 mr-2 font-alt font-normal text-xl text-white text-center cursor-pointer;
+ @apply bg-grey-150 cursor-pointer px-8 py-4 mr-2 font-alt font-normal text-black text-center text-xl;
&:hover {
- @apply no-underline bg-grey-400;
+ @apply no-underline bg-grey-200;
}
&.switch__item--active,
&.switch__item--active:hover {
- @apply bg-turquoise-500;
+ @apply bg-turquoise-200;
}
}
diff --git a/main/styleguide/source/css/style.pcss b/main/styleguide/source/css/style.pcss
index 30227b2ef..b8b61fd77 100644
--- a/main/styleguide/source/css/style.pcss
+++ b/main/styleguide/source/css/style.pcss
@@ -25,7 +25,7 @@
@import "./atoms/heading.pcss";
@import "./atoms/icons.pcss";
-@import "molecules/carousels.pcss";
+@import "./molecules/carousels.pcss";
@import "./molecules/contact_box.pcss";
@import "./molecules/sliding_button.pcss";
@import "./molecules/switch.pcss";
diff --git a/main/styleguide/tailwind.config.js b/main/styleguide/tailwind.config.js
index b61def6da..54c49faef 100644
--- a/main/styleguide/tailwind.config.js
+++ b/main/styleguide/tailwind.config.js
@@ -54,7 +54,7 @@ module.exports = {
'5xl': '3rem',
'6xl': '4rem',
'7xl': '5.3rem',
- '8xl': '6.5rem',
+ '8xl': '6.25rem',
'9xl': '7.5rem',
},
fontWeight: {
@@ -111,6 +111,7 @@ module.exports = {
'300': '#027da8',
},
'turquoise': {
+ '200': '#92D2DB',
'400': '#1BC0E3',
'500': '#25A5B9'
},
--
GitLab