From 8906322b6d08fc6a3f4f80a1572722eba8580b31 Mon Sep 17 00:00:00 2001
From: "Zed A. Shaw" <zed.shaw@gmail.com>
Date: Sun, 10 Aug 2025 21:38:34 -0400
Subject: [PATCH] A bit of tweaking of the design to learn more about tailwind.

---
 pages/layouts/main.html |  6 ++--
 pages/live/index.html   |  4 +--
 static/input_style.css  | 20 +++++++++++--
 static/style.css        | 62 ++++++++++++++++++++++++++---------------
 views/layouts/main.html |  4 +--
 5 files changed, 64 insertions(+), 32 deletions(-)
diff --git a/pages/layouts/main.html b/pages/layouts/main.html
index 72f25d1..11d6cc4 100644
--- a/pages/layouts/main.html
+++ b/pages/layouts/main.html
@@ -14,7 +14,7 @@
     <title>ZedShaw.games</title>
   </head>
   <body data-testid="{{.PageId}}">
-  <header class="flex bg-gray-950 *:text-gray-50 *:flex-1 *:text-xl p-6">
+  <header>
     <a id="home" href="/">🏡</a>
     <a id="live" href="/live/">Live</a>
     <a id="stream" href="/stream/">Streams</a>
@@ -23,11 +23,11 @@
     <a id="login" href="/login/">Login</a>
   </header>
 
-  <div class="p-0 min-h-screen">
+  <div class="p-0 min-h-screen dark:bg-gray-900">
     {{embed}}
   </div>
 
-  <footer class="bg-gray-950 text-gray-50 text-lg flex p-6">
+  <footer>
     <div class="flex-1">
       <shape>
         <img class="size-12 shrink-0" src="/logo.png" />
diff --git a/pages/live/index.html b/pages/live/index.html
index e5877b7..ebffbaf 100644
--- a/pages/live/index.html
+++ b/pages/live/index.html
@@ -4,11 +4,11 @@
 </script>
 
 <div x-init="Stream = await req.theData()" x-data="{Stream: {}}">
-  <div class="flex justify-center items-center w-full bg-gray-900 text-gray-50 text-center aspect-video">
+  <div class="flex justify-center items-center w-full bg-gray-300 text-gray-950 text-center aspect-video">
     <span>Stream Viewer</span>
   </div>
 
-  <div class="p-6">
+  <div class="p-6 flex flex-col justify-center">
   <div>
     <h2>Links Found in Chat</h2>
     <ul x-init="links = await link_req.theData()" x-data="{links: {}}">
diff --git a/static/input_style.css b/static/input_style.css
index 3fa74db..4e7ffe7 100644
--- a/static/input_style.css
+++ b/static/input_style.css
@@ -1,5 +1,17 @@
 @import "tailwindcss";
 
+body {
+  @apply text-gray-950 dark:text-gray-50;
+}
+
+header {
+  @apply flex bg-gray-950 *:text-gray-50 *:flex-1 *:text-xl p-6;
+}
+
+footer {
+  @apply bg-gray-950 text-gray-50 text-lg flex p-6;
+}
+
 h1 {
   @apply text-6xl pb-4;
 }
@@ -33,11 +45,15 @@ card > middle {
 }
 
 label {
-  @apply font-bold text-white;
+  @apply font-bold text-950 dark:text-white;
 }
 
 input {
-  @apply shadow-sm outline rounded-sm p-1 bg-gray-200;
+  @apply shadow-sm outline rounded-sm p-1 bg-gray-200 text-gray-950 dark:text-gray-950;
+}
+
+input::placeholder {
+  @apply text-gray-700 dark:text-gray-700;
 }
 
 button {
diff --git a/static/style.css b/static/style.css
index 5b17796..1bcdbc3 100644
--- a/static/style.css
+++ b/static/style.css
@@ -17,6 +17,7 @@
     --color-gray-800: oklch(27.8% 0.033 256.848);
     --color-gray-900: oklch(21% 0.034 264.665);
     --color-gray-950: oklch(13% 0.028 261.692);
+    --color-black: #000;
     --color-white: #fff;
     --spacing: 0.25rem;
     --container-md: 28rem;
@@ -252,11 +253,8 @@
   .justify-center {
     justify-content: center;
   }
-  .bg-gray-900 {
-    background-color: var(--color-gray-900);
-  }
-  .bg-gray-950 {
-    background-color: var(--color-gray-950);
+  .bg-gray-300 {
+    background-color: var(--color-gray-300);
   }
   .p-0 {
     padding: calc(var(--spacing) * 0);
@@ -271,16 +269,12 @@
     font-size: var(--text-3xl);
     line-height: var(--tw-leading, var(--text-3xl--line-height));
   }
-  .text-lg {
-    font-size: var(--text-lg);
-    line-height: var(--tw-leading, var(--text-lg--line-height));
-  }
   .font-bold {
     --tw-font-weight: var(--font-weight-bold);
     font-weight: var(--font-weight-bold);
   }
-  .text-gray-50 {
-    color: var(--color-gray-50);
+  .text-gray-950 {
+    color: var(--color-gray-950);
   }
   .underline {
     text-decoration-line: underline;
@@ -290,23 +284,41 @@
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
-  .\*\:flex-1 {
-    :is(& > *) {
-      flex: 1;
+  .dark\:bg-gray-900 {
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-gray-900);
     }
   }
-  .\*\:text-xl {
-    :is(& > *) {
-      font-size: var(--text-xl);
-      line-height: var(--tw-leading, var(--text-xl--line-height));
-    }
+}
+body {
+  color: var(--color-gray-950);
+  @media (prefers-color-scheme: dark) {
+    color: var(--color-gray-50);
   }
-  .\*\:text-gray-50 {
-    :is(& > *) {
-      color: var(--color-gray-50);
-    }
+}
+header {
+  display: flex;
+  background-color: var(--color-gray-950);
+  padding: calc(var(--spacing) * 6);
+  :is(& > *) {
+    flex: 1;
+  }
+  :is(& > *) {
+    font-size: var(--text-xl);
+    line-height: var(--tw-leading, var(--text-xl--line-height));
+  }
+  :is(& > *) {
+    color: var(--color-gray-50);
   }
 }
+footer {
+  display: flex;
+  background-color: var(--color-gray-950);
+  padding: calc(var(--spacing) * 6);
+  font-size: var(--text-lg);
+  line-height: var(--tw-leading, var(--text-lg--line-height));
+  color: var(--color-gray-50);
+}
 h1 {
   padding-bottom: calc(var(--spacing) * 4);
   font-size: var(--text-6xl);
@@ -374,10 +386,14 @@ input {
   border-radius: var(--radius-sm);
   background-color: var(--color-gray-200);
   padding: calc(var(--spacing) * 1);
+  color: var(--color-gray-950);
   --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
   box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   outline-style: var(--tw-outline-style);
   outline-width: 1px;
+  @media (prefers-color-scheme: dark) {
+    color: var(--color-gray-950);
+  }
 }
 button {
   border-radius: var(--radius-sm);
diff --git a/views/layouts/main.html b/views/layouts/main.html
index 72f25d1..8f228eb 100644
--- a/views/layouts/main.html
+++ b/views/layouts/main.html
@@ -14,7 +14,7 @@
     <title>ZedShaw.games</title>
   </head>
   <body data-testid="{{.PageId}}">
-  <header class="flex bg-gray-950 *:text-gray-50 *:flex-1 *:text-xl p-6">
+  <header>
     <a id="home" href="/">🏡</a>
     <a id="live" href="/live/">Live</a>
     <a id="stream" href="/stream/">Streams</a>
@@ -27,7 +27,7 @@
     {{embed}}
   </div>
 
-  <footer class="bg-gray-950 text-gray-50 text-lg flex p-6">
+  <footer>
     <div class="flex-1">
       <shape>
         <img class="size-12 shrink-0" src="/logo.png" />
