roleypoly/v1
1
0
Fork 0
mirror of https://github.com/roleypoly/roleypoly-v1.git synced 2025-04-25 04:09:12 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix(UI/landing): vertically center landing

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

94
UI/src/pages/Landing.js
View file

@ -7,55 +7,55 @@ 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="uk-container"> <div className="landing uk-width-1-1 uk-text-center">
<section> <div className="uk-container">
<h1>Self-assignable Discord roles for humans.</h1> <section>
<h4>Ditch bot commands once and for all.</h4> <h1>Self-assignable Discord roles for humans.</h1>
</section> <h4>Ditch bot commands once and for all.</h4>
<section> </section>
<Link to="/oauth/flow" className="uk-button rp-button discord"><img src={discordLogo} className="rp-button-logo"/> Sign in with Discord</Link> <section>
</section> <Link to="/oauth/flow" className="uk-button rp-button discord"><img src={discordLogo} className="rp-button-logo"/> Sign in with Discord</Link>
<section uk-grid=""> </section>
{/* Typist */} <section uk-grid="">
<div className="uk-width-1-2"> {/* Typist */}
<div className="landing__discord"> <div className="uk-width-1-2">
<div className="discord__chat"> <div className="landing__discord rp-discord">
<span className="timestamp">{moment().format('LT')}</span> <div className="discord__chat">
<span className="username">Kata カタ</span> <span className="timestamp">{moment().format('LT')}</span>
<span className="text">Hey, I want some roles!</span> <span className="username">Kata カタ</span>
<span className="text">Hey, I want some roles!</span>
</div>
<div className="discord__textarea">
<Typist cursor={{ blink: true }}>
<span>.iam a cute role ♡</span>
<Typist.Backspace count={30} delay={1500} />
<span>.iam a vanity role ♡</span>
<Typist.Backspace count={30} delay={1500} />
<span>.iam a brave role ♡</span>
<Typist.Backspace count={30} delay={1500} />
<span>.iam a proud role ♡</span>
<Typist.Backspace count={30} delay={1500} />
<span>.iam a wonderful role ♡</span>
<Typist.Backspace count={30} delay={1500} />
<span>i have too many roles.</span>
</Typist>
</div>
</div> </div>
<div className="discord__textarea"> <p className="subtext">Why are we stuck in the stupid ages?</p>
<Typist cursor={{ blink: true }}> </div>
<span>.iam a cute role ♡</span> {/* role side */}
<Typist.Backspace count={30} delay={1500} /> <div className="uk-width-1-2">
<span>.iam a vanity role ♡</span> <div className="landing__roleypoly">
<Typist.Backspace count={30} delay={1500} /> <RoleDemo name="a cute role ♡" color="#3EC1BF" />
<span>.iam a brave role ♡</span> <RoleDemo name="a vanity role ♡" color="#F7335B" />
<Typist.Backspace count={30} delay={1500} /> <RoleDemo name="a brave role ♡" color="#A8D0B8" />
<span>.iam a proud role ♡</span> <RoleDemo name="a proud role ♡" color="#5C8B88" />
<Typist.Backspace count={30} delay={1500} /> <RoleDemo name="a wonderful role ♡" color="#D6B3C7" />
<span>.iam a wonderful role ♡</span>
<Typist.Backspace count={30} delay={1500} />
<span>i have too many roles.</span>
</Typist>
</div> </div>
<p className="subtext">It's 2018. We can do better.</p>
</div> </div>
<p className="subtext">Why are we stuck in the stupid ages?</p> </section>
</div> </div>
{/* role side */}
<div className="uk-width-1-2">
<div className="landing__roleypoly">
<RoleDemo name="a cute role ♡" color="#3EC1BF" />
<RoleDemo name="a vanity role ♡" color="#F7335B" />
<RoleDemo name="a brave role ♡" color="#A8D0B8" />
<RoleDemo name="a proud role ♡" color="#5C8B88" />
<RoleDemo name="a wonderful role ♡" color="#D6B3C7" />
</div>
<p className="subtext">It's 2018. We can do better.</p>
</div>
</section>
</div> </div>
</div>
export default Landing export default Landing

10
UI/src/pages/landing.sass
View file

@ -1,5 +1,11 @@
.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
color: transparent color: transparent
@ -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)