Stylistic font changes and config

src/components/InfoBox.js

@@ -3,7 +3,9 @@ import Link from 'gatsby-link'
 
 const InfoBox = ({ ...props }) => (
   <div className={`${props.classes}`}>
-    <h2 className={`${props.h2Classes} text-black my-2`}>{props.headline}</h2>
+    <h2 className={`${props.h2Classes} py-2 text-black my-2`}>
+      {props.headline}
+    </h2>
     <p className="text-black-light leading-normal text-lg font-light">
       {props.text}
     </p>

src/components/SectionIntro.js

@@ -11,7 +11,7 @@ const IntroDefault = ({ ...props }) => (
         className={`
       ${
         props.light ? headlineDark : headlineLight
-      } opacity-50 text-sm font-light text-black uppercase pt-2 pb-1`}
+      } opacity-50 text-sm font-light text-black uppercase py-2 pb-1`}
       >
         {props.intro}
       </h3>
@@ -19,7 +19,7 @@ const IntroDefault = ({ ...props }) => (
     {props.headline && (
       <h2
         className={`${props.light ? headlineDark : ''} ${props.h2Classes}
-    text-black pt-1 pb-2`}
+    text-black py-4`}
       >
         {props.headline}
       </h2>

src/layouts/index.js

@@ -28,8 +28,8 @@ const Layout = ({ children, data }) => (
       link={[{ rel: 'shortcut icon', type: 'image/png', href: `${favicon32}` }]}
     />
     <MessengerCustomerChat
-      pageId="<PAGE_ID>"
+      pageId="715686642152482"
-      appId="<APP_ID>"
+      appId="1896398823783343"
       htmlRef="<REF_STRING>"
     />
     <div className="side-panel panel">

src/pages/index.js

@@ -171,7 +171,7 @@ const IndexPage = ({ ...props }) => (
       <section className="text-center p-4 relative">
         <Fade>
           <SectionIntro
-            h2Classes="text-2xl md:text-4xl"
+            h2Classes="py-8 text-2xl md:text-4xl"
             headline="Yet sometimes we have fun & publish"
           />
         </Fade>

src/styles/index.css

@@ -2909,14 +2909,18 @@ table {
 }
 
 .leading-normal {
-  line-height: 1.5;
+  line-height: 1.7;
 }
 
 .leading-loose {
-  line-height: 1.75;
+  line-height: 1.8;
 }
 
 .leading-looser {
+  line-height: 1.9;
+}
+
+.leading-loosest {
   line-height: 2;
 }
 
@@ -8067,14 +8071,18 @@ table {
   }
 
   .sm\:leading-normal {
-    line-height: 1.5;
+    line-height: 1.7;
   }
 
   .sm\:leading-loose {
-    line-height: 1.75;
+    line-height: 1.8;
   }
 
   .sm\:leading-looser {
+    line-height: 1.9;
+  }
+
+  .sm\:leading-loosest {
     line-height: 2;
   }
 
@@ -13210,14 +13218,18 @@ table {
   }
 
   .md\:leading-normal {
-    line-height: 1.5;
+    line-height: 1.7;
   }
 
   .md\:leading-loose {
-    line-height: 1.75;
+    line-height: 1.8;
   }
 
   .md\:leading-looser {
+    line-height: 1.9;
+  }
+
+  .md\:leading-loosest {
     line-height: 2;
   }
 
@@ -18353,14 +18365,18 @@ table {
   }
 
   .lg\:leading-normal {
-    line-height: 1.5;
+    line-height: 1.7;
   }
 
   .lg\:leading-loose {
-    line-height: 1.75;
+    line-height: 1.8;
   }
 
   .lg\:leading-looser {
+    line-height: 1.9;
+  }
+
+  .lg\:leading-loosest {
     line-height: 2;
   }
 
@@ -23496,14 +23512,18 @@ table {
   }
 
   .xl\:leading-normal {
-    line-height: 1.5;
+    line-height: 1.7;
   }
 
   .xl\:leading-loose {
-    line-height: 1.75;
+    line-height: 1.8;
   }
 
   .xl\:leading-looser {
+    line-height: 1.9;
+  }
+
+  .xl\:leading-loosest {
     line-height: 2;
   }
 

tailwind.config.js

@@ -314,9 +314,10 @@ module.exports = {
   leading: {
     none: 1,
     tight: 1.25,
-    normal: 1.5,
+    normal: 1.7,
-    loose: 1.75,
+    loose: 1.8,
-    looser: 2,
+    looser: 1.9,
+    loosest: 2,
   },
 
   /*