Responsive article listing

source/_patterns/01-molecules/02-article-card/article-card.mustache

@@ -13,14 +13,13 @@
       </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>
     <p class="article-card__excerpt">{{ excerpt.long }}</p>
-
-    <div class="space-x-1 mt-2">
-      {{> atoms-basic-button(classes: "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 2") }}
-      {{> atoms-basic-button(classes: "btn--grey-125 btn--condensed text-sm font-light", cta: "Kategorie 3") }}
+    <div class="inline-block-nogap 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: "article-card__category-button 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") }}
     </div>
   </div>
 </article>

source/_patterns/01-molecules/02-article-card/emphasized-article-card.mustache

@@ -13,14 +13,13 @@
       </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>
     <p class="article-card__excerpt text-white">{{ excerpt.long }}</p>
-
-    <div class="space-x-1 mt-2">
-      {{> atoms-basic-button(classes: "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 2") }}
-      {{> atoms-basic-button(classes: "btn--grey-800 btn--condensed text-sm font-light", cta: "Kategorie 3") }}
+    <div class="inline-block-nogap 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: "article-card__category-button 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") }}
     </div>
   </div>
 </article>

source/_patterns/02-organisms/02-articles/article-card-list.mustache

-<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-article-card }}
   {{> molecules-emphasized-article-card }}

source/css/molecules/article-card.pcss

 .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 {
     @apply elevation-21;
@@ -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 {
   @apply head-heavy-xs mb-2 break-words;
 }
 
 .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;
 }

source/css/utils.pcss

 .copyleft {
   transform: matrix(-1, 0, 0, 1, 0, 0) !important;
 }
+
+.inline-block-nogap {
+  /* Avoid gaps between inline-block elements */
+  font-size: 0;
+}