Stuff

components/footer.tsx

@@ -1,33 +1,30 @@
 import styled from 'styled-components'
-import Link from "next/link"
+// import Link from "next/link"
 
 const FooterCont = styled.footer`
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	flex-direction: column;
-	/*border-top: var(--border-size) var(--border-type) var(--border-color);*/
-	margin-top: auto;
 	padding: 0 1.2rem;
 
 	color: var(--fg-faded);
 `
 
-const UList = styled.ul`
+// const UList = styled.ul`
-	display: flex;
+// 	display: flex;
-	flex-direction: row;
+// 	flex-direction: row;
-	list-style: none;
+// 	list-style: none;
-	gap: 2rem;
+// 	gap: 2rem;
-`
+// `
 
-const Spacer = styled.div`
+export const Spacer = styled.div`
 	flex: 1;
 `
 
 const Footer = () => {
 	return (
 		<>
-			<Spacer />
 			<FooterCont>
 				<p>&copy; Copyright {new Date().getFullYear()}</p>
 			</FooterCont>

components/layout.tsx

@@ -9,7 +9,6 @@ const Layout = ({children}: {children: ReactNode}) => {
 			<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 			<title>wych.dev</title>
 		</Head>
-		{/*<Header />*/}
 		<main>{children}</main>
 		<Footer />
 	</>)

pages/index.tsx

@@ -6,6 +6,7 @@ import Link from "next/link"
 import IconLink from "components/iconlink"
 import {faBook, faEnvelope, faFolderOpen, faUniversity} from "@fortawesome/free-solid-svg-icons"
 import {faGit, faGithub} from "@fortawesome/free-brands-svg-icons"
+import Footer, {Spacer} from "components/footer"
 
 export const Section = styled.section`
 	display: flex;
@@ -41,6 +42,11 @@ export const Section = styled.section`
 		width: 22rem;
 		height: auto;
 	}
+
+	footer {
+		margin-top: 1rem;
+		opacity: .5;
+	}
 `
 
 export const Code = styled.code`
@@ -131,6 +137,8 @@ const Page: NextPageWithLayout = () => {
 						GitHub: <a href="https://github.com/E-Almqvist" target="_blank" rel="noreferrer">github.com/E-Almqvist</a>
 					</li>
 				</CList>
+
+				<Footer />
 			</Section>
 		</>
 	)

styles/globals.css

@@ -35,6 +35,11 @@
 html {
 	background: var(--bg);
 	scroll-behavior: smooth;
+	scroll-snap-type: y mandatory;
+}
+
+section {
+	scroll-snap-align: center;
 }
 
 #__next { /*body*/