Drop font awesome

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 />

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>

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>

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>
 

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>
 

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>
 

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>

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;
   }

source/css/molecules/pagination.pcss

 .pagination {
-  @apply inline-block mx-auto;
+  @apply inline-flex mx-auto;
 }
 
 .pagination-container {

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;
   }

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;
   }

source/css/style.pcss

 @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";

source/images/menu-toggle.svg

-<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>