diff --git a/blogposts/test.md b/blogposts/test.md
index d6267c5..0f97cb8 100644
--- a/blogposts/test.md
+++ b/blogposts/test.md
@@ -126,7 +126,9 @@ console.log(trueOrFalseJSON);
 
 <cite>Adapted from [blockquote: The Block Quotation element, from MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote)</cite>
 
-<iframe src="https://www.youtube.com/embed/HGoCNOFpWpo" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+<div class="aspectratio-fallback">
+  <iframe src="https://www.youtube.com/embed/HGoCNOFpWpo" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+</div>
 
 ![test](https://media.discordapp.net/attachments/413884110667251722/886474243662037062/image1.jpg)
 
diff --git a/blogposts/todo.md b/blogposts/todo.md
index 5628386..fc6be83 100644
--- a/blogposts/todo.md
+++ b/blogposts/todo.md
@@ -11,4 +11,4 @@ A todo list (delete file when done)
 - [ ] Redesign by the one true design god jvs
 - [x] Add mobile support
 - [x] Add css styling for all elements supported by markdown
-- [ ] Fix navbar
\ No newline at end of file
+- [X] Fix navbar
\ No newline at end of file
diff --git a/public/assets/css/blog.css b/public/assets/css/blog.css
index ea1efcf..a7fb59c 100644
--- a/public/assets/css/blog.css
+++ b/public/assets/css/blog.css
@@ -1,96 +1,79 @@
 .blog-card {
-	display: flex;
-	flex-flow: row nowrap;
-    padding: 0;
-	margin: 0 auto;
-	max-width: 1100px;
-	margin-bottom: 30px;
-    text-decoration: none;
-	position: relative;
-	border-radius: 10px;
-	overflow: hidden;
+  display: flex;
+  flex-flow: row nowrap;
+  padding: 0;
+  margin: 0 auto;
+  max-width: 1000px;
+  margin-bottom: 30px;
+  text-decoration: none;
+  position: relative;
+  border-radius: 10px;
+  overflow: hidden;
 }
 
 .blog-card .post-info {
-    flex: 2 0 45%;
-    padding: 40px;
-	display: flex;
-	flex-flow: column;
-	color: var(--text-secondary);
+  flex: 50%;
+  padding: 40px;
+  display: flex;
+  flex-flow: column;
+  color: var(--text-secondary);
 }
 
 .blog-card .post-info .title {
-    color: white;
-    margin: 0;
+  color: white;
+  margin: 0;
 }
 
 .blog-card .post-info .caption {
-	margin: 4px 0 32px 0;
+  margin: 4px 0 32px 0;
 }
 
 .blog-card .pub-info {
-	display: flex;
-	flex-wrap: wrap;
-	align-items: center;
-    justify-content: left;
-	margin-top: auto;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: left;
+  margin-top: auto;
 }
 
 .blog-card .pub-info .date {
-	font-weight: bold;
-	color: var(--text);
+  font-weight: bold;
+  color: var(--text);
 }
 
 .blog-card .pub-info > * {
-	margin-right: .5em;
-	margin-top: .2em;
+  margin-right: 0.5em;
+  margin-top: 0.2em;
 }
 
 .blog-card .profile {
-	display: inline-grid;
-	grid-template-columns: 30px auto;
-	grid-gap: 10px;
-	font-weight: bold;
-	color: var(--text);
-	align-items: center;
-    height: 32px;
+  display: inline-grid;
+  grid-template-columns: 30px auto;
+  grid-gap: 10px;
+  font-weight: bold;
+  color: var(--text);
+  align-items: center;
+  height: 32px;
 }
 .blog-card .profile img {
-	border-radius: 4px;
-	border: 1px solid rgba(255, 255, 255, 0.1);
-	max-width: 100%;
+  border-radius: 4px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  max-width: 100%;
 }
 
 .blog-card .cover {
-	flex: 45%;
+  flex: 50%;
 }
 
 @media screen and (max-width: 600px) {
-	.blog-card {
-		flex-flow: column;
-	}
-	.blog-card .post-info {
-		padding: 30px;
-	}
-	.blog-card .cover {
-		order: -1;
-		min-height: 200px;
-	}
+  .blog-card {
+    flex-flow: column;
+  }
+  .blog-card .post-info {
+    padding: 30px;
+  }
+  .blog-card .cover {
+    order: -1;
+    min-height: 200px;
+  }
 }
-
-@media screen and (max-width: 400px) {
-	.blog-card {
-		
-		max-width: none;
-		border-radius: 0;
-	  }
-	
-	  .wrapper {
-		width: 100%;
-	  }
-	
-	  header {
-		width: 90%;
-		margin: 35px auto;
-	  }
-}
\ No newline at end of file
diff --git a/public/assets/css/blogpost.css b/public/assets/css/blogpost.css
index 22993c5..5bb53a5 100644
--- a/public/assets/css/blogpost.css
+++ b/public/assets/css/blogpost.css
@@ -20,20 +20,44 @@
 
 .blog-card .title {
   margin: 0;
+  margin-bottom: 8px;
+}
+
+.blog-card .pub-info {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: left;
+  margin-top: auto;
+  margin-bottom: 30px;
+}
+.blog-card .pub-info .date {
+  font-weight: bold;
+  color: var(--text);
+}
+.blog-card .pub-info > * {
+  margin-right: 0.5em;
+  margin-top: 0.2em;
+}
+.blog-card .profile {
+  display: inline-grid;
+  grid-template-columns: 30px auto;
+  grid-gap: 10px;
+  font-weight: bold;
+  color: var(--text);
+  align-items: center;
+  height: 32px;
+}
+.blog-card .profile img {
+  margin: 0;
+  border-radius: 4px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  max-width: 100%;
 }
 
 .blog-card p,
 .post-info {
   color: var(--text-secondary);
-  margin-bottom: 30px;
-}
-.blog a {
-  color: var(--text-secondary);
-}
-.blog-card .date {
-  margin-bottom: 0;
-  font-weight: bold;
-  color: var(--text);
 }
 
 .blog-card img {
@@ -62,18 +86,34 @@
   border-radius: 4px;
   border: 1px solid rgba(255, 255, 255, 0.1);
 }
+/* Fallback for aspect-ratio since it's unsupported by some browsers (looking at you Safari) */
+@supports not (aspect-ratio: 16/9) {
+  .blog-card .aspectratio-fallback {
+    position: relative;
+    height: 0;
+    padding-top: 56.25%;
+  }
+  .blog-card iframe {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border: 0;
+  }
+}
 
 .blog-card table {
   border-radius: 4px;
   border-collapse: collapse;
-  background: #31375E;
+  background: #31375e;
   margin-bottom: 30px;
   overflow: hidden;
   color: var(--text-secondary);
 }
 .blog-card table th {
   padding: 8px 12px;
-  background: #3F4778;
+  background: #3f4778;
   color: white;
 }
 .blog-card table td {
@@ -82,7 +122,7 @@
   border-radius: inherit;
 }
 .blog-card table tr:nth-child(even) {
-  background: #2A2F50;
+  background: #2a2f50;
 }
 
 .blog-card pre code {
@@ -92,17 +132,18 @@
 
 .blog-card input[type="checkbox"] {
   appearance: none;
-	-webkit-appearance: none;
+  -webkit-appearance: none;
   display: inline-block;
-	background: var(--btn-secondary);
-	padding: 12px;
+  background: var(--btn-secondary);
+  padding: 12px;
   margin: 4px;
-	border-radius: 4px;
+  border-radius: 4px;
   vertical-align: -60%;
 }
 .blog-card input[type="checkbox"]:checked {
-	content: 'checkboxtest';
-  background: no-repeat center/contain url(../images/check.svg), var(--btn-secondary);
+  content: "checkboxtest";
+  background: no-repeat center/contain url(../images/check.svg),
+    var(--btn-secondary);
 }
 
 .blog-card hr {
@@ -117,32 +158,13 @@
   margin-bottom: 30px;
 }
 
-.blog-card .post-info {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-}
-.blog-card .post-info > * + * {
-  margin-left: 0.5em;
-}
-.blog-card .profile {
-  display: inline-grid;
-  grid-template-columns: 30px auto;
-  grid-gap: 10px;
-  font-weight: bold;
-  color: var(--text);
-  align-items: center;
-  height: 52px;
-}
-
 @media screen and (max-width: 800px) {
   .blog-card {
-    padding: 60px;
-    margin: 0;
-    max-width: none;
-    border-radius: 0;
+    padding: 40px;
   }
+}
 
+@media screen and (max-width: 600px) {
   .wrapper {
     width: 100%;
   }
@@ -151,10 +173,9 @@
     width: 90%;
     margin: 35px auto;
   }
-}
 
-@media screen and (max-width: 600px) {
   .blog-card {
     padding: 40px 5vw;
+    border-radius: 0;
   }
-}
\ No newline at end of file
+}
diff --git a/public/assets/css/main.css b/public/assets/css/main.css
index 8bb5ee0..0f975cd 100644
--- a/public/assets/css/main.css
+++ b/public/assets/css/main.css
@@ -571,6 +571,10 @@ footer {
 		display: none;
 	}
 
+	header .logo-link {
+		margin-right: 20px;
+	}
+
 	.hero-meta {
 		margin-top: 100px;
 	}
@@ -659,7 +663,7 @@ footer {
 
 }
 
-@media screen and (max-width: 550px) {
+@media screen and (max-width: 580px) {
 	.selected-locale .locale-names {
 		display: none;
 	}
@@ -674,17 +678,36 @@ footer {
 		width: fit-content;
 	}
 
+	.select-box .options-container {
+		width: 150px;
+		right: 12px;
+	}
+
 }
 
-@media screen and (max-width: 400px) {
-	.select-box .options-container {
-	width: 125px;
-	right: 12px;
+@media screen and (max-width: 480px) {
+	header .logo-link svg text {
+		display: none;
+	}
+
+	header .logo-link svg {
+		width: 39.876px;
+	}
+
+	header .logo-link {
+		margin-right: 10px;
+	}
+	header nav a {
+		margin: 0 10px;
 	}
 }
 
 @media screen and (max-width: 330px) {
-	.locale-dropdown {
+	.locale-dropdown .selected-locale {
+		width: 50px;
+	}
+	.locale-dropdown .selected-locale::after {
 		display: none;
 	}
+
 }
\ No newline at end of file
diff --git a/views/blog.handlebars b/views/blog.handlebars
index c83bb12..72542f5 100644
--- a/views/blog.handlebars
+++ b/views/blog.handlebars
@@ -23,8 +23,9 @@
 						<img class="profile-picture" src="{{{ this.postInfo.author_image }}}" alt>
 						<span>{{{ this.postInfo.author }}}</span>
 					</div>
-					<span>on</span>
-					<span class="date">{{{ this.postInfo.date }}}</span>
+					<span>on
+						<span class="date">{{{ this.postInfo.date }}}</span>
+					</span>
 				</div>
 			</div>
 			<div class="cover" style="background: no-repeat center/cover url({{this.postInfo.cover_image}}">
diff --git a/views/blogpost.handlebars b/views/blogpost.handlebars
index ecbbe5d..3d3a637 100644
--- a/views/blogpost.handlebars
+++ b/views/blogpost.handlebars
@@ -7,14 +7,15 @@
 	<div class="purple-card blog-card">
 
 		<h1 class="title">{{{ postInfo.title }}}</h1>
-		<div class="post-info">
+		<div class="pub-info">
 			<span>Published by</span>
 			<div class="profile">
 				<img class="profile-picture" src="{{ postInfo.author_image }}" alt="{{ postInfo.author }}">
 				<span>{{{ postInfo.author }}}</span>
 			</div>
-			<span>on</span>
-			<span class="date">{{{ postInfo.date }}}</span>
+			<span>on
+				<span class="date">{{{ postInfo.date }}}</span>
+			</span>
 		</div>
 
 		{{{ htmlPost }}}
diff --git a/views/partials/header.handlebars b/views/partials/header.handlebars
index 9c1f4b7..8b7ad7e 100644
--- a/views/partials/header.handlebars
+++ b/views/partials/header.handlebars
@@ -1,6 +1,6 @@
 <header>
 	<a href="/" class="logo-link">
-		<svg xmlns="http://www.w3.org/2000/svg" width="120" height="39.876" viewBox="0 0 120 39.876">
+		<svg xmlns="http://www.w3.org/2000/svg" width="120" height="39.876">
 			<g id="logo_type" data-name="logo type" transform="translate(-553 -467)">
 				<g id="logo" transform="translate(553 467)">
 					<rect id="XMLID_158_" width="39.876" height="39.876" fill="#9d6ff3" opacity="0" />