/** @jsx jsx */ import { Global, css, jsx } from '@emotion/core' type MainProps = { children: React.ReactNode } export default function Main({ children }: MainProps) { return ( <div> <div css={css` max-width: 800px; margin: 0 auto; padding: 60px 0; `} > <h1 css={css` font-size: 40px; margin: 0; padding: 0 0 60px; `} > Org Viewer </h1> <div>{children}</div> </div> <Global styles={css` @import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400&display=swap'); *, *:before, *:after { box-sizing: border-box; } body { margin: 0; background: #faf1fa; } body, h1, input, button { font: 300 24px/1.5 'Fira Code'; color: #222; } input[type='text'] { background: #fff; &::placeholder { color: #222; } } `} /> </div> ) }