Have the landing page working on mobile/small screens using the oh so intuitive 'sm which actually means bigger than sm so not sm' thing in tailwind. Larger screens are still a problem.

This commit is contained in:
Zed A. Shaw 2025-09-16 00:51:55 -04:00
parent a2f9660d81
commit 4b18e24f1b
3 changed files with 82 additions and 58 deletions

View file

@ -6,7 +6,7 @@ body {
}
main {
@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;
@apply flex flex-col gap-4 p-0 min-h-screen bg-gray-200 text-black dark:bg-gray-900 dark:text-gray-50;
}
header {
@ -72,7 +72,7 @@ details {
}
aside {
@apply p-2 rounded-lg bg-gray-100 text-gray-950;
@apply flex rounded-none flex-col p-4 gap-4 bg-gray-300 text-gray-950 text-2xl dark:text-gray-50 font-semibold dark:bg-gray-800;
}
aside > mark {
@ -236,3 +236,11 @@ table {
@utility table-row {
@apply *:border-2 *:border-black *:p-1 hover:bg-gray-100 hover:text-gray-950;
}
@utility two-panel {
@apply grid-rows-2 grid-cols-1 sm:grid-cols-2 sm:grid-rows-1;
}
@utility debug {
@apply !border-1 !border-red-900;
}