From 8f1cc5fab396794756391d4b688586f0024a1f74 Mon Sep 17 00:00:00 2001
From: Mitchell Hashimoto <mitchell.hashimoto@gmail.com>
Date: Fri, 6 Oct 2023 07:35:09 -0700
Subject: [PATCH] website: put ghostty icon in top

---
 website/app/vt/layout.tsx | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/website/app/vt/layout.tsx b/website/app/vt/layout.tsx
index c67ca1f15..36de63199 100644
--- a/website/app/vt/layout.tsx
+++ b/website/app/vt/layout.tsx
@@ -1,13 +1,21 @@
+import Image from "next/image";
+import Link from "next/link";
 import "@/styles/code.css";
 
 export default function Layout({ children }: { children: React.ReactNode }) {
   return (
-    <div className="flex justify-center font-mono mt-8">
-      <div className="flex-1"></div>
-      <div className="w-1/2 max-w-[800px] prose prose-h1:text-base prose-h1:font-bold prose-h2:text-base prose-h2:font-bold prose-h3:text-base prose-h3:font-bold prose-p:text-base prose-h1:m-0 prose-h1:mb-1.5 prose-h2:m-0 prose-h2:mb-1.5 prose-h3:m-0 prose-h3:mb-1.5 prose-invert">
-        {children}
+    <div className="max-w-[850px] justify-center ml-auto mr-auto">
+      <div className="mt-4 mb-4">
+        <Link href="/">
+          <Image src="/icon.png" width={50} height={50} alt="Ghostty Logo" />
+        </Link>
+      </div>
+
+      <div className="font-mono">
+        <div className="max-w-full prose prose-h1:text-base prose-h1:font-bold prose-h2:text-base prose-h2:font-bold prose-h3:text-base prose-h3:font-bold prose-p:text-base prose-h1:m-0 prose-h1:mb-1.5 prose-h2:m-0 prose-h2:mb-1.5 prose-h3:m-0 prose-h3:mb-1.5 prose-invert">
+          {children}
+        </div>
       </div>
-      <div className="flex-1"></div>
     </div>
   );
 }