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

Add article listing

parent f6091ca9
No related branches found
No related tags found
No related merge requests found
Pipeline #715 passed
Stage: build
Hide 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
Source diff could not be displayed: it is too large. Options to address this: view the blob.
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.
Finish editing this message first!
Please register or to comment

Pirátský GitLab - Home of the CopyLeft