Created a basic set of tools for making my sites.

Makefile

@@ -4,6 +4,8 @@ ifeq '$(OS)' 'Windows_NT'
   GO_IS_STUPID_EXE=.exe
 endif
 
+all: tailwind site
+	echo "yay!"
 
 build: build_bot
 	go build .

pages/copy/sample.html

@@ -0,0 +1,154 @@
+<main class="!p-4">
+<h1>Sample Components</h1>
+<p>This is a list of components I've made for making websites quicker. They're just pre-styled things you commonly need to do HTML first layouts and designs.</p>
+
+<h2>Shapes</h2>
+
+<shape class="xs">
+  I'm a placeholder.
+</shape>
+
+<h2>Grids</h2>
+
+<grid class="grid-cols-2">
+<shape class="xxs">0,0</shape>
+<shape class="xxs">1,0</shape>
+<shape class="xxs">0,1</shape>
+<shape class="xxs">1,1</shape>
+</grid>
+
+<h2>Blocks & Bars</h2>
+
+<block>
+  <p>Use a block to automatically flex content vertically.</p>
+  <p>Like these two lines are done.</p>
+  <bar class="rounded-lg border-1 border-gray-300">
+    <shape class="xxs">Image</shape>
+    <p>Use a bar to flex things horizontally.</p>
+  </bar>
+
+  <bar class="flex-end rounded-lg border-1 border-gray-300">
+    <shape class="xxs">Image</shape>
+    <block>
+      <span>You can also combine them in arbitrary ways to layout your content.</span>
+    </block>
+    <grid class="grid-cols-2">
+      <shape class="tiny">1</shape>
+      <shape class="tiny">2</shape>
+      <shape class="tiny">3</shape>
+    </grid>
+  </bar>
+</block>
+
+<h2>Stack</h2>
+
+<p>A stack lets you place multiple elements on top of eachother, like with layers in nearly every single layout composition system in existence for the last 500 years.</p>
+
+<stack>
+<shape class="xs">I'm on bottom</shape>
+<h1 class="text-red-500">Hello</h1>
+<h2 class="text-orange-500">There</h2>
+</stack>
+
+<h2>Code</h2>
+
+<pre><code>if(var != 'string') {
+  console.log("test");
+}
+</code></pre>
+
+<p>You should type <code>ls -l</code> to list the directory.</p>
+
+<code>if(var != 'string')</code>
+
+<h2>Highlight/Marking</h2>
+
+<aside>
+  <mark>Default</mark>
+  <span>This is an aside. You use it to call out something specific.</span>
+</aside>
+
+<aside>
+  <mark class="info">Info</mark>
+  <span>This is an aside. You use it to call out something specific.</span>
+</aside>
+
+<aside>
+  <mark class="warning">Warning</mark>
+  <span>A warning aside.</span>
+</aside>
+
+<aside>
+  <mark class="alert">Alert</mark>
+  <span>An alert aside.</span>
+</aside>
+
+<p>This is some <mark>marked</mark> text.</p>
+
+<h2>Details</h2>
+
+<details aria-label="Sample">
+  <summary>Details Test</summary>
+  A test of the details thing.
+</details>
+
+<h2>Forms</h2>
+
+<form>
+  <card>
+  <top>Test Form</top>
+
+  <middle>
+    <label for="fruit">What Fruit?</label>
+    <select id="fruit">
+      <option>Apples</option>
+      <option>Oranges</option>
+    </select>
+
+    <label for="name">Name</label>
+    <input id="name" placeholder="Your Name?" />
+  </middle>
+
+  <bottom>
+      <button>Submit</button>
+  </bottom>
+  </card>
+</form>
+
+
+<h2>Cards</h2>
+
+<p>Cards organize information vertically.</p>
+
+<card>
+  <top><shape class="video">Image</shape></top>
+  <middle>This shows a top large image with
+  some text in the middle.</middle>
+  <bottom><button type="button">An Action</button></bottom>
+</card>
+
+<h2>Header/Nav</h2>
+
+<p>If you put nav inside header it "just works".</p>
+
+<header>
+  <nav>
+    <a id="home" href="/">
+      <svg xmlns="http://www.w3.org/2000/svg"
+        width="2rem"
+        height="2rem"
+        viewBox="0 0 2rem 2rem">
+        <use href="/icons/home.svg#home" />
+      </svg>
+    </a>
+    <a id="live" href="#">Live</a>
+    <a id="stream" href="#">Streams</a>
+    <a id="game" href="#">Games</a>
+    <a id="register" href="#">Register</a>
+    <a id="login" href="#">Login</a>
+  </nav>
+</header>
+
+<p>That's an example of a header with a nav bar in it.</p>
+
+</main>

pages/layouts/copy.html

@@ -6,13 +6,10 @@
     <meta name="viewport" content="initial-scale=1.0" />
     <meta name="author" content="Zed A. Shaw" />
     <meta name="description" content="My Go learning project, which is a Twitch support thing." />
-    <link rel="icon" href="/favicon.ico" type="image/x-icon" />
+    <link rel="stylesheet" href="/style.css" />
-    <link rel="stylesheet" href="/style.css">
-    <script defer src="/js/alpine.js"></script>
-    <script src="/js/code.js"></script>
     <title>ZedShaw.games</title>
   </head>
-  <body data-testid="{{.PageId}}">
+  <body>
     {{embed}}
   </body>
 </html>

pages/layouts/main.html

@@ -14,19 +14,21 @@
   </head>
   <body data-testid="{{.PageId}}">
   <header>
-    <a id="home" href="/">
+    <nav>
-      <svg xmlns="http://www.w3.org/2000/svg"
+      <a id="home" href="/">
-        width="2rem"
+        <svg xmlns="http://www.w3.org/2000/svg"
-        height="2rem"
+          width="2rem"
-        viewBox="0 0 2rem 2rem">
+          height="2rem"
-        <use href="/icons/home.svg#home" />
+          viewBox="0 0 2rem 2rem">
-      </svg>
+          <use href="/icons/home.svg#home" />
-    </a>
+        </svg>
-    <a id="live" href="/live/">Live</a>
+      </a>
-    <a id="stream" href="/stream/">Streams</a>
+      <a id="live" href="/live/">Live</a>
-    <a id="game" href="/game/">Games</a>
+      <a id="stream" href="/stream/">Streams</a>
-    <a id="register" href="/register/">Register</a>
+      <a id="game" href="/game/">Games</a>
-    <a id="login" href="/login/">Login</a>
+      <a id="register" href="/register/">Register</a>
+      <a id="login" href="/login/">Login</a>
+    </nav>
   </header>
 
   <main>

static/input_style.css

@@ -6,43 +6,92 @@ body {
 }
 
 main {
-  @apply 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-100 text-gray-950 dark:bg-gray-900 dark:text-gray-50;
 }
 
 header {
+  @apply flex flex-col justify-stretch;
+}
+
+nav {
   @apply flex bg-gray-950 *:text-gray-50 *:flex-1 *:text-xl p-6;
 }
 
+code {
+  speak-as: literal-punctuation;
+  @apply inline-block bg-gray-800 text-gray-50;
+}
+
+pre {
+  @apply bg-gray-950 rounded-lg border-1 border-gray-300 mb-4 p-1;
+}
+
+pre > code {
+  @apply !bg-gray-950 p-1;
+}
+
 footer {
   @apply bg-gray-950 text-gray-50 text-lg flex p-6;
 }
 
 h1 {
-  @apply text-6xl pb-4;
+  @apply text-6xl mb-2 mt-4;
 }
 
 h2 {
-  @apply text-5xl pb-4;
+  @apply text-5xl mb-2 mt-4;
 }
 
 h3 {
-  @apply text-4xl pb-4;
+  @apply text-4xl mb-2 mt-4;
 }
 
 h4 {
-  @apply text-3xl pb-4;
+  @apply text-3xl mb-2 mt-4;
 }
 
 h5 {
-  @apply text-2xl pb-4;
+  @apply text-2xl mb-2 mt-4;
+}
+
+details {
+  @apply rounded-lg bg-gray-200 text-gray-950 p-2 text-xl;
+}
+
+aside {
+  @apply p-2 rounded-lg bg-gray-100 text-gray-950;
+}
+
+aside > mark {
+  @apply p-1 rounded-sm bg-gray-300;
+}
+
+aside > mark.info {
+  @apply bg-purple-300;
+}
+
+aside > mark.warning {
+  @apply bg-yellow-300;
+}
+
+aside > mark.alert {
+  @apply bg-red-300;
 }
 
 card {
-  @apply flex flex-col bg-gray-800 max-w-md rounded-xl shadow-lg outline;
+  @apply flex flex-col bg-gray-200 dark:bg-gray-800 dark:text-gray-100 max-w-md rounded-lg shadow-lg outline;
 }
 
 card > top {
-  @apply text-3xl font-bold text-center text-gray-50;
+  @apply text-3xl font-bold text-center dark:text-gray-50;
+}
+
+card > top > img {
+  @apply rounded-t-lg;
+}
+
+card > top > shape {
+  @apply rounded-t-lg;
 }
 
 card > bottom {
@@ -50,11 +99,11 @@ card > bottom {
 }
 
 card > middle {
-  @apply flex flex-col text-xl bg-gray-800 p-6 gap-4;
+  @apply flex flex-col text-xl p-4 gap-4;
 }
 
 label {
-  @apply font-bold text-gray-100;
+  @apply font-bold text-gray-950 dark:text-gray-100;
 }
 
 input {
@@ -70,19 +119,19 @@ button {
 }
 
 @utility btn-hover {
-  @apply bg-gray-900! text-gray-50!;
+  @apply !bg-gray-900 !text-gray-50;
 }
 
 @utility btn-alert {
-  @apply bg-red-800! text-gray-50!;
+  @apply !bg-red-800 !text-gray-50;
 }
 
 @utility btn-warning {
-  @apply bg-yellow-800! text-gray-50!;
+  @apply !bg-yellow-800 !text-gray-50;
 }
 
 @utility btn-primary {
-  @apply bg-teal-300! text-gray-950!;
+  @apply !bg-teal-300 !text-gray-950;
 }
 
 shape {
@@ -122,7 +171,7 @@ shape.video {
 }
 
 block {
-  @apply flex flex-col pl-4 pr-4 pb-10 pt-4 gap-4;
+  @apply flex flex-col p-4 mb-10 gap-4;
 }
 
 bar {
@@ -130,7 +179,6 @@ bar {
 }
 
 stack {
-  color: hsl(0, 0%, calc(var(--text) * var(--value-scale)));
   display: grid;
   grid-template-rows: 1fr;
   grid-template-columns: 1fr;
@@ -138,7 +186,6 @@ stack {
 }
 
 stack > * {
-  color: hsl(0, 0%, calc(var(--text) * var(--value-scale)));
   width: 100%;
   height: 100%;
   position: relative;
@@ -157,6 +204,10 @@ hr {
   visibility: hidden;
 }
 
+select {
+  @apply text-red-50 bg-gray-800 rounded-lg border-1 border-gray-600 p-1;
+}
+
 table {
   @apply bg-gray-200 dark:bg-gray-800 shadow-lg rounded-sm;
 }

static/style.css

@@ -7,10 +7,16 @@
     'Noto Color Emoji';
     --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
     monospace;
+    --color-red-50: oklch(97.1% 0.013 17.38);
+    --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-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);
     --color-teal-300: oklch(85.5% 0.138 181.071);
     --color-blue-400: oklch(70.7% 0.165 254.624);
+    --color-purple-300: oklch(82.7% 0.119 306.383);
     --color-gray-50: oklch(98.5% 0.0 247.839);
     --color-gray-100: oklch(96.7% 0.0 264.542);
     --color-gray-200: oklch(92.8% 0.0 264.531);
@@ -468,6 +474,9 @@
   .bg-green-400\! {
     background-color: var(--color-green-400) !important;
   }
+  .\!p-4 {
+    padding: calc(var(--spacing) * 4) !important;
+  }
   .p-0 {
     padding: calc(var(--spacing) * 0);
   }
@@ -559,6 +568,12 @@
   .text-gray-950 {
     color: var(--color-gray-950);
   }
+  .text-orange-500 {
+    color: var(--color-orange-500);
+  }
+  .text-red-500 {
+    color: var(--color-red-500);
+  }
   .shadow-lg {
     --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px 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);
@@ -631,7 +646,10 @@ body {
   }
 }
 main {
+  display: flex;
   min-height: 100vh;
+  flex-direction: column;
+  gap: calc(var(--spacing) * 4);
   background-color: var(--color-gray-100);
   padding: calc(var(--spacing) * 0);
   color: var(--color-gray-950);
@@ -643,6 +661,11 @@ main {
   }
 }
 header {
+  display: flex;
+  flex-direction: column;
+  justify-content: stretch;
+}
+nav {
   display: flex;
   background-color: var(--color-gray-950);
   padding: calc(var(--spacing) * 6);
@@ -657,6 +680,25 @@ header {
     color: var(--color-gray-50);
   }
 }
+code {
+  speak-as: literal-punctuation;
+  display: inline-block;
+  background-color: var(--color-gray-800);
+  color: var(--color-gray-50);
+}
+pre {
+  margin-bottom: calc(var(--spacing) * 4);
+  border-radius: var(--radius-lg);
+  border-style: var(--tw-border-style);
+  border-width: 1px;
+  border-color: var(--color-gray-300);
+  background-color: var(--color-gray-950);
+  padding: calc(var(--spacing) * 1);
+}
+pre > code {
+  background-color: var(--color-gray-950) !important;
+  padding: calc(var(--spacing) * 1);
+}
 footer {
   display: flex;
   background-color: var(--color-gray-950);
@@ -666,40 +708,79 @@ footer {
   color: var(--color-gray-50);
 }
 h1 {
-  padding-bottom: calc(var(--spacing) * 4);
+  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));
 }
 h2 {
-  padding-bottom: calc(var(--spacing) * 4);
+  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));
 }
 h3 {
-  padding-bottom: calc(var(--spacing) * 4);
+  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));
 }
 h4 {
-  padding-bottom: calc(var(--spacing) * 4);
+  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));
 }
 h5 {
-  padding-bottom: calc(var(--spacing) * 4);
+  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));
 }
+details {
+  border-radius: var(--radius-lg);
+  background-color: var(--color-gray-200);
+  padding: calc(var(--spacing) * 2);
+  font-size: var(--text-xl);
+  line-height: var(--tw-leading, var(--text-xl--line-height));
+  color: var(--color-gray-950);
+}
+aside {
+  border-radius: var(--radius-lg);
+  background-color: var(--color-gray-100);
+  padding: calc(var(--spacing) * 2);
+  color: var(--color-gray-950);
+}
+aside > mark {
+  border-radius: var(--radius-sm);
+  background-color: var(--color-gray-300);
+  padding: calc(var(--spacing) * 1);
+}
+aside > mark.info {
+  background-color: var(--color-purple-300);
+}
+aside > mark.warning {
+  background-color: var(--color-yellow-300);
+}
+aside > mark.alert {
+  background-color: var(--color-red-300);
+}
 card {
   display: flex;
   max-width: var(--container-md);
   flex-direction: column;
-  border-radius: var(--radius-xl);
+  border-radius: var(--radius-lg);
-  background-color: var(--color-gray-800);
+  background-color: var(--color-gray-200);
   --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px 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) {
+    background-color: var(--color-gray-800);
+  }
+  @media (prefers-color-scheme: dark) {
+    color: var(--color-gray-100);
+  }
 }
 card > top {
   text-align: center;
@@ -707,7 +788,17 @@ card > top {
   line-height: var(--tw-leading, var(--text-3xl--line-height));
   --tw-font-weight: var(--font-weight-bold);
   font-weight: var(--font-weight-bold);
-  color: var(--color-gray-50);
+  @media (prefers-color-scheme: dark) {
+    color: var(--color-gray-50);
+  }
+}
+card > top > img {
+  border-top-left-radius: var(--radius-lg);
+  border-top-right-radius: var(--radius-lg);
+}
+card > top > shape {
+  border-top-left-radius: var(--radius-lg);
+  border-top-right-radius: var(--radius-lg);
 }
 card > bottom {
   display: flex;
@@ -723,15 +814,17 @@ card > middle {
   display: flex;
   flex-direction: column;
   gap: calc(var(--spacing) * 4);
-  background-color: var(--color-gray-800);
+  padding: calc(var(--spacing) * 4);
-  padding: calc(var(--spacing) * 6);
   font-size: var(--text-xl);
   line-height: var(--tw-leading, var(--text-xl--line-height));
 }
 label {
   --tw-font-weight: var(--font-weight-bold);
   font-weight: var(--font-weight-bold);
-  color: var(--color-gray-100);
+  color: var(--color-gray-950);
+  @media (prefers-color-scheme: dark) {
+    color: var(--color-gray-100);
+  }
 }
 input {
   border-radius: var(--radius-sm);
@@ -818,13 +911,11 @@ shape.video {
   width: 100%;
 }
 block {
+  margin-bottom: calc(var(--spacing) * 10);
   display: flex;
   flex-direction: column;
   gap: calc(var(--spacing) * 4);
-  padding-top: calc(var(--spacing) * 4);
+  padding: calc(var(--spacing) * 4);
-  padding-right: calc(var(--spacing) * 4);
-  padding-bottom: calc(var(--spacing) * 10);
-  padding-left: calc(var(--spacing) * 4);
 }
 bar {
   display: flex;
@@ -833,14 +924,12 @@ bar {
   padding: calc(var(--spacing) * 4);
 }
 stack {
-  color: hsl(0, 0%, calc(var(--text) * var(--value-scale)));
   display: grid;
   grid-template-rows: 1fr;
   grid-template-columns: 1fr;
   grid-template-areas: "cover";
 }
 stack > * {
-  color: hsl(0, 0%, calc(var(--text) * var(--value-scale)));
   width: 100%;
   height: 100%;
   position: relative;
@@ -857,6 +946,15 @@ grid {
 hr {
   visibility: hidden;
 }
+select {
+  border-radius: var(--radius-lg);
+  border-style: var(--tw-border-style);
+  border-width: 1px;
+  border-color: var(--color-gray-600);
+  background-color: var(--color-gray-800);
+  padding: calc(var(--spacing) * 1);
+  color: var(--color-red-50);
+}
 table {
   border-radius: var(--radius-sm);
   background-color: var(--color-gray-200);