componentize footer, refactor Container and layout classes
commit4ff38a40977e56e11093f900149ecb2284a7fd64
authorGavin Atkinson <gvnatknsn@protonmail.com>
dateMon 14 Jun 2021, 13:12 (5 years ago)
parent44b4acb
components/Container.js+2−2
@@ -1,7 +1,7 @@
11export default function Container({children}) {
22 return (
3− <div className='flexmin-h-screen w-screen justify-center'>
4− <div className='flex flex-col w-full max-w-screen-2xl'>
3+ <div className='flex min-h-screen w-screen justify-center'>
4+ <div className='flex flex-col w-full items-center'>
55 {children}
66 </div>
77 </div>
components/Footer.jsnew file+8
@@ -0,0 +1,8 @@
1+export default function Footer() {
2+ return (
3+ <footer className="pt-12 bg-yellow h-80 w-full">
4+
5+ </footer>
6+
7+ )
8+}
pages/blog.js+2−1
@@ -2,6 +2,7 @@ import Head from 'next/head'
22import Link from 'next/link'
33import { useState } from 'react';
44import Container from '../components/Container'
5+import Footer from '../components/Footer'
56import { getAllPosts } from '../lib/lib'
67
78function BackgroundImage(props) {
@@ -27,8 +28,8 @@ export default function Home({ posts }) {
2728 posts.map((post) => <div key={post.slug}>{post.title}</div>)
2829 }
2930 </section>
31+ <Footer/>
3032
31−
3233 </Container>
3334 )
3435}
pages/blog/[slug].js+3
@@ -5,6 +5,8 @@ import ErrorPage from '../404'
55import Container from '../../components/Container'
66import Markdown from '../../components/Markdown'
77import Header from '../../components/Header'
8+import Footer from '../components/Footer'
9+
810import {
911 name,
1012} from '../../lib/constants'
@@ -23,6 +25,7 @@ export default function Post({ post }) {
2325 <Markdown post={post} />
2426 </article>
2527 </section>
28+ <Footer />
2629 </Container>
2730 )
2831}
pages/index.js+2−3
@@ -3,6 +3,7 @@ import Link from 'next/link'
33import { useState } from 'react';
44import Container from '../components/Container'
55import Header from '../components/Header'
6+import Footer from '../components/Footer'
67import { getAllPosts } from '../lib/lib'
78
89function TabCarousel(props) {
@@ -155,10 +156,8 @@ export default function Home({ posts, events }) {
155156 </div>
156157 </section>
157158
158− <footer className="pt-12 bg-yellow h-80 w-full">
159+ <Footer />
159160
160− </footer>
161−
162161 </Container>
163162 )
164163}
styles/globals.css+6−5
@@ -23,15 +23,16 @@ p a {
2323}
2424
2525.layout-narrow {
26− padding-left: 16.6667%;
26+ /* padding-left: 16.6667%;
2727 padding-right: 16.6667%;
28− width: 100%;
28+ */
29+ width: 66.6667%;
2930}
3031
3132.layout-wide {
32− padding-left: 8.3334%;
33− padding-right: 8.3334%;
34− width: 100%;
33+ /* padding-left: 8.3334%;
34+ padding-right: 8.3334%; */
35+ width: 83.3334%;
3536}
3637
3738h1, .type-h1 {