From ab1716bcc1837e0832565ce5c7f3e160472fabae Mon Sep 17 00:00:00 2001
From: Moris Zen <moris.pasic@gmail.com>
Date: Thu, 28 Jun 2018 14:46:31 +0200
Subject: [PATCH] Stylistic changes for responsiveness

---
 src/components/Header.js    | 5 +++--
 src/components/MainIntro.js | 6 +++---
 src/components/header.js    | 5 +++--
 3 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/src/components/Header.js b/src/components/Header.js
index 3723314..a79cff8 100644
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -4,14 +4,14 @@ import SaburlyLogo from "../images/Saburly-Logo.svg"
 
 const Header = () => (
   <header>
-    <nav className="flex items-center justify-between flex-wrap p-6">
+    <nav className="flex items-center justify-between flex-wrap lg:p-6">
       <div class="flex items-center flex-no-shrink text-white mr-6">
         <Link to="/">
           <img src={SaburlyLogo} alt='Saburly Logo' style={{ maxWidth: '300px' }} />
         </Link>
       </div>
 
-      <div className="sm:invisible lg:visible w-full block flex-grow lg:flex lg:items-center lg:w-auto">
+      <div className="hidden lg:visible w-full block flex-grow lg:flex lg:items-center lg:w-auto">
         <ul className="flex text-sm justify-center lg:flex-grow">
           <Link to="/services">
             <li className="no-underline block mt-4 lg:inline-block lg:mt-0 text-grey-darkest hover:text-teal uppercase mr-4">What We Do
@@ -26,6 +26,7 @@ const Header = () => (
         </li>
           </Link>
         </ul>
+
         <Link to="/contact" className="no-underline inline-block text-sm px-4 py-2 leading-none border rounded text-grey-darkest border-teal-darkest hover:border-teal hover:text-white hover:bg-teal mt-4 lg:mt-0 uppercase mr-3 rounded-full">Contact</Link>
 
         <Link to="/proposal" className="no-underline inline-block text-sm px-4 py-2 leading-none border rounded text-grey-lightest border-grey-darkest hover:border-transparent hover:text-white hover:bg-white mt-4 lg:mt-0 uppercase bg-grey-darkest hover:bg-teal rounded-full ">Get a free proposal</Link>
diff --git a/src/components/MainIntro.js b/src/components/MainIntro.js
index 196873d..48a227f 100644
--- a/src/components/MainIntro.js
+++ b/src/components/MainIntro.js
@@ -4,14 +4,14 @@ import Link from 'gatsby-link'
 import ImgBuildSite from '../images/programming-company.svg'
 
 const MainIntro = () => (
-  <section className="flex">
-    <div>
+  <section className="lg:flex items-center">
+    <div className="max-w-sm">
       <h3>Welcome To Saburly</h3>
       <h1>We build the right software for your needs</h1>
       <p>We are a team of creative, open minded, skilled and passionate engineers that ship success every day.</p>
       <Link to="/proposal" className="no-underline inline-block text-sm px-4 py-2 leading-none border rounded text-grey-lightest border-grey-darkest hover:border-transparent hover:text-white hover:bg-white mt-4 lg:mt-0 uppercase bg-grey-darkest hover:bg-teal rounded-full ">Let's Get In Touch</Link>
     </div>
-    <img src={ImgBuildSite} />
+    <img src={ImgBuildSite} className="p-3 overflow-hidden" />
   </section>
 )
 
diff --git a/src/components/header.js b/src/components/header.js
index 3723314..a79cff8 100644
--- a/src/components/header.js
+++ b/src/components/header.js
@@ -4,14 +4,14 @@ import SaburlyLogo from "../images/Saburly-Logo.svg"
 
 const Header = () => (
   <header>
-    <nav className="flex items-center justify-between flex-wrap p-6">
+    <nav className="flex items-center justify-between flex-wrap lg:p-6">
       <div class="flex items-center flex-no-shrink text-white mr-6">
         <Link to="/">
           <img src={SaburlyLogo} alt='Saburly Logo' style={{ maxWidth: '300px' }} />
         </Link>
       </div>
 
-      <div className="sm:invisible lg:visible w-full block flex-grow lg:flex lg:items-center lg:w-auto">
+      <div className="hidden lg:visible w-full block flex-grow lg:flex lg:items-center lg:w-auto">
         <ul className="flex text-sm justify-center lg:flex-grow">
           <Link to="/services">
             <li className="no-underline block mt-4 lg:inline-block lg:mt-0 text-grey-darkest hover:text-teal uppercase mr-4">What We Do
@@ -26,6 +26,7 @@ const Header = () => (
         </li>
           </Link>
         </ul>
+
         <Link to="/contact" className="no-underline inline-block text-sm px-4 py-2 leading-none border rounded text-grey-darkest border-teal-darkest hover:border-teal hover:text-white hover:bg-teal mt-4 lg:mt-0 uppercase mr-3 rounded-full">Contact</Link>
 
         <Link to="/proposal" className="no-underline inline-block text-sm px-4 py-2 leading-none border rounded text-grey-lightest border-grey-darkest hover:border-transparent hover:text-white hover:bg-white mt-4 lg:mt-0 uppercase bg-grey-darkest hover:bg-teal rounded-full ">Get a free proposal</Link>