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

Design tweaks and color changes

Browse Source
This commit is contained in:
Moris Zen
2018-08-29 14:52:49 +02:00
parent 9e16924bfb
commit 90c05a76c2
6 changed files with 28 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
src/components/Footer.js
View File

@@ -2,7 +2,7 @@ import React from 'react'
import Link from 'gatsby-link'
import Button from './Button'
import LogoSaburly from '../images/Saburly-logo.svg'
import LogoSaburly from '../images/saburly-logo-white.svg'
import Facebook from '../images/facebook.svg'
import Instagram from '../images/instagram.svg'
@@ -14,10 +14,10 @@ let menuClasses =
const Footer = () => (
<footer className="saburly-main-bg">
<div className="text-center py-4 lg:px-4">
<div className="text-center py-4 lg:px-4 saburly-overlay-shadow">
<Link className="no-underline text-white" to="/contact">
<div
className="p-2 items-center text-indigo-lightest leading-none lg:rounded-full flex lg:inline-flex"
className="p-2 items-center text-white leading-none lg:rounded-full flex lg:inline-flex"
role="alert"
>
<span className="flex rounded-full bg-indigo uppercase px-2 py-1 text-xs font-bold mr-3">
@@ -36,7 +36,7 @@ const Footer = () => (
</div>
</Link>
</div>
<div className="container mx-auto lg:flex">
<div className="container mx-auto my-4 lg:flex">
<div className="lg:w-1/4 p-4">
<img
src={LogoSaburly}
@@ -81,26 +81,12 @@ const Footer = () => (
</a>
</div>
</div>
<div>
<a
className="text-center lg:text-left opacity-70 hover:opacity-100 py-4 lg:py-1 text-xl lg:text-sm no-underline text-white block"
href="mailto:info@saburly.com"
>
E-mail: info@saburly.com
</a>
<a
className="text-center text-xl lg:text-sm lg:text-left opacity-70 hover:opacity-100 no-underline text-white block"
href="tel:+46760477717"
>
Phone: +46760477717
</a>
</div>
</div>
<div className="lg:w-3/4">
<div className="p-4 text-center lg:text-left sm:flex justify-around">
<nav>
<p className="font-thin text-white opacity-50">Sitemap</p>
<p className="font-thin text-white opacity-80">Sitemap</p>
<ul className="list-reset text-sm inline-block">
<Link className="block my-2 hover:opacity-70" to="/">
<li className={menuClasses}>Home</li>
@@ -117,14 +103,14 @@ const Footer = () => (
</ul>
</nav>
<div>
<p className="font-thin text-white opacity-50">Office - Sweden</p>
<p className="text-white my-2 opacity-80 leading-normal">
<p className="font-thin text-white opacity-80">Office - Sweden</p>
<p className="text-white my-2 leading-normal">
Saburly AB<br />Vretenvägen 13<br />171 54 Solna<br />Sweden
</p>
</div>
<div>
<p className="font-thin text-white opacity-50">Office - Bosnia</p>
<p className="text-white my-2 opacity-80 leading-normal">
<p className="font-thin text-white opacity-80">Office - Bosnia</p>
<p className="text-white my-2 leading-normal">
Saburly d.o.o<br />Hakije Turajlica 2<br />71 000 Sarajevo<br />Bosnia
& Herzegovina
</p>

2
src/components/Header.js
View File

@@ -13,7 +13,7 @@ class Header extends Component {
render() {
return (
<header className="saburly-main-bg saburly-bottom-shadow">
<nav className="container border-saburly-header mx-auto flex items-center justify-between lg:p-6 p-4">
<nav className="container mx-auto flex items-center justify-between lg:p-6 p-4">
<Link to="/">
<div className="max-w-xs mr-8">
<img

10
src/components/SideMenu.js
View File

@@ -51,7 +51,7 @@ class SideMenu extends Component {
X
</button>
<Link to="/" className="side-close menu-home no-underline">
<li className="hover:bg-indigo hover:opacity-100 text-right no-underline text-2xl uppercase p-4 text-white">
<li className="hover:bg-white hover:text-black text-right no-underline text-2xl uppercase p-4 text-white">
Home
</li>
</Link>
@@ -59,22 +59,22 @@ class SideMenu extends Component {
to="/services"
className="side-close menu-services no-underline"
>
<li className="hover:bg-indigo hover:opacity-100 text-right no-underline text-2xl uppercase p-4 text-white">
<li className="hover:bg-white hover:text-black text-right no-underline text-2xl uppercase p-4 text-white">
Services
</li>
</Link>
<Link to="/about" className="side-close menu-about no-underline">
<li className="hover:bg-indigo hover:opacity-100 text-right no-underline text-2xl uppercase p-4 text-white">
<li className="hover:bg-white hover:text-black text-right no-underline text-2xl uppercase p-4 text-white">
About Us
</li>
</Link>
<Link to="/blog" className="side-close menu-blog no-underline">
<li className="hover:bg-indigo hover:opacity-100 text-right no-underline text-2xl uppercase p-4 text-white">
<li className="hover:bg-white hover:text-black text-right no-underline text-2xl uppercase p-4 text-white">
Blog
</li>
</Link>
<Link to="/contact" className="side-close menu-contact no-underline">
<li className="hover:bg-indigo hover:opacity-100 text-right no-underline text-2xl uppercase p-4 text-white">
<li className="hover:bg-white hover:text-black text-right no-underline text-2xl uppercase p-4 text-white">
Contact
</li>
</Link>

2
src/pages/index.js
View File

@@ -25,7 +25,7 @@ const IndexPage = ({ ...props }) => (
<PageIntro
text="We're a team of experienced, creative and passionate engineers and designers. Our mission is to make you stand out and gain competitive advantages with the help of modern technologies."
image={ImgIntro}
imgClasses="-mb-20 lg:-mt-12"
imgClasses="-mb-20"
>
<h2 className="text-black pt-1 pb-2">
We{' '}

2
src/pages/services.js
View File

@@ -19,7 +19,7 @@ const ServicesPage = () => (
headline="Agile Practitioners"
text="At Saburly we embrace Agile’s methodologies for every project and business environment, no matter the size, scale, or complexity. Our flexible processes ensure high productivity and we know how to balance between cost, time and quality."
image={IntroImage}
imgClasses="-mb-12 lg:-mt-8 border-white border-8 rounded"
imgClasses="-mb-12 border-white border-8 rounded"
/>
<section className="px-4 py-16">
<div className="container mx-auto">

14
src/styles/general.css
View File

@@ -16,7 +16,7 @@ body {
}
.bg-saburly-light {
background: #f8f8f8;
background: rgba(87, 99, 171, 0.05);
}
.bg-saburly-light-header {
@@ -47,7 +47,7 @@ body {
background: linear-gradient(
180deg,
RGBA(116, 68, 207, 1) 0%,
RGBA(57, 57, 144, 1) 100%
RGBA(87, 99, 171, 1) 100%
);
}
@@ -94,7 +94,7 @@ body {
max-height: 3rem;
}
.saburly-bottom-shadow {
.border-bottom-saburly {
box-shadow: 0 6px 14px 0 rgba(51, 6, 13, 0.04),
0 2px 3px 0 rgba(51, 6, 13, 0.12);
}
@@ -114,3 +114,11 @@ body {
.saburly-logo {
margin-bottom: -0.4rem;
}
.border-saburly-header {
box-shadow: 0 4px 2px -2px #000000;
}
.saburly-overlay-shadow {
background-color: RGBA(0, 0, 0, 0.1);
}