Responsivness, subnav condensed

source/_patterns/00-atoms/03-buttons/02-button-colors.mustache

-<div class="space-y-2">
-  <div>
+<div class="inline-flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
+  <div class="inline-flex flex-col space-y-1">
     {{> atoms-basic-button(classes: "btn--black") }}
     {{> atoms-basic-button(classes: "btn--grey-800") }}
     {{> atoms-basic-button(classes: "btn--grey-125") }}
@@ -7,7 +7,7 @@
     {{> atoms-basic-button(classes: "btn--white btn--fading") }}
     {{> atoms-basic-button(classes: "btn--green-100") }}
   </div>
-  <div>
+  <div class="inline-flex flex-col space-y-1">
     {{> atoms-icon-button(classes: "btn--black") }}
     {{> atoms-icon-button(classes: "btn--grey-800") }}
     {{> atoms-icon-button(classes: "btn--grey-125") }}

source/_patterns/00-atoms/03-buttons/03-button-sizes.mustache

-<div class="space-y-1">
-  <div>
+<div class="inline-flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
+  <div class="inline-flex flex-col space-y-1">
     {{> atoms-basic-button(classes: "text-sm" )}}
     {{> atoms-basic-button(classes: "text-base" )}}
     {{> atoms-basic-button(classes: "text-lg" )}}
   </div>
-  <div>
+  <div class="inline-flex flex-col space-y-1">
     {{> atoms-basic-button(classes: "text-sm btn--condensed" )}}
     {{> atoms-basic-button(classes: "text-base btn--condensed" )}}
     {{> atoms-basic-button(classes: "text-lg btn--condensed" )}}

source/_patterns/00-atoms/03-buttons/04-button-with-hover-effect.mustache

-<div class="space-y-2">
-  <div>
+<div class="inline-flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
+  <div class="inline-flex flex-col space-y-1">
     {{> atoms-basic-button(classes: "btn--black btn--hoveractive") }}
     {{> atoms-basic-button(classes: "btn--grey-800 btn--hoveractive") }}
     {{> atoms-basic-button(classes: "btn--grey-125 btn--hoveractive") }}
@@ -7,7 +7,7 @@
     {{> atoms-basic-button(classes: "btn--white btn--fading btn--hoveractive") }}
     {{> atoms-basic-button(classes: "btn--green-100 btn--hoveractive") }}
   </div>
-  <div>
+  <div class="inline-flex flex-col space-y-1">
     {{> atoms-icon-button(classes: "btn--black btn--hoveractive") }}
     {{> atoms-icon-button(classes: "btn--grey-800 btn--hoveractive") }}
     {{> atoms-icon-button(classes: "btn--grey-125 btn--hoveractive") }}

source/_patterns/00-atoms/03-buttons/13-overlay-button-colors.mustache

-{{> atoms-overlay-button(overlayColor: "btn--overlay-red-100") }}
-{{> atoms-overlay-button(overlayColor: "btn--overlay-brands-facebook") }}
+<div class="inline-flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
+  <div class="inline-flex flex-col space-y-1">
+    {{> atoms-overlay-button(overlayColor: "btn--overlay-red-100") }}
+    {{> atoms-overlay-button(overlayColor: "btn--overlay-brands-facebook") }}
+  </div>
+</div>

source/_patterns/00-atoms/05-cards/card-elevation-variants.mustache

-<div class="flex space-x-4">
+<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
   {{> atoms-basic-card(classes: "elevation-1", description: "elevation-1") }}
   {{> atoms-basic-card(classes: "elevation-2", description: "elevation-2") }}
   {{> atoms-basic-card(classes: "elevation-3", description: "elevation-3") }}

source/_patterns/00-atoms/flags/flag-color-variants.mustache

-<div class="flex space-x-5">
-  <div>
+<div class="inline-flex flex-col lg:flex-row space-y-4 lg:space-y-0 lg:space-x-4">
+  <div class="inline-flex flex-col space-y-1">
     {{> atoms-basic-flag(classes: "bg-black text-white") }}
   </div>
-  <div>
+  <div class="inline-flex flex-col space-y-1">
     {{> atoms-basic-flag(classes: "bg-green-100 text-white") }}
   </div>
-  <div>
+  <div class="inline-flex flex-col space-y-1">
     {{> atoms-basic-flag(classes: "bg-red-100 text-white") }}
   </div>
 </div>

source/_patterns/00-atoms/flags/flag-size-variants.mustache

-<div class="flex space-x-5">
-  <div>
+<div class="inline-flex flex-col lg:flex-row space-y-4 lg:space-y-0 lg:space-x-4">
+  <div class="inline-flex flex-col space-y-1">
     {{> atoms-basic-flag(font: "head-alt-base") }}
   </div>
-  <div>
+  <div class="inline-flex flex-col space-y-1">
     {{> atoms-basic-flag(font: "head-alt-lg") }}
   </div>
-  <div>
+  <div class="inline-flex flex-col space-y-1">
     {{> atoms-basic-flag(font: "head-alt-xl") }}
   </div>
 </div>

source/_patterns/00-atoms/super-buttons/super-button-color-variants.mustache

-{{> atoms-super-button(classes: "bg-grey-125") }}
-{{> atoms-super-button(classes: "bg-black text-white") }}
-{{> atoms-super-button(classes: "bg-brands-facebook text-white") }}
+<div class="inline-flex flex-col lg:flex-row space-y-4 lg:space-y-0 lg:space-x-4">
+  <div class="inline-flex flex-col space-y-1">
+    {{> atoms-super-button(classes: "bg-grey-125") }}
+    {{> atoms-super-button(classes: "bg-black text-white") }}
+    {{> atoms-super-button(classes: "bg-brands-facebook text-white") }}
+  </div>
+</div>

source/css/molecules/switch.pcss

@@ -3,7 +3,7 @@
 }
 
 .switch__item {
-  @apply py-2 px-4 font-alt font-normal text-xl text-white;
+  @apply py-2 px-4 font-alt font-normal text-xl text-white text-center;
 
   &:hover {
     @apply no-underline bg-grey-700;

source/css/organisms/subnav.pcss

 .subnav {
-  @apply bg-black text-white py-1;
+  @apply bg-black text-white font-condensed py-1;
 }