More work on basic blocks

source/_patterns/00-atoms/04-social-icons/basic-social-icon.mustache

+<a href="#" class="social-icon {{ classes }}"><i class="{{ icon }}"></i></a>

source/_patterns/00-atoms/04-social-icons/filled-social-icon.mustache

+<a href="#" class="social-icon social-icon--fill {{ classes }}"><i class="{{ icon }}"></i></a>

source/_patterns/00-atoms/04-social-icons/icon-variants.mustache

+<a href="#" class="social-icon social-icon--fill bg-brands-facebook text-white {{ classes }}"><i class="{{ icon }}"></i></a>
+<a href="#" class="social-icon social-icon--fill bg-brands-facebook text-white {{ classes }}"><i class="{{ icon }} text-xl"></i></a>
+<a href="#" class="social-icon social-icon--fill bg-brands-facebook text-white {{ classes }}"><i class="{{ icon }} text-xl text-3xl"></i></a>

source/_patterns/01-molecules/00-badge/default.mustache → source/_patterns/01-molecules/00-badge/basic-badge.mustache

@@ -6,13 +6,9 @@
     />
   </div>
   <div class="badge-body">
-    <span class="h-sm-heavy">Mikuláš Peksa</span>
+    <span class="head-sm-heavy">Mikuláš Peksa</span>
     <p class="badge-occupation">Předseda krajského sdružení Pardubického kraje</p>
-    <a href="tel:+420777123123" class="badge-link is-dimmed">
-      <i class="fas fa-phone"></i> +420 775 609 939
-    </a>
-    <a href="mailto:example@example.com" class="badge-link is-dimmed">
-      <i class="fas fa-envelope"></i> example@example.com
-    </a>
+    {{> atoms-basic-contact-line(icon: "fas fa-phone", caption: "+420 777 123 123", classes: "badge-link") }}
+    {{> atoms-basic-contact-line(icon: "fas fa-envelope", classes: "badge-link") }}
   </div>
 </div>

source/_patterns/01-molecules/00-badge/condensed.mustache → source/_patterns/01-molecules/00-badge/condensed-badge.mustache

@@ -6,9 +6,7 @@
     />
   </div>
   <div class="badge-body">
-    <span class="h-xs badge-title">Mikuláš Peksa</span>
-    <a href="mailto:example@example.com" class="badge-link">
-      <i class="fas fa-envelope"></i> example@example.com
-    </a>
+    <span class="head-xs badge-title">Mikuláš Peksa</span>
+    {{> atoms-basic-contact-line(icon: "fas fa-envelope", classes: "badge-link") }}
   </div>
 </div>

source/_patterns/01-molecules/01-social-icon-group/basic-social-icon-group.mustache

+<div class="social-icon-group space-x-xs">
+  {{> atoms-basic-social-icon }}
+  {{> atoms-basic-social-icon }}
+  {{> atoms-basic-social-icon }}
+  {{> atoms-basic-social-icon }}
+</div>

source/_patterns/01-molecules/01-social-icon-group/colored-social-icon-group.mustache

+<div class="social-icon-group space-x-xs">
+  {{> atoms-filled-social-icon(classes: "bg-brands-facebook text-white", icon: "fab fa-facebook") }}
+  {{> atoms-filled-social-icon(classes: "bg-brands-twitter text-white", icon: "fab fa-twitter") }}
+  {{> atoms-filled-social-icon(classes: "bg-brands-linkedin text-white", icon: "fab fa-linkedin") }}
+</div>

source/_patterns/02-organisms/00-global/footer.mustache

@@ -58,31 +58,17 @@
           </div>
           <div class="md:col-span-3 col-span-12 footer-social mb-3 md:mb-0">
             <div class="mb-2">
-              <div class="footer-social-links is-highlighted pb-2">
-                <a href="#"><i class="fab fa-twitter"></i></a>
-                <a href="#"><i class="fas fa-rss"></i></a>
-                <a href="#"><i class="fab fa-instagram"></i></a>
-                <a href="#"><i class="fab fa-flickr"></i></a>
+              <div class="social-icon-group space-x-1 text-white pb-2">
+                {{> 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") }}
               </div>
-              <a href="#"><i class="fas fa-envelope"></i> Dejte nám vědět</a
-              >
+              {{> atoms-basic-contact-line(icon: "fas fa-envelope", caption: "Dejte nám vědět") }}
             </div>
-            <a href="#" class="btn has-icon is-inverted is-lg is-fullwidth md:is-auto mb-1">
-              <div class="btn-body-wrap">
-                <span class="btn-body">Přispěj</span>
-                <div class="btn-icon">
-                  <img src="https://www.va-fighters.com/pirati/krajska-sablona/dist/assets/img/icons/money.svg" alt="" />
-                </div>
-              </div>
-            </a>
-            <a href="#" class="btn has-icon is-green is-lg is-fullwidth md:is-auto">
-              <div class="btn-body-wrap">
-                <span class="btn-body">Naloď se</span>
-                <div class="btn-icon">
-                  <img src="https://www.va-fighters.com/pirati/krajska-sablona/dist/assets/img/icons/onboard.svg" alt="" />
-                </div>
-              </div>
-            </a>
+            {{> atoms-icon-button(cta: "Přispěj", icon: "fas fa-hand-holding-usd", classes: "is-inverted is-lg is-fullwidth md:is-auto mb-1") }}
+            {{> atoms-icon-button(cta: "Naloď se", icon: "fas fa-anchor", classes: "is-green is-lg is-fullwidth md:is-auto") }}
           </div>
         </div>
       </div>
@@ -123,18 +109,16 @@
     <div class="container">
       <div class="footer-contacts">
         <div class="footer-contact">
-          {{> 01-molecules/00-badge/condensed }}
+          {{> molecules-condensed-badge }}
         </div>
         <div class="footer-contact">
-          {{> 01-molecules/00-badge/condensed }}
+          {{> molecules-condensed-badge }}
         </div>
         <div class="footer-contact">
-          {{> 01-molecules/00-badge/condensed }}
+          {{> molecules-condensed-badge }}
         </div>
         <div class="mt-4 lg:mt-0 lg:text-right footer-contact">
-          <a href="#" class="btn is-basic is-inverted is-fullwidth md:is-auto is-lg to-faded">
-            <span class="btn-body">Kontakt</span>
-          </a>
+          {{> atoms-basic-button(cta: "Kontakt", classes: "is-inverted is-fullwidth md:is-auto is-lg to-faded") }}
         </div>
       </div>
     </div>

source/css/atoms/button.pcss

@@ -22,7 +22,7 @@
   }
 
   .btn-icon {
-    @apply border-l border-black px-2 flex;
+    @apply border-l border-black px-2 flex items-center;
 
     img {
       @apply w-2;

source/css/atoms/contact-line.pcss

+.contact-line {
+  i {
+    @apply mr-1 hidden;
+
+    @screen lg {
+      @apply inline-block;
+    }
+  }
+}

source/css/atoms/heading.pcss

-.h-xl {
+.head-xl {
   @apply text-7xl font-alt font-normal leading-tight;
 }
 
-.h-lg {
+.head-lg {
   @apply text-6xl font-alt font-normal leading-tight;
 }
 
-.h-md {
+.head-md {
   @apply text-4xl font-alt font-normal leading-tight;
 }
 
-.h-base {
+.head-base {
   @apply text-3xl font-condensed font-medium leading-tight;
 }
 
-.h-base-heavy {
+.head-base-heavy {
   @apply text-3xl font-condensed font-bold leading-tight;
 }
 
-.h-sm {
+.head-sm {
   @apply text-2xl font-condensed font-medium leading-tight;
 }
 
-.h-sm-heavy {
+.head-sm-heavy {
   @apply text-2xl font-condensed font-bold leading-tight;
 }
 
-.h-xs {
+.head-xs {
   @apply text-lg font-condensed font-medium leading-tight;
 }
 
-.h-xs-heavy {
+.head-xs-heavy {
   @apply text-lg font-condensed font-bold leading-tight;
 }
 
-.h-xs-allcaps {
+.head-xs-allcaps {
   @apply text-lg font-condensed font-light uppercase leading-tight;
 }

source/css/atoms/social-icon.pcss

+
+.social-icon {
+  @apply inline-block align-middle text-center rounded-md;
+}
+
+.social-icon--fill {
+  /* @apply bg-black text-white; */
+  padding: .5em;
+}

source/css/molecules/badge.pcss

@@ -23,20 +23,6 @@
 
   .badge-link {
     @apply text-sm font-light block w-full;
-
-    i {
-      @apply mr-1;
-    }
-
-    @media (max-width: 1200px) {
-      i {
-        display: none;
-      }
-    }
-
-    &.is-dimmed {
-      @apply text-grey-300;
-    }
   }
 }
 

source/css/molecules/social-icon-group.pcss

+.social-icon-group {
+  @apply space-x-1;
+}

source/css/style.css → 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;1,400&display=swap');
 
 /**
- * This injects Tailwind's base styles and any base styles registered by
- * plugins.
- */
+* This injects Tailwind's base styles and any base styles registered by
+* plugins.
+*/
 @import "tailwindcss/base";
 
 /**
- * This injects Tailwind's component classes and any component classes
+* This injects Tailwind's component classes and any component classes
  * registered by plugins.
  */
-@import "tailwindcss/components";
+ @import "tailwindcss/components";
+
+
+ /**
+ * This injects Tailwind's utility classes and any utility classes registered
+* by plugins.
+*/
+@import "tailwindcss/utilities";
 
 /**
- * Custom components
- */
+* Custom components
+*/
 @import "./atoms/button.pcss";
+@import "./atoms/contact-line.pcss";
 @import "./atoms/heading.pcss";
 @import "./atoms/paragraph.pcss";
+@import "./atoms/social-icon.pcss";
+
 @import "./molecules/badge.pcss";
-@import "./organisms/footer.pcss";
+@import "./molecules/social-icon-group.pcss";
 
-/**
- * This injects Tailwind's utility classes and any utility classes registered
- * by plugins.
- */
-@import "tailwindcss/utilities";
+@import "./organisms/footer.pcss";
 
 /**
  * Custom utilities

tailwind.config.js

@@ -36,14 +36,21 @@ module.exports = {
         '500': '#202020',
       },
       'red': '#d6151b',
-      'facebook-blue': '#067ceb',
       'green': {
         '100': '#29bc51',
         '200': '#1c8c3b',
+      },
+      'brands': {
+        'facebook': '#067ceb',
+        'twitter': '#00c9ff',
+        'gmail': '#ec230e',
+        'linkedin': '#0066a9',
       }
     },
     spacing: {
       '0': '0',
+      'xs': '0.15rem',
+      'sm': '0.25rem',
       '1': '0.5rem',
       '2': '1rem',
       '3': '1.5rem',