Skip to content
Snippets Groups Projects
Commit 0d2d319e authored by xaralis's avatar xaralis
Browse files

Responsive article listing

parent da8104f1
Branches
Tags
No related merge requests found
Pipeline #733 passed
...@@ -13,14 +13,13 @@ ...@@ -13,14 +13,13 @@
</div> </div>
</div> </div>
</div> </div>
<div class="card__body"> <div class="card__body article-card__body">
<a href="#"><h1 class="article-card__headline">{{ headline.medium }}</h1></a> <a href="#"><h1 class="article-card__headline">{{ headline.medium }}</h1></a>
<p class="article-card__excerpt">{{ excerpt.long }}</p> <p class="article-card__excerpt">{{ excerpt.long }}</p>
<div class="inline-block-nogap mt-2">
<div class="space-x-1 mt-2"> {{> atoms-basic-button(classes: "article-card__category-button btn--grey-125 btn--condensed text-sm font-light", cta: "Kategorie 1") }}
{{> atoms-basic-button(classes: "btn--grey-125 btn--condensed text-sm font-light", cta: "Kategorie 1") }} {{> atoms-basic-button(classes: "article-card__category-button btn--grey-125 btn--condensed text-sm font-light", cta: "Kategorie 2") }}
{{> atoms-basic-button(classes: "btn--grey-125 btn--condensed text-sm font-light", cta: "Kategorie 2") }} {{> atoms-basic-button(classes: "article-card__category-button btn--grey-125 btn--condensed text-sm font-light", cta: "Dlouhá kategorie 3") }}
{{> atoms-basic-button(classes: "btn--grey-125 btn--condensed text-sm font-light", cta: "Kategorie 3") }}
</div> </div>
</div> </div>
</article> </article>
...@@ -13,14 +13,13 @@ ...@@ -13,14 +13,13 @@
</div> </div>
</div> </div>
</div> </div>
<div class="card__body"> <div class="card__body article-card__body">
<a href="#" class="hover:line-white"><h1 class="article-card__headline text-white">{{ headline.medium }}</h1></a> <a href="#" class="hover:line-white"><h1 class="article-card__headline text-white">{{ headline.medium }}</h1></a>
<p class="article-card__excerpt text-white">{{ excerpt.long }}</p> <p class="article-card__excerpt text-white">{{ excerpt.long }}</p>
<div class="inline-block-nogap mt-2">
<div class="space-x-1 mt-2"> {{> atoms-basic-button(classes: "article-card__category-button btn--grey-800 btn--condensed text-sm font-light", cta: "Kategorie 1") }}
{{> atoms-basic-button(classes: "btn--grey-800 btn--condensed text-sm font-light", cta: "Kategorie 1") }} {{> atoms-basic-button(classes: "article-card__category-button btn--grey-800 btn--condensed text-sm font-light", cta: "Kategorie 2") }}
{{> atoms-basic-button(classes: "btn--grey-800 btn--condensed text-sm font-light", cta: "Kategorie 2") }} {{> atoms-basic-button(classes: "article-card__category-button btn--grey-800 btn--condensed text-sm font-light", cta: "Kategorie 3") }}
{{> atoms-basic-button(classes: "btn--grey-800 btn--condensed text-sm font-light", cta: "Kategorie 3") }}
</div> </div>
</div> </div>
</article> </article>
<div class="article-card-list grid grid-cols-4 gap-4"> <div class="article-card-list grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-2 lg:gap-4">
{{> molecules-emphasized-article-card }} {{> molecules-emphasized-article-card }}
{{> molecules-article-card }} {{> molecules-article-card }}
{{> molecules-emphasized-article-card }} {{> molecules-emphasized-article-card }}
......
.article-card { .article-card {
@apply elevation-3 transition duration-200; /* Use flexbox to grow the excerpt to max height (align category buttons at the bottom) */
@apply flex flex-col h-full elevation-3 transition duration-200;
&:hover { &:hover {
@apply elevation-21; @apply elevation-21;
...@@ -48,10 +49,19 @@ ...@@ -48,10 +49,19 @@
} }
} }
.article-card__body {
/* Use flexbox to grow the excerpt to max height (align category buttons at the bottom) */
@apply flex flex-col h-full;
}
.article-card__headline { .article-card__headline {
@apply head-heavy-xs mb-2 break-words; @apply head-heavy-xs mb-2 break-words;
} }
.article-card__excerpt { .article-card__excerpt {
@apply font-light leading-normal text-sm break-words; @apply font-light leading-normal text-sm break-words flex-grow;
}
.article-card__category-button {
@apply mr-sm mb-sm;
} }
.copyleft { .copyleft {
transform: matrix(-1, 0, 0, 1, 0, 0) !important; transform: matrix(-1, 0, 0, 1, 0, 0) !important;
} }
.inline-block-nogap {
/* Avoid gaps between inline-block elements */
font-size: 0;
}
Source diff could not be displayed: it is too large. Options to address this: view the blob.
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment