diff --git a/main/styleguide/source/_patterns/molecules/articles/article-perex.mustache b/main/styleguide/source/_patterns/molecules/articles/article-perex.mustache
index 58186cbb3a29d95d01589dc816913b2f75b3795f..6d212b599eb13b76f01c5f6e4887741fc8ee0fe2 100644
--- a/main/styleguide/source/_patterns/molecules/articles/article-perex.mustache
+++ b/main/styleguide/source/_patterns/molecules/articles/article-perex.mustache
@@ -1,19 +1,19 @@
-<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">
- <span class="font-bold 3xl:text-xl">AUTOR ČLÁNKU: <br> KAREL KOMÁREK</span>
- <span>
- <div class="flex flex-row">
+ <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 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>
+ </div>
</span>
</div>
</div>
diff --git a/main/styleguide/source/_patterns/molecules/articles/article-photo-header.mustache b/main/styleguide/source/_patterns/molecules/articles/article-photo-header.mustache
index 0e6f8aeacbca38dd73034bb84f16b8b77e4580ba..857b5cfb092831551e1597bd7d8d0e7dea4444d6 100644
--- a/main/styleguide/source/_patterns/molecules/articles/article-photo-header.mustache
+++ b/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>
diff --git a/main/styleguide/source/_patterns/molecules/articles/article-richtext-content.mustache b/main/styleguide/source/_patterns/molecules/articles/article-richtext-content.mustache
index c331fff40854b87855f8c9e23534ca3dbeb3a667..9a46fc9c6dc9bfbb90bd3df6a2f49b59c92d7b17 100644
--- a/main/styleguide/source/_patterns/molecules/articles/article-richtext-content.mustache
+++ b/main/styleguide/source/_patterns/molecules/articles/article-richtext-content.mustache
@@ -1,6 +1,6 @@
<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>
diff --git a/main/styleguide/source/_patterns/molecules/blocks/block-download.mustache b/main/styleguide/source/_patterns/molecules/blocks/block-download.mustache
index f5237e533f4c8712f75892711e3904d7a6cacd8c..11f897c9f914b572ea2a4130cd10c2c49e55d218 100644
--- a/main/styleguide/source/_patterns/molecules/blocks/block-download.mustache
+++ b/main/styleguide/source/_patterns/molecules/blocks/block-download.mustache
@@ -1,9 +1,9 @@
-<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>
diff --git a/main/styleguide/source/_patterns/molecules/blocks/block-quote.mustache b/main/styleguide/source/_patterns/molecules/blocks/block-quote.mustache
index c3c07e46ec704aabf252c09033c94cabd9430bba..5dd8b68d46c4f08afc082d3ee18a6d92d4762035 100644
--- a/main/styleguide/source/_patterns/molecules/blocks/block-quote.mustache
+++ b/main/styleguide/source/_patterns/molecules/blocks/block-quote.mustache
@@ -1,9 +1,9 @@
-<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>
diff --git a/main/styleguide/source/_patterns/organisms/main-articles-timeline.mustache b/main/styleguide/source/_patterns/organisms/main-articles-timeline.mustache
index 143824099286046d8f192eb2e9d12790a0957239..a69e205baede650f95ebceb44d4d2db85a8676ea 100644
--- a/main/styleguide/source/_patterns/organisms/main-articles-timeline.mustache
+++ b/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>
diff --git a/main/styleguide/source/css/organisms/article-timeline.pcss b/main/styleguide/source/css/organisms/article-timeline.pcss
new file mode 100644
index 0000000000000000000000000000000000000000..910846b79d164f921e78c527dcde32b59b760892
--- /dev/null
+++ b/main/styleguide/source/css/organisms/article-timeline.pcss
@@ -0,0 +1,24 @@
+.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;
+}
diff --git a/main/styleguide/source/css/style.pcss b/main/styleguide/source/css/style.pcss
index c1378c75cd5090419e1ec5192e833888a745d6ae..7823d72578d048254e640c508142c3390188540a 100644
--- a/main/styleguide/source/css/style.pcss
+++ b/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";