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

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