senaduka/old-v2-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Stylistic changes for responsiveness

Browse Source
This commit is contained in:
Moris Zen
2018-06-28 14:46:31 +02:00
parent 087408e1c9
commit ab1716bcc1
3 changed files with 9 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/Header.js
View File

@@ -4,14 +4,14 @@ import SaburlyLogo from "../images/Saburly-Logo.svg"
const Header = () => ( const Header = () => (
<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"> <div class="flex items-center flex-no-shrink text-white mr-6">
<Link to="/"> <Link to="/">
<img src={SaburlyLogo} alt='Saburly Logo' style={{ maxWidth: '300px' }} /> <img src={SaburlyLogo} alt='Saburly Logo' style={{ maxWidth: '300px' }} />
</Link> </Link>
</div> </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"> <ul className="flex text-sm justify-center lg:flex-grow">
<Link to="/services"> <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 <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> </li>
</Link> </Link>
</ul> </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="/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> <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>

6
src/components/MainIntro.js
View File

@@ -4,14 +4,14 @@ import Link from 'gatsby-link'
import ImgBuildSite from '../images/programming-company.svg' import ImgBuildSite from '../images/programming-company.svg'
const MainIntro = () => ( const MainIntro = () => (
<section className="flex"> <section className="lg:flex items-center">
<div> <div className="max-w-sm">
<h3>Welcome To Saburly</h3> <h3>Welcome To Saburly</h3>
<h1>We build the right software for your needs</h1> <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> <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> <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> </div>
<img src={ImgBuildSite} /> <img src={ImgBuildSite} className="p-3 overflow-hidden" />
</section> </section>
) )

5
src/components/header.js
View File

@@ -4,14 +4,14 @@ import SaburlyLogo from "../images/Saburly-Logo.svg"
const Header = () => ( const Header = () => (
<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"> <div class="flex items-center flex-no-shrink text-white mr-6">
<Link to="/"> <Link to="/">
<img src={SaburlyLogo} alt='Saburly Logo' style={{ maxWidth: '300px' }} /> <img src={SaburlyLogo} alt='Saburly Logo' style={{ maxWidth: '300px' }} />
</Link> </Link>
</div> </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"> <ul className="flex text-sm justify-center lg:flex-grow">
<Link to="/services"> <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 <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> </li>
</Link> </Link>
</ul> </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="/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> <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>