fix blog + mobile layout issues

src/components/blogList.astro

@@ -6,11 +6,11 @@ const posts = allPosts.map(item => (Object.assign({}, item.frontmatter, {url: it
 <div>
 {posts.map((post) => {
 	if (!post.wip) { return (
-	<a href={post.url} style="text-decoration: none;">
-		<p>
-			<b>{post.title}</b> - {post.pubDate}<br>
+	<a href={post.url}>
+		<div class="main-content" style="margin-bottom: 10px; font-size: 125%;">
+			<div><b>{post.title}</b> - {post.pubDate}<br></div>
 			<i>{post.description}</i>
-		</p>
+		</div>
 	</a>
 )}})}
 </div>

src/css/base.scss

@@ -3,6 +3,13 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
+  text-align: center;
+  @media (max-width: 470px) {
+    margin-bottom: 132px;
+  }
+  @media (min-width: 470px) {
+    margin-bottom: 3.4375em;
+  }
 }
 
 .blog-content {
@@ -12,6 +19,7 @@
 }
 
 .footer {
+  text-align: left; //Why does text-align being center in .main-content affect the footer at all?!
   position: fixed;
   display: flex;
   flex-grow: 1;