From 931dbe3f9e09ea72542bfb80ac7aa8366ab94f2e Mon Sep 17 00:00:00 2001
From: "Zed A. Shaw" <zed.shaw@gmail.com>
Date: Tue, 16 Sep 2025 01:18:53 -0400
Subject: [PATCH] Now it works. Thanks to Twitch chat for helping me realize
 that flex-col changes how justify works because that's so fun.

---
 static/input_style.css  |  8 ++++----
 static/style.css        | 25 +++++++++++++++----------
 views/layouts/main.html | 32 ++++++++++++++++++--------------
 3 files changed, 37 insertions(+), 28 deletions(-)

diff --git a/static/input_style.css b/static/input_style.css
index fbcb140..84bcabf 100644
--- a/static/input_style.css
+++ b/static/input_style.css
@@ -6,15 +6,15 @@ body {
 }
 
 main {
-  @apply flex flex-col gap-4 p-0 min-h-screen bg-gray-200 text-black dark:bg-gray-900 dark:text-gray-50;
+  @apply flex flex-col items-center gap-4 p-0 min-h-screen bg-gray-200 text-black dark:bg-gray-900 dark:text-gray-50;
 }
 
 header {
-  @apply flex flex-col justify-stretch;
+  @apply flex flex-col justify-stretch items-center bg-gray-950;
 }
 
 footer {
-  @apply bg-gray-950 text-gray-50 text-lg flex p-1;
+  @apply bg-gray-950 text-gray-50 text-lg flex justify-center p-1;
 }
 
 @utility sticky-bottom {
@@ -22,7 +22,7 @@ footer {
 }
 
 nav {
-  @apply flex justify-center items-center bg-gray-950 *:text-gray-50 *:flex-1 *:text-xl w-full justify-evenly;
+  @apply flex lg:w-4xl justify-center items-center *:text-gray-50 *:flex-1 *:text-xl w-full justify-evenly;
 }
 
 a {
diff --git a/static/style.css b/static/style.css
index 197f259..3f8c281 100644
--- a/static/style.css
+++ b/static/style.css
@@ -290,9 +290,6 @@
   .min-h-screen {
     min-height: 100vh;
   }
-  .w-4xl {
-    width: var(--container-4xl);
-  }
   .w-fit {
     width: fit-content;
   }
@@ -342,9 +339,6 @@
   .items-center {
     align-items: center;
   }
-  .justify-around {
-    justify-content: space-around;
-  }
   .justify-between {
     justify-content: space-between;
   }
@@ -384,9 +378,6 @@
   .gap-10 {
     gap: calc(var(--spacing) * 10);
   }
-  .justify-self-center {
-    justify-self: center;
-  }
   .rounded-full {
     border-radius: calc(infinity * 1px);
   }
@@ -511,6 +502,9 @@
   .p-1 {
     padding: calc(var(--spacing) * 1);
   }
+  .p-2 {
+    padding: calc(var(--spacing) * 2);
+  }
   .p-2\! {
     padding: calc(var(--spacing) * 2) !important;
   }
@@ -642,6 +636,11 @@
       }
     }
   }
+  .lg\:w-4xl {
+    @media (width >= 64rem) {
+      width: var(--container-4xl);
+    }
+  }
   .dark\:bg-gray-300 {
     @media (prefers-color-scheme: dark) {
       background-color: var(--color-gray-300);
@@ -674,6 +673,7 @@ main {
   display: flex;
   min-height: 100vh;
   flex-direction: column;
+  align-items: center;
   gap: calc(var(--spacing) * 4);
   background-color: var(--color-gray-200);
   padding: calc(var(--spacing) * 0);
@@ -688,10 +688,13 @@ main {
 header {
   display: flex;
   flex-direction: column;
+  align-items: center;
   justify-content: stretch;
+  background-color: var(--color-gray-950);
 }
 footer {
   display: flex;
+  justify-content: center;
   background-color: var(--color-gray-950);
   padding: calc(var(--spacing) * 1);
   font-size: var(--text-lg);
@@ -704,7 +707,6 @@ nav {
   align-items: center;
   justify-content: center;
   justify-content: space-evenly;
-  background-color: var(--color-gray-950);
   :is(& > *) {
     flex: 1;
   }
@@ -715,6 +717,9 @@ nav {
   :is(& > *) {
     color: var(--color-gray-50);
   }
+  @media (width >= 64rem) {
+    width: var(--container-4xl);
+  }
 }
 a {
   text-decoration-line: underline;
diff --git a/views/layouts/main.html b/views/layouts/main.html
index d03b74c..b6c0e29 100644
--- a/views/layouts/main.html
+++ b/views/layouts/main.html
@@ -35,25 +35,29 @@
   </header>
 
   <main>
+    <div class="lg:w-4xl flex flex-col">
     {{embed}}
+    </div>
   </main>
 
   <footer class="!p-4 !pb-20">
-    <div class="flex-1">
-      <img class="size-12 shrink-0" src="/logo.png" />
-      <div>
-        <p>I'm the author of many programming education books, a
-        semi-professional oil painter, and new game developer.</p>
+    <div class="flex lg:w-4xl">
+      <div class="flex-1 p-2">
+        <img class="size-12 shrink-0" src="/logo.png" />
+        <div>
+          <p>I'm the author of many programming education books, a
+          semi-professional oil painter, and new game developer.</p>
+        </div>
+      </div>
+      <div class="flex-1 p-2">
+        <h3 class="text-3xl">Other Projects</h3>
+        <ul>
+          <li><a href="https://learncodethehardway.com/">Learn Code the Hard Way</a></li>
+          <li><a href="https://lcthw.dev/go/">Go Web Dev</a></li>
+          <li><a href="https://lcthw.dev/learn-code-the-hard-way/">Code Projects for Beginners</a></li>
+          <li><a href="https://zedshaw.com/blog/">Personal Essays</a></li>
+        </ul>
       </div>
-    </div>
-    <div class="flex-1">
-      <h3 class="text-3xl">Other Projects</h3>
-      <ul>
-        <li><a href="https://learncodethehardway.com/">Learn Code the Hard Way</a></li>
-        <li><a href="https://lcthw.dev/go/">Go Web Dev</a></li>
-        <li><a href="https://lcthw.dev/learn-code-the-hard-way/">Code Projects for Beginners</a></li>
-        <li><a href="https://zedshaw.com/blog/">Personal Essays</a></li>
-      </ul>
     </div>
   </footer>
   </body>