From 53fc04e4ac0a9278158ed5ae44e58afcec58e7de Mon Sep 17 00:00:00 2001
From: Muthu Kumar <muthukumar@thefeathers.in>
Date: Sat, 2 Jul 2022 21:52:13 +0530
Subject: [PATCH] feat(blog): mobile-friendly responsiveness

Signed-off-by: Muthu Kumar <muthukumar@thefeathers.in>
---
 package.json              |  2 +-
 src/components/Spacer.tsx |  4 ++--
 src/pages/blog/Home.tsx   | 14 +++++++++++---
 3 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/package.json b/package.json
index 1d46a63..abc0f4e 100644
--- a/package.json
+++ b/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"
 	},
diff --git a/src/components/Spacer.tsx b/src/components/Spacer.tsx
index 3ab26b4..2f5f52e 100644
--- a/src/components/Spacer.tsx
+++ b/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),
-				height: rem(y),
+				minWidth: rem(x),
+				minHeight: rem(y),
 			}}
 		/>
 	);
diff --git a/src/pages/blog/Home.tsx b/src/pages/blog/Home.tsx
index edc72cf..973b0e4 100644
--- a/src/pages/blog/Home.tsx
+++ b/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;