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