landing done-ish.

ui/components/demos/tap.js

@@ -1,12 +1,16 @@
 // @flow
 import * as React from 'react'
-// import styled from 'styled-components'
+import styled from 'styled-components'
 import Role from '../role/demo'
 
 const roles = [
   'cute', 'vanity', 'brave', 'proud', 'wonderful', '日本語'
 ]
 
-export default () => <div>
+const DemoWrapper = styled.div`
+  text-align: center;
+`
+
+export default () => <DemoWrapper>
   { roles.map((v, i) => <Role key={i} role={{ name: `a ${v} role ♡`, color: `hsl(${(360 / roles.length) * i},40%,70%)` }} />) }
-</div>
+</DemoWrapper>

ui/components/demos/typing.js

@@ -2,6 +2,7 @@ import * as React from 'react'
 import moment from 'moment'
 import Typist from 'react-typist'
 import styled from 'styled-components'
+import MediaQuery from '../../kit/media'
 
 const Outer = styled.div`
   --not-quite-black: #23272A;
@@ -17,6 +18,8 @@ const Outer = styled.div`
 
 const Chat = styled.div`
   padding: 10px 0;
+  font-size: 0.8em;
+  ${() => MediaQuery({ sm: 'font-size: 1em;' })}
   & span {
     display: inline-block;
     margin-left: 5px;
@@ -27,6 +30,8 @@ const TextArea = styled.div`
   background-color: hsla(218,5%,47%,.3);
   border-radius: 5px;
   padding: 10px;
+  font-size: 0.8em;
+  ${() => MediaQuery({ sm: 'font-size: 1em;' })}
 
   & .Typist .Cursor {
 

ui/components/global-colors.js

@@ -32,18 +32,12 @@ body {
   -moz-osx-font-smoothing: grayscale;
   /* prevent FOUC */
   transition: opacity 0.2s ease-in-out;
-  opacity: 0;
 }
 
 * {
   box-sizing: border-box;
 }
 
-
-.wf-active body, .force-active body {
-  opacity: 1;
-}
-
 .font-sans-serif {
   font-family: sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 }
@@ -68,11 +62,13 @@ html {
 }
 
 body {
+  margin: 0;
+  padding: 0;
   height: 100%;
   overflow: auto;
   color: var(--c-white);
   background-color: var(--c-1);
-  overflow-y: hidden;
+  /* overflow-y: hidden; */
 }
 
 h1,h2,h3,h4,h5,h6 {

ui/components/header/common.js

@@ -10,9 +10,13 @@ export type CommonProps = {
 }
 
 const Header = styled.div`
-  ${({ noBackground }: any) => noBackground === false ? 'background-color: var(--c-dark);' : ''}
+  background-color: ${({ noBackground }: any) => noBackground === false ? 'var(--c-dark);' : 'var(--c-1);'}
   position: relative;
   transition: background-color 0.3s ease-in-out;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
 `
 
 const HeaderInner = styled.div`

ui/components/layout.js

@@ -6,25 +6,32 @@ import HeaderBar from '../containers/header-bar'
 import { type User } from '../containers/user'
 import styled from 'styled-components'
 
+const LayoutWrapper = styled.div`
+  transition: opacity: 0.1s ease-out;
+  opacity: 0;
+  .wf-active &, .force-active & {
+    opacity: 1;
+  }
+`
+
 const ContentBox = styled.div`
   margin: 0 auto;
   width: 960px;
   max-width: 100vw;
   padding: 5px;
-  /* padding-top: 50px; */
-  overflow-y: scroll;
-  max-height: calc(100vh - 50px);
+  padding-top: 50px;
+  /* max-height: calc(100vh - 50px); */
 `
 
 const Layout = ({ children, user, noBackground }: {children: React.Element<any>, user: User, noBackground: boolean }) => <>
   <GlobalColors />
   <SocialCards />
-  <div>
+  <LayoutWrapper>
     <HeaderBar user={user} noBackground={noBackground} />
     <ContentBox>
       {children}
     </ContentBox>
-  </div>
+  </LayoutWrapper>
 </>
 
 export default Layout

ui/pages/_app.js

@@ -4,12 +4,23 @@ import App, { Container } from 'next/app'
 import Head from 'next/head'
 import Layout from '../components/layout'
 import { withCookies } from '../config/rpc'
-import ErrorP from './_error'
+import ErrorP, { Overlay } from './_error'
+import styled from 'styled-components'
 
 type NextPage = React.Component<any> & React.StatelessFunctionalComponent<any> & {
   getInitialProps: (ctx: any, ...args: any) => any
 }
 
+const MissingJS = styled.noscript`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  width: 100vw;
+  font-size: 1.3em;
+  padding: 1em;
+`
+
 class RoleypolyApp extends App {
   static async getInitialProps ({ Component, ctx }: { Component: NextPage, ctx: {[x:string]: any}}) {
     // Fix for next/error rendering instead of our error page.
@@ -50,15 +61,17 @@ class RoleypolyApp extends App {
     // Fix for next/error rendering instead of our error page.
     // Who knows why this would ever happen.
     const ErrorCaughtComponent = (Component.displayName === 'ErrorPage' || Component.constructor.name === 'ErrorPage') ? ErrorP : Component
-    return (
-      <Container>
-        <noscript>Hey there... Unfortunately, we require JS for this app to work. Please take this rose as retribution. 🌹</noscript>
-        <Head>
-          <meta charSet='utf-8' />
-          <title key='title'>Roleypoly</title>
-          <meta name='viewport' content='width=device-width, initial-scale=1' />
-          <link rel='icon' href='/static/favicon.png' />
-          <script key='typekit'>{`
+    return <Container>
+      <MissingJS>
+        <Overlay />
+        Hey there... Unfortunately, we require JS for this app to work. Please take this rose as retribution. 🌹
+      </MissingJS>
+      <Head>
+        <meta charSet='utf-8' />
+        <title key='title'>Roleypoly</title>
+        <meta name='viewport' content='width=device-width, initial-scale=1' />
+        <link rel='icon' href='/static/favicon.png' />
+        <script key='typekit' dangerouslySetInnerHTML={{ __html: `
             (function(d) {
               var config = {
                 kitId: 'bck0pci',
@@ -67,15 +80,12 @@ class RoleypolyApp extends App {
               },
               h=d.documentElement,t=setTimeout(function(){h.className=h.className.replace(/\bwf-loading\b/g,"")+" wf-inactive";},config.scriptTimeout),tk=d.createElement("script"),f=false,s=d.getElementsByTagName("script")[0],a;h.className+=" wf-loading";tk.src='https://use.typekit.net/'+config.kitId+'.js';tk.async=true;tk.onload=tk.onreadystatechange=function(){a=this.readyState;if(f||a&&a!="complete"&&a!="loaded")return;f=true;clearTimeout(t);try{Typekit.load(config)}catch(e){}};s.parentNode.insertBefore(tk,s)
             })(document);//
-          `}
-          </script>
-        </Head>
-
-        <Layout user={user} {...layout} >
-          <ErrorCaughtComponent {...pageProps} router={router} />
-        </Layout>
-      </Container>
-    )
+          ` }} />
+      </Head>
+      <Layout user={user} {...layout}>
+        <ErrorCaughtComponent {...pageProps} router={router} />
+      </Layout>
+    </Container>
   }
 }
 

ui/pages/_error.js

@@ -2,11 +2,11 @@ import * as React from 'react'
 import styled from 'styled-components'
 import MediaQuery from '../kit/media'
 
-const Overlay = styled.div`
+export const Overlay = styled.div`
   opacity: 0.6;
   pointer-events: none;
   position: fixed;
-  top: 50px;
+  top: 0;
   bottom: 0;
   left: 0;
   right: 0;

ui/pages/index.js

@@ -5,6 +5,77 @@ import redirect from '../lib/redirect'
 // import Nav from '../components/nav'
 import TypingDemo from '../components/demos/typing'
 import TapDemo from '../components/demos/tap'
+import styled from 'styled-components'
+import MediaQuery from '../kit/media'
+
+const HeroBig = styled.h1`
+  color: var(--c-7);
+  font-size: 1.8em;
+`
+
+const HeroSmol = styled.h1`
+  color: var(--c-5);
+  font-size: 1.1em;
+`
+
+const Hero = styled.div`
+  padding: 2em 0;
+  text-align: center;
+`
+
+const Footer = styled.p`
+  text-align: center;
+  font-size: 0.7em;
+  opacity: 0.3;
+  transition: opacity 0.3s ease-in-out;
+
+  &:hover {
+    opacity: 1;
+  }
+
+  &:active {
+    opacity: 1;
+  }
+`
+
+const FooterLink = styled.a`
+  font-style: none;
+  color: var(--c-7);
+  text-decoration: none;
+  transition: color 0.3s ease-in-out;
+
+  &:hover {
+    color: var(--c-5);
+  }
+`
+
+const DemoArea = styled.div`
+  display: flex;
+  flex-direction: column;
+  ${() => MediaQuery({ md: `flex-direction: row;` })}
+
+  & > div {
+    flex: 1;
+    padding: 10px;
+  }
+
+  & > div > p {
+    text-align: center;
+  }
+`
+
+const Wrapper = styled.div`
+  flex-wrap: wrap;
+  ${() => MediaQuery({
+    md: `
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 80vh;
+      min-height: 500px;
+    `
+  })}
+`
 
 export default class Home extends React.Component {
   static async getInitialProps (ctx, rpc) {
@@ -17,16 +88,31 @@ export default class Home extends React.Component {
 
   render () {
     return <div>
-      <h2>A bot to tame your self-assignable Discord roles.</h2>
-      <div>
-        <TypingDemo />
-        <p>What is this? 2005?</p>
-      </div>
-      <div>
-        <TapDemo />
-        <p>Just click or tap.</p>
-      </div>
-
+      <Wrapper>
+        <div>
+          <Hero>
+            <HeroBig>Discord roles for humans.</HeroBig>
+            <HeroSmol>Ditch bot commands once and for all.</HeroSmol>
+          </Hero>
+          <DemoArea>
+            <div>
+              <TypingDemo />
+              <p>What is this? 2005?</p>
+            </div>
+            <div>
+              <TapDemo />
+              <p>Just click or tap.</p>
+            </div>
+          </DemoArea>
+        </div>
+      </Wrapper>
+      <Footer>
+        © {new Date().getFullYear()}<br />
+        Made with ♡&nbsp;
+        <img src='/static/flags.svg' style={{ height: '1em', opacity: 0.5 }} /><br />
+        <FooterLink target='_blank' href='https://github.com/kayteh/roleypoly'>GitHub</FooterLink>&nbsp;-&nbsp;
+        <FooterLink target='_blank' href='https://discord.gg/PWQUVsd'>Discord</FooterLink>
+      </Footer>
     </div>
   }
 }

ui/static/flags.svg

@@ -0,0 +1,35 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="3372px" height="900px" viewBox="0 0 3372 900" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>Trans</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <rect id="path-1" x="0" y="0" width="1600" height="900" rx="100"></rect>
+        <rect id="path-3" x="1772" y="0" width="1600" height="900" rx="100"></rect>
+    </defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <mask id="mask-2" fill="white">
+            <use xlink:href="#path-1"></use>
+        </mask>
+        <g id="Rectangle-5"></g>
+        <g id="Trans" mask="url(#mask-2)">
+            <rect id="Rectangle" fill="#55CDFC" x="0" y="0" width="1600" height="900"></rect>
+            <rect id="Rectangle-2" fill="#F7A8B8" x="0" y="170" width="1600" height="560"></rect>
+            <rect id="Rectangle-3" fill="#FFFFFF" x="0" y="350" width="1600" height="200"></rect>
+        </g>
+        <mask id="mask-4" fill="white">
+            <use xlink:href="#path-3"></use>
+        </mask>
+        <g id="Rectangle-5"></g>
+        <g id="Geyy" mask="url(#mask-4)">
+            <g transform="translate(1772.000000, 0.000000)" id="Rectangle-4">
+                <rect fill="#F9238B" x="0" y="0" width="1600" height="151.006711"></rect>
+                <rect fill="#FB7B04" x="0" y="150" width="1600" height="151.006711"></rect>
+                <rect fill="#FFCA66" x="0" y="300" width="1600" height="151.006711"></rect>
+                <rect fill="#00B289" x="0" y="450" width="1600" height="151.006711"></rect>
+                <rect fill="#5A38B5" x="0" y="598.993289" width="1600" height="151.006711"></rect>
+                <rect fill="#B413F5" x="0" y="748.993289" width="1600" height="151.006711"></rect>
+            </g>
+        </g>
+    </g>
+</svg>