Fixed up dark mode vs. not and added a linkedin mobil copy.

This commit is contained in:
Zed A. Shaw 2025-08-14 00:37:02 -04:00
parent bf1426261d
commit 2477603190
12 changed files with 758 additions and 491 deletions

View file

@ -1,10 +1,9 @@
<div class="text-gray-950">
<block class="horizontal justify-between">
<bar class="justify-between">
<img src="/icons/cup-soda.svg" alt="Home" />
<img src="/icons/bell.svg" alt="Home" />
<img src="/icons/menu.svg" alt="Home" />
</block>
</bar>
<block class="gap-10">
<div class="flex text-2xl gap-4">
@ -12,16 +11,15 @@
<a href="#">learn-code-the-hard-way</a> / <a href="#">ssgod</a>
</div>
<div class="flex gap-4">
<bar>
<button>Unwatch</button>
<button>Start</button>
<button>Fork</button>
</div>
</bar>
</block>
<block>
<div class="flex gap-4 border-b-1 border-gray-500 pb-3 *:text-nowrap">
<bar class="border-b-1 border-gray-500 pb-3 *:text-nowrap">
<button>Code</button>
<button>Issues</button>
<button>Pull Requests</button>
@ -29,8 +27,8 @@
<button>Projects</button>
<button>Releases</button>
<button>Wiki</button>
</div>
<div class="flex flex-col gap-4">
</bar>
<block>
<p class="text-2xl">SSG is a Static Site Generator that is only a Static Site Generator. No resumes here! Just a piece of code that generates static files from templates for websites, and can do it live while you develop said templates.</p>
<h3 class="text-xl!">Manage Topics</h3>
@ -40,98 +38,54 @@
<span><img class="inline" src="/icons/tag.svg" /> 0 Tags</span>
<span><img class="inline" src="/icons/database.svg" /> 589 KiB</span>
</toolbar>
</div>
</block>
<hr class="pb-6"/>
<div class="flex flex-col rounded-md border-1 border-gray-300">
<div class="flex p-2 w-full justify-between border-b-1 border-gray-300">
<block class="rounded-md border-1 border-gray-300 p-0!">
<bar class="p-2! w-full justify-between border-b-1 border-gray-300">
<span><img class="inline" src="/icons/baby.svg"> Name</span>
<span>Time</span>
</div>
<div class="flex p-2 w-full justify-between border-b-1 border-gray-300">
</bar>
<bar class="p-2! w-full justify-between border-b-1 border-gray-300">
<span><img class="inline" src="/icons/baby.svg"> Name</span>
<span>Time</span>
</div>
<div class="flex p-2 w-full justify-between border-b-1 border-gray-300">
</bar>
<bar class="p-2! w-full justify-between border-b-1 border-gray-300">
<span><img class="inline" src="/icons/baby.svg"> Name</span>
<span>Time</span>
</div>
<div class="flex p-2 w-full justify-between border-b-1 border-gray-300">
</bar>
<bar class="p-2! w-full justify-between border-b-1 border-gray-300">
<span><img class="inline" src="/icons/baby.svg"> Name</span>
<span>Time</span>
</div>
<div class="flex p-2 w-full justify-between border-b-1 border-gray-300">
</bar>
<bar class="p-2! w-full justify-between border-b-1 border-gray-300">
<span><img class="inline" src="/icons/baby.svg"> Name</span>
<span>Time</span>
</div>
<div class="flex p-2 w-full justify-between border-b-1 border-gray-300">
</bar>
<bar class="p-2! w-full justify-between border-b-1 border-gray-300">
<span><img class="inline" src="/icons/baby.svg"> Name</span>
<span>Time</span>
</div>
<div class="flex p-2 w-full justify-between border-b-1 border-gray-300">
</bar>
<bar class="p-2! w-full justify-between border-b-1 border-gray-300">
<span><img class="inline" src="/icons/baby.svg"> Name</span>
<span>Time</span>
</div>
<div class="flex p-2 w-full justify-between border-b-1 border-gray-300">
</bar>
<bar class="p-2! w-full justify-between border-b-1 border-gray-300">
<span><img class="inline" src="/icons/baby.svg"> Name</span>
<span>Time</span>
</div>
<div class="flex p-2 w-full justify-between border-b-1 border-gray-300">
</bar>
<bar class="p-2! w-full justify-between border-b-1 border-gray-300">
<span><img class="inline" src="/icons/baby.svg"> Name</span>
<span>Time</span>
</div>
<div class="flex p-2 w-full justify-between border-b-1 border-gray-300">
</bar>
<bar class="p-2! w-full justify-between border-b-1 border-gray-300">
<span><img class="inline" src="/icons/baby.svg"> Name</span>
<span>Time</span>
</div>
<div class="flex p-2 w-full justify-between border-b-1 border-gray-300">
</bar>
<bar class="p-2! w-full justify-between border-b-1 border-gray-300">
<span><img class="inline" src="/icons/baby.svg"> Name</span>
<span>Time</span>
</div>
<div class="flex p-2 w-full justify-between border-b-1 border-gray-300">
<span><img class="inline" src="/icons/baby.svg"> Name</span>
<span>Time</span>
</div>
<div class="flex p-2 w-full justify-between border-b-1 border-gray-300">
<span><img class="inline" src="/icons/baby.svg"> Name</span>
<span>Time</span>
</div>
<div class="flex p-2 w-full justify-between border-b-1 border-gray-300">
<span><img class="inline" src="/icons/baby.svg"> Name</span>
<span>Time</span>
</div>
<div class="flex p-2 w-full justify-between border-b-1 border-gray-300">
<span><img class="inline" src="/icons/baby.svg"> Name</span>
<span>Time</span>
</div>
<div class="flex p-2 w-full justify-between border-b-1 border-gray-300">
<span><img class="inline" src="/icons/baby.svg"> Name</span>
<span>Time</span>
</div>
<div class="flex p-2 w-full justify-between border-b-1 border-gray-300">
<span><img class="inline" src="/icons/baby.svg"> Name</span>
<span>Time</span>
</div>
<div class="flex p-2 w-full justify-between border-b-1 border-gray-300">
<span><img class="inline" src="/icons/baby.svg"> Name</span>
<span>Time</span>
</div>
<div class="flex p-2 w-full justify-between border-b-1 border-gray-300">
<span><img class="inline" src="/icons/baby.svg"> Name</span>
<span>Time</span>
</div>
<div class="flex p-2 w-full justify-between border-b-1 border-gray-300">
<span><img class="inline" src="/icons/baby.svg"> Name</span>
<span>Time</span>
</div>
<div class="flex p-2 w-full justify-between border-b-1 border-gray-300">
<span><img class="inline" src="/icons/baby.svg"> Name</span>
<span>Time</span>
</div>
<div class="flex p-2 w-full justify-between border-b-1 border-gray-300">
<span><img class="inline" src="/icons/baby.svg"> Name</span>
<span>Time</span>
</div>
</bar>
</block>
</div>

97
pages/copy/linkedin.html Normal file
View file

@ -0,0 +1,97 @@
<div class="text-gray-950">
<bar class="justify-evenly border-b-1 border-gray-300">
<img src="/icons/linkedin.svg" />
<img src="/icons/search.svg" />
<img src="/icons/person-standing.svg" />
<img src="/icons/briefcase.svg" />
<img src="/icons/message-square.svg" />
<img src="/icons/bell.svg" />
</bar>
<stack>
<shape class="max-h-10">Header Image</shape>
<shape class="tiny bg-green-400! top-3 left-3 rounded-full">Avatar</shape>
</stack>
<block>
<h5 class="pb-0!">Zed Shaw</h5>
<span>I write books and stuff.</span>
<span class="font-light">Miami Beach, Florida</span>
<span class="font-bold">Shavian Publishing, LLC</span>
</block>
<shape class="w-full h-15">Show More <img class="inline" src="/icons/chevron-down.svg" /></shape>
<bar>
<shape class="tiny bg-green-400! top-3 left-3 rounded-full">Avatar</shape>
<input type="text" class="w-full rounded-xl" />
</bar>
<bar class="justify-evenly">
<span><img class="inline" src="/icons/video.svg" /> Video</span>
<span><img class="inline" src="/icons/camera.svg" /> Photo</span>
<span><img class="inline" src="/icons/file-spreadsheet.svg" /> Write article</span>
</bar>
<bar class="bg-gray-300 justify-end">
<span>Sort by: <b>Top</b></span>
</bar>
<post class="flex flex-col border-b-1 border-gray-300">
<bar class="gap-0! items-center">
<shape class="tiny max-h-15! bg-green-400! top-3 left-3 rounded-full">Avatar</shape>
<block class="gap-0!">
<span>Some Dude</span>
<span class="font-light">Title</span>
<span class="font-light">14h Edited</span>
</block>
</bar>
<block>
<p>Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. Summus brains sit, morbo vel maleficia?</p>
</block>
<shape class="video">Some Image</shape>
<bar class="justify-evenly">
<span><img src="/icons/thumbs-up.svg" /></span>
<span><img src="/icons/message-square.svg" /></span>
<span><img src="/icons/repeat.svg" /></span>
<span><img src="/icons/send.svg" /></span>
</bar>
</post>
<post class="flex flex-col border-b-1 border-gray-300">
<bar class="gap-0! items-center">
<shape class="tiny max-h-15! bg-green-400! top-3 left-3 rounded-full">Avatar</shape>
<block class="gap-0!">
<span>Some Dude</span>
<span class="font-light">Title</span>
<span class="font-light">14h Edited</span>
</block>
</bar>
<block>
<p>Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. Summus brains sit, morbo vel maleficia?</p>
</block>
<shape class="video">Some Image</shape>
<bar class="justify-evenly">
<span><img src="/icons/thumbs-up.svg" /></span>
<span><img src="/icons/message-square.svg" /></span>
<span><img src="/icons/repeat.svg" /></span>
<span><img src="/icons/send.svg" /></span>
</bar>
</post>
<grid class="grid-cols-2">
<block>
<span>Job search smarter</span>
<span class="font-light">Zed reactivate this bullshit.</span>
<span>John and millions more use</span>
<button class="bg-blue-400 rounded-full">Claim Offer</button>
</block>
<shape class="tiny bg-green-400! top-3 left-3 rounded-full">Avatar</shape>
</grid>
</div>

View file

@ -1,25 +1,25 @@
<div class="text-gray-950">
<block class="horizontal justify-between">
<bar class="justify-between">
<logo><img class="inline" src="/icons/box.svg"/> STRIDE</logo>
<menu>
<img src="/icons/menu.svg"/>
</menu>
</block>
</bar>
<stack>
<shape class="xxl"></shape>
<block class="justify-end gap-4">
<block class="justify-end">
<h2>Stride Game Engine</h2>
<p>Stride is a free and open-source cross-platform C# game engine.</p>
<p>It is fit for both 2D and 3D games, as well as any other interactive content running on desktop and VR.</p>
<div class="flex gap-4">
<bar>
<button class="btn-alert"><img class="inline" src="/icons/download.svg"/> Download 4.2</button>
<button class="btn-primary"><img class="inline" src="/icons/alert-circle.svg" />Donate</button>
</div>
</bar>
</block>
</stack>
@ -99,7 +99,7 @@
<hr class="pb-6"/>
<block class="gap-4 bg-gray-300 shadow-lg">
<block class="bg-gray-300 shadow-lg">
<h4>Featured Sponsors</h4>
<p>Thanks to our featured sponsors for supporting Stride and empowering creators with the resources they need to bring their visions to life.</p>
@ -118,16 +118,16 @@
<div class="w-full aspect-video bg-gray-50">&nbsp;</div>
<block>
<p class="text-center">
A visual live-programming environment that takes you from rapid prototyping to final production.
</p>
<p class="text-center">
A visual live-programming environment that takes you from rapid prototyping to final production.
</p>
</block>
</panel>
</grid>
</block>
</block>
<block class="bg-gray-600 text-gray-50 gap-4">
<block class="bg-gray-600 text-gray-50">
<grid class="grid-cols-2">
<shape class="xxs">Content1</shape>
<shape class="xxs">Content2</shape>

View file

@ -2,7 +2,7 @@
let Games = new PaginateTable("/api/game");
</script>
<block class="bg-gray-800">
<block class="bg-gray-300 dark:bg-gray-800">
<h1 id="page-title">Zed's Trash Ass Games</h1>
<p>More fun than a barrel full of monkeys with syphilus.
@ -20,7 +20,7 @@
</grid>
<block class="bg-gray-800">
<block class="bg-gray-300 dark:bg-gray-800">
<h2>Read The Code</h2>
<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>

View file

@ -6,7 +6,7 @@
</shape>
</div>
<block class="bg-gray-800" data-testid="clickblock">
<block class="bg-gray-300 dark:bg-gray-800" data-testid="clickblock">
<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>
@ -24,7 +24,7 @@
</grid>
</block>
<block class="bg-gray-800">
<block class="bg-gray-300 dark:bg-gray-800">
<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>
@ -41,7 +41,7 @@
</grid>
</block>
<block class="bg-gray-800">
<block class="bg-gray-300 dark:bg-gray-800">
<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>
@ -58,7 +58,7 @@
</grid>
</block>
<block class="bg-gray-800">
<block class="bg-gray-300 dark:bg-gray-800">
<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>

View file

@ -22,7 +22,7 @@
<a id="login" href="/login/">Login</a>
</header>
<div class="p-0 min-h-screen dark:bg-gray-900">
<div class="p-0 min-h-screen bg-gray-100 text-gray-950 dark:bg-gray-900 dark:text-gray-50">
{{embed}}
</div>

View file

@ -9,8 +9,8 @@
<block x-data="Streams" class="gap-4">
<template x-for="item in contents">
<stream class="flex p-3 gap-4 bg-gray-800">
<shape class="xxs">Stream Thumbnail</shape>
<stream class="flex p-3 gap-4 bg-gray-300 dark:bg-gray-800">
<shape class="xxs bg-gray-400! dark:bg-gray-300">Stream Thumbnail</shape>
<info>
<date x-text="item.date"></date>
<p x-text="item.description"></p>