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