Removed text from logo and displayed h1. Reorganized position on scre…

…en with vh

public/index.html

@@ -19,7 +19,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700|Roboto" rel="stylesheet">
 
     <title>Getshitdone</title>
   </head>

src/scenes/Home/Home.style.js

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 
-import { media } from 'styles';
+import { media, secondaryColor } from 'styles';
 
 export const Root = styled.div`
   @font-face {
@@ -18,10 +18,16 @@ export const Root = styled.div`
     font-weight: 700;
   }
 
+  @font-face {
+    font-family: 'Roboto', sans-serif;
+    font-weight: 400;
+  }
+
   font-family: 'Open Sans';
   font-weight: 400;
   padding-bottom: 70px;
   font-size: 12px;
+  max-height: 100vh;
 
   ${media.desktop`
       font-size: 14px;
@@ -30,18 +36,31 @@ export const Root = styled.div`
     `};
 `;
 
-export const Logo = styled.img`
-  display: block;
+export const LogoCtn = styled.div`
   margin: 10% auto 5% auto;
-  width: 150px;
-  height: auto;
+  width: 7.143em;
 
   ${media.tablet`
-      display: inline-block;
-      margin: 30px 50px;
+      margin: 30px 50px 5vh 50px;
     `} ${media.desktop`
-      margin-bottom: 5%;
+      margin-bottom: 7vh;
     `} ${media.big`
-      margin-bottom: 10%;
+      margin-bottom: 18vh;
+    `};
+`;
+
+export const Title = styled.h1`
+  margin: 0;
+  font-family: 'Roboto';
+  font-weight: 400;
+  color: ${secondaryColor};
+  font-size: 1.2em;
+`;
+
+export const Logo = styled.img`
+  display: block;
+
+  ${media.tablet`
+      display: inline-block;
     `};
 `;

src/scenes/Home/index.js

@@ -4,7 +4,7 @@ import logo from './logo.svg';
 import TimerForm from 'components/TimerForm';
 import Timer from 'components/Timer';
 import Footer from 'components/Footer';
-import { Root, Logo } from './Home.style';
+import { Root, Logo, LogoCtn, Title } from './Home.style';
 
 class Home extends Component {
   constructor(props) {
@@ -38,8 +38,10 @@ class Home extends Component {
   render() {
     return (
       <Root>
-        <Logo src={logo} alt="getshitdone logo timer task" />
-        <h1 hidden>Getshitdone</h1>
+        <LogoCtn>
+          <Logo src={logo} alt="getshitdone logo timer task" />
+          <Title>Get shit done</Title>
+        </LogoCtn>
 
         {this.state.task === null
           ? <TimerForm onValidate={this.onTaskCreation} />