From 29a4957a553d6b3c20dec2f1b495941ba148abe0 Mon Sep 17 00:00:00 2001
From: "Zed A. Shaw" <zed.shaw@gmail.com>
Date: Tue, 16 Sep 2025 23:30:51 -0400
Subject: [PATCH] Landing page is looking good, now for the live page.

---
 pages/index.html        | 12 +++----
 static/input_style.css  | 26 ++++++++++++---
 static/style.css        | 70 ++++++++++++++++++++++++++++++++---------
 views/layouts/main.html |  6 ++--
 4 files changed, 85 insertions(+), 29 deletions(-)

diff --git a/pages/index.html b/pages/index.html
index e21bcaa..0ce2e53 100644
--- a/pages/index.html
+++ b/pages/index.html
@@ -1,9 +1,7 @@
 <h1>Zed's Game Dev Website</h1>
 <script src="https://player.twitch.tv/js/embed/v1.js"></script>
 
-<div class="flex flex-col flex-start">
-  <shape id="twitch-player" class="video bg-gray-950! font-bold gap-8">
-  </shape>
+<div id="twitch-player" class="w-full aspect-video">
 </div>
 
 <aside data-testid="clickblock">
@@ -13,7 +11,7 @@
 <block>
 <grid class="two-panel">
   <img src="/images/buckaroo_bonzai.png" />
-  <block>
+  <block class="center-vertical">
     <h3>I stream on Twitch.</h3>
 
     <p>I stream every day at 10AM/10PM EST time.  60% of the time it's a chill laid back stream with only programming and a bit of talking about programming.  30% of the time it's art for games I'm making. 10% of the time it's games I'm playing.</p>
@@ -29,7 +27,7 @@
 
 <block>
 <grid class="two-panel">
-  <block>
+  <block class="center-vertical">
     <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>
 
@@ -47,7 +45,7 @@
 <block>
 <grid class="two-panel">
   <img src="/images/vim_window_clip.jpg" />
-  <block>
+  <block class="center-vertical">
   <h2>Checkout my Git</h2>
   <p>If you're curious about the code behind my games or anything else I make then take a look at my git. It's like a buffet of half-finished genius.</p>
 
@@ -64,7 +62,7 @@
 
 <block>
 <grid class="two-panel">
-  <block>
+  <block class="center-vertical">
     <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>
 
diff --git a/static/input_style.css b/static/input_style.css
index 84bcabf..2b81636 100644
--- a/static/input_style.css
+++ b/static/input_style.css
@@ -48,23 +48,23 @@ pre > code {
 
 
 h1 {
-  @apply text-6xl mb-2 mt-4;
+  @apply text-5xl mb-2 mt-4 sm:text-6xl;
 }
 
 h2 {
-  @apply text-5xl mb-2 mt-4;
+  @apply text-4xl mb-2 mt-4 sm:text-5xl;
 }
 
 h3 {
-  @apply text-4xl mb-2 mt-4;
+  @apply text-3xl mb-2 mt-4 sm:text-4xl;
 }
 
 h4 {
-  @apply text-3xl mb-2 mt-4;
+  @apply text-2xl mb-2 mt-4 sm:text-3xl;
 }
 
 h5 {
-  @apply text-2xl mb-2 mt-4;
+  @apply text-2xl mb-2 mt-4 sm:text-2xl;
 }
 
 details {
@@ -191,10 +191,26 @@ block {
   @apply flex flex-col p-4 gap-4;
 }
 
+block.center-horizontal {
+  @apply items-center;
+}
+
+block.center-vertical {
+  @apply justify-center;
+}
+
 bar {
   @apply flex flex-row p-4 gap-4;
 }
 
+bar.center-horizontal {
+  @apply justify-center;
+}
+
+bar.center-vertical {
+  @apply items-center;
+}
+
 stack {
   display: grid;
   grid-template-rows: 1fr;
diff --git a/static/style.css b/static/style.css
index 3f8c281..ffee4c1 100644
--- a/static/style.css
+++ b/static/style.css
@@ -372,9 +372,6 @@
   .gap-5 {
     gap: calc(var(--spacing) * 5);
   }
-  .gap-8 {
-    gap: calc(var(--spacing) * 8);
-  }
   .gap-10 {
     gap: calc(var(--spacing) * 10);
   }
@@ -487,12 +484,15 @@
   .bg-gray-800 {
     background-color: var(--color-gray-800);
   }
-  .bg-gray-950\! {
-    background-color: var(--color-gray-950) !important;
-  }
   .bg-green-400\! {
     background-color: var(--color-green-400) !important;
   }
+  .\!p-0 {
+    padding: calc(var(--spacing) * 0) !important;
+  }
+  .\!p-1 {
+    padding: calc(var(--spacing) * 1) !important;
+  }
   .\!p-4 {
     padding: calc(var(--spacing) * 4) !important;
   }
@@ -636,6 +636,16 @@
       }
     }
   }
+  .sm\:\!p-0 {
+    @media (width >= 40rem) {
+      padding: calc(var(--spacing) * 0) !important;
+    }
+  }
+  .sm\:p-0 {
+    @media (width >= 40rem) {
+      padding: calc(var(--spacing) * 0);
+    }
+  }
   .lg\:w-4xl {
     @media (width >= 64rem) {
       width: var(--container-4xl);
@@ -751,32 +761,52 @@ pre > code {
 h1 {
   margin-top: calc(var(--spacing) * 4);
   margin-bottom: calc(var(--spacing) * 2);
-  font-size: var(--text-6xl);
-  line-height: var(--tw-leading, var(--text-6xl--line-height));
+  font-size: var(--text-5xl);
+  line-height: var(--tw-leading, var(--text-5xl--line-height));
+  @media (width >= 40rem) {
+    font-size: var(--text-6xl);
+    line-height: var(--tw-leading, var(--text-6xl--line-height));
+  }
 }
 h2 {
   margin-top: calc(var(--spacing) * 4);
   margin-bottom: calc(var(--spacing) * 2);
-  font-size: var(--text-5xl);
-  line-height: var(--tw-leading, var(--text-5xl--line-height));
+  font-size: var(--text-4xl);
+  line-height: var(--tw-leading, var(--text-4xl--line-height));
+  @media (width >= 40rem) {
+    font-size: var(--text-5xl);
+    line-height: var(--tw-leading, var(--text-5xl--line-height));
+  }
 }
 h3 {
   margin-top: calc(var(--spacing) * 4);
   margin-bottom: calc(var(--spacing) * 2);
-  font-size: var(--text-4xl);
-  line-height: var(--tw-leading, var(--text-4xl--line-height));
+  font-size: var(--text-3xl);
+  line-height: var(--tw-leading, var(--text-3xl--line-height));
+  @media (width >= 40rem) {
+    font-size: var(--text-4xl);
+    line-height: var(--tw-leading, var(--text-4xl--line-height));
+  }
 }
 h4 {
   margin-top: calc(var(--spacing) * 4);
   margin-bottom: calc(var(--spacing) * 2);
-  font-size: var(--text-3xl);
-  line-height: var(--tw-leading, var(--text-3xl--line-height));
+  font-size: var(--text-2xl);
+  line-height: var(--tw-leading, var(--text-2xl--line-height));
+  @media (width >= 40rem) {
+    font-size: var(--text-3xl);
+    line-height: var(--tw-leading, var(--text-3xl--line-height));
+  }
 }
 h5 {
   margin-top: calc(var(--spacing) * 4);
   margin-bottom: calc(var(--spacing) * 2);
   font-size: var(--text-2xl);
   line-height: var(--tw-leading, var(--text-2xl--line-height));
+  @media (width >= 40rem) {
+    font-size: var(--text-2xl);
+    line-height: var(--tw-leading, var(--text-2xl--line-height));
+  }
 }
 details {
   border-radius: var(--radius-lg);
@@ -987,12 +1017,24 @@ block {
   gap: calc(var(--spacing) * 4);
   padding: calc(var(--spacing) * 4);
 }
+block.center-horizontal {
+  align-items: center;
+}
+block.center-vertical {
+  justify-content: center;
+}
 bar {
   display: flex;
   flex-direction: row;
   gap: calc(var(--spacing) * 4);
   padding: calc(var(--spacing) * 4);
 }
+bar.center-horizontal {
+  justify-content: center;
+}
+bar.center-vertical {
+  align-items: center;
+}
 stack {
   display: grid;
   grid-template-rows: 1fr;
diff --git a/views/layouts/main.html b/views/layouts/main.html
index b6c0e29..7058937 100644
--- a/views/layouts/main.html
+++ b/views/layouts/main.html
@@ -35,9 +35,9 @@
   </header>
 
   <main>
-    <div class="lg:w-4xl flex flex-col">
-    {{embed}}
-    </div>
+    <block class="lg:w-4xl center-horizontal !p-1 sm:p-0">
+      {{embed}}
+    </block>
   </main>
 
   <footer class="!p-4 !pb-20">