[blog] Misc header and footer fixes

public/assets/css/blogpost.css

@@ -1,7 +1,21 @@
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  width: 95%;
+  min-height: 100vh;
+}
+header {
+  width: 100%;
+}
+
+.card-wrap {
+  width: 100%;
+}
+
 .blog-card {
   padding: 60px;
-  margin: 0 auto;
   max-width: 1100px;
+  margin: auto;
   margin-top: 50px;
   color: var(--text-secondary);
 }
@@ -158,6 +172,11 @@
   margin-bottom: 30px;
 }
 
+footer {
+  padding-top: 40px;
+  margin-top: auto;
+}
+
 @media screen and (max-width: 800px) {
   .blog-card {
     padding: 40px;
@@ -177,5 +196,11 @@
   .blog-card {
     padding: 40px 5vw;
     border-radius: 0;
+    margin-top: 0;
+  }
+
+  footer {
+    width: 95%;
+    margin: auto auto 40px;
   }
 }

public/assets/css/dropdown.css

@@ -1,6 +1,6 @@
 .select-box {
   display: flex;
-  width: 200px;
+  width: 188px;
   flex-direction: column;
   position: relative;
   user-select: none;

views/blogpost.handlebars

@@ -4,21 +4,24 @@
 
 	{{> header}}
 
-	<div class="purple-card blog-card">
+	<div class="card-wrap">
+		<div class="purple-card blog-card">
 
-		<h1 class="title">{{{ postInfo.title }}}</h1>
-		<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>
+			<h1 class="title">{{{ postInfo.title }}}</h1>
+			<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 class="date">{{{ postInfo.date }}}</span>
+				</span>
 			</div>
-			<span>on
-				<span class="date">{{{ postInfo.date }}}</span>
-			</span>
-		</div>
 
-		{{{ htmlPost }}}
+			{{{ htmlPost }}}
+
+		</div>
 
 	</div>