blog listing

README.md

-# Pirati UI kit
+# Koaliční UI kit Pirátů a STAN
 
-This repository holds UI styleguide for Czech Pirate Party websites. It's
-intention is to made a core framework to be used across all sites and build all
-UI using it. This will ensure better consistency a easier updates.
+This repository holds UI styleguide for the coalition of Czech Pirate Party and STAN. It's
+based on [updated version](https://gitlab.pirati.cz/fanky/ui_styleguide) of Pirate Party's [UI Styleguide](https://gitlab.pirati.cz/to/weby/ui-styleguide/). It's build primarily for use on coalition's elections website but can be used for other coalition's webs too.
 
 It is built upon:
 

source/_patterns/01-molecules/04-article-card/article-card-pirati-stan.mustache

+<article class="card card--hoveractive article-card article-card-pirati-stan {{ classes }}">
+  <div class="article-card-cover">
+    <a href="#href">
+      <img src="{{ img.landscape-16x9.src }}" />
+    </a>
+    <div class="article-card-cover__details">
+      <div class="article-card-sharing">
+        {{> molecules-small-colored-social-icon-group }}
+      </div>
+      <div class="article-card-meta">
+        <span class="article-card-meta__item">{{ date }}</span>
+        <span class="article-card-meta__item">{{ organization.name }}</span>
+      </div>
+    </div>
+  </div>
+  <div class="card__body article-card__body">
+    <a href="#"><h1 class="card-headline mb-4">{{ headline.medium }}</h1></a>
+    <p class="card-body-text flex-grow">{{ excerpt.long }}</p>
+    <div class="inline-block-nogap mt-4">
+      {{> 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/02-organisms/02-articles/article-card-list-pirati-stan.mustache

+<div class="article-card-list grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 lg:gap-8">
+  {{> molecules-article-card-pirati-stan(classes: "emphasized-black") }}
+  {{> molecules-article-card-pirati-stan }}
+  {{> molecules-article-card-pirati-stan }}
+  {{^ onlyThree }}
+  {{> molecules-article-card-pirati-stan(classes: "emphasized-lemon") }}
+  {{> molecules-article-card-pirati-stan }}
+  {{> molecules-article-card-pirati-stan }}
+  {{> molecules-article-card-pirati-stan }}
+  {{> molecules-article-card-pirati-stan(classes: "emphasized-acidgreen") }}
+  {{> molecules-article-card-pirati-stan }}
+  {{/ onlyThree }}
+</div>

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

+{{> organisms-header }}
+
+<div class="container container--default pt-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-pirati-stan() }}
+    </main>
+
+    <nav>
+      {{> molecules-pagination }}
+    </nav>
+  </section>
+</div>
+
+{{> organisms-footer }}

source/css/molecules/article-card-pirati-stan.pcss

+.article-card-pirati-stan{
+
+  .card-body-text{
+    color: #8A8A8A;
+  }
+  &.emphasized-black{
+    @apply bg-black;
+
+    .card-headline{
+      @apply text-white;
+    }
+    .card-body-text{
+      @apply text-white;
+    }
+  }
+  &.emphasized-lemon{
+    @apply bg-lemon;
+
+    .card-body-text{
+      @apply text-black;
+    }
+    .article-card__category-button{
+      .btn__body{
+        background-color: rgba(240,240,240,0.3)
+      }
+    }
+  }
+  &.emphasized-acidgreen{
+    @apply bg-acidgreen;
+
+    .card__body{
+      a,
+      .card-headline,
+      .card-body-text{
+        @apply text-white;
+      }
+    }
+    .article-card__category-button{
+      .btn__body{
+        @apply text-white;
+        background-color: rgba(240,240,240,0.2);
+      }
+    }
+  }
+}
\ No newline at end of file

source/css/style.pcss

@@ -39,6 +39,7 @@
 @import "./atoms/tooltip.pcss";
 
 @import "./molecules/article-card.pcss";
+@import "./molecules/article-card-pirati-stan.pcss";
 @import "./molecules/badge.pcss";
 @import "./molecules/banner.pcss";
 @import "./molecules/calendar.pcss";