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

main/styleguide/source/_patterns/atoms/form-fields/form-checkbox.mustache

 <div class="checkbox form-field__control {{ classes }}">
   <input type="checkbox" id="checkbox_1" {{# disabled }}disabled{{/ disabled }} {{# readonly }}readonly{{/ readonly }}>
-  <label for="checkbox_1">{{ label }}</label>
+  <label class="text-xs font-bold" for="checkbox_1">{{ label }}</label>
 </div>

main/styleguide/source/_patterns/molecules/articles/article-perex.mustache

 <div class="grid-container mb-2 lg:mb-12">
   <div class="grid-left-side h-full bg-grey-150 left-tab">
     <div class="p-6">
-      <span class="font-bold">AUTOR ČLÁNKU: <br> KAREL KOMÁREK</span><br>
+      <span class="font-bold 3xl:text-xl">AUTOR ČLÁNKU: <br> KAREL KOMÁREK</span><br>
     </div>
   </div>
   <div class="grid-content leading-6">

main/styleguide/source/_patterns/molecules/articles/article-photo-header.mustache

 <header
-  class="bg-black flex items-center header-clip photo-header py-32 mb-20 w-full"
+  class="bg-black flex items-center header-clip photo-header py-32 mb-20 w-full bg-no-repeat bg-cover bg-center"
   style="background-image: url('https://cc.cz/wp-content/uploads/2022/04/bartos-otv.jpg')"
 >
   <div class="grid-container header-max-width pt-16">
-    <div class="col-start-2 col-end-13">
+    <div class="pl-4 pr-2 col-start-1 col-end-3 sm:col-start-2 sm:col-end-13 sm:pr-0">
       <div class="text-3xl text-green-500 mb-8">
         <span>2.3.2022</span>
       </div>
-      <h1 class="font-alt text-white text-6xl">
+      <h1 class="font-alt text-white text-3xl md:text-5xl lg:text-6xl">
         Senátoři vyzvali k ukončení veřejné podpory firmám z Ruska a Běloruska, vkteré neodsoudí akt vojenské agrese na
         Ukrajině
       </h1>

main/styleguide/source/_patterns/molecules/articles/article-richtext-content.mustache

@@ -4,7 +4,7 @@
       Senát chce v souvislosti s ruskou agresí zabránit některým firmám z Ruska a Běloruska čerpat dotace z prostředků
       rozpočtu České republiky.
     </h2>
-    <p>
+    <p class="3xl:text-lg">
       Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem
       aperiam,
       eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. id est laborum

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

 <header
-  class="bg-black flex items-center header-clip photo-header mb-20 w-full"
+  class="bg-black flex items-center header-clip photo-header py-32 mb-20 w-full bg-no-repeat bg-cover bg-center"
   style="background-image: url('https://cc.cz/wp-content/uploads/2022/04/bartos-otv.jpg')"
 >
-  <div class="container--narrow flex items-center pt-40">
+  <div class="grid-container header-max-width pt-16">
+  <div class="pl-4 pr-2 col-start-1 col-end-3 sm:col-start-2 sm:col-end-13 sm:pr-0">
     <h1 class="font-alt text-white">
       <span class="text-2xl">Ing.</span><br>
       <span class="font-alt text-7xl">Ivan Bartoš</span><span class="text-2xl">, PhDr. et PhD</span><br>
       <span class="font-alt">Prezident České republiky</span>
     </h1>
   </div>
+      </div>
 </header>

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

@@ -3,24 +3,44 @@
 {{> molecules-photo_header }}
 
 <main role="main">
-  <section class="container--narrow flex flex-wrap">
+  <div class="grid-container">
+      <section class="flex flex-wrap grid-content-with-right-side">
         <div class="leading-6 w-7/12">
           <article class="mb-24">
             <p class="font-alt 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.
+              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>
 
             <p class="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. Aliquam erat volutpat. Mauris dictum facilisis augue. Aenean id metus id velit ullamcorper pulvinar. Sed vel lectus. Donec odio tempus molestie, porttitor ut, iaculis quis, sem. Nullam rhoncus aliquam metus. Proin pede metus, vulputate nec, fermentum fringilla, vehicula vitae, justo. Nulla accumsan, elit sit amet varius semper, nulla mauris mollis quam, tempor suscipit diam nulla vel leo. Nulla est. Sed ac dolor sit amet purus malesuada congue. Nulla turpis magna, cursus sit amet, suscipit a, interdum id, felis. Phasellus enim erat, vestibulum vel, aliquam a, posuere eu, velit. Fusce consectetuer risus a nunc. Proin pede metus, vulputate nec, fermentum fringilla, vehicula vitae, justo. Nulla non lectus sed nisl molestie malesuada.
+              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. Aliquam erat volutpat. Mauris dictum facilisis augue. Aenean id metus
+              id velit ullamcorper pulvinar. Sed vel lectus. Donec odio tempus molestie, porttitor ut, iaculis quis,
+              sem. Nullam rhoncus aliquam metus. Proin pede metus, vulputate nec, fermentum fringilla, vehicula vitae,
+              justo. Nulla accumsan, elit sit amet varius semper, nulla mauris mollis quam, tempor suscipit diam nulla
+              vel leo. Nulla est. Sed ac dolor sit amet purus malesuada congue. Nulla turpis magna, cursus sit amet,
+              suscipit a, interdum id, felis. Phasellus enim erat, vestibulum vel, aliquam a, posuere eu, velit. Fusce
+              consectetuer risus a nunc. Proin pede metus, vulputate nec, fermentum fringilla, vehicula vitae, justo.
+              Nulla non lectus sed nisl molestie malesuada.
             </p>
 
             <p class="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. Aliquam erat volutpat. Mauris dictum facilisis augue. Aenean id metus id velit ullamcorper pulvinar. Sed vel lectus. Donec odio tempus molestie, porttitor ut, iaculis quis, sem. Nullam rhoncus aliquam metus. Proin pede metus, vulputate nec, fermentum fringilla, vehicula vitae, justo. Nulla accumsan, elit sit amet varius semper, nulla mauris mollis quam, tempor suscipit diam nulla vel leo. Nulla est. Sed ac dolor sit amet purus malesuada congue. Nulla turpis magna, cursus sit amet, suscipit a, interdum id, felis. Phasellus enim erat, vestibulum vel, aliquam a, posuere eu, velit. Fusce consectetuer risus a nunc. Proin pede metus, vulputate nec, fermentum fringilla, vehicula vitae, justo. Nulla non lectus sed nisl molestie malesuada.
+              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. Aliquam erat volutpat. Mauris dictum facilisis augue. Aenean id metus
+              id velit ullamcorper pulvinar. Sed vel lectus. Donec odio tempus molestie, porttitor ut, iaculis quis,
+              sem. Nullam rhoncus aliquam metus. Proin pede metus, vulputate nec, fermentum fringilla, vehicula vitae,
+              justo. Nulla accumsan, elit sit amet varius semper, nulla mauris mollis quam, tempor suscipit diam nulla
+              vel leo. Nulla est. Sed ac dolor sit amet purus malesuada congue. Nulla turpis magna, cursus sit amet,
+              suscipit a, interdum id, felis. Phasellus enim erat, vestibulum vel, aliquam a, posuere eu, velit. Fusce
+              consectetuer risus a nunc. Proin pede metus, vulputate nec, fermentum fringilla, vehicula vitae, justo.
+              Nulla non lectus sed nisl molestie malesuada.
             </p>
           </article>
         </div>
-    <div class="w-1/12"><!-- TODO solve this better --></div>
-    <div class="w-4/12">
+        <div class="w-auto">
           <div class="bg-grey-100 mb-1 px-7 py-9">
             <div class="flex mb-2">
               <i class="ico--envelope mr-2"></i>
@@ -57,12 +77,12 @@
           </div>
         </div>
       </section>
-  <section>
-    <h2 class="font-alt text-4xl">
+    </div>
+      <section class="container--medium">
+        <h2 class="font-alt text-4xl text-center xl:text-left">
           Aktuálně na Twitteru
         </h2>
-    <div class="mb-8 flex flex-wrap justify-center">
-      <!-- TODO dostylovat-->
+        <div class="mb-8 flex flex-wrap">
           <div class="md:w-1/3 lg:w-1/4">
             {{> molecules-twitter-box }}
           </div>
@@ -77,7 +97,7 @@
           </div>
         </div>
       </section>
-  <section class="container--medium mb-40">
+      <section class="container--medium mb-40 flex flex-wrap justify-center xl:justify-start">
         <div class="leading-6 w-8/12">
           <h2 class="font-alt mb-7 text-4xl">
             Články
@@ -86,17 +106,17 @@
           {{> molecules-person-article-preview }}
         </div>
       </section>
-  <section class="container--medium mb-20">
+      <section class="container--medium mb-20 flex flex-wrap justify-center xl:justify-start">
         <h2 class="font-alt mb-12 text-4xl">
           Další lidé z poslanecké sněmovny
         </h2>
-    <div class="flex flex-wrap">
+        <div class="flex flex-wrap justify-center">
           {{> molecules-person-simple-block(name: "Klára Kocmanová", function: "poslankyně Parlamentu České republiky za Středočeský kraj") }}
           {{> molecules-person-simple-block(name: "Olga Richterová", function: "poslankyně, místopředsedkyně PSP ČR") }}
           {{> molecules-person-simple-block(name: "Jakub Michálek", function: "předseda poslaneckého klubu Pirátů") }}
         </div>
       </section>
-
+  </div>
   {{> organisms-newsletter-section }}
 </main>
 {{> organisms-footer }}

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

@@ -59,6 +59,9 @@
       "left-side content right-side";
       margin-left: 10%;
     }
+     @screen 3xl {
+      margin-left: 20%;
+    }
   }
 }
 

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

@@ -18,6 +18,8 @@
 
 .photo-header {
   height: 36rem;
+  @screen xl {
+    height: 40vw;
   }
 
   .simple-header-height {
@@ -29,8 +31,10 @@
       .simple-header-height {
         height: 26rem;
       }
+
       .footer-section {
         height: 981px;
       }
     }
   }
+}

main/styleguide/tailwind.config.js

@@ -35,6 +35,7 @@ module.exports = {
             'lg': '992px',
             'xl': '1200px',
             '2xl': '1366px',
+            '3xl': '2060px',
         },
         fontFamily: {
             alt: ['Bebas Neue', 'Helvetica', 'Arial', 'sans-serif'],