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

main/styleguide/source/_patterns/molecules/articles/person-article-preview.mustache

 <div class="flex flex-col justify-between items-start mb-9">
   <div class="flex font-bold mb-4 text-xs text-white uppercase">
-    <span class="bg-green-400 mr-1 px-1">Duben 2022</span>
-    <span class="bg-violet-400 mr-1 px-1">#ENERGETIKA</span>
+    <span class="bg-green-500 mr-1 px-1">Duben 2022</span>
+    <span class="bg-violet-600 mr-1 px-1">#ENERGETIKA</span>
   </div>
   <h4 class="head-3xl mb-4">
     Ukončili jsme povinné přimíchávání biopaliv první generace do pohonných hmot

main/styleguide/source/_patterns/molecules/blocks/icon-title-text-block.mustache

-<div class="flex mb-6">
-  <i class="{{ icon }} mr-6 text-6xl"></i>
-  <div class="flex flex-col">
+<div class="grid-container mb-12">
+<i class="grid-left-side {{ icon }} mr-6 text-6xl xl:justify-self-end"></i>
+<div class="grid-content flex flex-col">
   <h3 class="font-alt mb-4 text-4xl">
     DOSTUPNÉ A DŮSTOJNÉ BYDLENÍ PRO KVALITNÍ ŽIVOT
   </h3>

main/styleguide/source/_patterns/molecules/blocks/person-contact-big-block.mustache

-<div class="flex mb-8 person-box-big max-w-md xl:max-w-xl flex-col xl:flex-row xl:mb-16">
-  <div class="shrink-0 mr-2">
+<div class="flex mb-8 person-box-big max-w-sm gap-4 xl:max-w-xl flex-col xl:flex-row xl:mb-16">
+  <div class="xl:shrink-0">
     <img
-      class="rounded-full shadow-sm w-30 xl:w-60 mb-2"
+      class="rounded-full shadow-sm w-30 xl:w-60"
       src="https://randomuser.me/api/portraits/women/26.jpg"
       alt=" {{ name }}"
     >
@@ -11,10 +11,10 @@
       <h4 class="font-bold mb-2 text-2xl xl:text-4xl">
         {{ name }}
       </h4>
-      <span class="leading-6 mb-6 w-10/12">
+      <span class="leading-6 mb-4 xl:mb-6 w-10/12">
         {{ function }}
       </span>
-      <span class="font-bold mb-1 text-grey-300">
+      <span class="font-bold mb-3 xl:mb-4 text-grey-300">
         +420 778 111 466
       </span>
       <span class="text-turquoise-500 underline">

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 text-xl 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.

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

@@ -100,6 +100,11 @@
   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;
 }

main/styleguide/tailwind.config.js

@@ -136,6 +136,7 @@ module.exports = {
                 '300': '#8d415f',
                 '400': '#840048',
                 '500': '#670047',
+                '600': '#7D337F',
             },
         },
         container: {