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