fix(UI/landing): vertically center landing

UI/src/pages/Landing.js

@@ -7,7 +7,8 @@ import './landing.sass'
 import discordLogo from './images/discord-logo.svg'
 import RoleDemo from '../components/role/demo'
 
-const Landing = ({ root = false }) => <div className="landing uk-width-1-1 uk-text-center">
+const Landing = ({ root = false }) =>
+  <div className="landing uk-width-1-1 uk-text-center">
     <div className="uk-container">
       <section>
         <h1>Self-assignable Discord roles for humans.</h1>
@@ -19,7 +20,7 @@ const Landing = ({ root = false }) => <div className="landing uk-width-1-1 uk-te
       <section uk-grid="">
         {/* Typist */}
         <div className="uk-width-1-2">
-        <div className="landing__discord">
+          <div className="landing__discord rp-discord">
             <div className="discord__chat">
               <span className="timestamp">{moment().format('LT')}</span>
               <span className="username">Kata カタ</span>
@@ -56,6 +57,5 @@ const Landing = ({ root = false }) => <div className="landing uk-width-1-1 uk-te
         </div>
       </section>
     </div>
-</div>
-
+  </div>
 export default Landing

UI/src/pages/landing.sass

@@ -1,4 +1,10 @@
 .landing
+  min-height: calc(100vh)
+  position: relative
+  top: -80px
+  display: flex
+  align-items: center
+  justify-content: center
 
   .Typist .Cursor 
     display: inline-block
@@ -27,8 +33,6 @@
     --blurple: var(--c-discord)
 
     background-color: var(--dark-but-not-black)
-    border: 1px solid var(--not-quite-black)
-    box-shadow: 0 0 1px rgba(0,0,0,0.3)
     padding: 10px
     text-align: left
     color: var(--c-white)