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

Created a basic set of tools for making my sites.

Browse source
This commit is contained in:
Zed A. Shaw 2025-08-24 00:53:20 -04:00
parent 3ab3103e84
commit 01fcb964be
6 changed files with 356 additions and 52 deletions
Download patch file Download diff file Expand all files Collapse all files

85
static/input_style.css
View file

@ -6,43 +6,92 @@ body {
}
main {
@apply p-0 min-h-screen bg-gray-100 text-gray-950 dark:bg-gray-900 dark:text-gray-50;
@apply flex flex-col gap-4 p-0 min-h-screen bg-gray-100 text-gray-950 dark:bg-gray-900 dark:text-gray-50;
}
header {
@apply flex flex-col justify-stretch;
}
nav {
@apply flex bg-gray-950 *:text-gray-50 *:flex-1 *:text-xl p-6;
}
code {
speak-as: literal-punctuation;
@apply inline-block bg-gray-800 text-gray-50;
}
pre {
@apply bg-gray-950 rounded-lg border-1 border-gray-300 mb-4 p-1;
}
pre > code {
@apply !bg-gray-950 p-1;
}
footer {
@apply bg-gray-950 text-gray-50 text-lg flex p-6;
}
h1 {
@apply text-6xl pb-4;
@apply text-6xl mb-2 mt-4;
}
h2 {
@apply text-5xl pb-4;
@apply text-5xl mb-2 mt-4;
}
h3 {
@apply text-4xl pb-4;
@apply text-4xl mb-2 mt-4;
}
h4 {
@apply text-3xl pb-4;
@apply text-3xl mb-2 mt-4;
}
h5 {
@apply text-2xl pb-4;
@apply text-2xl mb-2 mt-4;
}
details {
@apply rounded-lg bg-gray-200 text-gray-950 p-2 text-xl;
}
aside {
@apply p-2 rounded-lg bg-gray-100 text-gray-950;
}
aside > mark {
@apply p-1 rounded-sm bg-gray-300;
}
aside > mark.info {
@apply bg-purple-300;
}
aside > mark.warning {
@apply bg-yellow-300;
}
aside > mark.alert {
@apply bg-red-300;
}
card {
@apply flex flex-col bg-gray-800 max-w-md rounded-xl shadow-lg outline;
@apply flex flex-col bg-gray-200 dark:bg-gray-800 dark:text-gray-100 max-w-md rounded-lg shadow-lg outline;
}
card > top {
@apply text-3xl font-bold text-center text-gray-50;
@apply text-3xl font-bold text-center dark:text-gray-50;
}
card > top > img {
@apply rounded-t-lg;
}
card > top > shape {
@apply rounded-t-lg;
}
card > bottom {
@ -50,11 +99,11 @@ card > bottom {
}
card > middle {
@apply flex flex-col text-xl bg-gray-800 p-6 gap-4;
@apply flex flex-col text-xl p-4 gap-4;
}
label {
@apply font-bold text-gray-100;
@apply font-bold text-gray-950 dark:text-gray-100;
}
input {
@ -70,19 +119,19 @@ button {
}
@utility btn-hover {
@apply bg-gray-900! text-gray-50!;
@apply !bg-gray-900 !text-gray-50;
}
@utility btn-alert {
@apply bg-red-800! text-gray-50!;
@apply !bg-red-800 !text-gray-50;
}
@utility btn-warning {
@apply bg-yellow-800! text-gray-50!;
@apply !bg-yellow-800 !text-gray-50;
}
@utility btn-primary {
@apply bg-teal-300! text-gray-950!;
@apply !bg-teal-300 !text-gray-950;
}
shape {
@ -122,7 +171,7 @@ shape.video {
}
block {
@apply flex flex-col pl-4 pr-4 pb-10 pt-4 gap-4;
@apply flex flex-col p-4 mb-10 gap-4;
}
bar {
@ -130,7 +179,6 @@ bar {
}
stack {
color: hsl(0, 0%, calc(var(--text) * var(--value-scale)));
display: grid;
grid-template-rows: 1fr;
grid-template-columns: 1fr;
@ -138,7 +186,6 @@ stack {
}
stack > * {
color: hsl(0, 0%, calc(var(--text) * var(--value-scale)));
width: 100%;
height: 100%;
position: relative;
@ -157,6 +204,10 @@ hr {
visibility: hidden;
}
select {
@apply text-red-50 bg-gray-800 rounded-lg border-1 border-gray-600 p-1;
}
table {
@apply bg-gray-200 dark:bg-gray-800 shadow-lg rounded-sm;
}