Skip to content
Snippets Groups Projects
Commit e9655e75 authored by Štěpán Farka's avatar Štěpán Farka
Browse files

[ADD] grid timeline

parent 24d3abce
No related branches found
No related tags found
2 merge requests!607Pirati.cz,!575Feature/pirati cz
Pipeline #9499 passed
......@@ -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>
......
.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;
}
......@@ -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";
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment