Fixing mail button + some mobile layout adjustments

smakosh · Aug 1, 2019 · 8ec7dec · 8ec7dec
1 parent 2d44f8d
commit 8ec7dec
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 13 deletions.
diff --git a/src/components/landing/Intro/index.jsx b/src/components/landing/Intro/index.jsx
@@ -1,10 +1,10 @@
-import { Button, Container } from 'Common'
-import { contact, defaultDescription, photo, photoWebp, summary } from 'Data'
-import React from 'react'
-import dev from 'Static/illustrations/dev.svg'
-import { Header } from 'Theme'
-import Image from 'react-image-webp'
-import { Details, IntroWrapper, Thumbnail, Wrapper } from './styles'
+import { Button, Container } from 'Common';
+import { contact, defaultDescription, photo, photoWebp, summary } from 'Data';
+import React from 'react';
+import Image from 'react-image-webp';
+import dev from 'Static/illustrations/dev.svg';
+import { Header } from 'Theme';
+import { Details, IntroWrapper, Thumbnail, Wrapper } from './styles';
 
 export const Intro = () => (
 	<Wrapper>
@@ -16,7 +16,13 @@ export const Intro = () => (
 				{summary.map(line => (
 					<p key={line}>{line}</p>
 				))}
-				<Button href={`mailto:${contact.email}`}>Contact me</Button>
+				<Button
+					onClick={() => {
+						window.location.href = `mailto:${contact.email}`
+					}}
+				>
+					Contact me
+				</Button>
 			</Details>
 			<Thumbnail>
 				<img src={dev} alt={defaultDescription} />

diff --git a/src/components/landing/Intro/styles.js b/src/components/landing/Intro/styles.js
@@ -34,7 +34,7 @@ export const Details = styled.div`
 		margin-bottom: 3rem;
 
 		@media (max-width: 680px) {
-			margin-left: 5rem;
+			margin-left: 6rem;
 		}
 	}
 

diff --git a/src/components/landing/Projects/styles.js b/src/components/landing/Projects/styles.js
@@ -30,6 +30,10 @@ export const Item = styled.div`
 	overflow: hidden;
 	padding: 1rem;
 
+	@media (max-width: 960px) {
+		padding: 0.2rem 0.1rem ;
+	}
+
 	h4 {
 		color: #212121;
 		padding-left: 1rem;

diff --git a/src/components/landing/Skills/styles.js b/src/components/landing/Skills/styles.js
@@ -30,6 +30,10 @@ export const Column = styled.div`
 	overflow: hidden;
 	padding: 1rem;
 
+	@media (max-width: 960px) {
+		padding: 0.2rem 0.1rem;
+	}
+
 	h4 {
 		color: #fff;
 		background-color: ${props => (props.color ? props.color : `#f1f1f1`)};

diff --git a/src/components/theme/Header/NavbarLinks/index.jsx b/src/components/theme/Header/NavbarLinks/index.jsx
@@ -1,7 +1,7 @@
-import { social } from 'Data'
-import React from 'react'
-import AnchorLink from 'react-anchor-link-smooth-scroll'
-import { Wrapper } from './styles'
+import { social } from 'Data';
+import React from 'react';
+import AnchorLink from 'react-anchor-link-smooth-scroll';
+import { Wrapper } from './styles';
 
 const NavbarLinks = ({ desktop }) => (
 	<Wrapper desktop={desktop}>