From 4677682661227bb9e9a0da2623cd1cef2a541b8f Mon Sep 17 00:00:00 2001
From: xaralis <filip.varecha@fragaria.cz>
Date: Fri, 3 Jul 2020 15:58:59 +0200
Subject: [PATCH] Drop font awesome
---
gulpfile.js | 9 +++++++++
patternlab-config.json | 1 +
source/_data/data.json | 2 +-
source/_meta/_00-head.mustache | 1 -
.../01-molecules/00-badge/basic-badge.mustache | 4 ++--
.../01-molecules/00-badge/condensed-badge.mustache | 4 ++--
.../basic-social-icon-group.mustache | 10 +++++-----
.../colored-social-icon-group.mustache | 6 +++---
.../small-colored-social-icon-group.mustache | 6 +++---
.../calendar/calendar-table-row.mustache | 2 +-
.../01-molecules/calendar/calendar.mustache | 2 +-
.../01-molecules/pagination/pagination.mustache | 14 +++++++-------
.../01-molecules/sharebox/sharebox.mustache | 4 ++--
.../subsidiary-card/subsidiary-card.mustache | 6 +++---
.../02-organisms/00-global/footer.mustache | 6 +++---
.../02-organisms/00-global/navbar.mustache | 14 +++++++-------
.../02-organisms/00-global/subnav.mustache | 10 +++++-----
.../_patterns/02-organisms/03-hero/hero.mustache | 2 +-
.../02-organisms/03-hero/home-hero.mustache | 2 +-
.../_patterns/03-templates/article-detail.mustache | 2 +-
.../03-templates/candidate-detail.mustache | 4 ++--
source/_patterns/03-templates/contact.mustache | 12 ++++++------
.../03-templates/election-program-point.mustache | 4 ++--
.../03-templates/elections-candidates.mustache | 6 +++---
.../03-templates/elections-program.mustache | 4 ++--
source/_patterns/03-templates/homepage.mustache | 6 +++---
.../_patterns/03-templates/pirate-center.mustache | 8 ++++----
source/css/atoms/list.pcss | 8 ++++----
source/css/molecules/pagination.pcss | 2 +-
source/css/organisms/footer.pcss | 6 ++----
source/css/organisms/navbar.pcss | 6 ++----
source/css/style.pcss | 4 ++++
source/images/menu-toggle.svg | 7 -------
33 files changed, 93 insertions(+), 91 deletions(-)
delete mode 100644 source/images/menu-toggle.svg
diff --git a/gulpfile.js b/gulpfile.js
index 3a86589..d324ecc 100755
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -58,6 +58,14 @@ gulp.task("pl-copy:favicon", function (done) {
.on("end", done);
});
+// Iconset font copy
+gulp.task("pl-copy:icons", function (done) {
+ return gulp
+ .src("**/*.*", { cwd: resolvePath(paths().source.iconfont) })
+ .pipe(gulp.dest(resolvePath(paths().public.fonts)))
+ .on("end", done);
+});
+
// Fonts copy
gulp.task("pl-copy:font", function (done) {
return gulp
@@ -125,6 +133,7 @@ gulp.task(
gulp.parallel(
"pl-copy:img",
"pl-copy:favicon",
+ "pl-copy:icons",
"pl-copy:font",
"pl-copy:styleguide",
"pl-copy:styleguide-css",
diff --git a/patternlab-config.json b/patternlab-config.json
index 4d40866..3394c13 100755
--- a/patternlab-config.json
+++ b/patternlab-config.json
@@ -11,6 +11,7 @@
"js" : "./source/js",
"images" : "./source/images",
"fonts" : "./source/fonts",
+ "iconfont" : "./source/icons/fonts",
"css" : "./source/css/"
},
"public" : {
diff --git a/source/_data/data.json b/source/_data/data.json
index e6877d6..188dce0 100755
--- a/source/_data/data.json
+++ b/source/_data/data.json
@@ -38,7 +38,7 @@
"long": "Curabitizzle fo shizzle diam quizzle nisi nizzle mollizzle. Suspendisse boofron. Morbi odio. Sure pizzle. Crazy orci. Shut the shizzle up maurizzle get down get down, check out this a, go to hizzle sit amizzle, malesuada izzle, pede. Pellentesque gravida. Vestibulizzle check it out mi, volutpat izzle, shiz sed, shiznit sempizzle, da bomb. Funky fresh in ipsum. Da bomb volutpat felis vizzle daahng dawg. Crizzle quis dope izzle fo shizzle my ni."
},
"cta": "Call to action",
- "icon": "fas fa-skull-crossbones",
+ "icon": "ico--pirati",
"description": "Fizzle crazy tortor. Sed rizzle. Ass pimpin' dolor dapibizzle turpis tempizzle fo shizzle my nizzle. Maurizzle pellentesque its fo rizzle izzle turpis. Get down get down we gonna chung nizzle. Shizzlin dizzle eleifend rhoncizzle break it down. In yo ghetto platea dictumst. Bling bling dapibizzle. Curabitur break yo neck, yall fo, pretizzle eu, go to hizzle dope, own yo' vitae, nunc. Bizzle suscipizzle. Ass semper velit sizzle fo.",
"url": "http://lorizzle.nl/",
"person": {
diff --git a/source/_meta/_00-head.mustache b/source/_meta/_00-head.mustache
index 4311b06..0f464aa 100755
--- a/source/_meta/_00-head.mustache
+++ b/source/_meta/_00-head.mustache
@@ -7,7 +7,6 @@
<link rel="stylesheet" href="../../css/styles.css?{{ cacheBuster }}" media="all" />
<link rel="stylesheet" href="../../css/pattern-scaffolding.css?{{ cacheBuster }}" media="all" />
- <script src="https://kit.fontawesome.com/cbdc6198f3.js" crossorigin="anonymous"></script>
<!-- Begin Pattern Lab (Required for Pattern Lab to run properly) -->
{{{ patternLabHead }}}
diff --git a/source/_patterns/01-molecules/00-badge/basic-badge.mustache b/source/_patterns/01-molecules/00-badge/basic-badge.mustache
index 731247f..7414b3d 100644
--- a/source/_patterns/01-molecules/00-badge/basic-badge.mustache
+++ b/source/_patterns/01-molecules/00-badge/basic-badge.mustache
@@ -12,7 +12,7 @@
{{^ hideOccupation }}
<p class="badge__occupation">{{ occupation }}{{^ occupation }}{{ person.occupation }}{{/ occupation }}</p>
{{/ hideOccupation}}
- {{> atoms-responsive-contact-line(icon: "fas fa-phone", caption: "+420 777 123 123", classes: "badge__link") }}
- {{> atoms-responsive-contact-line(icon: "fas fa-envelope", classes: "badge__link") }}
+ {{> atoms-responsive-contact-line(icon: "ico--phone", caption: "+420 777 123 123", classes: "badge__link") }}
+ {{> atoms-responsive-contact-line(icon: "ico--envelope", classes: "badge__link") }}
</div>
</div>
diff --git a/source/_patterns/01-molecules/00-badge/condensed-badge.mustache b/source/_patterns/01-molecules/00-badge/condensed-badge.mustache
index b161d5b..1ea61cb 100644
--- a/source/_patterns/01-molecules/00-badge/condensed-badge.mustache
+++ b/source/_patterns/01-molecules/00-badge/condensed-badge.mustache
@@ -12,7 +12,7 @@
{{^ hideOccupation }}
<p class="badge__occupation">{{ occupation }}{{^ occupation }}{{ person.occupation }}{{/ occupation }}</p>
{{/ hideOccupation }}
- {{> atoms-responsive-contact-line(icon: "fas fa-phone", caption: "+420 777 123 123", classes: "badge__link") }}
- {{> atoms-responsive-contact-line(icon: "fas fa-envelope", classes: "badge__link") }}
+ {{> atoms-responsive-contact-line(icon: "ico--phone", caption: "+420 777 123 123", classes: "badge__link") }}
+ {{> atoms-responsive-contact-line(icon: "ico--envelope", classes: "badge__link") }}
</div>
</div>
diff --git a/source/_patterns/01-molecules/01-social-icon-group/basic-social-icon-group.mustache b/source/_patterns/01-molecules/01-social-icon-group/basic-social-icon-group.mustache
index 7e3d245..bbbedd5 100644
--- a/source/_patterns/01-molecules/01-social-icon-group/basic-social-icon-group.mustache
+++ b/source/_patterns/01-molecules/01-social-icon-group/basic-social-icon-group.mustache
@@ -1,7 +1,7 @@
<div class="social-icon-group space-x-2 {{ classes }}">
- {{> atoms-basic-social-icon(icon: "fab fa-twitter") }}
- {{> atoms-basic-social-icon(icon: "fas fa-rss") }}
- {{> atoms-basic-social-icon(icon: "fab fa-instagram") }}
- {{> atoms-basic-social-icon(icon: "fab fa-flickr") }}
- {{> atoms-basic-social-icon(icon: "fas fa-envelope") }}
+ {{> atoms-basic-social-icon(icon: "ico--twitter") }}
+ {{> atoms-basic-social-icon(icon: "ico--feed") }}
+ {{> atoms-basic-social-icon(icon: "ico--instagram") }}
+ {{> atoms-basic-social-icon(icon: "ico--flickr") }}
+ {{> atoms-basic-social-icon(icon: "ico--envelope") }}
</div>
diff --git a/source/_patterns/01-molecules/01-social-icon-group/colored-social-icon-group.mustache b/source/_patterns/01-molecules/01-social-icon-group/colored-social-icon-group.mustache
index dd4922b..3363e5b 100644
--- a/source/_patterns/01-molecules/01-social-icon-group/colored-social-icon-group.mustache
+++ b/source/_patterns/01-molecules/01-social-icon-group/colored-social-icon-group.mustache
@@ -1,5 +1,5 @@
<div class="social-icon-group space-x-0/5 {{ 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") }}
+ {{> atoms-filled-social-icon(classes: "bg-brands-facebook text-white social-icon--5", icon: "ico--facebook") }}
+ {{> atoms-filled-social-icon(classes: "bg-brands-twitter text-white social-icon--5", icon: "ico--twitter") }}
+ {{> atoms-filled-social-icon(classes: "bg-brands-linkedin text-white social-icon--5", icon: "ico--linkedin") }}
</div>
diff --git a/source/_patterns/01-molecules/01-social-icon-group/small-colored-social-icon-group.mustache b/source/_patterns/01-molecules/01-social-icon-group/small-colored-social-icon-group.mustache
index 0fbb338..2fcb0ff 100644
--- a/source/_patterns/01-molecules/01-social-icon-group/small-colored-social-icon-group.mustache
+++ b/source/_patterns/01-molecules/01-social-icon-group/small-colored-social-icon-group.mustache
@@ -1,5 +1,5 @@
<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") }}
+ {{> atoms-filled-social-icon(classes: "bg-brands-facebook text-white text-sm social-icon--4", icon: "ico--facebook") }}
+ {{> atoms-filled-social-icon(classes: "bg-brands-twitter text-white text-sm social-icon--4", icon: "ico--twitter") }}
+ {{> atoms-filled-social-icon(classes: "bg-brands-linkedin text-white text-sm social-icon--4", icon: "ico--linkedin") }}
</div>
diff --git a/source/_patterns/01-molecules/calendar/calendar-table-row.mustache b/source/_patterns/01-molecules/calendar/calendar-table-row.mustache
index b0f8c22..7296b75 100644
--- a/source/_patterns/01-molecules/calendar/calendar-table-row.mustache
+++ b/source/_patterns/01-molecules/calendar/calendar-table-row.mustache
@@ -12,7 +12,7 @@
</div>
<div class="col-span-2 text-center font-light calendar-table-row__col">
<a href="#">
- <i class="fas fa-map-marker-alt text-violet-300 mr-1" aria-hidden="true"></i>
+ <i class="ico--location text-violet-300 mr-1" aria-hidden="true"></i>
<span>Mapa</span>
</a>
</div>
diff --git a/source/_patterns/01-molecules/calendar/calendar.mustache b/source/_patterns/01-molecules/calendar/calendar.mustache
index 9557a09..cce3175 100644
--- a/source/_patterns/01-molecules/calendar/calendar.mustache
+++ b/source/_patterns/01-molecules/calendar/calendar.mustache
@@ -1,6 +1,6 @@
<div class="calendar grid grid-cols-4">
<div class="col-span-4 xl:col-span-1">
- {{> molecules-banner(color: "bg-orange-300", headClasses: "head-alt-md", cta: "Krajský kalendář", icon: "fas fa-calendar-alt", classes: "h-full") }}
+ {{> molecules-banner(color: "bg-orange-300", headClasses: "head-alt-md", cta: "Krajský kalendář", icon: "ico--calendar", classes: "h-full") }}
</div>
<div class="col-span-4 xl:col-span-3">
{{> molecules-calendar-table-row }}
diff --git a/source/_patterns/01-molecules/pagination/pagination.mustache b/source/_patterns/01-molecules/pagination/pagination.mustache
index 71f41c6..57818c2 100644
--- a/source/_patterns/01-molecules/pagination/pagination.mustache
+++ b/source/_patterns/01-molecules/pagination/pagination.mustache
@@ -1,11 +1,11 @@
<div class="pagination-container">
- <nav class="pagination">
- {{> atoms-icon-button(cta: "Předchozí", icon: "fa fa-chevron-left", classes: "btn--grey-125 btn--hoveractive btn--condensed btn--inverted-icon") }}
- {{> atoms-basic-button(cta: "1", classes: "btn--grey-125 btn--hoveractive btn--condensed hidden md:inline-block") }}
- {{> atoms-basic-button(cta: "2", classes: "btn--grey-125 btn--hoveractive btn--condensed hidden md:inline-block") }}
+ <nav class="pagination space-x-1">
+ {{> atoms-icon-button(cta: "Předchozí", icon: "ico--chevron-left", classes: "btn--grey-125 btn--hoveractive btn--to-black btn--condensed btn--inverted-icon") }}
+ {{> atoms-basic-button(cta: "1", classes: "btn--grey-125 btn--hoveractive btn--to-black btn--condensed hidden md:inline-block") }}
+ {{> atoms-basic-button(cta: "2", classes: "btn--grey-125 btn--hoveractive btn--to-black btn--condensed hidden md:inline-block") }}
{{> atoms-basic-button(cta: "3", classes: "btn--grey-500 btn--condensed hidden md:inline-block") }}
- {{> atoms-basic-button(cta: "4", classes: "btn--grey-125 btn--hoveractive btn--condensed hidden md:inline-block") }}
- {{> atoms-basic-button(cta: "5", classes: "btn--grey-125 btn--hoveractive btn--condensed hidden md:inline-block") }}
- {{> atoms-icon-button(cta: "Další", icon: "fa fa-chevron-right", classes: "btn--grey-125 btn--hoveractive btn--condensed") }}
+ {{> atoms-basic-button(cta: "4", classes: "btn--grey-125 btn--hoveractive btn--to-black btn--condensed hidden md:inline-block") }}
+ {{> atoms-basic-button(cta: "5", classes: "btn--grey-125 btn--hoveractive btn--to-black btn--condensed hidden md:inline-block") }}
+ {{> atoms-icon-button(cta: "Další", icon: "ico--chevron-right", classes: "btn--grey-125 btn--hoveractive btn--to-black btn--condensed") }}
</nav>
</div>
diff --git a/source/_patterns/01-molecules/sharebox/sharebox.mustache b/source/_patterns/01-molecules/sharebox/sharebox.mustache
index 14b971c..401ccbb 100644
--- a/source/_patterns/01-molecules/sharebox/sharebox.mustache
+++ b/source/_patterns/01-molecules/sharebox/sharebox.mustache
@@ -3,8 +3,8 @@
<span class="head-alt-base md:head-alt-md">Sdílení je aktem lásky</span>
<div class="flex w-full space-x-4 pt-4 md:pt-8 text-center text-white">
- <a href="#" class="bg-brands-facebook px-8 py-3 text-2xl w-full"><i class="fab fa-facebook-f"></i></a>
- <a href="#" class="bg-brands-twitter px-8 py-3 text-2xl w-full"><i class="fab fa-twitter"></i></a>
+ <a href="#" class="bg-brands-facebook px-8 py-3 text-2xl w-full"><i class="ico--facebook"></i></a>
+ <a href="#" class="bg-brands-twitter px-8 py-3 text-2xl w-full"><i class="ico--twitter"></i></a>
</div>
</div>
<div class="h-52 overflow-hidden hidden md:block">
diff --git a/source/_patterns/01-molecules/subsidiary-card/subsidiary-card.mustache b/source/_patterns/01-molecules/subsidiary-card/subsidiary-card.mustache
index 4f96a25..b86dd5e 100644
--- a/source/_patterns/01-molecules/subsidiary-card/subsidiary-card.mustache
+++ b/source/_patterns/01-molecules/subsidiary-card/subsidiary-card.mustache
@@ -5,14 +5,14 @@
<div>
<h1 class="head-alt-base mb-2"><a href="#">Svitavy</a></h1>
<div class="flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-4">
- {{> atoms-responsive-contact-line(icon: "fas fa-envelope", caption: "svitavsko@pirati.cz", classes: "font-light") }}
- {{> atoms-contact-line(icon: "fab fa-facebook-f text-brands-facebook", caption: "Svitavsko", classes: "font-light") }}
+ {{> atoms-responsive-contact-line(icon: "ico--envelope", caption: "svitavsko@pirati.cz", classes: "font-light") }}
+ {{> atoms-contact-line(icon: "ico--facebook text-brands-facebook", caption: "Svitavsko", classes: "font-light") }}
</div>
</div>
{{> molecules-condensed-badge(hideAvatar: true, hideOccupation: true) }}
</div>
<div class="hidden md:block">
- <a href="#"><i class="fas fa-chevron-right text-3xl"></i></a>
+ <a href="#"><i class="ico--chevron-right text-3xl"></i></a>
</div>
</div>
</article>
diff --git a/source/_patterns/02-organisms/00-global/footer.mustache b/source/_patterns/02-organisms/00-global/footer.mustache
index 57964d2..515799e 100644
--- a/source/_patterns/02-organisms/00-global/footer.mustache
+++ b/source/_patterns/02-organisms/00-global/footer.mustache
@@ -63,11 +63,11 @@
<section class="footer__social lg:text-right">
<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") }}
+ {{> atoms-basic-contact-line(icon: "ico--envelope", caption: "Dejte nám vědět") }}
</div>
<div class="flex flex-col md:flex-row lg:flex-col lg:items-end space-y-2 md:space-y-0 md:space-x-2 lg:space-x-0 lg:space-y-2">
- {{> atoms-icon-button(cta: "Přispěj", icon: "fas fa-hand-holding-usd", classes: "btn--cyan-200 btn--hoveractive text-lg btn--fullwidth sm:btn--autowidth") }}
- {{> atoms-icon-button(cta: "Naloď se", icon: "fas fa-anchor", classes: "btn--blue-300 btn--hoveractive text-lg btn--fullwidth sm:btn--autowidth") }}
+ {{> atoms-icon-button(cta: "Přispěj", icon: "ico--pig", classes: "btn--cyan-200 btn--hoveractive text-lg btn--fullwidth sm:btn--autowidth") }}
+ {{> atoms-icon-button(cta: "Naloď se", icon: "ico--anchor", classes: "btn--blue-300 btn--hoveractive text-lg btn--fullwidth sm:btn--autowidth") }}
</div>
</section>
</div>
diff --git a/source/_patterns/02-organisms/00-global/navbar.mustache b/source/_patterns/02-organisms/00-global/navbar.mustache
index ece0a03..833bf25 100644
--- a/source/_patterns/02-organisms/00-global/navbar.mustache
+++ b/source/_patterns/02-organisms/00-global/navbar.mustache
@@ -9,15 +9,15 @@
<span class="lg:hidden pl-4 font-bold text-xl">Pirátská strana</span>
</div>
<div class="navbar__menutoggle my-4 flex justify-end lg:hidden">
- <a href="#" @click="show = !show">
- <img src="/images/menu-toggle.svg" class="w-8" />
+ <a href="#" @click="show = !show" class="no-underline hover:no-underline">
+ <i class="ico--menu text-3xl"></i>
</a>
</div>
<div v-if="show || isLgScreenSize" class="navbar__external navbar__section navbar__section--expandable container-padding--zero lg:container-padding--auto lg:flex lg:space-x-8 lg:pb-2">
<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") }}
+ {{> atoms-basic-contact-line(caption: "pirati.cz", icon: "ico--home", classes: "block lg:inline-block") }}
+ {{> atoms-basic-contact-line(caption: "piratskyobchod.cz", icon: "ico--cart", classes: "block lg:inline-block") }}
+ {{> atoms-basic-contact-line(caption: "piratskelisty.cz", icon: "ico--newspaper", classes: "block lg:inline-block") }}
</div>
{{> molecules-basic-social-icon-group(classes: "text-grey-200 py-4 lg:py-0") }}
</div>
@@ -56,8 +56,8 @@
</ul>
</div>
<div v-if="show || isLgScreenSize" class="navbar__actions navbar__section navbar__section--expandable container-padding--zero lg:container-padding--auto self-start 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--cyan-200 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--blue-300 btn--hoveractive btn--condensed btn--fullwidth md:btn--autowidth lg:text-sm xl:text-base") }}
+ {{> atoms-icon-button(cta: "Přispěj", icon: "ico--pig", classes: "btn--cyan-200 btn--hoveractive btn--condensed btn--fullwidth md:btn--autowidth lg:text-sm xl:text-base") }}
+ {{> atoms-icon-button(cta: "Naloď se", icon: "ico--anchor", classes: "btn--blue-300 btn--hoveractive btn--condensed btn--fullwidth md:btn--autowidth lg:text-sm xl:text-base") }}
</div>
</div>
</div>
diff --git a/source/_patterns/02-organisms/00-global/subnav.mustache b/source/_patterns/02-organisms/00-global/subnav.mustache
index 03bba1f..9680ac0 100644
--- a/source/_patterns/02-organisms/00-global/subnav.mustache
+++ b/source/_patterns/02-organisms/00-global/subnav.mustache
@@ -11,7 +11,7 @@
>
<div class="btn__body">
<span>Pardubický kraj</span>
- <i class="fas fa-chevron-down ml-4"></i>
+ <i class="ico--chevron-down ml-4"></i>
</div>
</button>
@@ -21,7 +21,7 @@
:class="{'btn--activated': isCurrentView('calendar')}"
>
<div class="btn__body">
- <i class="btn__inline-icon fas fa-calendar-alt mr-0 md:mr-2 text-orange-300"></i>
+ <i class="btn__inline-icon ico--calendar mr-0 md:mr-2 text-orange-300"></i>
<span class="hidden md:block">Krajský kalendář</span>
</div>
</button>
@@ -35,7 +35,7 @@
<button class="btn btn--inline-icon btn--condensed btn--hoveractive btn--grey-500 btn--to-brands-facebook text-sm ml-2">
<div class="btn__body">
- <i class="btn__inline-icon fab fa-facebook-f mr-0 md:mr-2 text-brands-facebook"></i>
+ <i class="btn__inline-icon ico--facebook mr-0 md:mr-2 text-brands-facebook"></i>
<span class="hidden md:block">Pardubický kraj</span>
</div>
</button>
@@ -44,11 +44,11 @@
</nav>
<aside class="subnav-aside">
<div class="subnav-aside__item" :class="{'subnav-aside__item--visible': isCurrentView('regions')}">
- <a @click="toggleView('regions')" class="subnav-aside__close"><i class="fas fa-times"></i></a>
+ <a @click="toggleView('regions')" class="subnav-aside__close"><i class="ico--close"></i></a>
<ui-region-map class="container container--default" />
</div>
<div class="subnav-aside__item" :class="{'subnav-aside__item--visible': isCurrentView('calendar')}">
- <a @click="toggleView('calendar')" class="subnav-aside__close"><i class="fas fa-times"></i></a>
+ <a @click="toggleView('calendar')" class="subnav-aside__close"><i class="ico--close"></i></a>
<div class="container container--default">
{{> molecules-calendar }}
</div>
diff --git a/source/_patterns/02-organisms/03-hero/hero.mustache b/source/_patterns/02-organisms/03-hero/hero.mustache
index df2d8d4..e8bc00f 100644
--- a/source/_patterns/02-organisms/03-hero/hero.mustache
+++ b/source/_patterns/02-organisms/03-hero/hero.mustache
@@ -5,7 +5,7 @@
</div>
<div class="lg:row-span-1 lg:col-span-3 order-3">
<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") }}
+ {{> atoms-icon-button(classes: "btn--black btn--hoveractive btn--fullwidth md:btn--autowidth text-lg", icon: "ico--chevron-right") }}
</div>
</div>
<div class="lg:row-span-5 lg:col-span-4 order-2">
diff --git a/source/_patterns/02-organisms/03-hero/home-hero.mustache b/source/_patterns/02-organisms/03-hero/home-hero.mustache
index ad9cb68..f52d6e7 100644
--- a/source/_patterns/02-organisms/03-hero/home-hero.mustache
+++ b/source/_patterns/02-organisms/03-hero/home-hero.mustache
@@ -5,7 +5,7 @@
</div>
<div class="lg:row-span-1 lg:col-span-3 order-3">
<div class="mt-4 md:mt-8 space-y-4">
- {{> atoms-icon-button(icon: "fas fa-chevron-right", classes: "btn--hoveractive btn--fullwidth md:btn--autowidth text-lg") }}
+ {{> atoms-icon-button(icon: "ico--chevron-right", classes: "btn--hoveractive btn--fullwidth md:btn--autowidth text-lg") }}
</div>
</div>
<div class="lg:row-span-3 lg:col-span-4 order-2">
diff --git a/source/_patterns/03-templates/article-detail.mustache b/source/_patterns/03-templates/article-detail.mustache
index b47db3b..c312db9 100644
--- a/source/_patterns/03-templates/article-detail.mustache
+++ b/source/_patterns/03-templates/article-detail.mustache
@@ -29,7 +29,7 @@
<h1 class="head-alt-base md:head-alt-md pb-4">Další podobné články</h1>
{{> organisms-article-card-list(onlyThree: true) }}
<div class="text-center mt-8 md:mt-16">
- {{> atoms-icon-button(cta: "Zobrazit další", classes: "text-xl", icon: "fas fa-chevron-right") }}
+ {{> atoms-icon-button(cta: "Zobrazit další", classes: "text-xl", icon: "ico--chevron-right") }}
</div>
</section>
diff --git a/source/_patterns/03-templates/candidate-detail.mustache b/source/_patterns/03-templates/candidate-detail.mustache
index e0cf00f..8f1ac63 100644
--- a/source/_patterns/03-templates/candidate-detail.mustache
+++ b/source/_patterns/03-templates/candidate-detail.mustache
@@ -30,11 +30,11 @@
<div class="space-y-4">
<div>
<h4>Telefon</h4>
- {{> atoms-contact-line(icon: "fas fa-phone", cta: "+420 777 123 123") }}
+ {{> atoms-contact-line(icon: "ico--phone", cta: "+420 777 123 123") }}
</div>
<div>
<h4>Email</h4>
- {{> atoms-contact-line(icon: "fas fa-envelope") }}
+ {{> atoms-contact-line(icon: "ico--envelope") }}
</div>
</div>
<hr />
diff --git a/source/_patterns/03-templates/contact.mustache b/source/_patterns/03-templates/contact.mustache
index 50894cf..5d39f36 100644
--- a/source/_patterns/03-templates/contact.mustache
+++ b/source/_patterns/03-templates/contact.mustache
@@ -40,15 +40,15 @@
<div class="space-y-4">
<div>
<h4>Emailová adresa</h4>
- {{> atoms-contact-line(icon: "fas fa-envelope") }}
+ {{> atoms-contact-line(icon: "ico--envelope") }}
</div>
<div>
<h4>Podatelna</h4>
- {{> atoms-contact-line(icon: "fas fa-envelope") }}
+ {{> atoms-contact-line(icon: "ico--envelope") }}
</div>
<div>
<h4>Telefon</h4>
- {{> atoms-contact-line(icon: "fas fa-phone", cta: "+420 777 123 123") }}
+ {{> atoms-contact-line(icon: "ico--phone", cta: "+420 777 123 123") }}
</div>
</div>
<hr class="hr">
@@ -59,7 +59,7 @@
Masarykovo náměstí 1484<br>
530 02 Pardubice I
</p>
- {{> atoms-icon-button(cta: "Pirátské centrum", icon: "fas fa-chevron-right", classes: "btn--black btn--hoveractive btn--fullwidth md:btn--autowidth") }}
+ {{> atoms-icon-button(cta: "Pirátské centrum", icon: "ico--chevron-right", classes: "btn--black btn--hoveractive btn--fullwidth md:btn--autowidth") }}
</div>
</div>
</section>
@@ -76,8 +76,8 @@
</section>
<div class="flex flex-col lg:flex-row lg:space-x-8">
- {{> atoms-super-button(cta: "Sledujte nás na Facebooku", icon: "fab fa-facebook", classes: "bg-brands-facebook text-white container-padding--zero lg:container-padding--auto lg:w-full") }}
- {{> atoms-super-button(cta: "Sledujte naše fórum", icon: "fa fa-comments", classes: "bg-black text-white container-padding--zero lg:container-padding--auto lg:w-full") }}
+ {{> atoms-super-button(cta: "Sledujte nás na Facebooku", icon: "ico--facebook", classes: "bg-brands-facebook text-white container-padding--zero lg:container-padding--auto lg:w-full") }}
+ {{> atoms-super-button(cta: "Sledujte naše fórum", icon: "ico--bubbles", classes: "bg-black text-white container-padding--zero lg:container-padding--auto lg:w-full") }}
</div>
</article>
</div>
diff --git a/source/_patterns/03-templates/election-program-point.mustache b/source/_patterns/03-templates/election-program-point.mustache
index 3f7e855..b702cd0 100644
--- a/source/_patterns/03-templates/election-program-point.mustache
+++ b/source/_patterns/03-templates/election-program-point.mustache
@@ -23,11 +23,11 @@
<hr />
<h3>Povolební strategie</h3>
<p>Přečtěte si, jak se zachováme po volbách. Nemusíte volit zajíce v pytli.</p>
- {{> atoms-icon-button(cta: "Zjistit víc", icon: "fas fa-chevron-right", classes: "btn--black btn--hoveractive btn--fullwidth md:btn--autowidth") }}
+ {{> atoms-icon-button(cta: "Zjistit víc", icon: "ico--chevron-right", classes: "btn--black btn--hoveractive btn--fullwidth md:btn--autowidth") }}
<hr />
<h3>Financování kampaně</h3>
<p>Transparentní financování kampaně je pro nás samozřejmost.</p>
- {{> atoms-icon-button(cta: "Zjistit víc", icon: "fas fa-chevron-right", classes: "btn--black btn--hoveractive btn--fullwidth md:btn--autowidth") }}
+ {{> atoms-icon-button(cta: "Zjistit víc", icon: "ico--chevron-right", classes: "btn--black btn--hoveractive btn--fullwidth md:btn--autowidth") }}
</div>
</div>
</div>
diff --git a/source/_patterns/03-templates/elections-candidates.mustache b/source/_patterns/03-templates/elections-candidates.mustache
index fb7fde1..da12570 100644
--- a/source/_patterns/03-templates/elections-candidates.mustache
+++ b/source/_patterns/03-templates/elections-candidates.mustache
@@ -33,12 +33,12 @@
</div>
<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") }}
+ {{> atoms-icon-button(cta: "Zobrazit vše", classes: "text-xl btn--black btn--hoveractive", icon: "ico--chevron-right") }}
</div>
<div class="flex flex-col pt-8 lg:pt-24 lg:flex-row lg:space-x-8">
- {{> atoms-super-button(cta: "Povolební strategie", icon: "fa fa-chess", classes: "bg-grey-125 hover:bg-black hover:text-white lg:w-full container-padding--zero lg:container-padding--auto") }}
- {{> atoms-super-button(cta: "Financování kampaně", icon: "fa fa-calculator", classes: "bg-black text-white hover:bg-grey-125 hover:text-black lg:w-full container-padding--zero lg:container-padding--auto") }}
+ {{> atoms-super-button(cta: "Povolební strategie", icon: "ico--strategy", classes: "bg-grey-125 hover:bg-black hover:text-white lg:w-full container-padding--zero lg:container-padding--auto") }}
+ {{> atoms-super-button(cta: "Financování kampaně", icon: "ico--calculator", classes: "bg-black text-white hover:bg-grey-125 hover:text-black lg:w-full container-padding--zero lg:container-padding--auto") }}
</div>
</div>
diff --git a/source/_patterns/03-templates/elections-program.mustache b/source/_patterns/03-templates/elections-program.mustache
index 60fb907..8575a51 100644
--- a/source/_patterns/03-templates/elections-program.mustache
+++ b/source/_patterns/03-templates/elections-program.mustache
@@ -20,8 +20,8 @@
</div>
<div class="flex flex-col pt-8 lg:pt-24 lg:flex-row lg:space-x-8">
- {{> atoms-super-button(cta: "Povolební strategie", icon: "fa fa-chess", classes: "bg-grey-125 hover:bg-black hover:text-white lg:w-full container-padding--zero lg:container-padding--auto") }}
- {{> atoms-super-button(cta: "Financování kampaně", icon: "fa fa-calculator", classes: "bg-black text-white hover:bg-grey-125 hover:text-black lg:w-full container-padding--zero lg:container-padding--auto") }}
+ {{> atoms-super-button(cta: "Povolební strategie", icon: "ico--strategy", classes: "bg-grey-125 hover:bg-black hover:text-white lg:w-full container-padding--zero lg:container-padding--auto") }}
+ {{> atoms-super-button(cta: "Financování kampaně", icon: "ico--calculator", classes: "bg-black text-white hover:bg-grey-125 hover:text-black lg:w-full container-padding--zero lg:container-padding--auto") }}
</div>
</div>
diff --git a/source/_patterns/03-templates/homepage.mustache b/source/_patterns/03-templates/homepage.mustache
index ee01387..c98aed9 100644
--- a/source/_patterns/03-templates/homepage.mustache
+++ b/source/_patterns/03-templates/homepage.mustache
@@ -7,7 +7,7 @@
{{> organisms-article-card-list() }}
<nav class="text-center">
- {{> atoms-icon-button(cta: "Další články", icon: "fas fa-chevron-right", classes: "text-xl pt-8") }}
+ {{> atoms-icon-button(cta: "Další články", icon: "ico--chevron-right", classes: "text-xl pt-8") }}
</nav>
</section>
@@ -20,8 +20,8 @@
</section>
<div class="flex flex-col lg:flex-row lg:space-x-8">
- {{> atoms-super-button(cta: "Sledujte nás na Facebooku", icon: "fab fa-facebook", classes: "bg-brands-facebook text-white container-padding--zero lg:container-padding--auto lg:w-full") }}
- {{> atoms-super-button(cta: "Sledujte naše fórum", icon: "fa fa-comments", classes: "bg-black text-white container-padding--zero lg:container-padding--auto lg:w-full") }}
+ {{> atoms-super-button(cta: "Sledujte nás na Facebooku", icon: "ico--facebook", classes: "bg-brands-facebook text-white container-padding--zero lg:container-padding--auto lg:w-full") }}
+ {{> atoms-super-button(cta: "Sledujte naše fórum", icon: "ico--bubbles", classes: "bg-black text-white container-padding--zero lg:container-padding--auto lg:w-full") }}
</div>
</div>
diff --git a/source/_patterns/03-templates/pirate-center.mustache b/source/_patterns/03-templates/pirate-center.mustache
index 73c9e55..611df61 100644
--- a/source/_patterns/03-templates/pirate-center.mustache
+++ b/source/_patterns/03-templates/pirate-center.mustache
@@ -27,7 +27,7 @@
kanceláře, v takovém případě velmi oceníme účelový dar na provoz
centra.
</p>
- {{> atoms-icon-button(cta: "Provozní řád", icon: "fas fa-chevron-right", classes: "btn--black btn--hoveractive btn--fullwidth md:btn--autowidth") }}
+ {{> atoms-icon-button(cta: "Provozní řád", icon: "ico--chevron-right", classes: "btn--black btn--hoveractive btn--fullwidth md:btn--autowidth") }}
<h2>Chci podpořit provoz</h2>
<p>
Pokud chcete ParduPiCe podpořit, můžete nám poslat účelový dar na jeho provoz převodem na účet. Pro platbu použijte následující údaje:
@@ -69,7 +69,7 @@
{{> molecules-calendar-table-row(classes: "calendar-table-row--standalone") }}
</p>
- {{> atoms-icon-button(cta: "Další akce", icon: "fas fa-chevron-right", classes: "btn--orange-300 btn--hoveractive btn--fullwidth md:btn--autowidth") }}
+ {{> atoms-icon-button(cta: "Další akce", icon: "ico--chevron-right", classes: "btn--orange-300 btn--hoveractive btn--fullwidth md:btn--autowidth") }}
</div>
<div class="pt-8 lg:w-2/5 xl:w-1/3 lg:pt-0">
<div class="lg:card lg:elevation-10">
@@ -91,8 +91,8 @@
</div>
<div class="flex flex-col pt-8 lg:space-y-4">
- {{> atoms-super-button(cta: "Sledujte nás na Facebooku", icon: "fab fa-facebook", classes: "bg-brands-facebook text-white container-padding--zero lg:container-padding--auto lg:w-full") }}
- {{> atoms-super-button(cta: "Sledujte naše fórum", icon: "fa fa-comments", classes: "bg-black text-white container-padding--zero lg:container-padding--auto lg:w-full") }}
+ {{> atoms-super-button(cta: "Sledujte nás na Facebooku", icon: "ico--facebook", classes: "bg-brands-facebook text-white container-padding--zero lg:container-padding--auto lg:w-full") }}
+ {{> atoms-super-button(cta: "Sledujte naše fórum", icon: "ico--bubbles", classes: "bg-black text-white container-padding--zero lg:container-padding--auto lg:w-full") }}
</div>
</div>
</div>
diff --git a/source/css/atoms/list.pcss b/source/css/atoms/list.pcss
index c2ab54d..c1d80f6 100644
--- a/source/css/atoms/list.pcss
+++ b/source/css/atoms/list.pcss
@@ -11,8 +11,8 @@
&:before {
@apply text-black pr-2;
- font-family: "Font Awesome 5 Pro";
- content: "\f45c";
+ font-family: "pirati-ui";
+ content: "\e919";
font-size: 7px;
font-weight: 600;
}
@@ -27,8 +27,8 @@
li:after {
@apply text-black pl-2 ml-auto;
- font-family: "Font Awesome 5 Pro";
- content: "\f054";
+ font-family: "pirati-ui";
+ content: "\e923";
font-size: 10px;
font-weight: 300;
}
diff --git a/source/css/molecules/pagination.pcss b/source/css/molecules/pagination.pcss
index f3c9c22..427ab41 100644
--- a/source/css/molecules/pagination.pcss
+++ b/source/css/molecules/pagination.pcss
@@ -1,5 +1,5 @@
.pagination {
- @apply inline-block mx-auto;
+ @apply inline-flex mx-auto;
}
.pagination-container {
diff --git a/source/css/organisms/footer.pcss b/source/css/organisms/footer.pcss
index ef94c7f..00936d9 100644
--- a/source/css/organisms/footer.pcss
+++ b/source/css/organisms/footer.pcss
@@ -43,10 +43,8 @@
@apply flex items-center cursor-pointer;
&:after {
- /* Compensate for font specifics, align to center. */
- margin-bottom: -0.125rem;
- content: "\f078";
- font-family: "Font Awesome 5 Pro";
+ content: "\e925";
+ font-family: "pirati-ui";
@apply ml-auto font-light text-sm transition duration-200;
}
diff --git a/source/css/organisms/navbar.pcss b/source/css/organisms/navbar.pcss
index 1ef604b..89b46ea 100644
--- a/source/css/organisms/navbar.pcss
+++ b/source/css/organisms/navbar.pcss
@@ -61,10 +61,8 @@
@apply flex items-center;
&:after {
- /* Compensate for font specifics, align to center. */
- margin-bottom: -0.125rem;
- content: "\f078";
- font-family: "Font Awesome 5 Pro";
+ content: "\e925";
+ font-family: "pirati-ui";
@apply ml-auto font-light text-sm transition duration-200;
}
diff --git a/source/css/style.pcss b/source/css/style.pcss
index d22194a..e19a3a3 100644
--- a/source/css/style.pcss
+++ b/source/css/style.pcss
@@ -1,5 +1,8 @@
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Roboto+Condensed:wght@300;400;700&family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400&display=swap');
+/* Icons */
+@import "../icons/style.css";
+
/**
* This injects Tailwind's base styles and any base styles registered by
* plugins.
@@ -23,6 +26,7 @@
@import "./atoms/flag.pcss";
@import "./atoms/heading.pcss";
@import "./atoms/horizontal-rule.pcss";
+@import "./atoms/icons.pcss";
@import "./atoms/list.pcss";
@import "./atoms/paragraph.pcss";
@import "./atoms/quotation.pcss";
diff --git a/source/images/menu-toggle.svg b/source/images/menu-toggle.svg
deleted file mode 100644
index 090a0cd..0000000
--- a/source/images/menu-toggle.svg
+++ /dev/null
@@ -1,7 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="42" height="30" viewBox="0 0 42 30">
- <g id="Group_27" data-name="Group 27" transform="translate(-677 -34)">
- <rect id="Rectangle_30" data-name="Rectangle 30" width="42" height="6" transform="translate(677 34)" fill="#fff"/>
- <rect id="Rectangle_32" data-name="Rectangle 32" width="42" height="6" transform="translate(677 46)" fill="#fff"/>
- <rect id="Rectangle_34" data-name="Rectangle 34" width="42" height="6" transform="translate(677 58)" fill="#fff"/>
- </g>
-</svg>
--
GitLab