diff options
author | Noah Loomans <noahloomans@gmail.com> | 2018-03-21 19:16:43 +0100 |
---|---|---|
committer | Noah Loomans <noahloomans@gmail.com> | 2018-03-21 19:16:43 +0100 |
commit | 18d671d76bf2f336f5010111eb4880e54bbf6014 (patch) | |
tree | f2ecdd12bcc0b51aa0214f9f64977021a8ec9b6c /src/client | |
parent | 2e426cce0f3649cbcc21717e79b18434a8a66f35 (diff) |
Migrate IndexPage styling
Diffstat (limited to 'src/client')
-rw-r--r-- | src/client/react/components/page/Index.js | 4 | ||||
-rw-r--r-- | src/client/react/components/page/Index.scss | 33 |
2 files changed, 36 insertions, 1 deletions
diff --git a/src/client/react/components/page/Index.js b/src/client/react/components/page/Index.js index ac6c4f6..b2ebbcb 100644 --- a/src/client/react/components/page/Index.js +++ b/src/client/react/components/page/Index.js @@ -22,10 +22,12 @@ import React from 'react'; import Search from '../container/Search'; import HelpBox from '../container/HelpBox'; +import './Index.scss'; + class IndexPage extends React.Component { render() { return ( - <div className="page-index"> + <div className="IndexPage"> <div className="container"> <img src="/icons/mml-logo.png" alt="Metis" /> <Search /> diff --git a/src/client/react/components/page/Index.scss b/src/client/react/components/page/Index.scss new file mode 100644 index 0000000..f47b36d --- /dev/null +++ b/src/client/react/components/page/Index.scss @@ -0,0 +1,33 @@ +.IndexPage { + background-color: #ececec; + padding-top: calc(50vh - 310px); + height: 100vh; + + .container { + max-width: 600px; + margin: 0 auto; + padding: 8px; + + img { + display: block; + margin: 64px auto; + } + + .Search { + z-index: 1; // Position search above help-box + } + } +} + + +@media (max-height: 510px) { + .IndexPage { + padding-top: 0px; + + .container { + img { + display: none; + } + } + } +} |