site/zedshaw.games
1
0
Fork 0
Code Issues 7 Pull requests Projects Releases Packages Wiki Activity Actions

A bit of tweaking of the design to learn more about tailwind.

Browse source
This commit is contained in:
Zed A. Shaw 2025-08-10 21:38:34 -04:00
parent 9729ebc7ac
commit 8906322b6d
5 changed files with 64 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

6
pages/layouts/main.html
View file

@ -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" />

4
pages/live/index.html
View file

@ -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: {}}">

20
static/input_style.css
View file

@ -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 {

48
static/style.css
View file

@ -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,22 +284,40 @@
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.\*\:flex-1 {
.dark\:bg-gray-900 {
@media (prefers-color-scheme: dark) {
background-color: var(--color-gray-900);
}
}
}
body {
color: var(--color-gray-950);
@media (prefers-color-scheme: dark) {
color: var(--color-gray-50);
}
}
header {
display: flex;
background-color: var(--color-gray-950);
padding: calc(var(--spacing) * 6);
:is(& > *) {
flex: 1;
}
}
.\*\:text-xl {
:is(& > *) {
font-size: var(--text-xl);
line-height: var(--tw-leading, var(--text-xl--line-height));
}
}
.\*\:text-gray-50 {
: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);
@ -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);

4
views/layouts/main.html
View file

@ -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" />