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> <title>ZedShaw.games</title>
</head> </head>
<body data-testid="{{.PageId}}"> <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="home" href="/">🏡</a>
<a id="live" href="/live/">Live</a> <a id="live" href="/live/">Live</a>
<a id="stream" href="/stream/">Streams</a> <a id="stream" href="/stream/">Streams</a>
@ -23,11 +23,11 @@
<a id="login" href="/login/">Login</a> <a id="login" href="/login/">Login</a>
</header> </header>
<div class="p-0 min-h-screen"> <div class="p-0 min-h-screen dark:bg-gray-900">
{{embed}} {{embed}}
</div> </div>
<footer class="bg-gray-950 text-gray-50 text-lg flex p-6"> <footer>
<div class="flex-1"> <div class="flex-1">
<shape> <shape>
<img class="size-12 shrink-0" src="/logo.png" /> <img class="size-12 shrink-0" src="/logo.png" />

4
pages/live/index.html
View file

@ -4,11 +4,11 @@
</script> </script>
<div x-init="Stream = await req.theData()" x-data="{Stream: {}}"> <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> <span>Stream Viewer</span>
</div> </div>
<div class="p-6"> <div class="p-6 flex flex-col justify-center">
<div> <div>
<h2>Links Found in Chat</h2> <h2>Links Found in Chat</h2>
<ul x-init="links = await link_req.theData()" x-data="{links: {}}"> <ul x-init="links = await link_req.theData()" x-data="{links: {}}">

20
static/input_style.css
View file

@ -1,5 +1,17 @@
@import "tailwindcss"; @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 { h1 {
@apply text-6xl pb-4; @apply text-6xl pb-4;
} }
@ -33,11 +45,15 @@ card > middle {
} }
label { label {
@apply font-bold text-white; @apply font-bold text-950 dark:text-white;
} }
input { 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 { button {

48
static/style.css
View file

@ -17,6 +17,7 @@
--color-gray-800: oklch(27.8% 0.033 256.848); --color-gray-800: oklch(27.8% 0.033 256.848);
--color-gray-900: oklch(21% 0.034 264.665); --color-gray-900: oklch(21% 0.034 264.665);
--color-gray-950: oklch(13% 0.028 261.692); --color-gray-950: oklch(13% 0.028 261.692);
--color-black: #000;
--color-white: #fff; --color-white: #fff;
--spacing: 0.25rem; --spacing: 0.25rem;
--container-md: 28rem; --container-md: 28rem;
@ -252,11 +253,8 @@
.justify-center { .justify-center {
justify-content: center; justify-content: center;
} }
.bg-gray-900 { .bg-gray-300 {
background-color: var(--color-gray-900); background-color: var(--color-gray-300);
}
.bg-gray-950 {
background-color: var(--color-gray-950);
} }
.p-0 { .p-0 {
padding: calc(var(--spacing) * 0); padding: calc(var(--spacing) * 0);
@ -271,16 +269,12 @@
font-size: var(--text-3xl); font-size: var(--text-3xl);
line-height: var(--tw-leading, var(--text-3xl--line-height)); 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 { .font-bold {
--tw-font-weight: var(--font-weight-bold); --tw-font-weight: var(--font-weight-bold);
font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold);
} }
.text-gray-50 { .text-gray-950 {
color: var(--color-gray-50); color: var(--color-gray-950);
} }
.underline { .underline {
text-decoration-line: underline; text-decoration-line: underline;
@ -290,22 +284,40 @@
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration)); 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(& > *) { :is(& > *) {
flex: 1; flex: 1;
} }
}
.\*\:text-xl {
:is(& > *) { :is(& > *) {
font-size: var(--text-xl); font-size: var(--text-xl);
line-height: var(--tw-leading, var(--text-xl--line-height)); line-height: var(--tw-leading, var(--text-xl--line-height));
} }
}
.\*\:text-gray-50 {
:is(& > *) { :is(& > *) {
color: var(--color-gray-50); 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 { h1 {
padding-bottom: calc(var(--spacing) * 4); padding-bottom: calc(var(--spacing) * 4);
@ -374,10 +386,14 @@ input {
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
background-color: var(--color-gray-200); background-color: var(--color-gray-200);
padding: calc(var(--spacing) * 1); 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)); --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); 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-style: var(--tw-outline-style);
outline-width: 1px; outline-width: 1px;
@media (prefers-color-scheme: dark) {
color: var(--color-gray-950);
}
} }
button { button {
border-radius: var(--radius-sm); border-radius: var(--radius-sm);

4
views/layouts/main.html
View file

@ -14,7 +14,7 @@
<title>ZedShaw.games</title> <title>ZedShaw.games</title>
</head> </head>
<body data-testid="{{.PageId}}"> <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="home" href="/">🏡</a>
<a id="live" href="/live/">Live</a> <a id="live" href="/live/">Live</a>
<a id="stream" href="/stream/">Streams</a> <a id="stream" href="/stream/">Streams</a>
@ -27,7 +27,7 @@
{{embed}} {{embed}}
</div> </div>
<footer class="bg-gray-950 text-gray-50 text-lg flex p-6"> <footer>
<div class="flex-1"> <div class="flex-1">
<shape> <shape>
<img class="size-12 shrink-0" src="/logo.png" /> <img class="size-12 shrink-0" src="/logo.png" />