From efdf56df2e14d7367c92b6d6f51971d52930b0ed Mon Sep 17 00:00:00 2001
From: Muthu Kumar <muthukumar@thefeathers.in>
Date: Thu, 10 Apr 2025 03:10:11 +0530
Subject: [PATCH] chore: fiddling with numbers

---
 src/components/Container.tsx | 8 ++++----
 src/index.css                | 1 +
 src/pages/main/Home.tsx      | 8 ++++----
 3 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/src/components/Container.tsx b/src/components/Container.tsx
index 8d9764c..d697f7d 100644
--- a/src/components/Container.tsx
+++ b/src/components/Container.tsx
@@ -127,7 +127,7 @@ const Container: React.FC<{
 	return (
 		<div
 			className={css`
-				--cntr-pad-b-start: 10rem;
+				--cntr-pad-b-start: 12rem;
 				--cntr-pad-b-end: 8rem;
 				--cntr-pad-inline: 10vw;
 				--logo-size: 5rem;
@@ -166,9 +166,9 @@ const Container: React.FC<{
 						position: absolute;
 						/* prettier-ignore */
 						top: calc(
-							  var(--cntr-pad-b-start)
-							- var(--logo-size)
-							- 2rem
+							calc(var(--cntr-pad-b-start) / 2)
+							- calc(var(--logo-size) / 2)
+							+ 1rem
 						);
 						left: var(--cntr-pad-inline);
 						background: none;
diff --git a/src/index.css b/src/index.css
index 92a3076..b4ec713 100644
--- a/src/index.css
+++ b/src/index.css
@@ -66,6 +66,7 @@ h2 {
 
 h1 {
 	font-size: min(15vw, 6rem);
+	line-height: 0.8em;
 }
 
 h2 {
diff --git a/src/pages/main/Home.tsx b/src/pages/main/Home.tsx
index cf149e0..4170b5f 100644
--- a/src/pages/main/Home.tsx
+++ b/src/pages/main/Home.tsx
@@ -10,7 +10,7 @@ const Home: React.FC = () => {
 	return (
 		<Container
 			className={css`
-				--distance: 2rem;
+				--gap: 2.2rem;
 			`}>
 			<section>
 				<h1
@@ -23,7 +23,7 @@ const Home: React.FC = () => {
 				<FlickerList
 					style={{
 						// fiddle
-						marginTop: "calc(-1.7rem - 2px + var(--distance))",
+						marginTop: "calc(-1rem + var(--gap))",
 						marginLeft: "-0.1rem",
 						fontSize: "0.9rem",
 					}}
@@ -63,11 +63,11 @@ const Home: React.FC = () => {
 			<main
 				className={css`
 					/* fiddle */
-					margin-top: calc(-2.4rem + var(--distance));
+					margin-top: calc(-2.4rem + var(--gap));
 
 					display: flex;
 					flex-wrap: wrap;
-					gap: var(--distance);
+					gap: var(--gap);
 
 					& img {
 						image-rendering: pixelated;