add fork graph, <title>, margin

src/routes/+layout.svelte

@@ -1,10 +1,19 @@
 <script>
+	import { page } from "$app/stores";
 	import "../main.css";
 	import Footer from "./footer.svelte";
 	globalThis.PKGS = "petalpkgs";
 	globalThis.DISTRO = "FleurixOS";
 </script>
 
+<svelte:head>
+    <title>floral.systems</title>
+    <meta property="og:title" content="floral.systems" />
+    <meta property="og:type" content="website" />
+    <meta property="og:url" content={$page.url} />
+    <meta name="theme-color" content="#136951">
+</svelte:head>
+
 <div class="flex flex-col text-blue-950">
 	<nav class="min-h-16 h-16 bg-teal-700 text-coral-50 mb-2">
 		<div class="mx-auto container flex h-full justify-between">
@@ -28,7 +37,9 @@
 	</nav>
 
 	<section class="container mx-auto">
+		<div class="m-1">
 			<slot />
+		</div>
 	</section>
 
 	<!-- spacer to eat up deadspace if page would be smaller than viewport y -->

src/routes/+page.svelte

@@ -3,13 +3,9 @@
 	import nix from "svelte-highlight/languages/nix";
 
 	import demo1 from "./demo1/vm.nix?raw";
+	import forkGraph from "./fork.svg?raw";
 </script>
 
-<!-- tmp!!! -->
-<svelte:head>
-  <link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.22.0/themes/prism.min.css" rel="stylesheet" />
-</svelte:head>
-
 <style>
 	h1 {
 		@apply text-4xl lg:text-5xl my-4;
@@ -19,7 +15,7 @@
 	}
 </style>
 
-<div class="max-md:text-center flex flex-col gap-8">
+<div class="flex flex-col gap-8">
 	<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>
@@ -35,7 +31,7 @@
 		<h2 class="border-t-2 border-teal-800 w-fit">
 			{DISTRO} — our linux distribution
 		</h2>
-		<div class="grid grid-cols-[1.15fr,auto,1fr] gap-2 items-end">
+		<div class="grid lg:grid-cols-[1.15fr,auto,1fr] gap-2 items-end">
 			<div class="clear-left text-xl">
 				Gain certainty in your deployed system configuration by
 				replacing your opaque state with code.
@@ -66,7 +62,7 @@
 		<h2 class="border-t-2 border-teal-800 w-fit ms-auto">
 			a reimagining of the NixOS community
 		</h2>
-		<div class="grid grid-cols-[1.1fr,1fr] gap-4">
+		<div class="grid lg:grid-cols-[1.1fr,1fr] gap-4">
 			<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"
@@ -83,6 +79,10 @@
 					we pride ourselves on creating clear, intuitive tooling
 					allowing everyone to participate.
 				</p>
+
+				<div class="lg:h-0">
+					<enhanced:img src="./fork.svg" class="lg:w-[80%] mx-auto">
+				</div>
 			</div>
 		</div>
 	</div>
@@ -91,18 +91,18 @@
 		<h2 class="border-t-2 border-teal-800 w-fit">
 			…and much more!
 		</h2>
-		<div class="grid grid-cols-[1fr,1fr] gap-4">
+		<div class="grid lg:grid-cols-[1fr,1fr] gap-4">
 			<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">
 					<li>configure your desktop systems to be setup <i>just</i>-right out of the box with
 						<a href="https://github.com/nix-community/home-manager/?tab=readme-ov-file#home-manager-using-nix" target="_blank"
-						>home-manager</a>.
+						>home-manager</a>,
 					</li>
 					<li>deploy clusters of systems with <a href="https://github.com/zhaofengli/colmena" target="_blank">colmena</a>,</li>
 					<li>provision your cloud resources with <a href="https://terranix.org/index.html" target="_blank">terranix</a></li>
-					<li>develop software in repeatable shell environments with <code>nix-shell</code>,
-						<wbr>to ensure it builds on <i>everyone</i>'s computer.</li>
+					<li>and develop software in repeatable shell environments with <code>nix-shell</code>,
+						<wbr>to ensure it builds on <i>everyone's</i> computer.</li>
 				</ul>
 			</div>
 			<div class="float-right drop-shadow flex flex-col rounded">

src/routes/footer.svelte

@@ -15,7 +15,7 @@
 				target="_blank"
 				rel="license noopener noreferrer"
 			>CC BY-SA 4.0</a>
-			<div class="flex ml-auto w-fit gap-1
+			<div class="mt-1 flex ml-auto w-fit gap-1
 						*:h-[22px] *:align-text-bottom">
 				<enhanced:img src="$lib/assets/cc/cc.svg" alt="" />
 				<enhanced:img src="$lib/assets/cc/by.svg" alt="" />

src/routes/fork.mermaid

@@ -0,0 +1,17 @@
+%% edit on https://mermaid.live/edit with light theme, then hit export svg
+%% and remove the fontawesome hotlink and replace 9370DB with 494bac (colors.blue.700)
+stateDiagram-v2
+    direction LR
+    nixorg: NixOS.org
+    state nixorg {
+        Nixpkgs
+        NixOS
+        CppNix
+    }
+    state Floral {
+        Petalpkgs
+        FleurixOS
+    }
+    Nixpkgs --> Petalpkgs
+    NixOS --> FleurixOS
+    CppNix --> Lix