Started the tailwind conversion process.

This commit is contained in:
Zed A. Shaw 2025-08-10 01:19:30 -04:00
parent ca8f4e194f
commit 9729ebc7ac
22 changed files with 970 additions and 365 deletions

View file

@ -2,6 +2,7 @@
let Games = new PaginateTable("/api/game");
</script>
<blockstart>
<block style="--w: 100%; --value: 7">
<h1 id="page-title">Zed's Trash Ass Games</h1>
@ -28,3 +29,4 @@
<p>Polaroid retro pork belly yes plz bitters, viral chicharrones typewriter chartreuse vice Brooklyn. Adaptogen pour-over vibecession viral. Tote bag tonx DIY microdosing. Pickled selvage bespoke small batch, blue bottle twee tacos jean shorts before they sold out chicharrones solarpunk. Hoodie taiyaki poutine jianbing chambray.</p>
<button><a href="https://git.learnjsthehardway.com/learn-code-the-hard-way/turings-tarpit">View the Git</a></button>
</block>
</blockstart>

View file

@ -1,3 +1,4 @@
<blockstart>
<h1>Zed's Game Dev Website</h1>
<shape style="--w: 100%; --h: 300px">
@ -61,3 +62,4 @@
<p>Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. Summus brains sit, morbo vel maleficia? De apocalypsi gorger omero undead survivor dictum mauris. Hi mindless mortuis soulless creaturas, imo evil stalking monstra adventus resi dentevil vultus comedat cerebella viventium. Qui animated corpse, cricket bat max brucks terribilem incessu zomby.
</p>
</block>
</blockstart>

View file

@ -7,45 +7,39 @@
<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="/global.css">
<link rel="stylesheet" href="/color.css">
<link rel="stylesheet" href="/blockstart.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}}">
<header>
<blockstart style="background-color: var(--value0)">
<block style="--value: 0; --text: 9" class="horizontal">
<a id="home" href="/">🏡</a>
<a id="live" href="/live/">Live</a>
<a id="stream" href="/stream/">Streams</a>
<a id="game" href="/game/">Games</a>
<a id="register" href="/register/">Register</a>
<a id="login" href="/login/">Login</a>
</block>
</blockstart>
<header class="flex bg-gray-950 *:text-gray-50 *:flex-1 *:text-xl p-6">
<a id="home" href="/">🏡</a>
<a id="live" href="/live/">Live</a>
<a id="stream" href="/stream/">Streams</a>
<a id="game" href="/game/">Games</a>
<a id="register" href="/register/">Register</a>
<a id="login" href="/login/">Login</a>
</header>
<blockstart>
{{embed}}
</blockstart>
<div class="p-0 min-h-screen">
{{embed}}
</div>
<footer>
<blockstart style="--value: 0; --text: 9">
<block class="horizontal">
<shape style="--w: 200px; --h: 250px">Zed Pic</shape>
<footer class="bg-gray-950 text-gray-50 text-lg flex p-6">
<div class="flex-1">
<shape>
<img class="size-12 shrink-0" src="/logo.png" />
</shape>
<div>
<h3>About Me</h3>
<p>Blah blah about me.</p>
</div>
<div>
<h3>Other Projects</h3>
<p>Some other links to stuff.</p>
</div>
</block>
</blockstart>
</div>
<div class="flex-1">
<h3 class="text-3xl">Other Projects</h3>
<p>Some other links to stuff.</p>
</div>
</footer>
</body>
</html>

View file

@ -4,30 +4,32 @@
</script>
<div x-init="Stream = await req.theData()" x-data="{Stream: {}}">
<shape style="--w: 100%; --h: 350px">
Stream Viewer
</shape>
<div class="flex justify-center items-center w-full bg-gray-900 text-gray-50 text-center aspect-video">
<span>Stream Viewer</span>
</div>
<block>
<div class="p-6">
<div>
<h2>Links Found in Chat</h2>
<ul x-init="links = await link_req.theData()" x-data="{links: {}}">
<template x-for="item in links">
<li><a x-text="item.description" x-bind:href="item.url"></a></li>
</template>
</ul>
</block>
</div>
<form action="/api/link" method="POST">
<card>
<card class="card">
<top>Submit a Link</top>
<middle>
<input id="stream_id" name="stream_id" type="hidden" value="1">
<input id="url" name="url" type="text" placeholder="Link Url">
<input id="description" name="description" type="text" placeholder="Description">
</middle>
<bottom>
<button id="submit" type="submit">Send It</button>
</bottom>
</card>
<buttons>
<button id="submit" type="submit">Send It</button>
</buttons>
</form>
</div>
</div>

View file

@ -1,5 +1,4 @@
<h1>Login</h1>
<block class="center-self" style="--w: 500px; --h: 500px;">
<div class="flex flex-col items-center p-6">
<form action="/api/login" method="POST">
<card>
<top><h2 style="color: white">Login</h2></top>
@ -10,12 +9,10 @@
<input id="password" name="password" placeholder="Password" type="password">
</middle>
<bottom>
<button-group>
<button type="button">Cancel</button>
<button id="login-submit" type="submit">Login</button>
</button-group>
<button type="button">Cancel</button>
<button id="login-submit" type="submit">Login</button>
</bottom>
</card>
</form>
<div class="center"><a href="/register/">Need an account? Click to Register.</a></div>
</block>
</div>

View file

@ -1,5 +1,4 @@
<h1>Login</h1>
<block class="center-self" style="--w: 500px; --h: 500px;">
<div class="flex flex-col items-center p-6 min-w-md">
<form action="/api/register" method="POST">
<card>
<top><h2 style="color: white">Register</h2></top>
@ -12,12 +11,10 @@
<input id="password" name="password" placeholder="Password" type="password">
</middle>
<bottom>
<button-group>
<button type="button">Cancel</button>
<button id="register-submit" type="submit">Register</button>
</button-group>
<button type="button">Cancel</button>
<button id="register-submit" type="submit">Register</button>
</bottom>
</card>
</form>
<div class="center"><a href="/login/">Have an account? Click to Login.</a></div>
</block>
</div>

View file

@ -1,7 +1,7 @@
<script>
let Streams = new PaginateTable("/api/stream");
</script>
<blockstart>
<block style="--value: 7">
<h1 id="page-title">Past Streams</h1>
<p>This is where you can checkout information we dropped in a past stream. Did I post a link and you need to remember it? Did someone in chat mention something? Here's where you find it.</p>
@ -19,3 +19,4 @@
</stream>
</template>
</block>
</blockstart>

10
pages/tailwind.md Normal file
View file

@ -0,0 +1,10 @@
# Tailwind Notes
This is where I'll put things I need to find later and notes.
* [Size values](https://tailwindcss.com/docs/width)
* [@apply](https://tailwindcss.com/docs/functions-and-directives)
* You can do a process of "hack it in html, officilize it in input.css" where you make it look/work how you want live, then pull it out into an @apply so it's available everywhere.
* Seems it only reliably workson divs, so need to find the setting for bare tags.
* https://daisyui.com/
* https://nostalgic-css.github.io/NES.css/