Add article listing page

source/_patterns/00-atoms/03-buttons/02-button-colors.mustache

@@ -2,6 +2,8 @@
   <div class="inline-flex flex-col space-y-2">
     {{> atoms-basic-button(classes: "btn--black") }}
     {{> atoms-basic-button(classes: "btn--grey-800") }}
+    {{> atoms-basic-button(classes: "btn--grey-700") }}
+    {{> atoms-basic-button(classes: "btn--grey-500") }}
     {{> atoms-basic-button(classes: "btn--grey-125") }}
     {{> atoms-basic-button(classes: "btn--white") }}
     {{> atoms-basic-button(classes: "btn--white btn--fading") }}
@@ -11,6 +13,8 @@
   <div class="inline-flex flex-col space-y-2">
     {{> atoms-icon-button(classes: "btn--black") }}
     {{> atoms-icon-button(classes: "btn--grey-800") }}
+    {{> atoms-icon-button(classes: "btn--grey-700") }}
+    {{> atoms-icon-button(classes: "btn--grey-500") }}
     {{> atoms-icon-button(classes: "btn--grey-125") }}
     {{> atoms-icon-button(classes: "btn--white") }}
     {{> atoms-icon-button(classes: "btn--white btn--fading") }}

source/_patterns/00-atoms/03-buttons/04-button-with-hover-effect.mustache

@@ -2,6 +2,8 @@
   <div class="inline-flex flex-col space-y-2">
     {{> atoms-basic-button(classes: "btn--black btn--hoveractive") }}
     {{> atoms-basic-button(classes: "btn--grey-800 btn--hoveractive") }}
+    {{> atoms-basic-button(classes: "btn--grey-700 btn--hoveractive") }}
+    {{> atoms-basic-button(classes: "btn--grey-500 btn--hoveractive") }}
     {{> atoms-basic-button(classes: "btn--grey-125 btn--hoveractive") }}
     {{> atoms-basic-button(classes: "btn--white btn--hoveractive") }}
     {{> atoms-basic-button(classes: "btn--white btn--fading btn--hoveractive") }}
@@ -11,6 +13,8 @@
   <div class="inline-flex flex-col space-y-2">
     {{> atoms-icon-button(classes: "btn--black btn--hoveractive") }}
     {{> atoms-icon-button(classes: "btn--grey-800 btn--hoveractive") }}
+    {{> atoms-icon-button(classes: "btn--grey-700 btn--hoveractive") }}
+    {{> atoms-icon-button(classes: "btn--grey-500 btn--hoveractive") }}
     {{> atoms-icon-button(classes: "btn--grey-125 btn--hoveractive") }}
     {{> atoms-icon-button(classes: "btn--white btn--hoveractive") }}
     {{> atoms-icon-button(classes: "btn--white btn--fading btn--hoveractive") }}

source/_patterns/00-atoms/03-buttons/inverted-icon-button.mustache

+{{> atoms-icon-button(classes: "btn--inverted-icon") }}

source/_patterns/01-molecules/pagination/pagination.mustache

+<div class="pagination-container">
+  <nav class="pagination">
+    {{> atoms-icon-button(cta: "Předchozí", icon: "fa fa-chevron-left", classes: "btn--grey-125 btn--hoveractive btn--condensed btn--inverted-icon") }}
+    {{> atoms-basic-button(cta: "1", classes: "btn--grey-125 btn--hoveractive btn--condensed hidden md:inline-block") }}
+    {{> atoms-basic-button(cta: "2", classes: "btn--grey-125 btn--hoveractive btn--condensed hidden md:inline-block") }}
+    {{> atoms-basic-button(cta: "3", classes: "btn--grey-300 btn--condensed hidden md:inline-block") }}
+    {{> atoms-basic-button(cta: "4", classes: "btn--grey-125 btn--hoveractive btn--condensed hidden md:inline-block") }}
+    {{> atoms-basic-button(cta: "5", classes: "btn--grey-125 btn--hoveractive btn--condensed hidden md:inline-block") }}
+    {{> atoms-icon-button(cta: "Další", icon: "fa fa-chevron-right", classes: "btn--grey-125 btn--hoveractive btn--condensed") }}
+  </nav>
+</div>

source/_patterns/03-templates/article-listing.mustache

+{{> organisms-header }}
+
+<div class="container container--default py-8 lg:py-24">
+  <section>
+    <h1 class="head-alt-md md:head-alt-lg max-w-5xl mb-4">Aktuální témata</h1>
+
+    <nav>
+      {{> atoms-button(classes: "btn--grey-125 btn--condensed", cta: "Zobrazit vše") }}
+      {{> atoms-button(classes: "btn--grey-125 btn--condensed", cta: "Kategorie 1") }}
+      {{> atoms-button(classes: "btn--grey-125 btn--condensed", cta: "Kategorie 2") }}
+      {{> atoms-button(classes: "btn--grey-125 btn--condensed", cta: "Kategorie 3") }}
+    </nav>
+
+    <hr>
+
+    <main>
+      {{> organisms-article-card-list() }}
+    </main>
+
+    <nav>
+      {{> molecules-pagination }}
+    </nav>
+  </section>
+</div>
+
+{{> organisms-footer }}

source/css/atoms/button.pcss

@@ -10,13 +10,17 @@
     @apply bg-black text-white;
   }
   &.btn--hoveractive:hover .btn__icon {
-    @apply border-grey-300;
+    @apply border-grey-600;
   }
 
   &.btn--hoveractive.btn--fading:hover .btn__body,
   &.btn--hoveractive.btn--fading:hover .btn__icon {
     @apply bg-grey-700 text-white;
   }
+
+  &.btn--hoveractive.btn--fading:hover .btn__icon {
+    @apply border-grey-500;
+  }
 }
 
 .btn__body,
@@ -47,8 +51,6 @@
   }
 
   &.btn--hoveractive:hover .btn__icon {
-    @apply border-l;
-
     svg, i {
       @apply text-white;
       fill: theme('colors.white');
@@ -56,6 +58,12 @@
   }
 }
 
+.btn.btn--inverted-icon {
+  .btn__icon {
+    @apply order-first border-r border-l-0;
+  }
+}
+
 .btn__inline-icon {
   @apply mr-2;
 }
@@ -67,7 +75,7 @@
   }
 
   .btn__icon {
-    @apply border-l border-grey-400 bg-grey-800;
+    @apply border-grey-400 bg-grey-800;
   }
 
   &.btn--hoveractive:hover .btn__body,
@@ -95,6 +103,17 @@
   }
 }
 
+.btn.btn--grey-300 {
+  .btn__body,
+  .btn__icon {
+    @apply bg-grey-300 text-white;
+  }
+
+  .btn__icon {
+    @apply border-grey-150;
+  }
+}
+
 .btn.btn--grey-500 {
   .btn__body,
   .btn__icon {
@@ -124,7 +143,7 @@
   }
 
   .btn__icon {
-    @apply border-grey-700;
+    @apply border-grey-500;
   }
 }
 

source/css/molecules/pagination.pcss

+.pagination {
+  @apply inline-block mx-auto;
+}
+
+.pagination-container {
+  @apply text-center py-8;
+}

source/css/style.pcss

@@ -38,6 +38,7 @@
 @import "./molecules/candidate-card.pcss";
 @import "./molecules/candidate-table-row.pcss";
 @import "./molecules/content-block.pcss";
+@import "./molecules/pagination.pcss";
 @import "./molecules/social-icon-group.pcss";
 @import "./molecules/switch.pcss";