Have the landing page working on mobile/small screens using the oh so intuitive 'sm which actually means bigger than sm so not sm' thing in tailwind. Larger screens are still a problem.

pages/index.html

@@ -6,12 +6,12 @@
   </shape>
 </div>
 
-<block class="bg-gray-300 dark:bg-gray-800" data-testid="clickblock">
+<aside data-testid="clickblock">
-<p class="text-xl">Hi, my name is Zed and this i where I post things about my games that I'm making.</p>
+  <p>Hi, my name is Zed and this i where I post things about my games that I'm making.</p>
-</block>
+</aside>
 
 <block>
-<grid class="grid-cols-2">
+<grid class="two-panel">
   <img src="/images/buckaroo_bonzai.png" />
   <block>
     <h3>I stream on Twitch.</h3>
@@ -23,12 +23,12 @@
 </grid>
 </block>
 
-<block class="bg-gray-300 dark:bg-gray-800">
+<aside>
-<p class="text-xl">In the year 2025 I decided to finally take all of my skills and apply them tothe challenge of creating games.  I figured, "Hey, games are nothing more than paintings and music with code attached. How hard could it be?"  Turns out, not only is it challenging but it's <b>fun</b>.</p>
+<p>In the year 2025 I decided to finally take all of my skills and apply them to the challenge of creating games.  I figured, "Hey, games are nothing more than paintings and music with code attached. How hard could it be?"  Turns out, not only is it challenging but it's <b>fun</b>.</p>
-</block>
+</aside>
 
 <block>
-<grid class="grid-cols-2">
+<grid class="two-panel">
   <block>
     <h2>Play My Games</h2>
     <p>Are you a fan of retro styled jank but fun games?  Me too, so here's my games I've made with that theme.  Think "it's the late 80s and nobody knows how to make a game" when you play these and you'll enjoy every minute of it. Hopefully.</p>
@@ -40,12 +40,12 @@
 </grid>
 </block>
 
-<block class="bg-gray-300 dark:bg-gray-800">
+<aside>
-<p class="text-xl">I try to share all of my code online for people to review.  Some of it is open source, but other projects are simply copyright.  You're can view and play them if they're published here. I treat programming as a form of self-expression similar to my painting and writing.  Given that <a href="https://en.wikipedia.org/wiki/Bernstein_v._United_States">code is speech according to the Supreme Court</a> then I am allowed to publish my code without a license in the same way that I publish my blog posts and paintings without a license.</p>
+<p>I try to share all of my code online for people to review.  Some of it is open source, but other projects are simply copyright.  You're can view and play them if they're published here. I treat programming as a form of self-expression similar to my painting and writing.  Given that <a href="https://en.wikipedia.org/wiki/Bernstein_v._United_States">code is speech according to the Supreme Court</a> then I am allowed to publish my code without a license in the same way that I publish my blog posts and paintings without a license.</p>
-</block>
+</aside>
 
 <block>
-<grid class="grid-cols-2">
+<grid class="two-panel">
   <img src="/images/vim_window_clip.jpg" />
   <block>
   <h2>Checkout my Git</h2>
@@ -56,20 +56,20 @@
 </grid>
 </block>
 
-<block class="bg-gray-300 dark:bg-gray-800">
+<aside>
 <h2 class="!text-3xl">Contact Me</h2>
 <p>If you'd like to contact me about what you see here then email me at <a href="mailto:help@learncodethehardway.com">help@learncodethehardway.com</a>. It might take me about a day to respond.
 </p>
-</block>
+</aside>
 
 <block>
-<grid class="grid-cols-2">
+<grid class="two-panel">
-<div>
+  <block>
     <h2>I Like to Paint</h2>
     <p>All of the art in my games is original paintings that I process with a bunch of jank imagemagick scripts to give it that "80s/90s retro" look. I frequently do paintings live on Twitch, and I post most of the art here as well.</p>
 
     <a href="/game/"><button style="--value: 2; --text: 9">View my Art</button></a>
-</div>
+  </block>
 
   <img src="/images/Hawaii_Truck.jpg" />
 </grid>

static/input_style.css

@@ -6,7 +6,7 @@ body {
 }
 
 main {
-  @apply flex flex-col gap-4 p-0 min-h-screen bg-gray-100 text-gray-950 dark:bg-gray-900 dark:text-gray-50;
+  @apply flex flex-col gap-4 p-0 min-h-screen bg-gray-200 text-black dark:bg-gray-900 dark:text-gray-50;
 }
 
 header {
@@ -72,7 +72,7 @@ details {
 }
 
 aside {
-  @apply p-2 rounded-lg bg-gray-100 text-gray-950;
+  @apply flex rounded-none flex-col p-4 gap-4 bg-gray-300 text-gray-950 text-2xl dark:text-gray-50 font-semibold dark:bg-gray-800;
 }
 
 aside > mark {
@@ -236,3 +236,11 @@ table {
 @utility table-row {
   @apply *:border-2 *:border-black *:p-1 hover:bg-gray-100 hover:text-gray-950;
 }
+
+@utility two-panel {
+  @apply grid-rows-2 grid-cols-1 sm:grid-cols-2 sm:grid-rows-1;
+}
+
+@utility debug {
+  @apply !border-1 !border-red-900;
+}

static/style.css

@@ -11,6 +11,7 @@
     --color-red-300: oklch(80.8% 0.114 19.571);
     --color-red-500: oklch(63.7% 0.237 25.331);
     --color-red-800: oklch(44.4% 0.177 26.899);
+    --color-red-900: oklch(39.6% 0.141 25.723);
     --color-orange-500: oklch(70.5% 0.213 47.604);
     --color-yellow-300: oklch(90.5% 0.182 98.111);
     --color-green-400: oklch(79.2% 0.209 151.711);
@@ -36,6 +37,7 @@
     --container-md: 28rem;
     --container-lg: 32rem;
     --container-xl: 36rem;
+    --container-4xl: 56rem;
     --text-sm: 0.875rem;
     --text-sm--line-height: calc(1.25 / 0.875);
     --text-lg: 1.125rem;
@@ -53,6 +55,7 @@
     --text-6xl: 3.75rem;
     --text-6xl--line-height: 1;
     --font-weight-light: 300;
+    --font-weight-semibold: 600;
     --font-weight-bold: 700;
     --radius-sm: 0.25rem;
     --radius-md: 0.375rem;
@@ -287,6 +290,9 @@
   .min-h-screen {
     min-height: 100vh;
   }
+  .w-4xl {
+    width: var(--container-4xl);
+  }
   .w-fit {
     width: fit-content;
   }
@@ -311,6 +317,16 @@
   .transform {
     transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
   }
+  .two-panel {
+    grid-template-columns: repeat(1, minmax(0, 1fr));
+    grid-template-rows: repeat(2, minmax(0, 1fr));
+    @media (width >= 40rem) {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+    @media (width >= 40rem) {
+      grid-template-rows: repeat(1, minmax(0, 1fr));
+    }
+  }
   .grid-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
@@ -326,6 +342,9 @@
   .items-center {
     align-items: center;
   }
+  .justify-around {
+    justify-content: space-around;
+  }
   .justify-between {
     justify-content: space-between;
   }
@@ -365,6 +384,9 @@
   .gap-10 {
     gap: calc(var(--spacing) * 10);
   }
+  .justify-self-center {
+    justify-self: center;
+  }
   .rounded-full {
     border-radius: calc(infinity * 1px);
   }
@@ -399,6 +421,11 @@
       }
     }
   }
+  .debug {
+    border-style: var(--tw-border-style) !important;
+    border-width: 1px !important;
+    border-color: var(--color-red-900) !important;
+  }
   .border-1 {
     border-style: var(--tw-border-style);
     border-width: 1px;
@@ -499,12 +526,6 @@
   .pt-4 {
     padding-top: calc(var(--spacing) * 4);
   }
-  .\!pb-4 {
-    padding-bottom: calc(var(--spacing) * 4) !important;
-  }
-  .\!pb-10 {
-    padding-bottom: calc(var(--spacing) * 10) !important;
-  }
   .\!pb-20 {
     padding-bottom: calc(var(--spacing) * 20) !important;
   }
@@ -526,9 +547,6 @@
   .pb-8 {
     padding-bottom: calc(var(--spacing) * 8);
   }
-  .pb-10 {
-    padding-bottom: calc(var(--spacing) * 10);
-  }
   .pb-10\! {
     padding-bottom: calc(var(--spacing) * 10) !important;
   }
@@ -541,18 +559,10 @@
   .align-top {
     vertical-align: top;
   }
-  .\!text-2xl {
-    font-size: var(--text-2xl) !important;
-    line-height: var(--tw-leading, var(--text-2xl--line-height)) !important;
-  }
   .\!text-3xl {
     font-size: var(--text-3xl) !important;
     line-height: var(--tw-leading, var(--text-3xl--line-height)) !important;
   }
-  .\!text-xl {
-    font-size: var(--text-xl) !important;
-    line-height: var(--tw-leading, var(--text-xl--line-height)) !important;
-  }
   .text-2xl {
     font-size: var(--text-2xl);
     line-height: var(--tw-leading, var(--text-2xl--line-height));
@@ -632,13 +642,6 @@
       }
     }
   }
-  .hover\:bg-gray-950 {
-    &:hover {
-      @media (hover: hover) {
-        background-color: var(--color-gray-950);
-      }
-    }
-  }
   .dark\:bg-gray-300 {
     @media (prefers-color-scheme: dark) {
       background-color: var(--color-gray-300);
@@ -672,9 +675,9 @@ main {
   min-height: 100vh;
   flex-direction: column;
   gap: calc(var(--spacing) * 4);
-  background-color: var(--color-gray-100);
+  background-color: var(--color-gray-200);
   padding: calc(var(--spacing) * 0);
-  color: var(--color-gray-950);
+  color: var(--color-black);
   @media (prefers-color-scheme: dark) {
     background-color: var(--color-gray-900);
   }
@@ -779,10 +782,23 @@ details {
   color: var(--color-gray-950);
 }
 aside {
-  border-radius: var(--radius-lg);
+  display: flex;
-  background-color: var(--color-gray-100);
+  flex-direction: column;
-  padding: calc(var(--spacing) * 2);
+  gap: calc(var(--spacing) * 4);
+  border-radius: 0;
+  background-color: var(--color-gray-300);
+  padding: calc(var(--spacing) * 4);
+  font-size: var(--text-2xl);
+  line-height: var(--tw-leading, var(--text-2xl--line-height));
+  --tw-font-weight: var(--font-weight-semibold);
+  font-weight: var(--font-weight-semibold);
   color: var(--color-gray-950);
+  @media (prefers-color-scheme: dark) {
+    background-color: var(--color-gray-800);
+  }
+  @media (prefers-color-scheme: dark) {
+    color: var(--color-gray-50);
+  }
 }
 aside > mark {
   border-radius: var(--radius-sm);