diff --git a/gulpfile.js b/gulpfile.js
index 3a86589cad2e526ae3b060aa31e702377701f2c6..d324ecc35b1010fca26b297b6c5116ff53ba0fbc 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 4d408668c56c4489cdb1f1edf647166a08c67314..3394c1386566d6b20fcf97d8fa756eb1e58a70a9 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 e6877d613952b16d5474e9cb808b67719dc0e93d..188dce07fc4daa0c9b505883aeee74ef42bd7f8d 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 4311b061328c7da2ee934c1cfed7746ca2869430..0f464aa58e1c0cc3a82e7740907510cf75569463 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 731247ffab4ebd130ec04b1bef42367b202f9b2a..7414b3d46c9abe66152eb30b11f9e3985d3f044e 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 b161d5bb4a7df4421d7e8ad0efe1d83b9550fe70..1ea61cbef31fc4131ef455a3c2108042428a1004 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 7e3d245214b77782caa4915cfd11a06c1ed55798..bbbedd55652cf1097a2b930c25935f9ceeb54b1d 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 dd4922b1e6292d64b3e95b746abfd05bdb62d122..3363e5be0f64c4b7af5cf1437f57adbbaab286a2 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 0fbb338e69a0c3d18d90c2ac15fd834664bdf856..2fcb0ffc89c7ec24ff193c38673f9300b23d92c3 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 b0f8c22b9db7c177a90eba085024711caf8705b2..7296b75802b82b398320464a2229ad6941ddec75 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 9557a099470cc9077aa64a2e49987836418e5a6a..cce3175b2d9d4fab612df4920b2f0afd8f21e636 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 71f41c66f9eff7c9b77bf33340556e9ec8b86a2e..57818c2b0e2097f86a10536e9dd04bb250fd499c 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 14b971c1217e25368f41c6eb4bca7eb88f4a32fc..401ccbb04972a9d0764285b9702113490591b58a 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 4f96a25aa7ac543f6ab61890dc0587baa12f2e18..b86dd5e25b1800948df92943c1ce51fc6c78a12e 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 57964d2d8cf3906da2cbf84010a739b4a63ef77b..515799effcca3a069a939eb9ea1e65cc083cd580 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 ece0a03f738e1a4a018fc92d3e1f4fef05b07a8f..833bf250c5476d1577d6a83f9dc9b5de86fae294 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 03bba1f0e9cd9a7a66b6eea040ab2ec483f94db5..9680ac01689de9f1d2afad2b5faf97dd0f464d29 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 df2d8d46d232994d8fa1c74468b18691d0680a1e..e8bc00ff7a8459403dd1151bcf05d8c39e77cc37 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 ad9cb686f2bc12a37dad6a7d00fc57e2ae98af56..f52d6e70aa9b2b65202e186bbf600a7ea2584ac8 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 b47db3b546d63e8df4a408cdfdb9e6b63c9e0699..c312db96c9503b7b35db3a6e67ab757cf4133bfc 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 e0cf00f2ef327822b6a9e3d1cfa3110f8b899371..8f1ac6343a21b17cb3c86618d4c78491bd0ad053 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 50894cff16854f9804950049991bc98b186a24ac..5d39f365d0a7df3adbc55a15009033055b5b150d 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 3f7e855d6395fec590a76523914cedca3a5e06e4..b702cd0b6e64cece6918d9dd6aa6ba470599998f 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 fb7fde1dbb5c6471308d9c418adf5a4e50bf2905..da1257023c5e73fa02acf77b6aa8de2b9240f77d 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 60fb907eab6fa5b2d56321f2167681fb6a171dff..8575a5189e3e5816845d099a56729ef7162df26c 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 ee01387f335274b024a586dbf47d039875ef9e8a..c98aed9145048e151748d3e2f639c1f0625704a7 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 73c9e55ddbbe0d4e8e0051cf051f0fd41871a5b8..611df612b39becfc0f0fb2d4d4fc4e6396ea1037 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 c2ab54dd735213c16fbc2272d36e1cc2c037f0e7..c1d80f6e2c7ad469cd5cf3ba79cc7e82558c5307 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 f3c9c22c441ec44482c4219a9536e16f22a8cb67..427ab41984ca66070093b504ba9dcf8f1d785fcd 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 ef94c7fdabc2d8b60d3d088be4db47afc16eef12..00936d9752e2473ad3a9281056870235a8e64083 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 1ef604b3b972304ba51047e9837ad26d3fc7b7aa..89b46ea1b16faea8f0d4542de515b851f4db40a4 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 d22194a768b8e61561a4f949c31a02e6d8dfceea..e19a3a3175ea5700e7fb9d6190961b1a56ad482f 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 090a0cd6841749847fd283765a866b9afaebda21..0000000000000000000000000000000000000000
--- 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>