docs: refine docs site shell and hero layout

Author: Krablante

website/app/globals.css

@@ -17,6 +17,7 @@
   --site-gold: #dfb567;
   --site-gold-strong: #f2d081;
   --site-line: rgba(223, 181, 103, 0.18);
+  --site-shell-max: 120rem;
   --site-scrollbar-track: rgba(255, 243, 208, 0.035);
   --site-scrollbar-thumb: rgba(223, 181, 103, 0.56);
   --site-scrollbar-thumb-strong: rgba(242, 208, 129, 0.76);
@@ -258,6 +259,24 @@ html[data-theme="dark"] .nextra-sidebar {
   }
 }
 
+@media (min-width: 2000px) {
+  html.dark nav[class*="x:max-w-(--nextra-content-width)"],
+  html[data-theme="dark"] nav[class*="x:max-w-(--nextra-content-width)"] {
+    width: min(100%, var(--site-shell-max));
+    max-width: var(--site-shell-max) !important;
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  html.dark body > div[class*="x:max-w-(--nextra-content-width)"],
+  html[data-theme="dark"] body > div[class*="x:max-w-(--nextra-content-width)"] {
+    width: min(100%, var(--site-shell-max));
+    max-width: var(--site-shell-max) !important;
+    margin-left: auto;
+    margin-right: auto;
+  }
+}
+
 html.dark .nextra-body-typesetting-article h1,
 html.dark .nextra-body-typesetting-default h1,
 html.dark .nextra-body-typesetting-article h2,

website/app/page.module.css

@@ -2,14 +2,16 @@
   display: grid;
   gap: 3rem;
   padding: 3rem 1.5rem 4rem;
+  width: min(100%, var(--site-shell-max));
+  margin: 0 auto;
 }
 
 .hero {
   position: relative;
   display: grid;
   gap: 2rem;
   grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
-  align-items: start;
+  align-items: center;
   padding: 1.5rem 0 0.75rem;
 }
 
@@ -139,13 +141,15 @@
 
 .heroPanel {
   display: grid;
-  align-items: start;
-  padding-top: 1.25rem;
+  align-self: center;
+  align-items: center;
+  justify-items: end;
 }
 
 .codeCard {
   position: relative;
   overflow: hidden;
+  width: min(100%, 48rem);
   border: 1px solid rgba(223, 181, 103, 0.22);
   border-radius: 1.6rem;
   background:
@@ -299,6 +303,10 @@
     grid-template-columns: 1fr;
   }
 
+  .heroPanel {
+    justify-items: stretch;
+  }
+
   .points {
     grid-template-columns: 1fr;
   }