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

Add social media and styling footer

Browse Source
This commit is contained in:
Moris Zen
2018-07-05 12:59:28 +02:00
parent 6dc175c126
commit edaecfffca
9 changed files with 262 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Button.js
View File

@@ -2,7 +2,7 @@ import React from 'react'
import Link from 'gatsby-link'
let defaultClasses =
'px-6 py-3 leading-none inline-block text-sm no-underline uppercase'
'px-6 py-2 leading-none inline-block text-sm no-underline uppercase'
let standardBtn = 'border hover:bg-teal hover:text-white hover:border-teal'

61
src/components/Footer.js
View File

@@ -4,6 +4,11 @@ import Button from './Button'
import LogoSaburly from '../images/logo-saburly-colorful.svg'
import Facebook from '../images/facebook.svg'
import Instagram from '../images/instagram.svg'
import Twitter from '../images/twitter.svg'
import LinkedIn from '../images/linkedin.svg'
let menuClasses =
'no-underline mt-4 lg:inline-block opacity-100 lg:mt-0 text-white hover:opacity-100 uppercase mr-4'
@@ -12,12 +17,52 @@ const Footer = () => (
<div className="container mx-auto pt-10 pb-10 lg:flex">
<div className="lg:w-1/4 p-4">
<img src={LogoSaburly} alt="Saburly Logo" className="max-w-full" />
<a href="mailto:info@saburly.com">E: info@saburly.com</a>
<a href="tel:+46760477717">P: +46760477717</a>
<div className="flex justify-between social-icons py-2">
<div>
<img
src={Facebook}
alt="Facebook Social Media"
className="max-w-2.5 opacity-50 hover:opacity-100 hover:shadow-lg w-full"
/>
</div>
<div>
<img
src={Instagram}
alt="Instagram Social Media"
className="max-w-2.5 opacity-50 hover:opacity-100 hover:shadow-lg w-full"
/>
</div>
<div>
<img
src={Twitter}
alt="Twitter Social Media"
className="max-w-2.5 opacity-50 hover:opacity-100 hover:shadow-lg w-full"
/>
</div>
<div>
<img
src={LinkedIn}
alt="LinkedIn Social Media"
className="max-w-2.5 opacity-50 hover:opacity-100 hover:shadow-lg w-full"
/>
</div>
</div>
<a
className="opacity-70 hover:opacity-100 pb-1 no-underline text-white block"
href="mailto:info@saburly.com"
>
E-mail: info@saburly.com
</a>
<a
className="opacity-70 hover:opacity-100 pt-1 no-underline text-white block"
href="tel:+46760477717"
>
Phone: +46760477717
</a>
</div>
<div className="lg:w-3/4 ml-10 p-4">
<div className="lg:flex items-center justify-between">
<div className="lg:flex items-center justify-around">
<h3 className="text-white font-light">
Let's start a new project together
</h3>
@@ -31,7 +76,7 @@ const Footer = () => (
<div className="mt-4 lg:flex justify-between">
<nav>
<p className="font-thin text-white opacity-70">Sitemap</p>
<p className="font-thin text-white opacity-50">Sitemap</p>
<ul className="list-reset text-sm inline-block">
<Link className="block my-2" to="/">
<li className={menuClasses}>Home</li>
@@ -48,14 +93,14 @@ const Footer = () => (
</ul>
</nav>
<div>
<p className="font-thin text-white opacity-70">Office - Sweden</p>
<p className="text-white my-2 leading-normal">
<p className="font-thin text-white opacity-50">Office - Sweden</p>
<p className="text-white my-2 opacity-80 leading-normal">
Saburly AB<br />Vretenvägen 13<br />171 54 Solna<br />Sweden
</p>
</div>
<div>
<p className="font-thin text-white opacity-70">Office - Bosnia</p>
<p className="text-white my-2 leading-normal">
<p className="font-thin text-white opacity-50">Office - Bosnia</p>
<p className="text-white my-2 opacity-80 leading-normal">
Saburly d.o.o<br />Hakije Turajlica 2<br />71 000 Sarajevo<br />Bosnia
& Herzegovina
</p>

12
src/images/facebook.svg Normal file
View File

@@ -0,0 +1,12 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FFFFFF;}
</style>
<title id="simpleicons-facebook-icon">Facebook icon</title>
<path class="st0" d="M22.7,0H1.3C0.6,0,0,0.6,0,1.3v21.4C0,23.4,0.6,24,1.3,24h11.5v-9.3H9.7v-3.6h3.1V8.4c0-3.1,1.9-4.8,4.7-4.8
c1.3,0,2.5,0.1,2.8,0.1V7h-1.9c-1.5,0-1.8,0.7-1.8,1.8v2.3h3.6l-0.5,3.6h-3.1V24h6.1c0.7,0,1.3-0.6,1.3-1.3V1.3
C24,0.6,23.4,0,22.7,0"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 728 B

21
src/images/instagram.svg Normal file
View File

@@ -0,0 +1,21 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FFFFFF;}
</style>
<title id="simpleicons-instagram-icon">Instagram icon</title>
<path class="st0" d="M12,0C8.7,0,8.3,0,7.1,0.1C5.8,0.1,4.9,0.3,4.1,0.6C3.4,0.9,2.7,1.3,2,2S0.9,3.3,0.6,4.1
C0.3,4.9,0.1,5.8,0.1,7.1C0,8.3,0,8.7,0,12s0,3.7,0.1,4.9c0.1,1.3,0.3,2.1,0.6,2.9C0.9,20.6,1.3,21.3,2,22c0.7,0.7,1.3,1.1,2.1,1.4
c0.8,0.3,1.6,0.5,2.9,0.6C8.3,24,8.7,24,12,24s3.7,0,4.9-0.1c1.3-0.1,2.1-0.3,2.9-0.6c0.8-0.3,1.5-0.7,2.1-1.4
c0.7-0.7,1.1-1.3,1.4-2.1c0.3-0.8,0.5-1.6,0.6-2.9C24,15.7,24,15.3,24,12s0-3.7-0.1-4.9c-0.1-1.3-0.3-2.1-0.6-2.9
C23.1,3.4,22.7,2.7,22,2c-0.7-0.7-1.3-1.1-2.1-1.4c-0.8-0.3-1.6-0.5-2.9-0.6C15.7,0,15.3,0,12,0z M12,2.2c3.2,0,3.6,0,4.9,0.1
c1.2,0.1,1.8,0.2,2.2,0.4c0.6,0.2,1,0.5,1.4,0.9c0.4,0.4,0.7,0.8,0.9,1.4c0.2,0.4,0.4,1.1,0.4,2.2c0.1,1.3,0.1,1.6,0.1,4.8
s0,3.6-0.1,4.9c-0.1,1.2-0.3,1.8-0.4,2.2c-0.2,0.6-0.5,1-0.9,1.4c-0.4,0.4-0.8,0.7-1.4,0.9c-0.4,0.2-1.1,0.4-2.2,0.4
c-1.3,0.1-1.6,0.1-4.9,0.1c-3.2,0-3.6,0-4.9-0.1c-1.2-0.1-1.8-0.3-2.2-0.4c-0.6-0.2-1-0.5-1.4-0.9c-0.4-0.4-0.7-0.8-0.9-1.4
c-0.2-0.4-0.4-1.1-0.4-2.2c0-1.3-0.1-1.6-0.1-4.8c0-3.2,0-3.6,0.1-4.9C2.2,6,2.4,5.3,2.6,4.9c0.2-0.6,0.5-1,0.9-1.4
c0.4-0.4,0.8-0.7,1.4-0.9c0.4-0.2,1.1-0.4,2.2-0.4C8.4,2.1,8.7,2.1,12,2.2C12,2.1,12,2.2,12,2.2z M12,5.8c-3.4,0-6.2,2.8-6.2,6.2
c0,3.4,2.8,6.2,6.2,6.2c3.4,0,6.2-2.8,6.2-6.2C18.2,8.6,15.4,5.8,12,5.8z M12,16c-2.2,0-4-1.8-4-4s1.8-4,4-4s4,1.8,4,4
S14.2,16,12,16z M19.8,5.6c0,0.8-0.6,1.4-1.4,1.4C17.6,7,17,6.4,17,5.6s0.6-1.4,1.4-1.4C19.2,4.2,19.8,4.8,19.8,5.6z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

13
src/images/linkedin.svg Normal file
View File

@@ -0,0 +1,13 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FFFFFF;}
</style>
<title id="simpleicons-linkedin-icon">LinkedIn icon</title>
<path class="st0" d="M20.4,20.5h-3.6v-5.6c0-1.3,0-3-1.9-3c-1.9,0-2.1,1.4-2.1,2.9v5.7H9.4V9h3.4v1.6h0c0.5-0.9,1.6-1.9,3.4-1.9
c3.6,0,4.3,2.4,4.3,5.5L20.4,20.5L20.4,20.5z M5.3,7.4c-1.1,0-2.1-0.9-2.1-2.1c0-1.1,0.9-2.1,2.1-2.1c1.1,0,2.1,0.9,2.1,2.1
C7.4,6.5,6.5,7.4,5.3,7.4z M7.1,20.5H3.6V9h3.6V20.5z M22.2,0H1.8C0.8,0,0,0.8,0,1.7v20.5c0,1,0.8,1.7,1.8,1.7h20.5
c1,0,1.8-0.8,1.8-1.7V1.7C24,0.8,23.2,0,22.2,0L22.2,0z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 884 B

14
src/images/twitter.svg Normal file
View File

@@ -0,0 +1,14 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FFFFFF;}
</style>
<title id="simpleicons-twitter-icon">Twitter icon</title>
<path class="st0" d="M24,4.6c-0.9,0.4-1.8,0.7-2.8,0.8c1-0.6,1.8-1.6,2.2-2.7c-1,0.6-2,1-3.1,1.2c-0.9-1-2.2-1.6-3.6-1.6
c-2.7,0-4.9,2.2-4.9,4.9c0,0.4,0,0.8,0.1,1.1C7.7,8.1,4.1,6.1,1.6,3.2C1.2,3.9,1,4.7,1,5.6c0,1.7,0.9,3.2,2.2,4.1
c-0.8,0-1.6-0.2-2.2-0.6v0.1c0,2.4,1.7,4.4,3.9,4.8c-0.4,0.1-0.8,0.2-1.3,0.2c-0.3,0-0.6,0-0.9-0.1c0.6,2,2.4,3.4,4.6,3.4
c-1.7,1.3-3.8,2.1-6.1,2.1c-0.4,0-0.8,0-1.2-0.1c2.2,1.4,4.8,2.2,7.6,2.2c9.1,0,14-7.5,14-14c0-0.2,0-0.4,0-0.6
C22.5,6.4,23.3,5.6,24,4.6C24,4.6,24,4.6,24,4.6z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 974 B

2
src/styles/custom.css
View File

@@ -34,5 +34,5 @@
}
.client-logo {
max-height: 4rem;
max-height: 3rem;
}

140
src/styles/index.css
View File

@@ -3094,6 +3094,34 @@ table {
max-height: 100vh;
}
.max-w-1 {
max-width: 1rem;
}
.max-w-2 {
max-width: 2rem;
}
.max-w-3 {
max-width: 3rem;
}
.max-w-4 {
max-width: 4rem;
}
.max-w-5 {
max-width: 5rem;
}
.max-w-10 {
max-width: 10rem;
}
.max-w-2\.5 {
max-width: 2.5rem;
}
.max-w-xs {
max-width: 20rem;
}
@@ -7370,6 +7398,34 @@ table {
max-height: 100vh;
}
.sm\:max-w-1 {
max-width: 1rem;
}
.sm\:max-w-2 {
max-width: 2rem;
}
.sm\:max-w-3 {
max-width: 3rem;
}
.sm\:max-w-4 {
max-width: 4rem;
}
.sm\:max-w-5 {
max-width: 5rem;
}
.sm\:max-w-10 {
max-width: 10rem;
}
.max-w-2\.sm\:5 {
max-width: 2.5rem;
}
.sm\:max-w-xs {
max-width: 20rem;
}
@@ -11631,6 +11687,34 @@ table {
max-height: 100vh;
}
.md\:max-w-1 {
max-width: 1rem;
}
.md\:max-w-2 {
max-width: 2rem;
}
.md\:max-w-3 {
max-width: 3rem;
}
.md\:max-w-4 {
max-width: 4rem;
}
.md\:max-w-5 {
max-width: 5rem;
}
.md\:max-w-10 {
max-width: 10rem;
}
.max-w-2\.md\:5 {
max-width: 2.5rem;
}
.md\:max-w-xs {
max-width: 20rem;
}
@@ -15892,6 +15976,34 @@ table {
max-height: 100vh;
}
.lg\:max-w-1 {
max-width: 1rem;
}
.lg\:max-w-2 {
max-width: 2rem;
}
.lg\:max-w-3 {
max-width: 3rem;
}
.lg\:max-w-4 {
max-width: 4rem;
}
.lg\:max-w-5 {
max-width: 5rem;
}
.lg\:max-w-10 {
max-width: 10rem;
}
.max-w-2\.lg\:5 {
max-width: 2.5rem;
}
.lg\:max-w-xs {
max-width: 20rem;
}
@@ -20153,6 +20265,34 @@ table {
max-height: 100vh;
}
.xl\:max-w-1 {
max-width: 1rem;
}
.xl\:max-w-2 {
max-width: 2rem;
}
.xl\:max-w-3 {
max-width: 3rem;
}
.xl\:max-w-4 {
max-width: 4rem;
}
.xl\:max-w-5 {
max-width: 5rem;
}
.xl\:max-w-10 {
max-width: 10rem;
}
.max-w-2\.xl\:5 {
max-width: 2.5rem;
}
.xl\:max-w-xs {
max-width: 20rem;
}

7
tailwind.config.js
View File

@@ -574,6 +574,13 @@ module.exports = {
*/
maxWidth: {
'1': '1rem',
'2': '2rem',
'2.5': '2.5rem',
'3': '3rem',
'4': '4rem',
'5': '5rem',
'10': '10rem',
xs: '20rem',
sm: '30rem',
md: '40rem',