added images + some styling + software post (empty)

9 files changed, 44 insertions, 30 deletions

diff --git a/components/card.tsx b/components/card.tsx
index 620ada7..7a6a472 100644
--- a/components/card.tsx
+++ b/components/card.tsx
@@ -3,12 +3,12 @@ import Tags from './tag';
 import { ArticleMeta } from '../pages/post/[id]';
 
 export default function PostCard(props: {
-	post: ArticleMeta
+	post: ArticleMeta;
 }) {
-	return <a className="postCard" href={"/post/" + props.post.id}>
-		{ props.post.cover && <img src={props.post.cover} className="cover"/> }
-		<h2 className="title">{props.post.title}</h2>
-		<strong className="subtitle">{props.post.subtitle}</strong>
-		{ props.post.tags?.length != 0 && <Tags tags={props.post.tags} /> }
-	</a>
+	return <a className='postCard' href={'/post/' + props.post.id}>
+		{props.post.cover && <img src={props.post.cover} className='cover' />}
+		<h2 className='title'>{props.post.title}</h2>
+		<strong className='subtitle'>{props.post.subtitle}</strong>
+		{props.post.tags?.length != 0 && <Tags tags={props.post.tags} />}
+	</a>;
 }
diff --git a/pages/_app.tsx b/pages/_app.tsx
index bbaf025..c85b6ea 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -1,6 +1,7 @@
 import Head from 'next/head';
 
 import '../styles/button.css';
+import '../styles/card.css';
 import '../styles/colors.css';
 import '../styles/globals.css';
 import '../styles/image.css';
@@ -8,7 +9,6 @@ import '../styles/layout.css';
 import '../styles/navbar.css';
 import '../styles/search.css';
 import '../styles/tags.css';
-import '../styles/card.css';
 
 export default function Blog({ Component, pageProps }) {
 	return <>
@@ -20,10 +20,9 @@ export default function Blog({ Component, pageProps }) {
 			<meta property='og:site_name' content="Loek's blog" />
 			<meta property='og:url' content='https://blog.pipeframe.xyz' />
 			<meta property='og:title' content="Loek's excruciatingly interesting blog" />
-			<meta property='og:description' content="This is my personal blog website" />
+			<meta property='og:description' content='This is my personal blog website' />
 			<meta property='og:type' content='website' />
 			<meta name='theme-color' content='#e16d82' />
-
 		</Head>
 		<Component {...pageProps} />
 	</>;
diff --git a/pages/index.tsx b/pages/index.tsx
index be1f9f4..f030f2c 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,15 +1,15 @@
 import Button from '../components/button';
+import PostCard from '../components/card';
 import Chapters, { chapter } from '../components/chapters';
 import Navbar, { NavbarItem } from '../components/navbar';
 import Seperator from '../components/seperator';
-import PostCard from '../components/card';
-import { PostsInfo } from './search';
 import { ArticleMeta, getStaticProps as getBlogPage, RenderedArticle } from './post/[id]';
+import { PostsInfo } from './search';
 
 import { useEffect, useState } from 'react';
 
 // edit this to change the post displayed on the home page and the pinned posts
-var posts = ['index'];
+var posts = ['index', 'software'];
 
 export default function Home(props: {
 	posts: Array<{
@@ -54,24 +54,22 @@ export default function Home(props: {
 			<div className='contentWrapper'>
 				{props.posts.map((post, index) => {
 					return <>
-						{ index != 0 && <h1>{post.props.meta.title}</h1> }
+						{index != 0 && <h1>{post.props.meta.title}</h1>}
 						<RenderedArticle content={post.props.content} />
-						{ index + 1 != props.posts.length && <Seperator /> }
-						{
-							index == 0 && <>
-								<h2>Recent posts</h2>
-								<div className="recentPosts">
-								{
-									posts.posts.slice(0, 4).map(post => {
-										return <PostCard post={post}/>;
-									})
-								}
-								</div>
+						{index + 1 != props.posts.length && <Seperator />}
+						{index == 0 && <>
+							<h2>Recent posts</h2>
+							<div className='recentPosts'>
+								{posts.posts.slice(0, 4).map(post => {
+									return <PostCard post={post} />;
+								})}
+							</div>
 
-								<div><Button text="Go to all posts" href="/search"/></div>
-								<Seperator />
-							</>
-						}
+							<div>
+								<Button text='Go to all posts' href='/search' />
+							</div>
+							<Seperator />
+						</>}
 					</>;
 				})}
 			</div>
diff --git a/posts/index.md b/posts/index.md
index 2b20062..06ef12d 100644
--- a/posts/index.md
+++ b/posts/index.md
@@ -3,6 +3,7 @@
 [meta]: <author> (Loek)
 [meta]: <date> (April 12 2021)
 [meta]: <tags> (home)
+[meta]: <cover> (/img/helloworld.png)
 
 Welcome to my blog page! This is where I post updates on things that I do such
 as:
diff --git a/posts/software.md b/posts/software.md
new file mode 100644
index 0000000..50d05e1
--- /dev/null
+++ b/posts/software.md
@@ -0,0 +1,13 @@
+[meta]: <title> (Software that I use)
+[meta]: <subtitle> (Desktop software, server software, phone apps, everything)
+[meta]: <author> (Loek)
+[meta]: <date> (April 13 2021)
+[meta]: <tags> (software, open source, server, phone)
+[meta]: <cover> (/img/software.png)
+
+## PC software
+
+## Server software
+
+## Phone apps
+
diff --git a/public/img/helloworld.png b/public/img/helloworld.png
new file mode 100644
index 0000000..dd067bf
--- /dev/null
+++ b/public/img/helloworld.png
diff --git a/public/img/software.png b/public/img/software.png
new file mode 100644
index 0000000..c4cf93b
--- /dev/null
+++ b/public/img/software.png
diff --git a/styles/card.css b/styles/card.css
index 8a589e2..0b3a20c 100644
--- a/styles/card.css
+++ b/styles/card.css
@@ -16,6 +16,7 @@
 	border-radius: 6px;
 	max-height: 220px;
 	object-fit: cover;
+	margin-bottom: 6px;
 }
 
 .postCard .title {
diff --git a/styles/tags.css b/styles/tags.css
index 5e6af11..bf1197b 100644
--- a/styles/tags.css
+++ b/styles/tags.css
@@ -1,5 +1,5 @@
 .tags {
-	margin-top: 12px;
+	margin-top: 6px;
 }
 
 .tags .tag {
@@ -15,6 +15,8 @@
 
 	position: relative;
 	z-index: 1;
+
+	margin-top: 6px;
 }
 
 @media (prefers-color-scheme: light) {