Merge branch 'feature/pirati-cz' into feature/pirati-cz-martin

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

 <div class="section-clip bg-cover bg-no-repeat flex pb-32 xl:pb-0 xl:h-screen relative z-10">
   <img src="../../images/background-images/bg-bartos-newsletter.jpg" alt="" class="absolute h-full w-full object-cover">
   <div class="grid-container mt-20 xl:mt-0 xl:items-center z-10">
-    <div class="grid-full flex flex-col xl:flex-row">
-      <div class="flex xl:flex-col items-center mb-4 xl:items-start xl:w-1/4">
-        <i class="ico--anchor mr-2 text-7xl xl:mr-0 xl:text-9xl xl:mb-4 xl:w-full"></i>
-        <span class="uppercase text-xl xl:text-base font-bold mb-2 xl:w-full">
+    <div class="grid-full newsletter-grid">
+      <i class="newsletter-grid__icon ico--anchor text-7xl xl:text-9xl xl:w-full"></i>
+      <span class="newsletter-grid__additional-text uppercase text-xl xl:text-base font-bold mb-2 xl:w-full">
             Fake news tam nenajdeš, ale dozvíš se co chystáme doopravdy!
           </span>
-      </div>
-      <div class="flex flex-col items-start">
-        <h5 class="font-alt text-6xl xl:text-7xl uppercase">Odebírej náš <br> newsletter</h5>
+      <h5 class="newsletter-grid__main-text font-alt text-6xl xl:text-7xl uppercase">Odebírej náš newsletter</h5>
+      <div class="newsletter-grid__input flex flex-col items-start">
         {{> 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") }}
         {{> atoms-button-animated(btn-text: "Odebírat") }}

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

 <div class="container--wide mx-auto mb-8 lg:mb-16">
-  <h2 class="head-7xl text-center mb-6 xl:mb-28">
+  <div class="flex flex-wrap justify-center items-center">
+    <h2 class="w-full justify-center flex head-7xl text-center mb-6 xl:mb-28">
     Co právě děláme
   </h2>
+  </div>
   <div class="flex flex-wrap justify-center mb-8 lg:mb-24">
-    <div class="w-full flex max-w-xs">
+    <div class="w-full flex max-w-sm sm:max-w-xs">
       {{> molecules-twitter-box }}
     </div>
-    <div class="w-full flex max-w-xs">
+    <div class="w-full flex max-w-sm sm:max-w-xs">
       {{> molecules-twitter-box }}
     </div>
-    <div class="w-full flex max-w-xs">
+    <div class="w-full flex max-w-sm sm:max-w-xs">
       {{> molecules-twitter-box }}
     </div>
-    <div class="w-full flex max-w-xs">
+    <div class="w-full flex max-w-sm sm:max-w-xs">
       {{> molecules-twitter-box }}
     </div>
   </div>

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

@@ -3,14 +3,14 @@
 {{> molecules-simple_header(title: "Kontakty") }}
 
 <main role="main">
-    <section class="grid-container no-max mb-16">
+    <section class="grid-container no-max mb-4 xl:mb-20">
       <div class="grid-content-with-right-side flex flex-wrap">
-      <div class="mb-12 xl:mb-0">
-        <h2 class="font-alt text-3xl sm:text-4xl mb-5">
+      <div class="w-full max-w-xl mb-10 xl:mb-20">
+        <h2 class="head-4xl mb-5">
           Kontakty pro veřejnost
         </h2>
         <div class="flex flex-wrap justify-between">
-          <div class="leading-5 w-1/2">
+          <div class="leading-5">
             <span class="font-bold">Informační linka:</span><br/>
             +420 703 681 682<br/>
             +420 608 963 111<br/>
@@ -53,7 +53,7 @@
         </div>
       </div>
       <div class="w-full max-w-2xl">
-        <h2 class="font-alt text-4xl mb-5">
+        <h2 class="head-4xl mb-5">
           Regionální kontakty
         </h2>
 
@@ -64,11 +64,11 @@
       </div>
     </section>
   <div class="grid-container">
-    <section class="grid-content-with-right-side mb-20">
-      <h2 class="font-alt text-4xl mb-5">
+    <section class="grid-content-with-right-side mb-4 xl:mb-20">
+      <h2 class="head-4xl mb-5">
         Další kontakty
       </h2>
-      <div class="flex flex-wrap">
+      <div class="flex flex-wrap gap-4 justify-center md:justify-start">
         {{> molecules-contact-block }}
         {{> molecules-contact-block }}
         {{> molecules-contact-block }}
@@ -77,18 +77,18 @@
 
   </div>
   <div class="grid-container no-max">
-    <section class="grid-content-with-right-side mb-20">
-      <h2 class="font-alt text-4xl mb-5">
+    <section class="grid-content-with-right-side mb-4 xl:mb-20">
+      <h2 class="head-4xl mb-5">
         Kontakty pro média
       </h2>
-      <div class="flex flex-wrap">
+      <div class="flex flex-wrap gap-4">
         {{> molecules-contact-person-box }}
         {{> molecules-contact-person-box }}
         {{> molecules-contact-person-box }}
         </div>
-      </div>
     </section>
   </div>
 </main>
 
+{{> organisms-newsletter-section }}
 {{> organisms-footer }}

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

@@ -9,9 +9,9 @@
           <div class="grid-content-with-right-side">
             <h1 class="text-white">72% domácností bylo</h1>
             <h1 class="text-orange-250">násilně digitalizováno</h1>
-            <a href="" class="btn btn__slide__wrap ">
-              <span class="btn text-sm bg-white w-32 lg:text-base">Zjistit více1</span>
-              <span class="btn text-sm bg-black text-white w-32 lg:text-base">Zjistit více1</span>
+            <a href="" class="btn btn__slide__wrap btn-carousel">
+              <span class="btn text-lg bg-white w-32 lg:text-base">Zjistit více1</span>
+              <span class="btn text-lg bg-black text-white w-32 lg:text-base">Zjistit více1</span>
             </a>
           </div>
         </div>
@@ -22,9 +22,9 @@
           <div class="grid-content-with-right-side">
             <h1 class="text-white">72% domácností bylo</h1>
             <h1 class="text-orange-250">násilně digitalizováno</h1>
-            <a href="" class="btn btn__slide__wrap ">
-              <span class="btn text-sm bg-white w-32 lg:text-base">Zjistit více2</span>
-              <span class="btn text-sm bg-black text-white w-32 lg:text-base">Zjistit více2</span>
+            <a href="" class="btn btn__slide__wrap btn-carousel">
+              <span class="btn text-lg bg-white w-32 lg:text-base">Zjistit více2</span>
+              <span class="btn text-lg bg-black text-white w-32 lg:text-base">Zjistit více2</span>
             </a>
           </div>
         </div>
@@ -35,9 +35,9 @@
           <div class="grid-content-with-right-side">
             <h1 class="text-white">72% domácností33 bylo</h1>
             <h1 class="text-orange-250">násilně digitalizováno</h1>
-            <a href="" class="btn btn__slide__wrap ">
-              <span class="btn text-sm bg-white w-32 lg:text-base">Zjistit více3</span>
-              <span class="btn text-sm bg-black text-white w-32 lg:text-base">Zjistit více3</span>
+            <a href="" class="btn btn__slide__wrap btn-carousel">
+              <span class="btn text-lg bg-white w-32 lg:text-base">Zjistit více3</span>
+              <span class="btn text-lg bg-black text-white w-32 lg:text-base">Zjistit více3</span>
             </a>
           </div>
         </div>

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

@@ -2,15 +2,13 @@
 
 {{> molecules-simple_header(title: "Lidé v pirátské straně") }}
 
-<main role="main">
+<main role="main" class="mb-4 xl:mb-20">
   <div class="grid-container">
     <div class="grid-content">
-      <p class="font-alt leading-4 xl:leading-6 mb-3 text-base xl:text-xl xl:mb-12">
-        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 class="font-alt text-xl leading-7 mb-5">
+        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ante orci, molestie vitae vehicula
+        venenatis, tincidunt ac pede. Mauris suscipit, ligula sit amet pharetra semper, nibh ante cursus purus,
+        vel sagittis velit mauris vel metus.
       </p>
     </div>
   </div>
@@ -26,7 +24,7 @@
                :class="{'switch__item--active': isCurrentView('program')}">Vláda</a>
           </div>
         </div>
-        <div class="flex flex-wrap justify-center mb-12">
+        <div class="flex flex-wrap gap-4 xl:justify-center">
           <template v-if="isCurrentView('candidates')">
             {{> molecules-person-contact-big-block(name: "Ivan Bartoš", function: "předseda Pirátů, poslanec PSP ČR za Ústecký kraj, ministr, vicepremiér") }}
           </template>
@@ -39,7 +37,8 @@
       </ui-view-provider>
     </div>
   </div>
-  {{> organisms-newsletter-section }}
 </main>
 
+{{> organisms-newsletter-section }}
+
 {{> organisms-footer }}

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

@@ -7,7 +7,7 @@
     <section class="grid-container person-grid-container">
       <div class="grid-content leading-6">
         <article class="mb-4 xl:mb-24 xl:mr-2">
-          <p class="font-alt mb-5">
+          <p class="font-alt text-xl leading-7 mb-5">
             Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ante orci, molestie vitae vehicula
             venenatis, tincidunt ac pede. Mauris suscipit, ligula sit amet pharetra semper, nibh ante cursus purus,
             vel sagittis velit mauris vel metus.
@@ -41,21 +41,21 @@
         </article>
       </div>
       <div class="grid-right-side mb-8 xl:mb-0">
-        <div class="bg-grey-100 mb-1 px-7 py-9">
+        <div class="bg-grey-100 flex flex-col justify-center mb-1 px-7 py-4 xl:py-9">
           <div class="flex mb-2">
             <i class="ico--envelope mr-2"></i>
             <a href="mailto:ivan.bartos@pirati.cz" class="text-turquoise-500 underline">
               ivan.bartos@pirati.cz
             </a>
           </div>
-          <div class="flex mb-2">
+          <div class="flex">
             <i class="ico--phone mr-2"></i>
             <a href="tel:+420 775 978 550">
               +420 775 978 550
             </a>
           </div>
         </div>
-        <div class="bg-grey-100 px-7 py-9">
+        <div class="bg-grey-100 flex flex-col justify-center px-7 py-4 xl:py-9">
           <div class="flex mb-2">
             <i class="ico--facebook mr-2"></i>
             <a href="">
@@ -68,7 +68,7 @@
               Twitter
             </a>
           </div>
-          <div class="flex mb-2">
+          <div class="flex">
             <i class="ico--instagram mr-2"></i>
             <a href="">
               Instagram
@@ -78,9 +78,9 @@
       </div>
     </section>
   </div>
-  <section class="grid-container no-max mr-0 mb-8">
+  <section class="grid-container no-max mr-0 person-twitter-section mb-4 xl:mb-20">
     <div class="grid-content-with-right-side">
-      <h2 class="head-4xl text-center xl:text-left">
+      <h2 class="head-4xl text-left">
         Aktuálně na Twitteru
       </h2>
       <div class="__js-root twitter-carousel-root">
@@ -104,7 +104,7 @@
       </div>
     </div>
   </section>
-  <section class="grid-container mb-4 justify-start xl:mb-14">
+  <section class="grid-container mb-4 xl:mb-20 justify-start">
     <div class="grid-content">
       <div class="leading-6">
         <h2 class="head-4xl">
@@ -115,7 +115,7 @@
       </div>
     </div>
   </section>
-  <section class="grid-container person-grid-container mb-4 justify-start xl:mb-14">
+  <section class="grid-container person-grid-container mb-4 xl:mb-20 justify-start">
     <div class="grid-content-with-right-side">
       <h2 class="head-4xl text-left">
         Další lidé z poslanecké sněmovny

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

@@ -2,26 +2,26 @@
 
 {{> molecules-simple_header(title: "Program") }}
 
-<main role="main">
+<main role="main" class="mb-4 xl:mb-20">
   <div class="grid-container">
     <div class="grid-content">
-      <p class="font-alt leading-6 mb-12 text-xl">
-        23. a 24. září 2022 nás čekají volby do zastupitelstev obcí a do třetiny Senátu Parlamentu České republiky.
-        Níže předkládáme zásadní body společného programu pro komunální volby. <br> Kompletní program ve formátu pdf. <br>
-        Programy jednotlivých sdružení naleznete na jejich stránkách.
+      <p class="font-alt text-xl leading-7 mb-5">
+        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ante orci, molestie vitae vehicula
+        venenatis, tincidunt ac pede. Mauris suscipit, ligula sit amet pharetra semper, nibh ante cursus purus,
+        vel sagittis velit mauris vel metus.
       </p>
     </div>
   </div>
-  <div class="container--medium">
+  <div class="">
     <div class="__js-root">
     <ui-view-provider :initial="{candidates: true, program: false}" :sync-location="true" v-slot="{ isCurrentView, toggleView }">
-    <div class="mb-12">
+    <div class="mb-12 container--medium">
       <div class="switch">
         <a @click="toggleView('candidates')" class="switch__item" :class="{'switch__item--active': isCurrentView('candidates')}">Komunální volby 2022</a>
         <a @click="toggleView('program')" class="switch__item" :class="{'switch__item--active': isCurrentView('program')}">Sněmovní volby 2021</a>
       </div>
     </div>
-    <div class="mb-12">
+    <div>
       <template v-if="isCurrentView('candidates')">
         {{> molecules-icon-title-text-block(icon: "ico--book") }}
         {{> molecules-icon-title-text-block(icon: "ico--book") }}
@@ -33,9 +33,7 @@
     </ui-view-provider>
     </div>
   </div>
-  {{> organisms-newsletter-section }}
 </main>
 
-
-
+{{> organisms-newsletter-section }}
 {{> organisms-footer }}

main/styleguide/source/css/atoms/container.pcss

@@ -56,6 +56,13 @@
     max-width: 1400px;
   }
 
+  &.person-twitter-section {
+    grid-template-columns: minmax(0, 1200px);
+    @screen xl {
+      grid-template-columns: 240px 1fr 102px;
+    }
+  }
+
   &.no-max {
     max-width: none;
   }
@@ -93,12 +100,18 @@
   grid-area: left-side;
 }
 
+.grid-left-side-with-content {
+  grid-column: left-side / content;
+  grid-row: left-side / content;
+}
+
 .grid-right-side {
   grid-area: right-side;
 }
 
 .grid-content-with-right-side {
   grid-column: content / right-side;
+  grid-row: content / right-side;
 }
 
 @responsive {

main/styleguide/source/css/atoms/extra_sizing.pcss

@@ -17,9 +17,9 @@
 }
 
 .photo-header {
-  height: 36rem;
+  height: 414px;
 
-  @screen xl {
+  @screen md {
     height: 40vw;
   }
 

main/styleguide/source/css/atoms/flag.pcss

@@ -8,6 +8,7 @@
     left: 100%;
     top: 0;
     background: inherit;
-    clip-path: polygon(-2px -1px, 100% -1px, 60% 50%, 100% 100.7%, -2px 100.7%);
+    clip-path: polygon(0px 0px, 100% 0px, 0% 50%, 100% 100%, 0px 100%);
   }
 }
+

main/styleguide/source/css/atoms/heading.pcss

@@ -140,7 +140,7 @@
 
 
 .header-clip {
-  clip-path: polygon(0 0, 100% 0, 100% 88%, 0% 100%);
+  clip-path: polygon(0 0, 100% 0, 100% 96%, 0% 100%);
 }
 
 
@@ -159,7 +159,7 @@
 }
 
 .head-4xl {
-  @apply font-alt text-xl font-medium leading-7 tracking-tight uppercase mb-5 lg:leading-10 xl:text-4xl;
+  @apply font-alt text-3xl font-medium leading-7 tracking-tight uppercase mb-5 lg:leading-10 xl:text-4xl;
 }
 
 .head-6xl {

main/styleguide/source/css/molecules/carousels.pcss

@@ -30,20 +30,24 @@
   position: relative;
 
   .header-carousel--text {
-    @apply font-alt text-2xl sm:text-5xl uppercase lg:text-7xl;
+    @apply font-alt text-4xl sm:text-5xl uppercase lg:text-7xl;
     max-width: 1200px;
+    white-space: nowrap;
     position: absolute;
-    top: 35%;
-    margin-left: 15%;
-
+    top: 50%;
+    margin-left: 10%;
     @screen sm {
       margin-left: 10%;
+      top: 35%;
     }
     @screen lg {
+      top: 25%;
+    }
+    @screen xl {
       top: 30%;
     }
     @screen 2xl {
-      top: 45%;
+      top: 40%;
     }
   }
 
@@ -56,6 +60,13 @@
     transition: all 800ms ease-in-out;
     transform: scale(1.15, 1.15);
     width: 100%;
+    height: 458px;
+    object-fit: cover;
+    margin-bottom: -3px;
+
+    @screen md {
+      height: auto;
+    }
   }
 
   .slick-slide {
@@ -85,22 +96,31 @@
   .slick-arrow {
     font-size: 0;
     position: absolute;
-    right: 10%;
+    right: 20%;
     top: 80%;
     z-index: 10;
 
+    @screen sm {
+    right: 10%;
+    }
     @screen lg {
       top: 60%;
     }
 
     &:before, &:after {
-      border-right: 2px solid white;
-      border-bottom: 2px solid white;
+    border-right: 3px solid white;
+    border-bottom: 3px solid white;
     color: white;
     content: '';
-      height: .8rem;
+    height: 1.3rem;
     position: absolute;
+    width: 1.3rem;
+      @screen sm {
+      border-right: 2px solid white;
+      border-bottom: 2px solid white;
+      height: .8rem;
       width: .8rem;
+        }
       @screen lg {
         height: 1rem;
         width: 1rem;
@@ -118,18 +138,27 @@
 
   .slick-dots {
     color: white;
-    left: 5%;
+    left: 10%;
     position: absolute;
-    top: 60%;
+    top: 90%;
     z-index: 10;
 
+    @screen sm {
+      left: 5%;
+      top: 60%;
+    }
     li {
+    display:inline-block;
     border: 1px solid white;
     border-radius: 50%;
     height: 6px;
-      margin-bottom: 6px;
     width: 6px;
+    margin: 3px;
 
+      @screen sm {
+        display: block;
+        margin-bottom: 6px;
+      }
       &.slick-active {
         background-color: white;
       }
@@ -140,6 +169,10 @@
     }
   }
 }
+.btn-carousel{
+  @aplly h-11;
+  top: 28%;
+}
 
 .article-carousel {
   .slick-arrow {
@@ -186,12 +219,14 @@
     top: -2.6rem;
   }
   &:before {
+    @screen lg {
       background: linear-gradient(90deg, rgba(2,0,36,0) 0%, rgba(255,255,255,1) 100%);
+    }
     content: '';
     height: 100%;
     right: 0;
     position: absolute;
-    width: 20%;
+    width: 10%;
     z-index: 100;
   }
 }

main/styleguide/source/css/molecules/contact_box.pcss

 .contact-box {
-  @apply border border-grey-100 flex flex-col h-80 items-center justify-between mr-4 mb-4 px-16 py-8 text-center;
+  @apply border border-grey-100 flex flex-col h-80 items-center justify-between px-16 py-8 text-center;
   width: 280px;
 }

main/styleguide/source/css/molecules/map.pcss

-
-.map-polygon {
-  z-index: 1;
-  transition: all 300ms ease-out;
-  transition-delay: 100ms;
-
-  &:hover {
-    fill: #25A5B9;
-    transform: scale(1,1.05);
-    z-index: 10;
-  }
-}

main/styleguide/source/css/molecules/sliding_button.pcss

 .btn {
-  @apply font-alt inline-flex justify-center items-center h-8 leading-9 py-1 xl:h-11;
+  @apply font-alt inline-flex justify-center items-center leading-9 py-1 h-11;
 }
 
 .btn__slide__wrap {

main/styleguide/source/css/organisms/navbar.pcss

@@ -38,6 +38,7 @@
 
 .navbar-background {
   background: linear-gradient(180deg, rgb(0, 0, 0) 8%, rgba(255, 255, 255, 0) 100%);
+  min-height: 63px;
 }
 .main-menu-grid {
   max-width: none;
@@ -48,7 +49,7 @@
 .menu-flag {
   position: absolute;
   left: 0;
-  width: 110px;
+  width: 209px;
 }
 
 .main-menu__external {

main/styleguide/source/css/organisms/newsletter.pcss

+.newsletter-grid {
+  @apply grid;
+
+  gap: 1rem;
+
+  grid-template-areas:
+  "icon-area additional-text"
+  "main-text main-text"
+  "input-area input-area";
+
+  @screen xl {
+    grid-template-areas:
+    "icon-area main-text"
+    "additional-text input-area";
+  }
+}
+
+.newsletter-grid__icon {
+  grid-area: icon-area;
+  max-width: 10rem;
+}
+
+.newsletter-grid__additional-text {
+  grid-area: additional-text;
+  align-self: center;
+  max-width: 33rem;
+
+  @screen xl {
+    align-self: start;
+    max-width: 10rem;
+  }
+}
+
+.newsletter-grid__main-text {
+  grid-area: main-text;
+  max-width: 33rem;
+}
+
+.newsletter-grid__input {
+  grid-area: input-area;
+}

main/styleguide/source/css/organisms/region-map.pcss

+.region-map__list {
+  columns: 2;
+}
+
+.region-map__region {
+  @apply transition duration-500;
+  transition: all 300ms ease-out;
+
+  stroke: theme('colors.white');
+  stroke-width: 4px;
+  stroke-linejoin: round;
+
+  &:after {
+    content: '';
+    width: 10px;
+    position: absolute;
+    height: 10px;
+    background: #2ECC40;
+    z-index: 10;
+  }
+}
+
+.region-map__region--current {
+  fill: #25A5B9;
+  transform: scale(1,1.05);
+}

main/styleguide/source/css/style.pcss

@@ -27,12 +27,13 @@
 
 @import "./molecules/carousels.pcss";
 @import "./molecules/contact_box.pcss";
-@import "./molecules/map.pcss";
 @import "./molecules/sliding_button.pcss";
 @import "./molecules/switch.pcss";
 
 @import "./organisms/footer.pcss";
 @import "./organisms/navbar.pcss";
+@import "./organisms/newsletter.pcss";
+@import "./organisms/region-map.pcss";
 
 
 /**