From 0e6e0b49565f4e0f71129893a4c7ede0aad60a1e Mon Sep 17 00:00:00 2001
From: ckie <git-525ff67@ckie.dev>
Date: Tue, 22 Oct 2024 20:56:01 +0300
Subject: [PATCH] space (primarily index) out more

---
 src/main.css            |  3 ++-
 src/routes/+page.svelte | 13 +++++++------
 2 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/src/main.css b/src/main.css
index 8238536..ad27df2 100644
--- a/src/main.css
+++ b/src/main.css
@@ -50,6 +50,7 @@ h2:not(.no-heading-style) {
     }
     .container {
         /* container like the builtin one, but limited to lg */
-        @apply max-w-full sm:max-w-[640px] md:max-w-[768px] lg:max-w-[1024px];
+        /* lg diverges from the canonical lg size defined in tailwind.config */
+        @apply max-w-full sm:max-w-[640px] md:max-w-[768px] lg:max-w-[1200px];
     }
 }
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 81c8b9f..ce85de1 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -6,7 +6,7 @@
 	import forkGraph from "./fork.svg?raw";
 </script>
 
-<div class="flex flex-col gap-8">
+<div class="flex flex-col gap-12">
 	<div>
 		<h1>An all-encompassing, declarative<br> <span class="text-blue-800">package ecosystem</span>.</h1>
 		<!-- <p class="text-xl lg:text-2xl">Build your *nix programs with <b>{PKGS}</b>'s extensive collection of <b>68368</b> packages<wbr>
@@ -23,9 +23,10 @@
 			{DISTRO} — our linux distribution
 		</h2>
 		<div class="grid lg:grid-cols-[1.15fr,auto,1fr] gap-2 items-end">
-			<div class="clear-left text-xl">
+			<div class="clear-left text-xl flex flex-col h-full">
 				Gain certainty in your deployed system configuration by
 				replacing your opaque state with code.
+				<div class="grow"></div>
 				<div class="text-sm bg-blue-50 p-2 rounded-md drop-shadow mt-2">
 					<Highlight
 						language={nix} code={demo1}
@@ -53,7 +54,7 @@
 		<h2 class="border-t-2 border-teal-800 w-fit ms-auto">
 			a reimagining of the NixOS community
 		</h2>
-		<div class="grid lg:grid-cols-[1.1fr,1fr] gap-4">
+		<div class="grid lg:grid-cols-[1.1fr,1fr] gap-12">
 			<div class="float-right drop-shadow flex flex-col rounded">
 				<!-- screenshot taken as Responsive (1500x800), DPR=1, Zoom=150% in Firefox  -->
 				<enhanced:img src="./gerrit.png?format=png"
@@ -71,8 +72,8 @@
 					allowing everyone to participate.
 				</p>
 
-				<div class="lg:h-0">
-					<enhanced:img src="./fork.svg" class="lg:w-[75%] mx-auto">
+				<div class="lg:h-0 mt-4">
+					<enhanced:img src="./fork.svg" class="lg:w-[75%] max-w-[400px] mx-auto">
 				</div>
 			</div>
 		</div>
@@ -82,7 +83,7 @@
 		<h2 class="border-t-2 border-teal-800 w-fit">
 			…and much more!
 		</h2>
-		<div class="grid lg:grid-cols-[1fr,1fr] gap-4">
+		<div class="grid lg:grid-cols-[1fr,1fr]">
 			<div class="clear-left text-xl">
 				With <b>{DISTRO}</b> and <b>{PKGS}</b>, you can:
 				<ul class="ms-2 list-disc list-inside text-lg">