fix(UI/landing): vertically center landing

This commit is contained in:
Katalina / stardust 2017-12-31 23:21:17 -06:00
parent 297a0fc217
commit b7aa5954d0
2 changed files with 54 additions and 50 deletions

View file

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

View file

@ -1,4 +1,10 @@
.landing .landing
min-height: calc(100vh)
position: relative
top: -80px
display: flex
align-items: center
justify-content: center
.Typist .Cursor .Typist .Cursor
display: inline-block display: inline-block
@ -27,8 +33,6 @@
--blurple: var(--c-discord) --blurple: var(--c-discord)
background-color: var(--dark-but-not-black) 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 padding: 10px
text-align: left text-align: left
color: var(--c-white) color: var(--c-white)