From 1c785e011952828c844ab015ccb839bbeb25b573 Mon Sep 17 00:00:00 2001
From: Nathan Knowler <nathan@knowler.dev>
Date: Sat, 27 Sep 2025 23:01:19 -0500
Subject: [PATCH] Use responsive friendly grid layout

---
 packages/site/site/styles.css | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/packages/site/site/styles.css b/packages/site/site/styles.css
index aab429a..4bfc905 100644
--- a/packages/site/site/styles.css
+++ b/packages/site/site/styles.css
@@ -12,12 +12,17 @@
 
 body {
   display: grid;
-  place-content: center;
-  padding: var(--size-7);
-  /* gap: var(--size-7); */
+  --gutter: minmax(var(--size-7), 1fr);
+  grid-template-columns: var(--gutter) [content-start] min(100% - var(--size-7) * 2, var(--size-content-3)) [content-end] var(--gutter);
+  padding-block: var(--size-7);
+  margin: 0;
   background-color: var(--surface-1);
 }
 
+main, footer {
+  grid-column: content;
+}
+
 header {
   padding: var(--spacing);
   border-bottom: 1px solid var(--gray-6);
@@ -92,7 +97,7 @@ h4 {
 pre[class*='language-'] {
   background-color: var(--surface-2);
   margin: auto;
-  min-width: 60ch;
+  min-inline-size: min(100%, 60ch);
   border-radius: var(--radius-3);
 }