Skip to content

Commit 56abffc

Browse files
cassidoocassidoo
committed
Clean up project, add example header and footer
1 parent 5cf4050 commit 56abffc

File tree

7 files changed

+46
-157
lines changed

7 files changed

+46
-157
lines changed

‎components/Footer.js

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
export default function Footer() {
2+
return (
3+
<>
4+
<footer>
5+
Made with{' '}
6+
<img src="/netliheart.svg" alt="Netlify Logo" className="logo" /> for
7+
you
8+
</footer>
9+
<style jsx>{`
10+
footer {
11+
width: 100%;
12+
height: 100px;
13+
border-top: 1px solid #eaeaea;
14+
display: flex;
15+
justify-content: center;
16+
align-items: center;
17+
}
18+
19+
.logo {
20+
height: 1em;
21+
margin: 5px;
22+
}
23+
`}</style>
24+
</>
25+
)
26+
}

‎components/Header.js

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export default function Header() {
2+
return <h1 className="title">Welcome to my app!</h1>
3+
}

‎pages/api/hello.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,5 +2,5 @@
22

33
export default (req, res) => {
44
res.statusCode = 200
5-
res.json({ name: 'John Doe' })
5+
res.json({ name: 'Jane Doe' })
66
}

‎pages/index.js

+7-152
Original file line numberDiff line numberDiff line change
@@ -1,68 +1,27 @@
11
import Head from 'next/head'
2+
import Header from '@components/Header'
3+
import Footer from '@components/Footer'
24

35
export default function Home() {
46
return (
57
<div className="container">
68
<Head>
7-
<title>Create Next App</title>
9+
<title>Next Stater!</title>
810
<link rel="icon" href="/favicon.ico" />
911
</Head>
1012

1113
<main>
12-
<h1 className="title">
13-
Welcome to <a href="https://nextjs.org">Next.js!</a>
14-
</h1>
15-
14+
<Header />
1615
<p className="description">
1716
Get started by editing <code>pages/index.js</code>
1817
</p>
19-
20-
<div className="grid">
21-
<a href="https://nextjs.org/docs" className="card">
22-
<h3>Documentation &rarr;</h3>
23-
<p>Find in-depth information about Next.js features and API.</p>
24-
</a>
25-
26-
<a href="https://nextjs.org/learn" className="card">
27-
<h3>Learn &rarr;</h3>
28-
<p>Learn about Next.js in an interactive course with quizzes!</p>
29-
</a>
30-
31-
<a
32-
href="https://github.com/zeit/next.js/tree/master/examples"
33-
className="card"
34-
>
35-
<h3>Examples &rarr;</h3>
36-
<p>Discover and deploy boilerplate example Next.js projects.</p>
37-
</a>
38-
39-
<a
40-
href="https://vercel.com/import?filter=next.js&utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
41-
className="card"
42-
>
43-
<h3>Deploy &rarr;</h3>
44-
<p>
45-
Instantly deploy your Next.js site to a public URL with Vercel.
46-
</p>
47-
</a>
48-
</div>
4918
</main>
5019

51-
<footer>
52-
<a
53-
href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
54-
target="_blank"
55-
rel="noopener noreferrer"
56-
>
57-
Powered by{' '}
58-
<img src="/vercel.svg" alt="Vercel Logo" className="logo" />
59-
</a>
60-
</footer>
20+
<Footer />
6121

6222
<style jsx>{`
6323
.container {
64-
min-height: 100vh;
65-
padding: 0 0.5rem;
24+
height: 100vh;
6625
display: flex;
6726
flex-direction: column;
6827
justify-content: center;
@@ -78,115 +37,11 @@ export default function Home() {
7837
align-items: center;
7938
}
8039
81-
footer {
82-
width: 100%;
83-
height: 100px;
84-
border-top: 1px solid #eaeaea;
85-
display: flex;
86-
justify-content: center;
87-
align-items: center;
88-
}
89-
90-
footer img {
91-
margin-left: 0.5rem;
92-
}
93-
94-
footer a {
95-
display: flex;
96-
justify-content: center;
97-
align-items: center;
98-
}
99-
100-
a {
101-
color: inherit;
102-
text-decoration: none;
103-
}
104-
105-
.title a {
106-
color: #0070f3;
107-
text-decoration: none;
108-
}
109-
110-
.title a:hover,
111-
.title a:focus,
112-
.title a:active {
113-
text-decoration: underline;
114-
}
115-
116-
.title {
117-
margin: 0;
118-
line-height: 1.15;
119-
font-size: 4rem;
120-
}
121-
122-
.title,
123-
.description {
124-
text-align: center;
125-
}
126-
127-
.description {
128-
line-height: 1.5;
129-
font-size: 1.5rem;
130-
}
131-
13240
code {
13341
background: #fafafa;
13442
border-radius: 5px;
13543
padding: 0.75rem;
136-
font-size: 1.1rem;
137-
font-family: Menlo, Monaco, Lucida Console, Liberation Mono,
138-
DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace;
139-
}
140-
141-
.grid {
142-
display: flex;
143-
align-items: center;
144-
justify-content: center;
145-
flex-wrap: wrap;
146-
147-
max-width: 800px;
148-
margin-top: 3rem;
149-
}
150-
151-
.card {
152-
margin: 1rem;
153-
flex-basis: 45%;
154-
padding: 1.5rem;
155-
text-align: left;
156-
color: inherit;
157-
text-decoration: none;
158-
border: 1px solid #eaeaea;
159-
border-radius: 10px;
160-
transition: color 0.15s ease, border-color 0.15s ease;
161-
}
162-
163-
.card:hover,
164-
.card:focus,
165-
.card:active {
166-
color: #0070f3;
167-
border-color: #0070f3;
168-
}
169-
170-
.card h3 {
171-
margin: 0 0 1rem 0;
172-
font-size: 1.5rem;
173-
}
174-
175-
.card p {
176-
margin: 0;
177-
font-size: 1.25rem;
178-
line-height: 1.5;
179-
}
180-
181-
.logo {
182-
height: 1em;
183-
}
184-
185-
@media (max-width: 600px) {
186-
.grid {
187-
width: 100%;
188-
flex-direction: column;
189-
}
44+
font-family: Menlo, Monaco, Lucida Console, Courier New, monospace;
19045
}
19146
`}</style>
19247

‎public/favicon.ico

-13.6 KB
Binary file not shown.

‎public/netliheart.svg

+9
Loading

‎public/vercel.svg

-4
This file was deleted.

0 commit comments

Comments
 (0)