diff --git a/components/footer.tsx b/components/footer.tsx index e69de29..b7bada5 100644 --- a/components/footer.tsx +++ b/components/footer.tsx @@ -0,0 +1,14 @@ +import Link from "next/link" +import styled from 'styled-components' + +const Footer = styled.footer` + border-top: 1px dotted #aaa; +` + +export default () => { + return ( + + ) +} diff --git a/components/header.tsx b/components/header.tsx index 7c2ff09..fe20c82 100644 --- a/components/header.tsx +++ b/components/header.tsx @@ -3,12 +3,30 @@ import styled from 'styled-components' const Header = styled.header` display: flex; - gap: 1rem; align-items: center; - line-height: 1; + max-width: 70rem; + padding: 0 4rem; + border-bottom: 1px dotted #aaa; + + nav { + margin-left: auto; + float: right; + } ` -const Nav = styled(Header).attrs({as: "nav"})`` +const Nav = styled(Header).attrs({as: "nav"})` + gap: 1.5rem; + font-size: 1.5rem; + border: unset; + + a { + transition: .2s opacity + } + + a:hover { + opacity: .4; + } +` export default () => { return ( @@ -17,6 +35,7 @@ export default () => { ) diff --git a/components/layout.tsx b/components/layout.tsx index fbeb0a0..e585784 100644 --- a/components/layout.tsx +++ b/components/layout.tsx @@ -1,7 +1,8 @@ import Header from './header' import Footer from './footer' +import {ReactNode} from 'react' -export default ({children}) => { +export default ({children}: {children: ReactNode}) => { return <>
{children}
diff --git a/pages/_app.tsx b/pages/_app.tsx index 3f5c9d5..aa42bfa 100755 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -1,8 +1,19 @@ import '../styles/globals.css' import type { AppProps } from 'next/app' +import type { ReactElement, ReactNode } from 'react' +import type { NextPage } from 'next' + +export type NextPageWithLayout = NextPage & { + getLayout?: (page: ReactElement) => ReactNode +} + +type AppPropsWithLayout = AppProps & { + Component: NextPageWithLayout +} function MyApp({ Component, pageProps }: AppProps) { - return + const getLayout = Component.getLayout ?? ((page) => page) + return getLayout() } export default MyApp diff --git a/pages/index.tsx b/pages/index.tsx index 15de462..c9228c0 100755 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,21 +1,38 @@ -import type { NextPage } from 'next' -import Head from 'next/head' -import styles from '../styles/Home.module.css' -import styled from 'styled-components' -import Header from 'components/header' +// Stuff +import type {NextPageWithLayout} from './_app' +import type { ReactElement } from 'react' +import Layout from '../components/layout' +// Components +// import Head from 'next/head' +// import styles from '../styles/Home.module.css' +// import Header from 'components/header' -const Home: NextPage = () => { + +const Page: NextPageWithLayout = () => { return ( -
- - wych.dev - - - -
-
+

yo

) } -export default Home +Page.getLayout = (page: ReactElement) => { + return {page} +} +export default Page + +// const Home: NextPage = () => { +// return ( +//
+// +// wych.dev +// +// +// +//
+//
+// ) +// } + +//export default Home + + diff --git a/styles/Home.module.css b/styles/Home.module.css deleted file mode 100755 index 32a57d5..0000000 --- a/styles/Home.module.css +++ /dev/null @@ -1,116 +0,0 @@ -.container { - padding: 0 2rem; -} - -.main { - min-height: 100vh; - padding: 4rem 0; - flex: 1; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; -} - -.footer { - display: flex; - flex: 1; - padding: 2rem 0; - border-top: 1px solid #eaeaea; - justify-content: center; - align-items: center; -} - -.footer a { - display: flex; - justify-content: center; - align-items: center; - flex-grow: 1; -} - -.title a { - color: #0070f3; - text-decoration: none; -} - -.title a:hover, -.title a:focus, -.title a:active { - text-decoration: underline; -} - -.title { - margin: 0; - line-height: 1.15; - font-size: 4rem; -} - -.title, -.description { - text-align: center; -} - -.description { - margin: 4rem 0; - line-height: 1.5; - font-size: 1.5rem; -} - -.code { - background: #fafafa; - border-radius: 5px; - padding: 0.75rem; - font-size: 1.1rem; - font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, - Bitstream Vera Sans Mono, Courier New, monospace; -} - -.grid { - display: flex; - align-items: center; - justify-content: center; - flex-wrap: wrap; - max-width: 800px; -} - -.card { - margin: 1rem; - padding: 1.5rem; - text-align: left; - color: inherit; - text-decoration: none; - border: 1px solid #eaeaea; - border-radius: 10px; - transition: color 0.15s ease, border-color 0.15s ease; - max-width: 300px; -} - -.card:hover, -.card:focus, -.card:active { - color: #0070f3; - border-color: #0070f3; -} - -.card h2 { - margin: 0 0 1rem 0; - font-size: 1.5rem; -} - -.card p { - margin: 0; - font-size: 1.25rem; - line-height: 1.5; -} - -.logo { - height: 1em; - margin-left: 0.5rem; -} - -@media (max-width: 600px) { - .grid { - width: 100%; - flex-direction: column; - } -} diff --git a/styles/globals.css b/styles/globals.css index 1f035a5..64801a4 100755 --- a/styles/globals.css +++ b/styles/globals.css @@ -1,5 +1,9 @@ -html, -body { +:root { + font-size: 16px; + color: #222; +} + +html, body { padding: 0; margin: 0; font-family: "IBM Plex Mono", monospace;