diff --git a/main/styleguide/source/_patterns/molecules/simple_header.mustache b/main/styleguide/source/_patterns/molecules/simple_header.mustache index 373d2273b5051e02c679f10bc4cbdaf5d3591084..ac648d39312e35793d4c6927d0a61a8d55f512b1 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 97506b5833d13085360ca2ba4edcadd713a7384c..8642a40716fb4413830221cf09996534c6192214 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 b0d8d85690191a68632c0bd26be090708e3db14c..d9d44f1981fb34dad6d69c00024d0d93b0ec6b97 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 56448fbc2c46e0bb7e0669dfd23fb1df34208320..2fb62920c133f6dbf6fb474fd01912a5241f2759 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 1d108c15cc91d9536a2dfe923bb46356735805d2..b8b354328e099c68d1c290af0130367ff5c1726a 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 a65505c16bec1f222801d23ca9bb2ce1495b436b..456d92b6aa9a907ac62acd899ee8e4563aa6956c 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 30227b2ef1fd1af255b95968b91de0d32130e136..b8b61fd777c8de5cfc58e29760bb15c2746ec46d 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 b61def6da9556a6c505d9bb2fcad890474eecab6..54c49faefd012d3cf522a4ad8c49e3facc705d22 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' },