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

Fully converted to tailwind now.

Browse source
This commit is contained in:
Zed A. Shaw 2025-08-11 13:56:06 -04:00
parent 8906322b6d
commit 5da8697759
18 changed files with 386 additions and 122 deletions
Download patch file Download diff file Expand all files Collapse all files

89
static/input_style.css
View file

@ -45,7 +45,7 @@ card > middle {
}
label {
@apply font-bold text-950 dark:text-white;
@apply font-bold text-gray-950 dark:text-white;
}
input {
@ -57,5 +57,90 @@ input::placeholder {
}
button {
@apply rounded-sm shadow-sm bg-gray-100 text-gray-950 p-3;
@apply rounded-sm shadow-sm bg-gray-300 text-gray-950 p-3;
}
@utility btn-hover {
@apply bg-gray-900! text-gray-50!;
}
@utility btn-alert {
@apply bg-red-800! text-gray-50!;
}
@utility btn-warning {
@apply bg-yellow-800! text-gray-50!;
}
shape {
@apply bg-gray-300 flex flex-col justify-center items-center aspect-square p-1 text-gray-950;
}
shape.tiny {
@apply min-w-15 w-15 max-w-15 p-0;
}
shape.xxs {
@apply min-w-30 w-30 max-w-30 p-0;
}
shape.xs {
@apply min-w-xs w-xs max-w-xs;
}
shape.sm {
@apply min-w-sm w-sm max-w-sm;
}
shape.md {
@apply min-w-md w-md max-w-md;
}
shape.lg {
@apply min-w-lg w-lg max-w-lg;
}
shape.xl {
@apply min-w-xl w-xl max-w-xl;
}
shape.video {
@apply w-full aspect-video;
}
block {
@apply flex flex-col pl-4 pr-4 pb-10 pt-4;
}
block.horizontal {
@apply flex flex-row p-4 gap-4;
}
stack {
color: hsl(0, 0%, calc(var(--text) * var(--value-scale)));
display: grid;
grid-template-rows: 1fr;
grid-template-columns: 1fr;
grid-template-areas: "cover";
}
stack > * {
color: hsl(0, 0%, calc(var(--text) * var(--value-scale)));
width: 100%;
height: 100%;
position: relative;
grid-area: cover;
}
stack > .top {
z-index: 10;
}
grid {
@apply grid gap-2 p-4;
}
hr {
visibility: hidden;
}

234
static/style.css
View file

@ -7,6 +7,7 @@
'Noto Color Emoji';
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
monospace;
--color-red-800: oklch(44.4% 0.177 26.899);
--color-yellow-900: oklch(42.1% 0.095 57.708);
--color-gray-50: oklch(98.5% 0.002 247.839);
--color-gray-100: oklch(96.7% 0.003 264.542);
@ -14,13 +15,18 @@
--color-gray-300: oklch(87.2% 0.01 258.338);
--color-gray-400: oklch(70.7% 0.022 261.325);
--color-gray-500: oklch(55.1% 0.027 264.364);
--color-gray-700: oklch(37.3% 0.034 259.733);
--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-xs: 20rem;
--container-sm: 24rem;
--container-md: 28rem;
--container-lg: 32rem;
--container-xl: 36rem;
--text-sm: 0.875rem;
--text-sm--line-height: calc(1.25 / 0.875);
--text-lg: 1.125rem;
@ -226,6 +232,9 @@
width: calc(var(--spacing) * 12);
height: calc(var(--spacing) * 12);
}
.h-10 {
height: calc(var(--spacing) * 10);
}
.min-h-screen {
min-height: 100vh;
}
@ -244,6 +253,9 @@
.transform {
transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
}
.grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.flex-col {
flex-direction: column;
}
@ -253,12 +265,33 @@
.justify-center {
justify-content: center;
}
.gap-4 {
gap: calc(var(--spacing) * 4);
}
.rounded-sm {
border-radius: var(--radius-sm);
}
.bg-gray-300 {
background-color: var(--color-gray-300);
}
.bg-gray-400 {
background-color: var(--color-gray-400);
}
.bg-gray-800 {
background-color: var(--color-gray-800);
}
.bg-gray-950 {
background-color: var(--color-gray-950);
}
.p-0 {
padding: calc(var(--spacing) * 0);
}
.p-3 {
padding: calc(var(--spacing) * 3);
}
.p-4 {
padding: calc(var(--spacing) * 4);
}
.p-6 {
padding: calc(var(--spacing) * 6);
}
@ -269,21 +302,91 @@
font-size: var(--text-3xl);
line-height: var(--tw-leading, var(--text-3xl--line-height));
}
.font-bold {
--tw-font-weight: var(--font-weight-bold);
font-weight: var(--font-weight-bold);
}
.text-gray-950 {
color: var(--color-gray-950);
}
.underline {
text-decoration-line: underline;
.shadow-lg {
--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px 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);
}
.transition {
transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.\*\:border-2 {
:is(& > *) {
border-style: var(--tw-border-style);
border-width: 2px;
}
}
.\*\:border-x {
:is(& > *) {
border-inline-style: var(--tw-border-style);
border-inline-width: 1px;
}
}
.\*\:border-black {
:is(& > *) {
border-color: var(--color-black);
}
}
.\*\:p-1 {
:is(& > *) {
padding: calc(var(--spacing) * 1);
}
}
.hover\:btn-alert {
&:hover {
@media (hover: hover) {
background-color: var(--color-red-800) !important;
color: var(--color-gray-50) !important;
}
}
}
.hover\:btn-hover {
&:hover {
@media (hover: hover) {
background-color: var(--color-gray-900) !important;
color: var(--color-gray-50) !important;
}
}
}
.hover\:bg-gray-100 {
&:hover {
@media (hover: hover) {
background-color: var(--color-gray-100);
}
}
}
.hover\:bg-gray-300 {
&:hover {
@media (hover: hover) {
background-color: var(--color-gray-300);
}
}
}
.hover\:bg-gray-800 {
&:hover {
@media (hover: hover) {
background-color: var(--color-gray-800);
}
}
}
.hover\:bg-gray-950 {
&:hover {
@media (hover: hover) {
background-color: var(--color-gray-950);
}
}
}
.hover\:text-gray-950 {
&:hover {
@media (hover: hover) {
color: var(--color-gray-950);
}
}
}
.dark\:bg-gray-900 {
@media (prefers-color-scheme: dark) {
background-color: var(--color-gray-900);
@ -380,7 +483,10 @@ card > middle {
label {
--tw-font-weight: var(--font-weight-bold);
font-weight: var(--font-weight-bold);
color: var(--color-white);
color: var(--color-gray-950);
@media (prefers-color-scheme: dark) {
color: var(--color-white);
}
}
input {
border-radius: var(--radius-sm);
@ -395,14 +501,110 @@ input {
color: var(--color-gray-950);
}
}
input::placeholder {
color: var(--color-gray-700);
@media (prefers-color-scheme: dark) {
color: var(--color-gray-700);
}
}
button {
border-radius: var(--radius-sm);
background-color: var(--color-gray-100);
background-color: var(--color-gray-300);
padding: calc(var(--spacing) * 3);
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);
}
shape {
display: flex;
aspect-ratio: 1 / 1;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: var(--color-gray-300);
padding: calc(var(--spacing) * 1);
color: var(--color-gray-950);
}
shape.tiny {
width: calc(var(--spacing) * 15);
max-width: calc(var(--spacing) * 15);
min-width: calc(var(--spacing) * 15);
padding: calc(var(--spacing) * 0);
}
shape.xxs {
width: calc(var(--spacing) * 30);
max-width: calc(var(--spacing) * 30);
min-width: calc(var(--spacing) * 30);
padding: calc(var(--spacing) * 0);
}
shape.xs {
width: var(--container-xs);
max-width: var(--container-xs);
min-width: var(--container-xs);
}
shape.sm {
width: var(--container-sm);
max-width: var(--container-sm);
min-width: var(--container-sm);
}
shape.md {
width: var(--container-md);
max-width: var(--container-md);
min-width: var(--container-md);
}
shape.lg {
width: var(--container-lg);
max-width: var(--container-lg);
min-width: var(--container-lg);
}
shape.xl {
width: var(--container-xl);
max-width: var(--container-xl);
min-width: var(--container-xl);
}
shape.video {
aspect-ratio: var(--aspect-video);
width: 100%;
}
block {
display: flex;
flex-direction: column;
padding-top: calc(var(--spacing) * 4);
padding-right: calc(var(--spacing) * 4);
padding-bottom: calc(var(--spacing) * 10);
padding-left: calc(var(--spacing) * 4);
}
block.horizontal {
display: flex;
flex-direction: row;
gap: calc(var(--spacing) * 4);
padding: calc(var(--spacing) * 4);
}
stack {
color: hsl(0, 0%, calc(var(--text) * var(--value-scale)));
display: grid;
grid-template-rows: 1fr;
grid-template-columns: 1fr;
grid-template-areas: "cover";
}
stack > * {
color: hsl(0, 0%, calc(var(--text) * var(--value-scale)));
width: 100%;
height: 100%;
position: relative;
grid-area: cover;
}
stack > .top {
z-index: 10;
}
grid {
display: grid;
gap: calc(var(--spacing) * 2);
padding: calc(var(--spacing) * 4);
}
hr {
visibility: hidden;
}
@property --tw-rotate-x {
syntax: "*";
inherits: false;
@ -423,10 +625,6 @@ button {
syntax: "*";
inherits: false;
}
@property --tw-font-weight {
syntax: "*";
inherits: false;
}
@property --tw-shadow {
syntax: "*";
inherits: false;
@ -492,11 +690,20 @@ button {
inherits: false;
initial-value: 0 0 #0000;
}
@property --tw-border-style {
syntax: "*";
inherits: false;
initial-value: solid;
}
@property --tw-outline-style {
syntax: "*";
inherits: false;
initial-value: solid;
}
@property --tw-font-weight {
syntax: "*";
inherits: false;
}
@layer properties {
@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
*, ::before, ::after, ::backdrop {
@ -505,7 +712,6 @@ button {
--tw-rotate-z: initial;
--tw-skew-x: initial;
--tw-skew-y: initial;
--tw-font-weight: initial;
--tw-shadow: 0 0 #0000;
--tw-shadow-color: initial;
--tw-shadow-alpha: 100%;
@ -520,7 +726,9 @@ button {
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-offset-shadow: 0 0 #0000;
--tw-border-style: solid;
--tw-outline-style: solid;
--tw-font-weight: initial;
}
}
}