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

early ui stuff

Browse source
This commit is contained in:
41666 2019-02-25 00:48:16 -06:00
parent 6770751ba1
commit 6f3eca7a64
3 changed files with 142 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

77
UI/components/global-colors.js Normal file
View file

@ -0,0 +1,77 @@
export const colors = {
white: '#efefef',
c9: '#EBD6D4',
c7: '#ab9b9a',
c5: '#756867',
c3: '#5d5352',
c1: '#453e3d',
dark: '#332d2d',
green: '#46b646',
red: '#e95353',
discord: '#7289da'
}
const getColors = () => {
Object.keys(colors).map(key => {
const nk = key.replace(/c([0-9])/, '$1')
return `--c-${nk}: ${colors[key]};`
}).join(' \n')
}
const Colors = () => <style global jsx>{`
body {
margin: 0;
padding: 0;
font-family: "source-han-sans-japanese", "Source Sans Pro", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.font-sans-serif {
font-family: sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
:root {
${getColors()}
}
::selection {
background: var(--c-9);
color: var(--c-1);
}
::-moz-selection {
background: var(--c-9);
color: var(--c-1);
}
html {
overflow: hidden;
height: 100%;
}
body {
height: 100%;
overflow: auto;
color: var(--c-white);
background-color: var(--c-1);
overflow-y: hidden;
}
h1,h2,h3,h4,h5,h6 {
color: var(--c-9);
}
.fade-element {
opacity: 1;
transition: opacity 0.3s ease-in-out;
}
.fade {
opacity: 0;
}
`}</style>
export default Colors

58
UI/pages/_app.js Normal file
View file

@ -0,0 +1,58 @@
import App, { Container } from 'next/app'
import Head from 'next/head'
import GlobalColors from '../components/global-colors'
class RoleypolyApp extends App {
static async getInitialProps ({ Component, ctx }) {
let pageProps = {}
if (Component.getInitialProps) {
pageProps = await Component.getInitialProps(ctx)
}
return { pageProps }
}
componentDidMount () {
this.loadTypekit(document)
}
loadTypekit (d) {
var config = {
kitId: 'bck0pci',
scriptTimeout: 3000,
async: true
}
const h = d.documentElement
const t = setTimeout(function () { h.className = h.className.replace(/\bwf-loading\b/g, '') + ' wf-inactive' }, config.scriptTimeout)
const tk = d.createElement('script')
const s = d.getElementsByTagName('script')[0]
let f = false
let 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 { window.Typekit.load(config) } catch (e) {}
}
s.parentNode.insertBefore(tk, s)
}
render () {
const { Component, pageProps, router } = this.props
return (
<Container>
<Head />
<GlobalColors />
<Component {...pageProps} router={router} />
</Container>
)
}
}
export default RoleypolyApp

7
UI/pages/_internal/_server.js Normal file
View file

@ -0,0 +1,7 @@
const Server = ({ router: { query: { id } } }) => (
<div>
{id}
</div>
)
export default Server