Skip to content
Snippets Groups Projects
Commit 0f25f6a5 authored by xaralis's avatar xaralis
Browse files

Add article listing

parent f6091ca9
Branches
Tags
No related merge requests found
Pipeline #715 passed
Stage: build
Expand all Show whitespace changes
Inline Side-by-side
Showing
with 194 additions and 32 deletions
source/_data/data.json
+ 12
− 8
View file @ 0f25f6a5
......@@ -51,23 +51,27 @@
"age": "30",
"position": "1"
},
"organization": {
"name": "Piráti Pardubického kraje"
},
"date": "22. 1. 2020",
"datetime": "22. 1. 2020 19:30",
"year": {
"long": "2013",
"short": "13"
"long": "2020",
"short": "20"
},
"month": {
"long": "January",
"short": "Jan",
"long": "Leden",
"short": "Led",
"digit": "01"
},
"dayofweek": {
"long": "Sunday",
"short": "Sun"
"long": "Neděle",
"short": "Ne"
},
"day": {
"long": "01",
"short": "1",
"ordinal": "st"
"short": "1"
},
"hour": {
"long": "06",
......
source/_patterns/00-atoms/01-text/headings.mustache
+ 1
− 0
View file @ 0f25f6a5
......@@ -12,6 +12,7 @@
<div>
<h1 class="head-heavy-base">{{ headline.short }}</h1>
<h1 class="head-heavy-sm">{{ headline.short }}</h1>
<h1 class="head-heavy-xs">{{ headline.short }}</h1>
<h1 class="head-heavy-2xs">{{ headline.short }}</h1>
</div>
......
source/_patterns/00-atoms/03-buttons/03-button-sizes.mustache
+ 12
− 7
View file @ 0f25f6a5
<button class="btn">
<div class="btn__body">{{ cta }}</div>
</button>
<button class="btn btn--lg">
<div class="btn__body">{{ cta }}</div>
</button>
<div class="space-y-1">
<div>
{{> atoms-basic-button(classes: "text-sm" )}}
{{> atoms-basic-button(classes: "text-base" )}}
{{> atoms-basic-button(classes: "text-lg" )}}
</div>
<div>
{{> atoms-basic-button(classes: "text-sm btn--condensed" )}}
{{> atoms-basic-button(classes: "text-base btn--condensed" )}}
{{> atoms-basic-button(classes: "text-lg btn--condensed" )}}
</div>
</div>
source/_patterns/00-atoms/04-social-icons/icon-variants.mustache
+ 3
− 3
View file @ 0f25f6a5
<a href="#" class="social-icon social-icon--fill bg-brands-facebook text-white {{ classes }}"><i class="{{ icon }}"></i></a>
<a href="#" class="social-icon social-icon--fill bg-brands-facebook text-white {{ classes }}"><i class="{{ icon }} text-xl"></i></a>
<a href="#" class="social-icon social-icon--fill bg-brands-facebook text-white {{ classes }}"><i class="{{ icon }} text-xl text-3xl"></i></a>
<a href="#" class="social-icon social-icon--fill social-icon--4 bg-brands-facebook text-white {{ classes }}"><i class="{{ icon }} text-sm"></i></a>
<a href="#" class="social-icon social-icon--fill social-icon--5 bg-brands-facebook text-white {{ classes }}"><i class="{{ icon }} text-xl"></i></a>
<a href="#" class="social-icon social-icon--fill social-icon--6 bg-brands-facebook text-white {{ classes }}"><i class="{{ icon }} text-3xl"></i></a>
source/_patterns/01-molecules/01-social-icon-group/colored-social-icon-group.mustache
+ 4
− 4
View file @ 0f25f6a5
<div class="social-icon-group space-x-xs">
{{> atoms-filled-social-icon(classes: "bg-brands-facebook text-white", icon: "fab fa-facebook") }}
{{> atoms-filled-social-icon(classes: "bg-brands-twitter text-white", icon: "fab fa-twitter") }}
{{> atoms-filled-social-icon(classes: "bg-brands-linkedin text-white", icon: "fab fa-linkedin") }}
<div class="social-icon-group space-x-xs {{ classes }}">
{{> atoms-filled-social-icon(classes: "bg-brands-facebook text-white social-icon--5", icon: "fab fa-facebook") }}
{{> atoms-filled-social-icon(classes: "bg-brands-twitter text-white social-icon--5", icon: "fab fa-twitter") }}
{{> atoms-filled-social-icon(classes: "bg-brands-linkedin text-white social-icon--5", icon: "fab fa-linkedin") }}
</div>
source/_patterns/01-molecules/01-social-icon-group/small-colored-social-icon-group.mustache 0 → 100644
+ 5
− 0
View file @ 0f25f6a5
<div class="social-icon-group {{ classes }}">
{{> atoms-filled-social-icon(classes: "bg-brands-facebook text-white text-sm social-icon--4", icon: "fab fa-facebook") }}
{{> atoms-filled-social-icon(classes: "bg-brands-twitter text-white text-sm social-icon--4", icon: "fab fa-twitter") }}
{{> atoms-filled-social-icon(classes: "bg-brands-linkedin text-white text-sm social-icon--4", icon: "fab fa-linkedin") }}
</div>
source/_patterns/01-molecules/02-article-card/article-card.mustache 0 → 100644
+ 26
− 0
View file @ 0f25f6a5
<article class="card article-card {{ 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">
<h1 class="article-card__headline">{{ headline.medium }}</h1>
<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>
</div>
</article>
source/_patterns/01-molecules/02-article-card/emphasized-article-card.mustache 0 → 100644
+ 26
− 0
View file @ 0f25f6a5
<article class="card article-card bg-black {{ 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">
<h1 class="article-card__headline text-white">{{ headline.medium }}</h1>
<p class="article-card__excerpt text-white">{{ excerpt.long }}</p>
<div class="space-x-1 mt-2">
{{> atoms-basic-button(classes: "btn--grey-450 btn--condensed text-sm font-light", cta: "Kategorie 1") }}
{{> atoms-basic-button(classes: "btn--grey-450 btn--condensed text-sm font-light", cta: "Kategorie 2") }}
{{> atoms-basic-button(classes: "btn--grey-450 btn--condensed text-sm font-light", cta: "Kategorie 3") }}
</div>
</div>
</article>
source/_patterns/02-organisms/00-global/footer.mustache
+ 3
− 3
View file @ 0f25f6a5
......@@ -67,8 +67,8 @@
</div>
{{> atoms-basic-contact-line(icon: "fas fa-envelope", caption: "Dejte nám vědět") }}
</div>
{{> atoms-icon-button(cta: "Přispěj", icon: "fas fa-hand-holding-usd", classes: "btn--white btn--hoveractive btn--lg btn--fullwidth md:btn--autowidth mb-1") }}
{{> atoms-icon-button(cta: "Naloď se", icon: "fas fa-anchor", classes: "btn--green-100 btn--hoveractive btn--lg btn--fullwidth md:btn--autowidth") }}
{{> atoms-icon-button(cta: "Přispěj", icon: "fas fa-hand-holding-usd", classes: "btn--white btn--hoveractive text-lg btn--fullwidth md:btn--autowidth mb-1") }}
{{> atoms-icon-button(cta: "Naloď se", icon: "fas fa-anchor", classes: "btn--green-100 btn--hoveractive text-lg btn--fullwidth md:btn--autowidth") }}
</div>
</div>
</div>
......@@ -112,7 +112,7 @@
{{> molecules-condensed-badge(classes: "footer-contacts__item") }}
{{> molecules-condensed-badge(classes: "footer-contacts__item") }}
<div class="mt-4 lg:mt-0 lg:text-right footer-contacts__item">
{{> atoms-basic-button(cta: "Kontakt", classes: "btn--white btn--hoveractive btn--fullwidth md:btn--autowidth btn--lg btn--fading") }}
{{> atoms-basic-button(cta: "Kontakt", classes: "btn--white btn--hoveractive btn--fullwidth md:btn--autowidth text-lg btn--fading") }}
</div>
</div>
</div>
......
source/_patterns/02-organisms/02-articles/article-card-list.mustache 0 → 100644
+ 10
− 0
View file @ 0f25f6a5
<div class="article-card-list grid grid-cols-4 gap-4">
{{> molecules-emphasized-article-card }}
{{> molecules-article-card }}
{{> molecules-emphasized-article-card }}
{{> molecules-article-card }}
{{> molecules-emphasized-article-card }}
{{> molecules-article-card }}
{{> molecules-emphasized-article-card }}
{{> molecules-emphasized-article-card }}
</div>
source/css/atoms/button.pcss
+ 2
− 2
View file @ 0f25f6a5
......@@ -111,8 +111,8 @@
}
}
.btn.btn--lg .btn__body {
@apply text-lg;
.btn.btn--condensed .btn__body {
padding: .75em 1em;
}
@responsive {
......
source/css/atoms/heading.pcss
+ 4
− 0
View file @ 0f25f6a5
......@@ -54,6 +54,10 @@
@apply text-2xl font-condensed font-bold leading-tight;
}
.head-heavy-xs {
@apply text-xl font-condensed font-bold leading-tight;
}
.head-heavy-2xs {
@apply text-lg font-condensed font-bold leading-tight;
}
......
source/css/atoms/social-icon.pcss
+ 24
− 4
View file @ 0f25f6a5
.social-icon {
@apply inline-block align-middle text-center rounded-md;
@apply inline-flex items-center justify-center rounded-md no-underline;
&,
&:hover,
i,
i:before {
@apply no-underline;
}
}
.social-icon--4 {
width: 1.5rem;
height: 1.5rem;
line-height: 1.5rem;
}
.social-icon--5 {
width: 2rem;
height: 2rem;
line-height: 2rem;
}
.social-icon--fill {
/* @apply bg-black text-white; */
padding: .5em;
.social-icon--6 {
width: 3rem;
height: 3rem;
line-height: 3rem;
}
source/css/molecules/article-card.pcss 0 → 100644
+ 57
− 0
View file @ 0f25f6a5
.article-card {
@apply elevation-3 transition duration-200;
&:hover {
@apply elevation-21;
}
}
.article-card-cover {
@apply relative;
height: 12rem;
img {
@apply block object-cover w-full h-full;
}
&:before {
@apply absolute block top-0 left-0 bottom-0 right-0 pointer-events-none;
content: "";
background: linear-gradient(to bottom, rgba(0,0,0,0) 40%, rgba(0,0,0,.8));
}
}
.article-card-cover__details {
/* padding shall be kept in sync with general card */
@apply absolute left-0 bottom-0 p-2;
}
.article-card-sharing {
@apply mb-2 transition duration-200 opacity-0;
}
.article-card:hover .article-card-sharing {
@apply opacity-100;
}
.article-card-meta {
@apply text-sm text-white text-opacity-85;
}
.article-card-meta__item:not(:first-child) {
@apply ml-1;
&:before {
content: "";
@apply pr-1 border-l border-white border-opacity-85;
}
}
.article-card__headline {
@apply head-heavy-xs mb-2;
}
.article-card__excerpt {
@apply font-light leading-normal text-sm break-words;
}
source/css/organisms/article-card-list.pcss 0 → 100644
+ 0
− 0
View file @ 0f25f6a5
source/css/style.pcss
+ 1
− 0
View file @ 0f25f6a5
......@@ -23,6 +23,7 @@
@import "./atoms/paragraph.pcss";
@import "./atoms/social-icon.pcss";
@import "./molecules/article-card.pcss";
@import "./molecules/badge.pcss";
@import "./molecules/candidate-card.pcss";
@import "./molecules/candidate-table-row.pcss";
......
source/dist/style.pkgd.css
+ 1
− 1
View file @ 0f25f6a5
This diff is collapsed.
tailwind.config.js
+ 3
− 0
View file @ 0f25f6a5
......@@ -6,6 +6,9 @@ module.exports = {
},
gridTemplateColumns: {
'candidate-table-row': 'auto auto auto auto 1fr'
},
opacity: {
'85': '0.85',
}
},
fontFamily: {
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment

Pirátský GitLab - Home of the CopyLeft