import React from "react"; import styled, { createGlobalStyle } from "styled-components"; import { Footer } from "./Footer"; export const Layout: React.FC = (props) => { const { children } = props; return ( <> <Global /> <Wrapper> <Content>{children}</Content> <Footer /> </Wrapper> </> ); }; const Global = createGlobalStyle` * { box-sizing: border-box; } html, body { padding: 0; margin: 0; height: 100%; } `; const Wrapper = styled.div` position: relative; display: flex; flex-flow: column nowrap; height: 100vh; font-family: var(--font-family); `; const Content = styled.div` flex: 1 1 auto; display: flex; flex-flow: column nowrap; position: relative; background-color: var(--background-main); `;