chore: fiddling with numbers

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)
+							calc(var(--cntr-pad-b-start) / 2)
-							- var(--logo-size)
+							- calc(var(--logo-size) / 2)
-							- 2rem
+							+ 1rem
 						);
 						left: var(--cntr-pad-inline);
 						background: none;

src/index.css

@@ -66,6 +66,7 @@ h2 {
 
 h1 {
 	font-size: min(15vw, 6rem);
+	line-height: 0.8em;
 }
 
 h2 {

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;