From 2232877ed5b3c0b60789940d2a367726ee8919c5 Mon Sep 17 00:00:00 2001 From: Noah Loomans Date: Wed, 17 Jan 2018 16:45:17 +0100 Subject: Add some basic styling --- src/client/react/components/page/Index.js | 3 ++- src/client/react/index.js | 4 ++++ src/client/style/index.scss | 18 +++++++++++++++++- 3 files changed, 23 insertions(+), 2 deletions(-) (limited to 'src/client') diff --git a/src/client/react/components/page/Index.js b/src/client/react/components/page/Index.js index a91d7a9..9b8dbd7 100644 --- a/src/client/react/components/page/Index.js +++ b/src/client/react/components/page/Index.js @@ -2,7 +2,8 @@ import React from 'react'; import Search from '../container/Search'; const App = () => ( -
+
+ Metis
); diff --git a/src/client/react/index.js b/src/client/react/index.js index a7006d4..e70b442 100644 --- a/src/client/react/index.js +++ b/src/client/react/index.js @@ -27,3 +27,7 @@ ReactDOM.render( , document.getElementById('root'), ); + +// We only want to focus the input on page load. NOT on a in-javascript +// redirect. This is because that is when people usually want to start typing. +document.querySelector('.search input').focus(); diff --git a/src/client/style/index.scss b/src/client/style/index.scss index 7c83c77..9fa267c 100644 --- a/src/client/style/index.scss +++ b/src/client/style/index.scss @@ -1,12 +1,28 @@ body { - background-color: #ececec; font-family: 'Roboto'; + margin: 0; } * { box-sizing: border-box; } +.page-index { + background-color: #ececec; + padding-top: 24vh; + height: 100vh; + + img { + display: block; + margin: 0 auto; + } + + .search { + margin: 0 auto; + margin-top: 64px; + } +} + .search { width: 580px; border-radius: 2px; -- cgit v1.1