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

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 {

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