diff --git a/public/index.html b/public/index.html index fcbbd4a..cea1504 100644 --- a/public/index.html +++ b/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`. --> - + Getshitdone diff --git a/src/scenes/Home/Home.style.js b/src/scenes/Home/Home.style.js index 4fcae2c..095e3f1 100644 --- a/src/scenes/Home/Home.style.js +++ b/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; `}; `; diff --git a/src/scenes/Home/index.js b/src/scenes/Home/index.js index 415911e..2d25978 100644 --- a/src/scenes/Home/index.js +++ b/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 ( - -

Getshitdone

+ + + Get shit done + {this.state.task === null ? diff --git a/src/scenes/Home/logo.svg b/src/scenes/Home/logo.svg index a7c61cd..f35d02d 100644 --- a/src/scenes/Home/logo.svg +++ b/src/scenes/Home/logo.svg @@ -1,117 +1 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +logo2 \ No newline at end of file