Merge remote-tracking branch 'origin/feature/pirati-cz' into feature/pirati-cz-martin

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

-<div class="grid-container mb-2 lg:mb-12">
+<div class="grid-container mb-2 lg:mb-12 relative">
   <div class="grid-left-side h-full bg-grey-150 left-tab">
-    <div class="p-6 flex flex-wrap justify-between">
+    <div class="p-6 flex flex-wrap flex-row items-center justify-between xl:items-start xl:flex-col">
         <span class="font-bold 3xl:text-xl">AUTOR ČLÁNKU: <br> KAREL KOMÁREK</span>
         <span>
-        <div class="flex flex-row">
+        <div class="flex flex-row static bottom-0 xl:absolute sm:bottom-5">
             <a href="" class="flex hover:no-underline">
-              <i class="ico--facebook mr-1"></i>
+              <i class="ico--facebook mx-1"></i>
             </a>
             <a href="" class="flex hover:no-underline">
-              <i class="ico--twitter mr-1"></i>
+              <i class="ico--twitter mx-2"></i>
             </a>
             <a href="" class="flex hover:no-underline">
-              <i class="ico--instagram mr-1"></i>
+              <i class="ico--instagram mx-1"></i>
             </a>
         </div>
       </span>

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

@@ -2,6 +2,7 @@
   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">
   <div class="grid-content-with-right-side header-max-width pt-40 sm:pt-0">
     <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-lg sm:text-3xl text-green-500 mb-4 font-medium sm:mb-8">
@@ -13,4 +14,5 @@
       </h1>
     </div>
   </div>
+  </div>
 </header>

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

 <div class="grid-container mb-2 lg:mb-12">
   <div class="grid-content">
-    <h2 class="head-4xl">
+    <h2 class="text-3xl leading-7 head-4xl">
       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>

main/styleguide/source/_patterns/molecules/blocks/block-download.mustache

-<div class="grid-container px-4 mb-4 bg-grey-150 xl:mb-20">
+<div class="grid-container px-4 mb-4 bg-grey-150 xl:mb-20 py-5">
   <div class="flex justify-start xl:justify-end grid-left-side">
-    <i class="ico--download text-6xl mr-12 pt-5 pb-5"></i>
+    <i class="ico--download  text-6xl sm:text-7xl mr-12"></i>
   </div>
   <div class="grid-content flex items-center flex-wrap gap-3">
-    <div class="flex items-center bg-white p-3 h-11 mr-3">
+    <div class="flex items-center bg-white h-11 p-1 mr-3">
       <span class="font-bold mr-1">Stáhnout soubor: </span>
       <span>prehled-tabulka.pdf</span>
     </div>

main/styleguide/source/_patterns/molecules/blocks/block-quote.mustache

-<div class="grid-container px-4 mb-4 bg-grey-150 pt-10 lg:mb-20">
-  <div class="grid-left-side flex justify-start xl:justify-end">
-    <i class="ico--code text-7xl mr-12"></i>
+<div class="grid-container flex flex-wrap xl:justify-center px-4 mb-4 bg-grey-150 pt-6 xl:pt-10 lg:mb-20">
+  <div class="grid-left-side">
+    <i class="ico--code text-6xl sm:text-7xl sm:mr-12"></i>
   </div>
   <div class="flex flex-col grid-content">
-    <span class="head-4xl">Senát chce v souvislosti s ruskou agresí zabránit některým firmám</span>
+    <span class="text-3xl head-4xl xl:text-4xl">Senát chce v souvislosti s ruskou agresí zabránit některým firmám</span>
     <span class="font-alt text-turquoise-500 mb-6">– ADÉLA ŠÍPOVÁ, SENÁTORKA ZA PIRÁTY</span>
   </div>
 </div>

main/styleguide/source/_patterns/organisms/main-articles-timeline.mustache

@@ -4,18 +4,16 @@
       <h2 class="head-4xl mb-5 xl:hidden">
         Červenec
       </h2>
-      <div class="flex flex-col justify-between xl:flex-row">
-        <div class="xl:pt-8">
-          {{> molecules-work-article-preview }}
+      <div class="article-timeline-grid justify-between">
+        <div class="article-timeline-grid__left-article xl:pt-8">
           {{> molecules-work-article-preview }}
         </div>
-        <div class="relative border border-violet-400 mx-8 hidden xl:block">
+        <div class="article-timeline-grid__timeline relative border border-violet-400 hidden xl:block">
           <div class="absolute bg-violet-400  p-1 text-white font-bold" style="transform: translateX(-50%); top: -1rem">
             Červenec
           </div>
         </div>
-        <div class="xl:pt-14">
-          {{> molecules-work-article-preview }}
+        <div class="article-timeline-grid__right-article xl:pt-14">
           {{> molecules-work-article-preview }}
         </div>
       </div>
@@ -24,18 +22,16 @@
       <h2 class="head-4xl mb-5 xl:hidden">
         Srpen
       </h2>
-      <div class="flex flex-col justify-between xl:flex-row">
-        <div class="xl:pt-8">
-          {{> molecules-work-article-preview }}
+      <div class="article-timeline-grid justify-between">
+        <div class="article-timeline-grid__left-article xl:pt-8">
           {{> molecules-work-article-preview }}
         </div>
-        <div class="relative border border-violet-400 mx-8 hidden xl:block">
+        <div class="article-timeline-grid__timeline relative border border-violet-400 hidden xl:block">
           <div class="absolute bg-violet-400  p-1 text-white font-bold" style="transform: translateX(-50%); top: -1rem">
             Srpen
           </div>
         </div>
-        <div class="xl:pt-14">
-          {{> molecules-work-article-preview }}
+        <div class="article-timeline-grid__right-article xl:pt-14">
           {{> molecules-work-article-preview }}
         </div>
       </div>

main/styleguide/source/css/organisms/article-timeline.pcss

+.article-timeline-grid {
+  @apply grid gap-2;
+
+  grid-template-areas:
+    "left-article"
+    "right-article";
+
+  @screen xl {
+    grid-template-columns: minmax(0, 570px) 1px minmax(0, 570px);
+    grid-template-areas: "left-article timeline right-article";
+  }
+}
+
+.article-timeline-grid__left-article {
+  grid-area: left-article;
+}
+
+.article-timeline-grid__right-article {
+  grid-area: right-article;
+}
+
+.article-timeline-grid__timeline {
+  grid-area: timeline;
+}

main/styleguide/source/css/style.pcss

@@ -30,6 +30,7 @@
 @import "./molecules/sliding_button.pcss";
 @import "./molecules/switch.pcss";
 
+@import "./organisms/article-timeline.pcss";
 @import "./organisms/footer.pcss";
 @import "./organisms/navbar.pcss";
 @import "./organisms/newsletter.pcss";