feat(blog): move close to end, add ESC keybind

Signed-off-by: Muthu Kumar <muthukumar@thefeathers.in>

src/pages/blog/Home.tsx

@@ -1,6 +1,6 @@
 import { css } from "@emotion/css";
 import React, { useEffect, useState } from "react";
-import { Link, useLocation } from "react-router-dom";
+import { Link, useLocation, useNavigate } from "react-router-dom";
 import { Spacer } from "../../components/Spacer";
 import { ArticleSubHeader } from "./components/ArticleSubHeader";
 import { BlogPost } from "./components/BlogContent";
@@ -59,6 +59,7 @@ const Header: React.FC = () => {
 
 const BlogHome: React.FC = () => {
 	const location = useLocation();
+	const navigate = useNavigate();
 
 	const isArticleOpen = Boolean(location.pathname.split("/blog")[1]);
 	const [isAsideClosed, setAsideClosed] = useState(isArticleOpen);
@@ -68,6 +69,17 @@ const BlogHome: React.FC = () => {
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [isArticleOpen]);
 
+	useEffect(() => {
+		if (!isArticleOpen) return;
+
+		const handler = (e: KeyboardEvent) =>
+			e.key === "Escape" && navigate("/blog");
+
+		document.addEventListener("keydown", handler);
+		return () => document.removeEventListener("keydown", handler);
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [isArticleOpen]);
+
 	return (
 		<div
 			data-home

src/pages/blog/components/BlogContent.tsx

@@ -161,6 +161,7 @@ export const BlogPost: React.FC = () => {
 					min-height: 1rem;
 					min-width: 1rem;
 					cursor: pointer;
+					align-self: flex-end;
 				`}
 			/>
 			<div