From 394706dfb024426e6a76082e8936ffa22ff98f5c Mon Sep 17 00:00:00 2001
From: "fanky.eu" <jakub.webisti@gmail.com>
Date: Wed, 7 Apr 2021 13:12:02 +0200
Subject: [PATCH] blog listing

---
 README.md                                     |  7 ++-
 .../article-card-pirati-stan.mustache         | 25 +++++++++++
 .../article-card-list-pirati-stan.mustache    | 13 ++++++
 .../article-listing-pirati-stan.mustache      | 26 +++++++++++
 .../molecules/article-card-pirati-stan.pcss   | 45 +++++++++++++++++++
 source/css/style.pcss                         |  1 +
 6 files changed, 113 insertions(+), 4 deletions(-)
 create mode 100644 source/_patterns/01-molecules/04-article-card/article-card-pirati-stan.mustache
 create mode 100644 source/_patterns/02-organisms/02-articles/article-card-list-pirati-stan.mustache
 create mode 100644 source/_patterns/03-templates/article-listing-pirati-stan.mustache
 create mode 100644 source/css/molecules/article-card-pirati-stan.pcss

diff --git a/README.md b/README.md
index d250a65..2e60ea8 100644
--- a/README.md
+++ b/README.md
@@ -1,8 +1,7 @@
-# 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:
 
diff --git a/source/_patterns/01-molecules/04-article-card/article-card-pirati-stan.mustache b/source/_patterns/01-molecules/04-article-card/article-card-pirati-stan.mustache
new file mode 100644
index 0000000..9d152fc
--- /dev/null
+++ b/source/_patterns/01-molecules/04-article-card/article-card-pirati-stan.mustache
@@ -0,0 +1,25 @@
+<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>
diff --git a/source/_patterns/02-organisms/02-articles/article-card-list-pirati-stan.mustache b/source/_patterns/02-organisms/02-articles/article-card-list-pirati-stan.mustache
new file mode 100644
index 0000000..0eb6329
--- /dev/null
+++ b/source/_patterns/02-organisms/02-articles/article-card-list-pirati-stan.mustache
@@ -0,0 +1,13 @@
+<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>
diff --git a/source/_patterns/03-templates/article-listing-pirati-stan.mustache b/source/_patterns/03-templates/article-listing-pirati-stan.mustache
new file mode 100644
index 0000000..ebe3064
--- /dev/null
+++ b/source/_patterns/03-templates/article-listing-pirati-stan.mustache
@@ -0,0 +1,26 @@
+{{> 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 }}
diff --git a/source/css/molecules/article-card-pirati-stan.pcss b/source/css/molecules/article-card-pirati-stan.pcss
new file mode 100644
index 0000000..5a5322a
--- /dev/null
+++ b/source/css/molecules/article-card-pirati-stan.pcss
@@ -0,0 +1,45 @@
+.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
diff --git a/source/css/style.pcss b/source/css/style.pcss
index dd7fcc3..d917928 100644
--- a/source/css/style.pcss
+++ b/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";
-- 
GitLab