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:
parent
a2f9660d81
commit
4b18e24f1b
3 changed files with 82 additions and 58 deletions
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue