main: people page tuned

main/styleguide/source/_patterns/molecules/simple_header.mustache

 <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>

main/styleguide/source/_patterns/organisms/newsletter-section.mustache

 <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>
-      <div class="flex">
-          <span class="uppercase font-bold w-1/4">
+  <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="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") }}

main/styleguide/source/_patterns/templates/people.mustache

@@ -3,7 +3,8 @@
 {{> molecules-simple_header(title: "Lidé v pirátské straně") }}
 
 <main role="main">
-  <div class="container--narrow">
+  <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.
@@ -12,8 +13,9 @@
         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 }}

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;
 }

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;
+}

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;
   }
 }

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";

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'
             },