BIG progress

2 files changed, 39 insertions, 2 deletions

diff --git a/pages/_app.tsx b/pages/_app.tsx
index 8b4d14a..07acb34 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -1,4 +1,7 @@
-import '../styles/globals.css'
+import '../styles/colors.css';
+import '../styles/layout.css';
+import '../styles/globals.css';
+import '../styles/navbarItem.css';
 
 export default function Blog({ Component, pageProps }) {
 	return <Component {...pageProps} />
diff --git a/pages/index.tsx b/pages/index.tsx
index 6bb8b72..e76b666 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,5 +1,39 @@
+import Seperator from '../components/articleSeperator';
+import NavbarItem from '../components/navbarItem';
+
+import HomeRoundedIcon from '@material-ui/icons/HomeRounded';
+import SearchRoundedIcon from '@material-ui/icons/SearchRounded';
+
 export default function Home() {
 	return <div>
-		<h1>Hello World!</h1>
+		<div className="centeredPage">
+			<div className="titleWrapper">
+				<h1>Loek’s excruciatingly interesting blog</h1>
+				<p className="subtile">Loek heeft dit geschreven</p>
+			</div>
+			<div className="navAreaWrapper">
+				<div className="sticky">
+					<NavbarItem icon={<HomeRoundedIcon/>} title="Home" href="#"/>
+					<NavbarItem icon={<SearchRoundedIcon/>} title="Search for posts" href="#"/>
+				</div>
+			</div>
+			<div className="contentWrapper">
+				<p>
+					Lorem ipsum <a>dolor</a> sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Gravida dictum fusce ut placerat orci nulla pellentesque. Laoreet id donec ultrices tincidunt arcu. Tortor aliquam nulla facilisi cras fermentum odio eu feugiat. A scelerisque purus semper eget duis at tellus. A iaculis at erat pellentesque adipiscing commodo elit at imperdiet. Arcu bibendum at varius vel pharetra vel turpis nunc eget. Euismod in pellentesque massa placerat duis. Lorem ipsum dolor sit amet consectetur adipiscing elit. Ultrices in iaculis nunc sed augue lacus. Vestibulum mattis ullamcorper velit sed. Adipiscing diam donec adipiscing
+				</p>
+				<a href="https://blog.pipeframe.xyz">Here's a link</a>
+
+				<Seperator/>
+				<p>
+					Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Gravida dictum fusce ut placerat orci nulla pellentesque. Laoreet id donec ultrices tincidunt arcu. Tortor aliquam nulla facilisi cras fermentum odio eu feugiat. A scelerisque purus semper eget duis at tellus. A iaculis at erat pellentesque adipiscing commodo elit at imperdiet. Arcu bibendum at varius vel pharetra vel turpis nunc eget. Euismod in pellentesque massa placerat duis. Lorem ipsum dolor sit amet consectetur adipiscing elit. Ultrices in iaculis nunc sed augue lacus. Vestibulum mattis ullamcorper velit sed. Adipiscing diam donec adipiscing
+				</p>
+				<p>
+					Lorem ipsum <a>dolor</a> sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Gravida dictum fusce ut placerat orci nulla pellentesque. Laoreet id donec ultrices tincidunt arcu. Tortor aliquam nulla facilisi cras fermentum odio eu feugiat. A scelerisque purus semper eget duis at tellus. A iaculis at erat pellentesque adipiscing commodo elit at imperdiet. Arcu bibendum at varius vel pharetra vel turpis nunc eget. Euismod in pellentesque massa placerat duis. Lorem ipsum dolor sit amet consectetur adipiscing elit. Ultrices in iaculis nunc sed augue lacus. Vestibulum mattis ullamcorper velit sed. Adipiscing diam donec adipiscing
+				</p>
+				<p>
+					Lorem ipsum <a>dolor</a> sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Gravida dictum fusce ut placerat orci nulla pellentesque. Laoreet id donec ultrices tincidunt arcu. Tortor aliquam nulla facilisi cras fermentum odio eu feugiat. A scelerisque purus semper eget duis at tellus. A iaculis at erat pellentesque adipiscing commodo elit at imperdiet. Arcu bibendum at varius vel pharetra vel turpis nunc eget. Euismod in pellentesque massa placerat duis. Lorem ipsum dolor sit amet consectetur adipiscing elit. Ultrices in iaculis nunc sed augue lacus. Vestibulum mattis ullamcorper velit sed. Adipiscing diam donec adipiscing
+				</p>
+			</div>
+		</div>
 	</div>
 }