From 383287dcc804f63a176da2b9449364737d470d45 Mon Sep 17 00:00:00 2001
From: Ethan Anderson <ethan.anderson00@gmail.com>
Date: Wed, 10 Feb 2021 20:40:45 +0000
Subject: [PATCH] Fixed some issues with safari not supporting flex with gap

---
 components/ProjectCard/ProjectCard.module.css |  1 +
 components/SocialLinks/SocialLinks.module.css | 10 ++++++++--
 pages/posts/[slug].tsx                        | 19 +++++++++++++------
 styles/Home.module.css                        |  3 +--
 4 files changed, 23 insertions(+), 10 deletions(-)

diff --git a/components/ProjectCard/ProjectCard.module.css b/components/ProjectCard/ProjectCard.module.css
index 9356955..a1f6cae 100644
--- a/components/ProjectCard/ProjectCard.module.css
+++ b/components/ProjectCard/ProjectCard.module.css
@@ -5,6 +5,7 @@
   color: var(--light-text);
   padding: 40px;
   border-radius: 25px;
+  margin-bottom: 40px;
 }
 
 .projectCard h2 {
diff --git a/components/SocialLinks/SocialLinks.module.css b/components/SocialLinks/SocialLinks.module.css
index 10a1bda..710431d 100644
--- a/components/SocialLinks/SocialLinks.module.css
+++ b/components/SocialLinks/SocialLinks.module.css
@@ -1,5 +1,11 @@
 .icons {
   display: flex;
-  flex-wrap: wrap;
-  gap: 20px;
+}
+
+.icons a {
+  margin-right: 20px;
+}
+
+.icons a:last-of-type {
+  margin-right: unset;
 }
diff --git a/pages/posts/[slug].tsx b/pages/posts/[slug].tsx
index 154454c..84d1e81 100644
--- a/pages/posts/[slug].tsx
+++ b/pages/posts/[slug].tsx
@@ -3,6 +3,7 @@ import matter from "gray-matter";
 import hydrate from "next-mdx-remote/hydrate";
 import renderToString from "next-mdx-remote/render-to-string";
 import path from "path";
+import Head from "next/head";
 import { postFilePaths, POSTS_PATH } from "../../utils/mdxUtils";
 import styles from "../../styles/Post.module.css";
 
@@ -17,13 +18,19 @@ const components = {
 export default function PostPage({ source, frontMatter }) {
   const content = hydrate(source, { components });
   return (
-    <div className={styles.post}>
-      <div className={styles.info}>
-        <h1>{frontMatter.title}</h1>
-        <p>{frontMatter.description}</p>
+    <>
+      <Head>
+        <title>{frontMatter.title}</title>
+        <meta name="description" content={frontMatter.description} />
+      </Head>
+      <div className={styles.post}>
+        <div className={styles.info}>
+          <h1>{frontMatter.title}</h1>
+          <p>{frontMatter.description}</p>
+        </div>
+        <main>{content}</main>
       </div>
-      <main>{content}</main>
-    </div>
+    </>
   );
 }
 
diff --git a/styles/Home.module.css b/styles/Home.module.css
index 8fcee74..25516a4 100644
--- a/styles/Home.module.css
+++ b/styles/Home.module.css
@@ -53,8 +53,7 @@
   position: relative;
   z-index: 1;
   display: flex;
-  flex-wrap: wrap;
-  gap: 40px 5px;
+  flex-direction: column;
   margin-top: 200px;
 }
 
-- 
2.51.2