Something went wrong. Try again.
[READ-ONLY] Mirror of https://github.com/lowmess/lameass.recipes. A recipe site, but without the ads and 3,000 word essays lameass.recipes
nextjs sanity-io theme-ui typescript
Something went wrong. Try again.
1.8 kB · 88 lines
TSX
at develop
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889import * as React from 'react'import Head from 'next/head'import { Global, css } from '@emotion/react'import { Flex, Container } from 'theme-ui'import { useTheme } from '../constants/theme'import Nav from './Nav'import Footer from './Footer'
interface LayoutProps { children: React.ReactNode}
const Layout: React.FC<LayoutProps> = ({ children }) => { const { theme: { colors, rawColors } = {} } = useTheme()
return ( <React.Fragment> <Global styles={css` ::selection { background-color: ${colors.accent}; color: ${colors.text}; }
html { font-variant-ligatures: common-ligatures discretionary-ligatures; scroll-behavior: smooth;
@media (prefers-reduced-motion: reduce) { scroll-behavior: auto; }
@media (min-width: 100em) { font-size: 112.5%; } }
@media print { * { background-color: transparent !important; color: #000 !important; }
nav, footer { display: none; } }
body { margin: 0; cursor: default; }
sub, sup { vertical-align: baseline; position: relative; top: -0.4em; font-size: 0.75em; } `} />
<Head> {/* * Shouldn't be set in `_document`: * https://github.com/vercel/next.js/blob/master/errors/no-document-viewport-meta.md */} <meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content={rawColors.primary as string} /> </Head>
<Flex sx={{ flexDirection: 'column', minHeight: '100vh' }}> <Nav />
<Container as="main" id="main-content" sx={{ flex: 1 }}> {children} </Container>
<Footer /> </Flex> </React.Fragment> )}
export default Layout