From c6cd4d19adcec305c6ab6f2e3b067787b4e96859 Mon Sep 17 00:00:00 2001
From: Moris Zen <moris.pasic@gmail.com>
Date: Wed, 4 Jul 2018 10:03:22 +0200
Subject: [PATCH] Styling and restructuring of components, config edit

---
 src/components/Header.js       |  18 +-
 src/components/InfoBox.js      |   8 +-
 src/components/SectionIntro.js |  30 +++-
 src/layouts/index.js           |  13 +-
 src/pages/index.js             | 141 ++++++++++++----
 src/styles/custom.css          |  26 ++-
 src/styles/index.css           | 300 +++++++++++++++++++++++++++++++++
 tailwind.config.js             | 200 ++++++++++------------
 8 files changed, 558 insertions(+), 178 deletions(-)

diff --git a/src/components/Header.js b/src/components/Header.js
index a06caca..55a4c43 100644
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -1,17 +1,18 @@
 import React from 'react'
 import Link from 'gatsby-link'
-import LogoSaburly from "../images/logo-saburly-white.svg"
+import LogoSaburly from '../images/logo-saburly-white.svg'
 import Button from './Button'
 
-import "./Header.css"
+import './Header.css'
 
-let menuClasses = "no-underline mt-4 lg:inline-block opacity-50 lg:mt-0 text-white hover:opacity-100 uppercase mr-4"
+let menuClasses =
+  'no-underline mt-4 lg:inline-block opacity-50 lg:mt-0 text-white hover:opacity-100 uppercase mr-4'
 
 const Header = () => (
-  <header className="bg-saburly-blue">
+  <header className="bg-saburly-indigo">
     <nav className="container mx-auto flex justify-between lg:p-6 p-4">
       <Link to="/">
-        <img src={LogoSaburly} alt='Saburly Logo' className="max-w-xs" />
+        <img src={LogoSaburly} alt="Saburly Logo" className="max-w-xs" />
       </Link>
 
       <button className="menu_icon lg:invisible">
@@ -32,7 +33,12 @@ const Header = () => (
             <li className={menuClasses}>BLOG</li>
           </Link>
 
-          <Button text="Contact" standard classes="rounded-full text-white hover:shadow" url="/contact" />
+          <Button
+            text="Contact"
+            standard
+            classes="rounded-full text-white hover:shadow"
+            url="/contact"
+          />
         </ul>
       </div>
     </nav>
diff --git a/src/components/InfoBox.js b/src/components/InfoBox.js
index e3bf52a..b3eb894 100644
--- a/src/components/InfoBox.js
+++ b/src/components/InfoBox.js
@@ -1,10 +1,10 @@
 import React from 'react'
 import Link from 'gatsby-link'
 
-const InfoBox = ({ headline, text, classes }) => (
-  <div className={`${classes}`}>
-    <h3>{headline}</h3>
-    <p>{text}</p>
+const InfoBox = ({ ...props }) => (
+  <div className={`${props.classes}`}>
+    <h3>{props.headline}</h3>
+    <p>{props.text}</p>
   </div>
 )
 
diff --git a/src/components/SectionIntro.js b/src/components/SectionIntro.js
index eed72ca..a0e8f5d 100644
--- a/src/components/SectionIntro.js
+++ b/src/components/SectionIntro.js
@@ -1,11 +1,31 @@
 import React from 'react'
 import Link from 'gatsby-link'
 
-const IntroDefault = ({ intro, headline, text, classes }) => (
-  <div className={`${classes}`}>
-    <h3 className="text-white opacity-50 text-sm font-light uppercase pt-2 pb-2">{intro}</h3>
-    <h1 className="text-white font-light pt-2 pb-2">{headline}</h1>
-    <p className="font-light leading-normal text-white opacity-50">{text}</p>
+let headlineDark = 'text-white'
+let headlineLight = 'text-indigo'
+
+const IntroDefault = ({ ...props }) => (
+  <div className={`${props.classes}`}>
+    <h3
+      className={`
+      ${
+        props.light ? headlineDark : headlineLight
+      } opacity-50 text-sm font-light uppercase pt-2 pb-1`}
+    >
+      {props.intro}
+    </h3>
+    <h1
+      className={`${props.light ? headlineDark : ''}
+     font-light pt-1 pb-2`}
+    >
+      {props.headline}
+    </h1>
+    <p
+      className={`${props.light ? headlineDark : ''} 
+    font-light leading-normal opacity-75`}
+    >
+      {props.text}
+    </p>
   </div>
 )
 
diff --git a/src/layouts/index.js b/src/layouts/index.js
index 9692bbc..4ebf28e 100644
--- a/src/layouts/index.js
+++ b/src/layouts/index.js
@@ -4,8 +4,8 @@ import Helmet from 'react-helmet'
 
 import Header from '../components/Header'
 import Footer from '../components/Footer'
-import "../styles/index.css"
-import "../styles/custom.css"
+import '../styles/index.css'
+import '../styles/custom.css'
 
 const Layout = ({ children, data }) => (
   <div className="font-sans mx-auto">
@@ -13,13 +13,14 @@ const Layout = ({ children, data }) => (
       title={data.site.siteMetadata.title}
       meta={[
         { name: 'description', content: 'We code & design great software' },
-        { name: 'keywords', content: 'software, design, coding, programming, code, consulting' },
+        {
+          name: 'keywords',
+          content: 'software, design, coding, programming, code, consulting',
+        },
       ]}
     />
     <Header />
-    <main>
-      {children()}
-    </main>
+    {children()}
     <Footer />
   </div>
 )
diff --git a/src/pages/index.js b/src/pages/index.js
index f5409e3..faf8569 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -15,48 +15,111 @@ import LogoKinnarps from '../images/logo-kinnarps.svg'
 import LogoCoor from '../images/logo-coor.svg'
 
 const IndexPage = () => (
-  <div>
-    <section className="bg-saburly-blue relative">
+  <main>
+    <section className="bg-saburly-indigo relative">
       <div className="container mx-auto flex lg:flex-row flex-col flex-col-reverse lg:p-4">
         <div className="text-center lg:text-left lg:mt-4">
-          <SectionIntro intro="Welcome To Saburly" classes="lg:text-left content-center" headline="We build the right software for your needs" text="We are a team of creative, open minded, skilled and passionate engineers that ship success every day." />
-          <Button filled text="Let's Build Together" url="/proposal" classes="shadow-md hover:shadow-lg rounded-full mt-4 font-light btn-saburly-green mb-20" />
+          <SectionIntro
+            light
+            intro="Welcome To Saburly"
+            classes="lg:text-left content-center"
+            headline="We build the right software for your needs"
+            text="We are a team of creative, open minded, skilled and passionate engineers that ship success every day."
+          />
+          <Button
+            filled
+            text="Let's Build Together"
+            url="/proposal"
+            classes="shadow-md hover:shadow-lg rounded-full mt-4 font-light btn-saburly-green mb-20"
+          />
         </div>
-        <img src={ImgIntro} className="lg:-mt-4 z-10" alt="Software Development Agency" />
+        <img
+          src={ImgIntro}
+          className="lg:-mt-4 z-10"
+          alt="Software Development Agency"
+        />
+      </div>
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1400.8 96.4">
+        <title>bg-saburly-white</title>
+        <path
+          d="M417.7,96.4C655.2,93.3,743.6,0,983.1,0h417.7V96.4H417.7Z"
+          transform="translate(0 0)"
+          style={{ fill: '#fff' }}
+        />
+      </svg>
+    </section>
+
+    <section className="text-center mt-12 p-2">
+      <SectionIntro
+        classes="max-w-lg m-auto"
+        intro="Solutions"
+        headline="Because beautiful code makes our heart pound"
+        text="We have a passion for great software and design with the help of modern technologies. Custom end-to-end solutions is our speciality and our skilled team can even help you with initial analysis, architecture design, testing and deployments"
+      />
+    </section>
+
+    <section className="bg-saburly-indigolight">
+      <div className="lg:flex items-center">
+        <img src={ImgDesign} className="w-full" alt="UX & UI Design Agency" />
+        <InfoBox
+          headline="UX & UI Design"
+          text="Our approach is simple: focus on how people will actually use the products. We offer prototyping, UI and UX design for web and mobile products. We shape UX through research, data & content analysis."
+        />
+      </div>
+
+      <div className="lg:flex items-center">
+        <InfoBox
+          headline="Fullstack Web Development"
+          text="We build web applications using the technologies such as JavaScript, React, Ruby on Rails, Python, Node.js, and Elixir. We write high-quality code that is maintainable and will stand the test of time."
+        />
+        <img
+          src={ImgFullstack}
+          className="w-full"
+          alt="Fullstack Web Development Agency"
+        />
+      </div>
+
+      <div className="lg:flex items-center">
+        <img
+          src={ImgMobile}
+          className="w-full"
+          alt="Mobile App Development Agency"
+        />
+        <InfoBox
+          headline="Mobile Development"
+          text="We develop for both iOS and Android. For iOS we use Swift and Objective-C. Android applications are built in Java and Kotlin. We also enjoy working with React Native technology because it allows writing native apps for both platform at once."
+        />
+      </div>
+
+      <div className="lg:flex justify-center">
+        <Button
+          standard
+          text="More About What We Do"
+          url="/services"
+          classes="rounded-full"
+        />
+        <Button
+          standard
+          text="How We Work"
+          url="/work"
+          classes="rounded-full"
+        />
       </div>
-      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1400.8 96.4"><title>bg-saburly-white</title><path d="M417.7,96.4C655.2,93.3,743.6,0,983.1,0h417.7V96.4H417.7Z" transform="translate(0 0)" style={{ fill: '#fff' }}/></svg>
     </section>
 
     <section className="text-center p-3">
-      <SectionIntro intro="Solutions" headline="Because beautiful code makes our heart pound" text="We have a passion for great software and design with the help of modern technologies. Custom end-to-end solutions is our speciality and our skilled team can even help you with initial analysis, architecture design, testing and deployments" />
-    </section>
-
-    <div className="lg:flex items-center">
-      <img src={ImgDesign} className="w-full" alt="UX & UI Design Agency" />
-      <InfoBox headline="UX & UI Design" text="Our approach is simple: focus on how people will actually use the products. We offer prototyping, UI and UX design for web and mobile products. We shape UX through research, data & content analysis." />
-    </div>
-
-    <div className="lg:flex items-center">
-      <InfoBox headline="Fullstack Web Development" text="We build web applications using the technologies such as JavaScript, React, Ruby on Rails, Python, Node.js, and Elixir. We write high-quality code that is maintainable and will stand the test of time." />
-      <img src={ImgFullstack} className="w-full" alt="Fullstack Web Development Agency" />
-    </div>
-
-    <div className="lg:flex items-center">
-      <img src={ImgMobile} className="w-full" alt="Mobile App Development Agency" />
-      <InfoBox headline="Mobile Development" text="We develop for both iOS and Android. For iOS we use Swift and Objective-C. Android applications are built in Java and Kotlin. We also enjoy working with React Native technology because it allows writing native apps for both platform at once." />
-    </div>
-
-    <div className="lg:flex justify-center">
-      <Button standard text="More ABout What We Do" url="/services" classes="rounded-full" />
-      <Button standard text="How We Work" url="/work" classes="rounded-full" />
-    </div>
-
-    <section className="text-center p-3">
-      <SectionIntro intro="Showcase" headline="We don’t descriminate, all screens & devices are welcome" />
+      <SectionIntro
+        intro="Showcase"
+        headline="We don’t descriminate, all screens & devices are welcome"
+      />
     </section>
 
     <section className="text-center p-3">
-      <SectionIntro intro="Clients" headline="With ambitious projects comes great responsibility" text="We think big, design smart and develop fast for all projects and teams. Currently we’re serving everything from global leaders to startups and we tailor our processes based on your scale and needs. We have helped some of the worlds leading enterprises and businesses bring ideas to life and we’re really interested in hearing what we can help you with" />
+      <SectionIntro
+        intro="Clients"
+        headline="With ambitious projects comes great responsibility"
+        text="We think big, design smart and develop fast for all projects and teams. Currently we’re serving everything from global leaders to startups and we tailor our processes based on your scale and needs. We have helped some of the worlds leading enterprises and businesses bring ideas to life and we’re really interested in hearing what we can help you with"
+      />
       <div className="lg:flex items-center">
         <img src={LogoIBM} alt="IBM Logo" />
         <img src={LogoRicoh} alt="Ricoh Logo" />
@@ -64,11 +127,19 @@ const IndexPage = () => (
         <img src={LogoCoor} alt="Coor Logo" />
       </div>
 
-      <Button filled text="Let's Build Together" url="/proposal" classes="rounded-full" />
+      <Button
+        filled
+        text="Let's Build Together"
+        url="/proposal"
+        classes="rounded-full"
+      />
     </section>
 
     <section className="text-center p-3">
-      <SectionIntro intro="Blog & Social Media" headline="But occasionally we find the time to have fun and publish stuff" />
+      <SectionIntro
+        intro="Blog & Social Media"
+        headline="But occasionally we find the time to have fun and publish stuff"
+      />
       <div className="lg:flex">
         <Card />
         <Card />
@@ -76,7 +147,7 @@ const IndexPage = () => (
       </div>
       <Button filled text="More Posts" url="/blog" classes="rounded-full" />
     </section>
-  </div>
+  </main>
 )
 
 export default IndexPage
diff --git a/src/styles/custom.css b/src/styles/custom.css
index 7af0242..9ddbe9a 100644
--- a/src/styles/custom.css
+++ b/src/styles/custom.css
@@ -1,14 +1,26 @@
-.bg-saburly-blue {
-  background: rgb(69,76,183);
-  background: linear-gradient(90deg, rgba(69,76,183,1) 0%, rgba(157,163,255,1) 100%);
+.bg-saburly-indigo {
+  background: rgb(69, 76, 183);
+  background: linear-gradient(
+    90deg,
+    rgba(69, 76, 183, 1) 0%,
+    rgba(157, 163, 255, 1) 100%
+  );
 }
 
-.bg-saburly-blue svg {
+.bg-saburly-indigo svg {
   position: absolute;
   bottom: 0;
 }
 
+.bg-saburly-indigolight {
+  background-color: #edf3ff;
+}
+
 .btn-saburly-green {
-  background: rgb(0,255,252);
-  background: linear-gradient(150deg, rgba(0,255,252,1) 0%, rgba(0,177,186,1) 55%);
-}
\ No newline at end of file
+  background: rgb(0, 255, 252);
+  background: linear-gradient(
+    150deg,
+    rgba(0, 255, 252, 1) 0%,
+    rgba(0, 177, 186, 1) 55%
+  );
+}
diff --git a/src/styles/index.css b/src/styles/index.css
index 6f19972..360bca1 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -3490,6 +3490,14 @@ table {
   padding: 2rem;
 }
 
+.p-10 {
+  padding: 3rem;
+}
+
+.p-16 {
+  padding: 4rem;
+}
+
 .p-px {
   padding: 1px;
 }
@@ -3564,6 +3572,26 @@ table {
   padding-right: 2rem;
 }
 
+.py-10 {
+  padding-top: 3rem;
+  padding-bottom: 3rem;
+}
+
+.px-10 {
+  padding-left: 3rem;
+  padding-right: 3rem;
+}
+
+.py-16 {
+  padding-top: 4rem;
+  padding-bottom: 4rem;
+}
+
+.px-16 {
+  padding-left: 4rem;
+  padding-right: 4rem;
+}
+
 .py-px {
   padding-top: 1px;
   padding-bottom: 1px;
@@ -3686,6 +3714,38 @@ table {
   padding-left: 2rem;
 }
 
+.pt-10 {
+  padding-top: 3rem;
+}
+
+.pr-10 {
+  padding-right: 3rem;
+}
+
+.pb-10 {
+  padding-bottom: 3rem;
+}
+
+.pl-10 {
+  padding-left: 3rem;
+}
+
+.pt-16 {
+  padding-top: 4rem;
+}
+
+.pr-16 {
+  padding-right: 4rem;
+}
+
+.pb-16 {
+  padding-bottom: 4rem;
+}
+
+.pl-16 {
+  padding-left: 4rem;
+}
+
 .pt-px {
   padding-top: 1px;
 }
@@ -7630,6 +7690,14 @@ table {
     padding: 2rem;
   }
 
+  .sm\:p-10 {
+    padding: 3rem;
+  }
+
+  .sm\:p-16 {
+    padding: 4rem;
+  }
+
   .sm\:p-px {
     padding: 1px;
   }
@@ -7704,6 +7772,26 @@ table {
     padding-right: 2rem;
   }
 
+  .sm\:py-10 {
+    padding-top: 3rem;
+    padding-bottom: 3rem;
+  }
+
+  .sm\:px-10 {
+    padding-left: 3rem;
+    padding-right: 3rem;
+  }
+
+  .sm\:py-16 {
+    padding-top: 4rem;
+    padding-bottom: 4rem;
+  }
+
+  .sm\:px-16 {
+    padding-left: 4rem;
+    padding-right: 4rem;
+  }
+
   .sm\:py-px {
     padding-top: 1px;
     padding-bottom: 1px;
@@ -7826,6 +7914,38 @@ table {
     padding-left: 2rem;
   }
 
+  .sm\:pt-10 {
+    padding-top: 3rem;
+  }
+
+  .sm\:pr-10 {
+    padding-right: 3rem;
+  }
+
+  .sm\:pb-10 {
+    padding-bottom: 3rem;
+  }
+
+  .sm\:pl-10 {
+    padding-left: 3rem;
+  }
+
+  .sm\:pt-16 {
+    padding-top: 4rem;
+  }
+
+  .sm\:pr-16 {
+    padding-right: 4rem;
+  }
+
+  .sm\:pb-16 {
+    padding-bottom: 4rem;
+  }
+
+  .sm\:pl-16 {
+    padding-left: 4rem;
+  }
+
   .sm\:pt-px {
     padding-top: 1px;
   }
@@ -11763,6 +11883,14 @@ table {
     padding: 2rem;
   }
 
+  .md\:p-10 {
+    padding: 3rem;
+  }
+
+  .md\:p-16 {
+    padding: 4rem;
+  }
+
   .md\:p-px {
     padding: 1px;
   }
@@ -11837,6 +11965,26 @@ table {
     padding-right: 2rem;
   }
 
+  .md\:py-10 {
+    padding-top: 3rem;
+    padding-bottom: 3rem;
+  }
+
+  .md\:px-10 {
+    padding-left: 3rem;
+    padding-right: 3rem;
+  }
+
+  .md\:py-16 {
+    padding-top: 4rem;
+    padding-bottom: 4rem;
+  }
+
+  .md\:px-16 {
+    padding-left: 4rem;
+    padding-right: 4rem;
+  }
+
   .md\:py-px {
     padding-top: 1px;
     padding-bottom: 1px;
@@ -11959,6 +12107,38 @@ table {
     padding-left: 2rem;
   }
 
+  .md\:pt-10 {
+    padding-top: 3rem;
+  }
+
+  .md\:pr-10 {
+    padding-right: 3rem;
+  }
+
+  .md\:pb-10 {
+    padding-bottom: 3rem;
+  }
+
+  .md\:pl-10 {
+    padding-left: 3rem;
+  }
+
+  .md\:pt-16 {
+    padding-top: 4rem;
+  }
+
+  .md\:pr-16 {
+    padding-right: 4rem;
+  }
+
+  .md\:pb-16 {
+    padding-bottom: 4rem;
+  }
+
+  .md\:pl-16 {
+    padding-left: 4rem;
+  }
+
   .md\:pt-px {
     padding-top: 1px;
   }
@@ -15896,6 +16076,14 @@ table {
     padding: 2rem;
   }
 
+  .lg\:p-10 {
+    padding: 3rem;
+  }
+
+  .lg\:p-16 {
+    padding: 4rem;
+  }
+
   .lg\:p-px {
     padding: 1px;
   }
@@ -15970,6 +16158,26 @@ table {
     padding-right: 2rem;
   }
 
+  .lg\:py-10 {
+    padding-top: 3rem;
+    padding-bottom: 3rem;
+  }
+
+  .lg\:px-10 {
+    padding-left: 3rem;
+    padding-right: 3rem;
+  }
+
+  .lg\:py-16 {
+    padding-top: 4rem;
+    padding-bottom: 4rem;
+  }
+
+  .lg\:px-16 {
+    padding-left: 4rem;
+    padding-right: 4rem;
+  }
+
   .lg\:py-px {
     padding-top: 1px;
     padding-bottom: 1px;
@@ -16092,6 +16300,38 @@ table {
     padding-left: 2rem;
   }
 
+  .lg\:pt-10 {
+    padding-top: 3rem;
+  }
+
+  .lg\:pr-10 {
+    padding-right: 3rem;
+  }
+
+  .lg\:pb-10 {
+    padding-bottom: 3rem;
+  }
+
+  .lg\:pl-10 {
+    padding-left: 3rem;
+  }
+
+  .lg\:pt-16 {
+    padding-top: 4rem;
+  }
+
+  .lg\:pr-16 {
+    padding-right: 4rem;
+  }
+
+  .lg\:pb-16 {
+    padding-bottom: 4rem;
+  }
+
+  .lg\:pl-16 {
+    padding-left: 4rem;
+  }
+
   .lg\:pt-px {
     padding-top: 1px;
   }
@@ -20029,6 +20269,14 @@ table {
     padding: 2rem;
   }
 
+  .xl\:p-10 {
+    padding: 3rem;
+  }
+
+  .xl\:p-16 {
+    padding: 4rem;
+  }
+
   .xl\:p-px {
     padding: 1px;
   }
@@ -20103,6 +20351,26 @@ table {
     padding-right: 2rem;
   }
 
+  .xl\:py-10 {
+    padding-top: 3rem;
+    padding-bottom: 3rem;
+  }
+
+  .xl\:px-10 {
+    padding-left: 3rem;
+    padding-right: 3rem;
+  }
+
+  .xl\:py-16 {
+    padding-top: 4rem;
+    padding-bottom: 4rem;
+  }
+
+  .xl\:px-16 {
+    padding-left: 4rem;
+    padding-right: 4rem;
+  }
+
   .xl\:py-px {
     padding-top: 1px;
     padding-bottom: 1px;
@@ -20225,6 +20493,38 @@ table {
     padding-left: 2rem;
   }
 
+  .xl\:pt-10 {
+    padding-top: 3rem;
+  }
+
+  .xl\:pr-10 {
+    padding-right: 3rem;
+  }
+
+  .xl\:pb-10 {
+    padding-bottom: 3rem;
+  }
+
+  .xl\:pl-10 {
+    padding-left: 3rem;
+  }
+
+  .xl\:pt-16 {
+    padding-top: 4rem;
+  }
+
+  .xl\:pr-16 {
+    padding-right: 4rem;
+  }
+
+  .xl\:pb-16 {
+    padding-bottom: 4rem;
+  }
+
+  .xl\:pl-16 {
+    padding-left: 4rem;
+  }
+
   .xl\:pt-px {
     padding-top: 1px;
   }
diff --git a/tailwind.config.js b/tailwind.config.js
index 8555dd6..7a9778e 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -26,7 +26,6 @@ View the full documentation at https://tailwindcss.com.
 
 // let defaultConfig = require('tailwindcss/defaultConfig')()
 
-
 /*
 |-------------------------------------------------------------------------------
 | Colors                                    https://tailwindcss.com/docs/colors
@@ -44,22 +43,22 @@ View the full documentation at https://tailwindcss.com.
 */
 
 let colors = {
-  'transparent': 'transparent',
+  transparent: 'transparent',
 
-  'black': '#212121',
+  black: '#212121',
   'grey-darkest': '#3d4852',
   'grey-darker': '#606f7b',
   'grey-dark': '#8795a1',
-  'grey': '#b8c2cc',
+  grey: '#b8c2cc',
   'grey-light': '#dae1e7',
   'grey-lighter': '#f1f5f8',
   'grey-lightest': '#f8fafc',
-  'white': '#ffffff',
+  white: '#ffffff',
 
   'red-darkest': '#3b0d0c',
   'red-darker': '#621b18',
   'red-dark': '#cc1f1a',
-  'red': '#e3342f',
+  red: '#e3342f',
   'red-light': '#ef5753',
   'red-lighter': '#f9acaa',
   'red-lightest': '#fcebea',
@@ -67,7 +66,7 @@ let colors = {
   'orange-darkest': '#462a16',
   'orange-darker': '#613b1f',
   'orange-dark': '#de751f',
-  'orange': '#f6993f',
+  orange: '#f6993f',
   'orange-light': '#faad63',
   'orange-lighter': '#fcd9b6',
   'orange-lightest': '#fff5eb',
@@ -75,7 +74,7 @@ let colors = {
   'yellow-darkest': '#453411',
   'yellow-darker': '#684f1d',
   'yellow-dark': '#f2d024',
-  'yellow': '#ffed4a',
+  yellow: '#ffed4a',
   'yellow-light': '#fff382',
   'yellow-lighter': '#fff9c2',
   'yellow-lightest': '#fcfbeb',
@@ -83,7 +82,7 @@ let colors = {
   'green-darkest': '#0f2f21',
   'green-darker': '#1a4731',
   'green-dark': '#1f9d55',
-  'green': '#38c172',
+  green: '#38c172',
   'green-light': '#51d88a',
   'green-lighter': '#a2f5bf',
   'green-lightest': '#e3fcec',
@@ -91,7 +90,7 @@ let colors = {
   'teal-darkest': '#0d3331',
   'teal-darker': '#20504f',
   'teal-dark': '#38a89d',
-  'teal': '#4dc0b5',
+  teal: '#4dc0b5',
   'teal-light': '#64d5ca',
   'teal-lighter': '#a0f0ed',
   'teal-lightest': '#e8fffe',
@@ -99,7 +98,7 @@ let colors = {
   'blue-darkest': '#12283a',
   'blue-darker': '#1c3d5a',
   'blue-dark': '#2779bd',
-  'blue': '#3490dc',
+  blue: '#3490dc',
   'blue-light': '#6cb2eb',
   'blue-lighter': '#bcdefa',
   'blue-lightest': '#eff8ff',
@@ -107,7 +106,7 @@ let colors = {
   'indigo-darkest': '#191e38',
   'indigo-darker': '#2f365f',
   'indigo-dark': '#5661b3',
-  'indigo': '#6574cd',
+  indigo: '#6574cd',
   'indigo-light': '#7886d7',
   'indigo-lighter': '#b2b7ff',
   'indigo-lightest': '#e6e8ff',
@@ -115,7 +114,7 @@ let colors = {
   'purple-darkest': '#21183c',
   'purple-darker': '#382b5f',
   'purple-dark': '#794acf',
-  'purple': '#9561e2',
+  purple: '#9561e2',
   'purple-light': '#a779e9',
   'purple-lighter': '#d6bbfc',
   'purple-lightest': '#f3ebff',
@@ -123,14 +122,13 @@ let colors = {
   'pink-darkest': '#451225',
   'pink-darker': '#6f213f',
   'pink-dark': '#eb5286',
-  'pink': '#f66d9b',
+  pink: '#f66d9b',
   'pink-light': '#fa7ea8',
   'pink-lighter': '#ffbbca',
   'pink-lightest': '#ffebef',
 }
 
 module.exports = {
-
   /*
   |-----------------------------------------------------------------------------
   | Colors                                  https://tailwindcss.com/docs/colors
@@ -146,7 +144,6 @@ module.exports = {
 
   colors: colors,
 
-
   /*
   |-----------------------------------------------------------------------------
   | Screens                      https://tailwindcss.com/docs/responsive-design
@@ -167,13 +164,12 @@ module.exports = {
   */
 
   screens: {
-    'sm': '576px',
-    'md': '768px',
-    'lg': '992px',
-    'xl': '1200px',
+    sm: '576px',
+    md: '768px',
+    lg: '992px',
+    xl: '1200px',
   },
 
-
   /*
   |-----------------------------------------------------------------------------
   | Fonts                                    https://tailwindcss.com/docs/fonts
@@ -193,7 +189,7 @@ module.exports = {
   */
 
   fonts: {
-    'sans': [
+    sans: [
       'system-ui',
       'BlinkMacSystemFont',
       '-apple-system',
@@ -207,7 +203,7 @@ module.exports = {
       'Helvetica Neue',
       'sans-serif',
     ],
-    'serif': [
+    serif: [
       'Constantia',
       'Lucida Bright',
       'Lucidabright',
@@ -219,7 +215,7 @@ module.exports = {
       'Georgia',
       'serif',
     ],
-    'mono': [
+    mono: [
       'Menlo',
       'Monaco',
       'Consolas',
@@ -227,10 +223,9 @@ module.exports = {
       'Courier New',
       'monospace',
     ],
-    'body': ['Open Sans']
+    body: ['Open Sans'],
   },
 
-
   /*
   |-----------------------------------------------------------------------------
   | Text sizes                         https://tailwindcss.com/docs/text-sizing
@@ -251,18 +246,17 @@ module.exports = {
   */
 
   textSizes: {
-    'xs': '.75rem',     // 12px
-    'sm': '.875rem',    // 14px
-    'base': '1rem',     // 16px
-    'lg': '1.125rem',   // 18px
-    'xl': '1.25rem',    // 20px
-    '2xl': '1.5rem',    // 24px
-    '3xl': '1.875rem',  // 30px
-    '4xl': '2.25rem',   // 36px
-    '5xl': '3rem',      // 48px
+    xs: '.75rem', // 12px
+    sm: '.875rem', // 14px
+    base: '1rem', // 16px
+    lg: '1.125rem', // 18px
+    xl: '1.25rem', // 20px
+    '2xl': '1.5rem', // 24px
+    '3xl': '1.875rem', // 30px
+    '4xl': '2.25rem', // 36px
+    '5xl': '3rem', // 48px
   },
 
-
   /*
   |-----------------------------------------------------------------------------
   | Font weights                       https://tailwindcss.com/docs/font-weight
@@ -278,18 +272,17 @@ module.exports = {
   */
 
   fontWeights: {
-    'hairline': 100,
-    'thin': 200,
-    'light': 300,
-    'normal': 400,
-    'medium': 500,
-    'semibold': 600,
-    'bold': 700,
-    'extrabold': 800,
-    'black': 900,
+    hairline: 100,
+    thin: 200,
+    light: 300,
+    normal: 400,
+    medium: 500,
+    semibold: 600,
+    bold: 700,
+    extrabold: 800,
+    black: 900,
   },
 
-
   /*
   |-----------------------------------------------------------------------------
   | Leading (line height)              https://tailwindcss.com/docs/line-height
@@ -303,13 +296,12 @@ module.exports = {
   */
 
   leading: {
-    'none': 1,
-    'tight': 1.25,
-    'normal': 1.5,
-    'loose': 2,
+    none: 1,
+    tight: 1.25,
+    normal: 1.5,
+    loose: 2,
   },
 
-
   /*
   |-----------------------------------------------------------------------------
   | Tracking (letter spacing)       https://tailwindcss.com/docs/letter-spacing
@@ -323,12 +315,11 @@ module.exports = {
   */
 
   tracking: {
-    'tight': '-0.05em',
-    'normal': '0',
-    'wide': '0.05em',
+    tight: '-0.05em',
+    normal: '0',
+    wide: '0.05em',
   },
 
-
   /*
   |-----------------------------------------------------------------------------
   | Text colors                         https://tailwindcss.com/docs/text-color
@@ -344,7 +335,6 @@ module.exports = {
 
   textColors: colors,
 
-
   /*
   |-----------------------------------------------------------------------------
   | Background colors             https://tailwindcss.com/docs/background-color
@@ -360,7 +350,6 @@ module.exports = {
 
   backgroundColors: colors,
 
-
   /*
   |-----------------------------------------------------------------------------
   | Background sizes               https://tailwindcss.com/docs/background-size
@@ -375,12 +364,11 @@ module.exports = {
   */
 
   backgroundSize: {
-    'auto': 'auto',
-    'cover': 'cover',
-    'contain': 'contain',
+    auto: 'auto',
+    cover: 'cover',
+    contain: 'contain',
   },
 
-
   /*
   |-----------------------------------------------------------------------------
   | Border widths                     https://tailwindcss.com/docs/border-width
@@ -402,7 +390,6 @@ module.exports = {
     '8': '8px',
   },
 
-
   /*
   |-----------------------------------------------------------------------------
   | Border colors                     https://tailwindcss.com/docs/border-color
@@ -422,7 +409,6 @@ module.exports = {
 
   borderColors: global.Object.assign({ default: colors['grey-light'] }, colors),
 
-
   /*
   |-----------------------------------------------------------------------------
   | Border radius                    https://tailwindcss.com/docs/border-radius
@@ -440,14 +426,13 @@ module.exports = {
   */
 
   borderRadius: {
-    'none': '0',
-    'sm': '.125rem',
+    none: '0',
+    sm: '.125rem',
     default: '.25rem',
-    'lg': '.5rem',
-    'full': '9999px',
+    lg: '.5rem',
+    full: '9999px',
   },
 
-
   /*
   |-----------------------------------------------------------------------------
   | Width                                    https://tailwindcss.com/docs/width
@@ -469,8 +454,8 @@ module.exports = {
   */
 
   width: {
-    'auto': 'auto',
-    'px': '1px',
+    auto: 'auto',
+    px: '1px',
     '1': '0.25rem',
     '2': '0.5rem',
     '3': '0.75rem',
@@ -495,11 +480,10 @@ module.exports = {
     '4/5': '80%',
     '1/6': '16.66667%',
     '5/6': '83.33333%',
-    'full': '100%',
-    'screen': '100vw'
+    full: '100%',
+    screen: '100vw',
   },
 
-
   /*
   |-----------------------------------------------------------------------------
   | Height                                  https://tailwindcss.com/docs/height
@@ -516,8 +500,8 @@ module.exports = {
   */
 
   height: {
-    'auto': 'auto',
-    'px': '1px',
+    auto: 'auto',
+    px: '1px',
     '1': '0.25rem',
     '2': '0.5rem',
     '3': '0.75rem',
@@ -531,11 +515,10 @@ module.exports = {
     '32': '8rem',
     '48': '12rem',
     '64': '16rem',
-    'full': '100%',
-    'screen': '100vh'
+    full: '100%',
+    screen: '100vh',
   },
 
-
   /*
   |-----------------------------------------------------------------------------
   | Minimum width                        https://tailwindcss.com/docs/min-width
@@ -552,10 +535,9 @@ module.exports = {
 
   minWidth: {
     '0': '0',
-    'full': '100%',
+    full: '100%',
   },
 
-
   /*
   |-----------------------------------------------------------------------------
   | Minimum height                      https://tailwindcss.com/docs/min-height
@@ -572,11 +554,10 @@ module.exports = {
 
   minHeight: {
     '0': '0',
-    'full': '100%',
-    'screen': '100vh'
+    full: '100%',
+    screen: '100vh',
   },
 
-
   /*
   |-----------------------------------------------------------------------------
   | Maximum width                        https://tailwindcss.com/docs/max-width
@@ -593,19 +574,18 @@ module.exports = {
   */
 
   maxWidth: {
-    'xs': '20rem',
-    'sm': '30rem',
-    'md': '40rem',
-    'lg': '50rem',
-    'xl': '60rem',
+    xs: '20rem',
+    sm: '30rem',
+    md: '40rem',
+    lg: '50rem',
+    xl: '60rem',
     '2xl': '70rem',
     '3xl': '80rem',
     '4xl': '90rem',
     '5xl': '100rem',
-    'full': '100%',
+    full: '100%',
   },
 
-
   /*
   |-----------------------------------------------------------------------------
   | Maximum height                      https://tailwindcss.com/docs/max-height
@@ -621,11 +601,10 @@ module.exports = {
   */
 
   maxHeight: {
-    'full': '100%',
-    'screen': '100vh',
+    full: '100%',
+    screen: '100vh',
   },
 
-
   /*
   |-----------------------------------------------------------------------------
   | Padding                                https://tailwindcss.com/docs/padding
@@ -642,7 +621,7 @@ module.exports = {
   */
 
   padding: {
-    'px': '1px',
+    px: '1px',
     '0': '0',
     '1': '0.25rem',
     '2': '0.5rem',
@@ -650,9 +629,10 @@ module.exports = {
     '4': '1rem',
     '6': '1.5rem',
     '8': '2rem',
+    '10': '3rem',
+    '16': '4rem',
   },
 
-
   /*
   |-----------------------------------------------------------------------------
   | Margin                                  https://tailwindcss.com/docs/margin
@@ -669,8 +649,8 @@ module.exports = {
   */
 
   margin: {
-    'auto': 'auto',
-    'px': '1px',
+    auto: 'auto',
+    px: '1px',
     '0': '0',
     '1': '0.25rem',
     '2': '0.5rem',
@@ -686,7 +666,6 @@ module.exports = {
     '32': '8rem',
   },
 
-
   /*
   |-----------------------------------------------------------------------------
   | Negative margin                https://tailwindcss.com/docs/negative-margin
@@ -703,7 +682,7 @@ module.exports = {
   */
 
   negativeMargin: {
-    'px': '1px',
+    px: '1px',
     '0': '0',
     '1': '0.25rem',
     '2': '0.5rem',
@@ -713,7 +692,6 @@ module.exports = {
     '8': '2rem',
   },
 
-
   /*
   |-----------------------------------------------------------------------------
   | Shadows                                https://tailwindcss.com/docs/shadows
@@ -732,13 +710,12 @@ module.exports = {
 
   shadows: {
     default: '0 2px 4px 0 rgba(0,0,0,0.10)',
-    'md': '0 4px 8px 0 rgba(0,0,0,0.12), 0 2px 4px 0 rgba(0,0,0,0.08)',
-    'lg': '0 15px 30px 0 rgba(0,0,0,0.11), 0 5px 15px 0 rgba(0,0,0,0.08)',
-    'inner': 'inset 0 2px 4px 0 rgba(0,0,0,0.06)',
-    'none': 'none',
+    md: '0 4px 8px 0 rgba(0,0,0,0.12), 0 2px 4px 0 rgba(0,0,0,0.08)',
+    lg: '0 15px 30px 0 rgba(0,0,0,0.11), 0 5px 15px 0 rgba(0,0,0,0.08)',
+    inner: 'inset 0 2px 4px 0 rgba(0,0,0,0.06)',
+    none: 'none',
   },
 
-
   /*
   |-----------------------------------------------------------------------------
   | Z-index                                https://tailwindcss.com/docs/z-index
@@ -753,7 +730,7 @@ module.exports = {
   */
 
   zIndex: {
-    'auto': 'auto',
+    auto: 'auto',
     '0': 0,
     '10': 10,
     '20': 20,
@@ -762,7 +739,6 @@ module.exports = {
     '50': 50,
   },
 
-
   /*
   |-----------------------------------------------------------------------------
   | Opacity                                https://tailwindcss.com/docs/opacity
@@ -784,7 +760,6 @@ module.exports = {
     '100': '1',
   },
 
-
   /*
   |-----------------------------------------------------------------------------
   | SVG fill                                   https://tailwindcss.com/docs/svg
@@ -800,10 +775,9 @@ module.exports = {
   */
 
   svgFill: {
-    'current': 'currentColor',
+    current: 'currentColor',
   },
 
-
   /*
   |-----------------------------------------------------------------------------
   | SVG stroke                                 https://tailwindcss.com/docs/svg
@@ -819,10 +793,9 @@ module.exports = {
   */
 
   svgStroke: {
-    'current': 'currentColor',
+    current: 'currentColor',
   },
 
-
   /*
   |-----------------------------------------------------------------------------
   | Modules                  https://tailwindcss.com/docs/configuration#modules
@@ -890,7 +863,6 @@ module.exports = {
     zIndex: ['responsive'],
   },
 
-
   /*
   |-----------------------------------------------------------------------------
   | Plugins                                https://tailwindcss.com/docs/plugins
@@ -912,7 +884,6 @@ module.exports = {
     }),
   ],
 
-
   /*
   |-----------------------------------------------------------------------------
   | Advanced Options         https://tailwindcss.com/docs/configuration#options
@@ -928,5 +899,4 @@ module.exports = {
     important: false,
     separator: ':',
   },
-
 }