elal
/
wychdev-nextjs
mirror of https://github.com/E-Almqvist/wychdev-nextjs
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Layouts & removed junk

Browse Source
burgermenu
E. Almqvist 2 years ago
parent fab7853d23
commit 6f31660bfd
7 changed files with 88 additions and 138 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 14
      components/footer.tsx
  2. 25
      components/header.tsx
  3. 3
      components/layout.tsx
  4. 13
      pages/_app.tsx
  5. 47
      pages/index.tsx
  6. 116
      styles/Home.module.css
  7. 8
      styles/globals.css

14
components/footer.tsx
Unescape View File

@ -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 (
<Footer>
<p>Footer</p>
</Footer>
)
}

25
components/header.tsx
Unescape View File

@ -3,12 +3,30 @@ import styled from 'styled-components'
const Header = styled.header` const Header = styled.header`
display: flex; display: flex;
gap: 1rem;
align-items: center; 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 () => { export default () => {
return ( return (
@ -17,6 +35,7 @@ export default () => {
<Nav> <Nav>
<Link href="/">Home</Link> <Link href="/">Home</Link>
<Link href="/projects">Projects</Link> <Link href="/projects">Projects</Link>
<a href="https://github.com/E-Almqvist" target="_blank">GitHub</a>
</Nav> </Nav>
</Header> </Header>
) )

3
components/layout.tsx
Unescape View File

@ -1,7 +1,8 @@
import Header from './header' import Header from './header'
import Footer from './footer' import Footer from './footer'
import {ReactNode} from 'react'
export default ({children}) => { export default ({children}: {children: ReactNode}) => {
return <> return <>
<Header /> <Header />
<main>{children}</main> <main>{children}</main>

13
pages/_app.tsx
Unescape View File

@ -1,8 +1,19 @@
import '../styles/globals.css' import '../styles/globals.css'
import type { AppProps } from 'next/app' 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) { function MyApp({ Component, pageProps }: AppProps) {
return <Component {...pageProps} /> const getLayout = Component.getLayout ?? ((page) => page)
return getLayout(<Component {...pageProps}/>)
} }
export default MyApp export default MyApp

47
pages/index.tsx
Unescape View File

@ -1,21 +1,38 @@
import type { NextPage } from 'next' // Stuff
import Head from 'next/head' import type {NextPageWithLayout} from './_app'
import styles from '../styles/Home.module.css' import type { ReactElement } from 'react'
import styled from 'styled-components' import Layout from '../components/layout'
import Header from 'components/header'
// 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 ( return (
<div className={styles.container}> <p>yo</p>
<Head>
<title>wych.dev</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<Header />
</div>
) )
} }
export default Home Page.getLayout = (page: ReactElement) => {
return <Layout>{page}</Layout>
}
export default Page
// const Home: NextPage = () => {
// return (
// <div className={styles.container}>
// <Head>
// <title>wych.dev</title>
// <link rel="icon" href="/favicon.ico" />
// </Head>
//
// <Header />
// </div>
// )
// }
//export default Home

116
styles/Home.module.css
Unescape View File

@ -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;
}
}

8
styles/globals.css
Unescape View File

@ -1,5 +1,9 @@
html, :root {
body { font-size: 16px;
color: #222;
}
html, body {
padding: 0; padding: 0;
margin: 0; margin: 0;
font-family: "IBM Plex Mono", monospace; font-family: "IBM Plex Mono", monospace;

Write Preview
Loading…
Cancel
Save