Skip to content
Snippets Groups Projects
Commit 38f7dd7f authored by xaralis's avatar xaralis
Browse files

Revamp spacing scale

parent 72e2fdd1
No related branches found
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
Showing
with 107 additions and 112 deletions
source/_patterns/02-organisms/00-global/footer.mustache
+ 18
− 18
View file @ 38f7dd7f
......@@ -7,7 +7,7 @@
<img
src="https://www.va-fighters.com/pirati/krajska-sablona/dist/assets/img/logo.svg"
alt=""
class="footer-brand w-9 md:w-10 pb-3"
class="footer-brand w-32 md:w-40 pb-6"
/>
<p class="para hidden md:block">
Piráti, 2020. Všechna práva vyhlazena. Sdílejte a nechte
......@@ -16,52 +16,52 @@
</div>
<div class="md:col-span-2 col-span-12">
<span class="text-xl uppercase text-white">Nová sekce</span>
<ul class="mt-3">
<li class="mb-1">
<ul class="mt-6">
<li class="mb-2">
<a href="#">Lorem ipsum</a>
</li>
<li class="mb-1">
<li class="mb-2">
<a href="#">Lorem ipsum</a>
</li>
<li class="mb-1">
<li class="mb-2">
<a href="#">Lorem ipsum</a>
</li>
</ul>
</div>
<div class="md:col-span-2 col-span-12">
<span class="text-xl uppercase text-white">Nová sekce</span>
<ul class="mt-3">
<li class="mb-1">
<ul class="mt-6">
<li class="mb-2">
<a href="#">Lorem ipsum</a>
</li>
<li class="mb-1">
<li class="mb-2">
<a href="#">Lorem ipsum</a>
</li>
<li class="mb-1">
<li class="mb-2">
<a href="#">Lorem ipsum</a>
</li>
</ul>
</div>
<div class="md:col-span-2 col-span-12">
<span class="text-xl uppercase text-white">Nová sekce</span>
<ul class="mt-3">
<li class="mb-1">
<ul class="mt-6">
<li class="mb-2">
<a href="#">Lorem ipsum</a>
</li>
<li class="mb-1">
<li class="mb-2">
<a href="#">Lorem ipsum</a>
</li>
<li class="mb-1">
<li class="mb-2">
<a href="#">Lorem ipsum</a>
</li>
</ul>
</div>
<div class="md:col-span-3 col-span-12 footer-social mb-3 md:mb-0">
<div class="mb-2">
{{> molecules-basic-social-icon-group(classes: "text-white pb-2") }}
<div class="md:col-span-3 col-span-12 footer-social mb-6 md:mb-0">
<div class="mb-4">
{{> molecules-basic-social-icon-group(classes: "text-white pb-4") }}
{{> 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 text-lg btn--fullwidth md:btn--autowidth mb-1") }}
{{> 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-2") }}
{{> 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>
......@@ -105,7 +105,7 @@
{{> molecules-condensed-badge(classes: "footer-contacts__item") }}
{{> 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">
<div class="mt-8 lg:mt-0 lg:text-right footer-contacts__item">
{{> atoms-basic-button(cta: "Kontakt", classes: "btn--white btn--hoveractive btn--fullwidth md:btn--autowidth text-lg btn--fading") }}
</div>
</div>
......
source/_patterns/02-organisms/00-global/navbar.mustache
+ 8
− 8
View file @ 38f7dd7f
<nav class="navbar">
<div class="container container--wide navbar__content">
<div class="navbar__brand my-2 lg:pr-4 lg:my-0">
<div class="navbar__brand my-4 lg:pr-8 lg:my-0">
<a href="#">
<img src="/images/logo-round-white.svg" class="w-full lg:border-r lg:border-grey-300 lg:pr-4" />
<img src="/images/logo-round-white.svg" class="w-full lg:border-r lg:border-grey-300 lg:pr-8" />
</a>
</div>
<div class="navbar__external navbar__section navbar__section--expandable lg:flex lg:space-x-4">
<div class="text-grey-200 text-sm lg:space-x-4 leading-loose lg:leading-normal">
<div class="navbar__external navbar__section navbar__section--expandable lg:flex lg:space-x-8">
<div class="text-grey-200 text-sm lg:space-x-8 leading-loose lg:leading-normal">
{{> atoms-basic-contact-line(caption: "pirati.cz", icon: "fas fa-home", classes: "block lg:inline-block") }}
{{> atoms-basic-contact-line(caption: "piratskyobchod.cz", icon: "fas fa-shopping-cart", classes: "block lg:inline-block") }}
{{> atoms-basic-contact-line(caption: "piratskelisty.cz", icon: "fas fa-newspaper", classes: "block lg:inline-block") }}
</div>
{{> molecules-basic-social-icon-group(classes: "text-white py-2 lg:py-0") }}
{{> molecules-basic-social-icon-group(classes: "text-white py-4 lg:py-0") }}
</div>
<div class="navbar__main navbar__section navbar__section--expandable">
<ul class="navbar-menu text-white">
......@@ -39,13 +39,13 @@
</li>
</ul>
</div>
<div class="navbar__actions navbar__section navbar__section--expandable flex flex-col sm:flex-row lg:flex-col sm:space-x-2 space-y-1 sm:space-y-0 lg:space-y-1 xl:flex-row xl:space-x-1 xl:space-y-0">
<div class="navbar__actions navbar__section navbar__section--expandable flex flex-col sm:flex-row lg:flex-col sm:space-x-4 space-y-2 sm:space-y-0 lg:space-y-2 xl:flex-row xl:space-x-2 xl:space-y-0">
{{> atoms-icon-button(cta: "Přispěj", icon: "fas fa-hand-holding-usd", classes: "btn--white btn--hoveractive btn--condensed btn--fullwidth md:btn--autowidth lg:text-sm xl:text-base") }}
{{> atoms-icon-button(cta: "Naloď se", icon: "fas fa-anchor", classes: "btn--green-100 btn--hoveractive btn--condensed btn--fullwidth md:btn--autowidth lg:text-sm xl:text-base") }}
</div>
<div class="navbar__menutoggle my-2 flex justify-end lg:hidden">
<div class="navbar__menutoggle my-4 flex justify-end lg:hidden">
<a href="#">
<img src="/images/menu-toggle.svg" class="w-4" />
<img src="/images/menu-toggle.svg" class="w-8" />
</a>
</div>
</div>
......
source/_patterns/02-organisms/00-global/subnav.mustache
+ 7
− 7
View file @ 38f7dd7f
<div class="subnav">
<div class="container container--wide">
<div class="flex">
<button class="btn btn--condensed btn--grey-500 btn--overlay btn--overlay-white text-sm mr-1">
<button class="btn btn--condensed btn--grey-500 btn--overlay btn--overlay-white text-sm mr-2">
<div class="btn__body">
<span>Pardubický kraj</span>
<i class="fas fa-chevron-down ml-2"></i>
<i class="fas fa-chevron-down ml-4"></i>
</div>
</button>
<button class="btn btn--inline-icon btn--condensed btn--overlay btn--grey-500 btn--overlay-red-100 text-sm">
<div class="btn__body">
<i class="btn__inline-icon fas fa-calendar-alt mr-0 md:mr-1"></i>
<i class="btn__inline-icon fas fa-calendar-alt mr-0 md:mr-2"></i>
<span class="hidden md:block">Krajský kalendář</span>
</div>
</button>
<a href="#" class="btn text-sm max-w-full hidden lg:block">
<div class="btn__body bg-grey-800 text-grey-200 flex divide-x">
<span class="pr-2">{{ event.title }}</span>
<span class="pl-2">{{ event.date }}</span>
<span class="pr-4">{{ event.title }}</span>
<span class="pl-4">{{ event.date }}</span>
</div>
</a>
<button class="btn btn--inline-icon btn--condensed btn--overlay btn--grey-500 btn--overlay-brands-facebook text-sm ml-1">
<button class="btn btn--inline-icon btn--condensed btn--overlay btn--grey-500 btn--overlay-brands-facebook text-sm ml-2">
<div class="btn__body">
<i class="btn__inline-icon fab fa-facebook-f mr-0 md:mr-1"></i>
<i class="btn__inline-icon fab fa-facebook-f mr-0 md:mr-2"></i>
<span class="hidden md:block">Pardubický kraj</span>
</div>
</button>
......
source/_patterns/02-organisms/02-articles/article-card-list.mustache
+ 1
− 1
View file @ 38f7dd7f
<div class="article-card-list grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-2 lg:gap-4">
<div class="article-card-list grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 lg:gap-8">
{{> molecules-emphasized-article-card }}
{{> molecules-article-card }}
{{> molecules-emphasized-article-card }}
......
source/_patterns/02-organisms/03-hero/hero.mustache
+ 2
− 2
View file @ 38f7dd7f
<article class="hero {{ classes }}">
<div class="container grid lg:grid-rows-5 lg:grid-cols-7 gap-1 items-center">
<div class="container grid lg:grid-rows-5 lg:grid-cols-7 gap-2 items-center">
<div class="lg:row-span-4 lg:col-span-3 order-1">
<h1 class="head-alt-md sm:head-alt-lg md:head-alt-xl">{{ claim }}{{^ claim }}Piráti<br>Pardubického<br>kraje{{/ claim }}</h1>
</div>
<div class="lg:row-span-1 lg:col-span-3 order-3">
<div class="md-2 md:mt-4">
<div class="mt-4 md:mt-8">
{{> atoms-icon-button(classes: "btn--black btn--hoveractive btn--fullwidth md:btn--autowidth text-lg", icon: "fas fa-chevron-right") }}
</div>
</div>
......
source/_patterns/02-organisms/03-hero/image-hero.mustache
+ 2
− 2
View file @ 38f7dd7f
<article class="hero hero--image {{ classes }}" style="--image-url: url({{ img.landscape-16x9-fullhd.src }})">
<div class="container grid lg:grid-rows-5 lg:grid-cols-7 gap-1 items-center">
<div class="container grid lg:grid-rows-5 lg:grid-cols-7 gap-2 items-center">
<div class="lg:row-span-4 lg:col-span-3 order-1">
<h1 class="head-alt-md md:head-alt-xl">{{ claim }}{{^ claim }}{{ headline.medium }}{{/ claim }}</h1>
</div>
<div class="lg:row-span-1 lg:col-span-3 order-3">
<div class="md-2 md:mt-4 space-y-2">
<div class="mt-4 md:mt-8 space-y-4">
{{> atoms-basic-button(classes: "btn--white btn--fullwidth md:btn--autowidth text-lg") }}
{{> atoms-basic-button(classes: "btn--white btn--fullwidth md:btn--autowidth text-lg") }}
</div>
......
source/_patterns/03-templates/article-detail.mustache
+ 13
− 17
View file @ 38f7dd7f
{{> organisms-header }}
<div class="container container--default py-8">
<div class="container container--default py-24">
<article>
<h1 class="head-alt-lg max-w-5xl mb-2">Senátor Lukáš Wagenknecht žádá nastavení pravidel proti střetu zájmů</h1>
<h1 class="head-alt-lg max-w-5xl mb-4">Senátor Lukáš Wagenknecht žádá nastavení pravidel proti střetu zájmů</h1>
<div class="flex items-center">
<div class="inline-flex divide-x flex-grow">
<span class="pr-1">{{ dateverbose }}</span>
<span class="pl-1">{{ organization.name }}</span>
<span class="pr-2">{{ dateverbose }}</span>
<span class="pl-2">{{ organization.name }}</span>
</div>
<div class="my-2">
<div class="my-4">
{{> atoms-button(classes: "btn--grey-125 btn--condensed", cta: "Kategorie 1") }}
{{> atoms-button(classes: "btn--grey-125 btn--condensed", cta: "Kategorie 2") }}
</div>
</div>
{{> atoms-figure(caption: "Popisek fotky") }}
<div class="flex mt-4 space-x-4">
<div class="w-3/5">
{{> molecules-content-block }}
</div>
<div class="w-2/5">
<div class="card w-full">
<div class="card__body">
<span class="head-alt-md">Sdílení je aktem lásky</span>
</div>
<div class="flex mt-8 space-x-8">
<div class="w-2/3">
{{> molecules-content-block(classes: "w-full", noStartHeadline: true) }}
</div>
<div class="w-1/3">
{{> molecules-sharebox }}
</div>
</div>
</article>
<section class="mt-8">
<h1 class="head-alt-md pb-2">Další podobné články</h1>
<section class="mt-24">
<h1 class="head-alt-md pb-4">Další podobné články</h1>
{{> organisms-article-card-list }}
<div class="text-center mt-4">
<div class="text-center mt-8">
{{> atoms-icon-button(cta: "Zobrazit další", classes: "text-xl", icon: "fas fa-chevron-right") }}
</div>
</section>
......
source/_patterns/03-templates/elections-main.mustache
+ 9
− 9
View file @ 38f7dd7f
{{> organisms-header }}
<article class="hero hero--image py-7 {{ classes }}" style="--image-url: url({{ img.landscape-16x9-fullhd.src }})">
<div class="container container--default grid lg:grid-rows-3 lg:grid-cols-7 gap-1 items-center">
<article class="hero hero--image py-16 {{ classes }}" style="--image-url: url({{ img.landscape-16x9-fullhd.src }})">
<div class="container container--default grid lg:grid-rows-3 lg:grid-cols-7 gap-2 items-center">
<div class="lg:row-span-2 lg:col-span-3 order-1">
{{> atoms-basic-flag(font: "bg-green-100 text-white head-alt-base", cta: "Volte č. 2", classes: "mb-3") }}
{{> atoms-basic-flag(font: "bg-green-100 text-white head-alt-base", cta: "Volte č. 2", classes: "mb-6") }}
<h1 class="head-alt-md md:head-alt-xl">Krajské volby 2020</h1>
</div>
<div class="lg:row-span-1 lg:col-span-3 order-3">
<div class="md-2 md:mt-4 space-y-2">
<div class="mt-4 md:mt-8 space-y-4">
{{> atoms-basic-button(classes: "btn--white btn--hoveractive btn--fullwidth md:btn--autowidth text-lg") }}
{{> atoms-basic-button(classes: "btn--white btn--hoveractive btn--fullwidth md:btn--autowidth text-lg") }}
</div>
......@@ -18,12 +18,12 @@
</div>
</article>
<div class="container container--default pb-8 pt-8">
<div class="container container--default pb-24 pt-24">
<div class="text-center">
{{> molecules-binary-switch(cta1: "Kandidáti", cta2: "Program") }}
</div>
<h1 class="head-alt-md text-center pt-8 pb-4">Kandidátka do krajských voleb</h1>
<h1 class="head-alt-md text-center pt-24 pb-8">Kandidátka do krajských voleb</h1>
<div class="candidate-card-list grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
{{> molecules-candidate-card(wrapperClasses: "sm:candidate-card-list__item-wrapper") }}
......@@ -36,7 +36,7 @@
{{> molecules-banner(color: "bg-black", fullwidthButton: true)}}
</div>
<div class="candidate-table candidate-table--fadeout pt-4">
<div class="candidate-table candidate-table--fadeout pt-8">
{{> molecules-candidate-table-row }}
{{> molecules-candidate-table-row }}
{{> molecules-candidate-table-row }}
......@@ -49,11 +49,11 @@
{{> molecules-candidate-table-row }}
</div>
<div class="text-center pt-4">
<div class="text-center pt-8">
{{> atoms-icon-button(cta: "Zobrazit vše", classes: "text-xl btn--black btn--hoveractive", icon: "fas fa-chevron-right") }}
</div>
<div class="flex flex-col pt-8 space-y-4 md:space-y-0 md:flex-row md:space-x-4">
<div class="flex flex-col pt-24 space-y-8 md:space-y-0 md:flex-row md:space-x-8">
{{> atoms-super-button(cta: "Povolební strategie", icon: "fa fa-chess", classes: "bg-grey-125 hover:bg-black hover:text-white w-full") }}
{{> atoms-super-button(cta: "Financování kampaně", icon: "fa fa-calculator", classes: "bg-black text-white hover:bg-grey-125 hover:text-black w-full") }}
</div>
......
source/css/atoms/avatar.pcss
+ 7
− 7
View file @ 38f7dd7f
......@@ -2,27 +2,27 @@
@apply inline-block text-center rounded-full;
img {
@apply rounded-full block w-8;
@apply rounded-full block w-24;
}
}
.avatar--xs img {
@apply w-6;
@apply w-12;
}
.avatar--sm img {
@apply w-7;
@apply w-16;
}
.avatar--md img {
@apply w-8;
@apply w-24;
}
.avatar--lg img {
@apply w-9;
@apply w-28;
}
.avatar--xl img {
@apply w-10;
@apply w-36;
}
.avatar--2xl img {
@apply w-11;
@apply w-64;
}
.avatar--bordered {
......
source/css/atoms/button.pcss
+ 3
− 3
View file @ 38f7dd7f
......@@ -39,10 +39,10 @@
}
.btn__icon {
@apply border-l px-2 flex items-center;
@apply border-l px-4 flex items-center;
img {
@apply w-2;
@apply w-4;
}
}
......@@ -57,7 +57,7 @@
}
.btn__inline-icon {
@apply mr-1;
@apply mr-2;
}
.btn.btn--black {
......
source/css/atoms/card.pcss
+ 2
− 2
View file @ 38f7dd7f
......@@ -2,6 +2,6 @@
@apply elevation-2;
}
.card .card__body {
@apply p-2;
.card__body {
@apply p-4;
}
source/css/atoms/contact-line.pcss
+ 1
− 1
View file @ 38f7dd7f
.contact-line {
i {
@apply mr-1;
@apply mr-2;
}
&.contanct-line--responsive {
......
source/css/atoms/figure.pcss
+ 15
− 14
View file @ 38f7dd7f
.figure {
@apply relative;
&:after {
@apply absolute z-10 block top-0 left-0 bottom-0 right-0 pointer-events-none opacity-100 transition duration-200;
img {
@apply w-full;
}
figcaption {
@apply absolute flex items-end z-10 bottom-0 left-0 w-full h-full px-4 py-4 text-white text-sm leading-tight;
&:before {
@apply absolute block top-0 left-0 bottom-0 right-0 pointer-events-none opacity-100 transition duration-200;
content: "";
z-index: -1;
background: linear-gradient(to bottom, rgba(0,0,0,0) 40%, rgba(0,0,0,.8));
......@@ -12,18 +20,11 @@
background: linear-gradient(to bottom, rgba(0,0,0,0) 60%, rgba(0,0,0,.8));
}
}
img {
@apply w-full;
}
figcaption {
@apply absolute z-20 bottom-0 left-0 w-full max-w-2xl px-2 py-2 text-white text-sm leading-tight;
}
&:hover,
&:focus {
&:after {
figcaption:before {
@apply opacity-0;
}
}
......
source/css/atoms/flag.pcss
+ 3
− 3
View file @ 38f7dd7f
.flag {
/* right margin makes space for flag stripe */
@apply inline-block relative py-3 pl-4 pr-3 mr-5 bg-black text-white;
@apply inline-block relative py-6 pl-8 pr-6 mr-10 bg-black text-white;
&:after {
@apply absolute w-5 h-full;
@apply absolute w-10 h-full;
content: "";
left: 100%;
top: 0;
background: inherit;
clip-path: polygon(-2px -1px, 100% -1px, 60% 50%, 100% 100%, -2px 100%);
clip-path: polygon(-2px -1px, 100% -1px, 60% 50%, 100% 100.7%, -2px 100.7%);
}
}
source/css/atoms/list.pcss
+ 1
− 1
View file @ 38f7dd7f
.unordered-list,
.ordered-list {
@apply pl-2 ml-3;
@apply pl-4 ml-6;
}
.unordered-list {
......
source/css/atoms/quotation.pcss
+ 1
− 1
View file @ 38f7dd7f
.quote {
@apply italic leading-relaxed border-l-2 border-black pl-2 py-1 ml-3;
@apply italic leading-relaxed border-l-2 border-black pl-4 py-2 ml-6;
width: 80%;
max-width: 60em;
......
source/css/atoms/super-button.pcss
+ 1
− 1
View file @ 38f7dd7f
.super-button {
@apply inline-flex font-alt text-4xl py-4 px-3 transition duration-200;
@apply inline-flex font-alt text-4xl py-8 px-6 transition duration-200;
&:hover {
@apply no-underline;
......
source/css/atoms/table.pcss
+ 2
− 2
View file @ 38f7dd7f
......@@ -2,7 +2,7 @@
th,
thead td,
td {
@apply px-3 py-2
@apply px-6 py-4;
}
th,
......@@ -32,6 +32,6 @@
th,
thead td,
td {
@apply px-1 py-1;
@apply p-2;
}
}
source/css/molecules/article-card.pcss
+ 7
− 9
View file @ 38f7dd7f
......@@ -8,9 +8,7 @@
}
.article-card-cover {
@apply relative;
height: 12rem;
@apply relative h-48;
img {
@apply block object-cover w-full h-full;
......@@ -25,11 +23,11 @@
.article-card-cover__details {
/* padding shall be kept in sync with general card */
@apply absolute left-0 bottom-0 p-2;
@apply absolute left-0 bottom-0 p-4;
}
.article-card-sharing {
@apply mb-2 transition duration-200 opacity-0;
@apply mb-4 transition duration-200 opacity-0;
}
.article-card:hover .article-card-sharing {
......@@ -41,11 +39,11 @@
}
.article-card-meta__item:not(:first-child) {
@apply ml-1;
@apply ml-2;
&:before {
content: "";
@apply pr-1 border-l border-white border-opacity-85;
@apply pr-2 border-l border-white border-opacity-85;
}
}
......@@ -55,7 +53,7 @@
}
.article-card__headline {
@apply head-heavy-xs mb-2 break-words;
@apply head-heavy-xs mb-4 break-words;
}
.article-card__excerpt {
......@@ -63,5 +61,5 @@
}
.article-card__category-button {
@apply mr-sm mb-sm;
@apply mr-1 mb-1;
}
source/css/molecules/badge.pcss
+ 4
− 4
View file @ 38f7dd7f
......@@ -2,7 +2,7 @@
@apply flex items-center font-body;
.badge__body {
@apply text-left ml-3;
@apply text-left ml-6;
}
.badge__title {
......@@ -10,7 +10,7 @@
}
.badge__occupation {
@apply uppercase text-sm max-w-sm my-1;
@apply uppercase text-sm max-w-sm my-2;
}
.badge__link {
......@@ -20,10 +20,10 @@
.badge.badge--condensed {
.badge__title {
@apply mb-1;
@apply mb-2;
}
.badge__body {
@apply ml-2;
@apply ml-4;
}
}
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