feat(blog): mobile-friendly responsiveness

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

package.json

@@ -5,7 +5,7 @@
 	"type": "module",
 	"scripts": {
 		"start": "vite",
-		"build": "tsc && vite build",
+		"build": "pnpm blog && tsc && vite build",
 		"serve": "vite preview",
 		"blog": "node scripts/blog.js"
 	},

src/components/Spacer.tsx

@@ -15,8 +15,8 @@ export const Spacer: React.FC<Props> = ({ inline, x, y = 1 }) => {
 			className="spacer"
 			style={{
 				display: inline ? "inline-block" : "block",
-				width: rem(x),
+				minWidth: rem(x),
-				height: rem(y),
+				minHeight: rem(y),
 			}}
 		/>
 	);

src/pages/blog/Home.tsx

@@ -11,7 +11,6 @@ const Header: React.FC = () => {
 		<header
 			className={css`
 				padding-inline: 1rem;
-				margin-bottom: 4rem;
 			`}>
 			<div>
 				<h1
@@ -90,6 +89,14 @@ const BlogHome: React.FC = () => {
 							}
 						}
 					}
+
+					& > aside,
+					& > article {
+						@media screen and (max-width: 50rem) {
+							padding-block-start: 4rem;
+							padding-block-end: 6rem;
+						}
+					}
 				`,
 			)}>
 			<aside
@@ -101,10 +108,11 @@ const BlogHome: React.FC = () => {
 					display: flex;
 					flex-direction: column;
 					gap: 1rem;
-					padding: 8rem;
+					padding: 8vw;
 					max-width: 45rem;
 				`}>
 				<Header />
+				<Spacer y={2} />
 				{articles.map(article => {
 					const { title, snippet } = article;
 					const path = getBlogPath(article);
@@ -151,7 +159,7 @@ const BlogHome: React.FC = () => {
 						width: 100%;
 						overflow-y: auto;
 						overflow-x: hidden;
-						padding: 8rem;
+						padding: 8vw;
 						background-color: #262626;
 						flex: 3;
 						display: flex;