fix layout for smaller (laptop) screens
This commit is contained in:
parent
ee2a7c4cbf
commit
10408f604a
|
|
@ -4667,10 +4667,6 @@
|
||||||
"url": "https://github.com/privatenumber/get-tsconfig?sponsor=1"
|
"url": "https://github.com/privatenumber/get-tsconfig?sponsor=1"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/eslint-plugin-import": {
|
|
||||||
"dev": true,
|
|
||||||
"peer": true
|
|
||||||
},
|
|
||||||
"node_modules/eslint-plugin-react-hooks": {
|
"node_modules/eslint-plugin-react-hooks": {
|
||||||
"version": "4.6.2",
|
"version": "4.6.2",
|
||||||
"resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.6.2.tgz",
|
"resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.6.2.tgz",
|
||||||
|
|
|
||||||
|
|
@ -31,15 +31,15 @@ export default function RootLayout({
|
||||||
disableTransitionOnChange
|
disableTransitionOnChange
|
||||||
>
|
>
|
||||||
<div id="layout-container" className="p-4 w-screen h-screen mt-6 flex justify-center">
|
<div id="layout-container" className="p-4 w-screen h-screen mt-6 flex justify-center">
|
||||||
<div className="grid grid-cols-12 w-5/6">
|
<div className="w-5/6 flex">
|
||||||
<div id="sidebar" className="col-start-1 col-end-3 h-5/6 flex flex-col"> <header className="">
|
<div id="sidebar" className="h-5/6 flex flex-col"> <header className="">
|
||||||
<h1 className="font-black text-4xl text-primary-foreground bg-primary antialiased w-full p-2 rounded-tl-3xl pl-6">SubMan</h1>
|
<h1 className="font-black text-4xl text-primary-foreground bg-primary antialiased w-full p-2 rounded-tl-3xl pl-6 pr-4">SubMan</h1>
|
||||||
<p className="mt-2 mx-1 text-sm antialiased">The self-hosted literary submission tracker.</p>
|
<p className="mt-2 mx-1 text-sm antialiased w-40">The self-hosted literary submission tracker.</p>
|
||||||
</header>
|
</header>
|
||||||
<Navlinks className="mt-6" />
|
<Navlinks className="mt-6" />
|
||||||
<footer className="mt-auto"><ModeToggle /></footer>
|
<footer className="mt-auto"><ModeToggle /></footer>
|
||||||
</div>
|
</div>
|
||||||
<div className="col-start-3 col-span-full">
|
<div className="flex justify-center w-full">
|
||||||
{children}
|
{children}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -446,60 +446,6 @@ video {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
:root {
|
|
||||||
--background: 220 0% 96%;
|
|
||||||
--foreground: 222.2 84% 4.9%;
|
|
||||||
--muted: 210 40% 96.1%;
|
|
||||||
--muted-foreground: 215.4 16.3% 46.9%;
|
|
||||||
--popover: 0 0% 100%;
|
|
||||||
--popover-foreground: 222.2 84% 4.9%;
|
|
||||||
--card: 0 0% 100%;
|
|
||||||
--card-foreground: 222.2 84% 4.9%;
|
|
||||||
--border: 214.3 31.8% 91.4%;
|
|
||||||
--input: 214.3 31.8% 91.4%;
|
|
||||||
--primary: 144.91 90% 32%;
|
|
||||||
--primary-foreground: 75 10% 97.84%;
|
|
||||||
--secondary: 240 0% 100%;
|
|
||||||
--secondary-foreground: 150 95% 30%;
|
|
||||||
--accent: 150 55% 95%;
|
|
||||||
--accent-foreground: 155 100% 20%;
|
|
||||||
--destructive: 0 84.2% 60.2%;
|
|
||||||
--destructive-foreground: 210 0% 100%;
|
|
||||||
--ring: 150 100% 40%;
|
|
||||||
--radius: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dark {
|
|
||||||
--background: 222.2 40% 4%;
|
|
||||||
--foreground: 210 40% 98%;
|
|
||||||
--muted: 217.2 32.6% 17.5%;
|
|
||||||
--muted-foreground: 215 20.2% 65.1%;
|
|
||||||
--popover: 230 25% 10%;
|
|
||||||
--popover-foreground: 210 40% 98%;
|
|
||||||
--card: 222.2 20% 6%;
|
|
||||||
--card-foreground: 210 40% 98%;
|
|
||||||
--border: 217.2 20% 10%;
|
|
||||||
--input: 217.2 32.6% 17.5%;
|
|
||||||
--primary: 155 70% 35%;
|
|
||||||
--primary-foreground: 80 10% 97.84%;
|
|
||||||
--secondary: 200 50% 98%;
|
|
||||||
--secondary-foreground: 155 85% 30%;
|
|
||||||
--accent: 170 60% 10%;
|
|
||||||
--accent-foreground: 155 60% 65%;
|
|
||||||
--destructive: 5 90% 65%;
|
|
||||||
--destructive-foreground: 0 100% 10%;
|
|
||||||
--ring: 160 90% 45%;
|
|
||||||
}
|
|
||||||
|
|
||||||
* {
|
|
||||||
border-color: hsl(var(--border));
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
background-color: hsl(var(--background));
|
|
||||||
color: hsl(var(--foreground));
|
|
||||||
}
|
|
||||||
|
|
||||||
*, ::before, ::after {
|
*, ::before, ::after {
|
||||||
--tw-border-spacing-x: 0;
|
--tw-border-spacing-x: 0;
|
||||||
--tw-border-spacing-y: 0;
|
--tw-border-spacing-y: 0;
|
||||||
|
|
@ -971,6 +917,14 @@ body {
|
||||||
width: 100vw;
|
width: 100vw;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.w-36 {
|
||||||
|
width: 9rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.w-40 {
|
||||||
|
width: 10rem;
|
||||||
|
}
|
||||||
|
|
||||||
.min-w-\[8rem\] {
|
.min-w-\[8rem\] {
|
||||||
min-width: 8rem;
|
min-width: 8rem;
|
||||||
}
|
}
|
||||||
|
|
@ -984,6 +938,11 @@ body {
|
||||||
min-width: fit-content;
|
min-width: fit-content;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.min-w-min {
|
||||||
|
min-width: -moz-min-content;
|
||||||
|
min-width: min-content;
|
||||||
|
}
|
||||||
|
|
||||||
.max-w-full {
|
.max-w-full {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
}
|
}
|
||||||
|
|
@ -1439,6 +1398,10 @@ body {
|
||||||
padding-top: 0.25rem;
|
padding-top: 0.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.pr-4 {
|
||||||
|
padding-right: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
.text-left {
|
.text-left {
|
||||||
text-align: left;
|
text-align: left;
|
||||||
}
|
}
|
||||||
|
|
@ -1701,194 +1664,6 @@ body {
|
||||||
animation-duration: 200ms;
|
animation-duration: 200ms;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**/
|
|
||||||
|
|
||||||
/* @layer base { */
|
|
||||||
|
|
||||||
/* :root { */
|
|
||||||
|
|
||||||
/* --background: 43 62% 98%; */
|
|
||||||
|
|
||||||
/* --foreground: 43 73% 2%; */
|
|
||||||
|
|
||||||
/* --muted: 43 24% 85%; */
|
|
||||||
|
|
||||||
/* --muted-foreground: 43 10% 37%; */
|
|
||||||
|
|
||||||
/* --popover: 43 62% 98%; */
|
|
||||||
|
|
||||||
/* --popover-foreground: 43 73% 2%; */
|
|
||||||
|
|
||||||
/* --card: 43 62% 98%; */
|
|
||||||
|
|
||||||
/* --card-foreground: 43 73% 2%; */
|
|
||||||
|
|
||||||
/* --border: 43 15% 91%; */
|
|
||||||
|
|
||||||
/* --input: 43 15% 91%; */
|
|
||||||
|
|
||||||
/* --primary: 43 50% 69%; */
|
|
||||||
|
|
||||||
/* --primary-foreground: 43 50% 9%; */
|
|
||||||
|
|
||||||
/* --secondary: 43 6% 92%; */
|
|
||||||
|
|
||||||
/* --secondary-foreground: 43 6% 32%; */
|
|
||||||
|
|
||||||
/* --accent: 43 13% 83%; */
|
|
||||||
|
|
||||||
/* --accent-foreground: 43 13% 23%; */
|
|
||||||
|
|
||||||
/* --destructive: 8 84% 20%; */
|
|
||||||
|
|
||||||
/* --destructive-foreground: 8 84% 80%; */
|
|
||||||
|
|
||||||
/* --ring: 43 50% 69%; */
|
|
||||||
|
|
||||||
/* --radius: 0.5rem; */
|
|
||||||
|
|
||||||
/* } */
|
|
||||||
|
|
||||||
/**/
|
|
||||||
|
|
||||||
/* .dark { */
|
|
||||||
|
|
||||||
/* --background: 43 48% 4%; */
|
|
||||||
|
|
||||||
/* --foreground: 43 26% 97%; */
|
|
||||||
|
|
||||||
/* --muted: 43 24% 15%; */
|
|
||||||
|
|
||||||
/* --muted-foreground: 43 10% 63%; */
|
|
||||||
|
|
||||||
/* --popover: 43 48% 4%; */
|
|
||||||
|
|
||||||
/* --popover-foreground: 43 26% 97%; */
|
|
||||||
|
|
||||||
/* --card: 43 48% 4%; */
|
|
||||||
|
|
||||||
/* --card-foreground: 43 26% 97%; */
|
|
||||||
|
|
||||||
/* --border: 43 15% 13%; */
|
|
||||||
|
|
||||||
/* --input: 43 15% 13%; */
|
|
||||||
|
|
||||||
/* --primary: 43 50% 69%; */
|
|
||||||
|
|
||||||
/* --primary-foreground: 43 50% 9%; */
|
|
||||||
|
|
||||||
/* --secondary: 43 8% 18%; */
|
|
||||||
|
|
||||||
/* --secondary-foreground: 43 8% 78%; */
|
|
||||||
|
|
||||||
/* --accent: 43 14% 23%; */
|
|
||||||
|
|
||||||
/* --accent-foreground: 43 14% 83%; */
|
|
||||||
|
|
||||||
/* --destructive: 8 84% 52%; */
|
|
||||||
|
|
||||||
/* --destructive-foreground: 0 0% 100%; */
|
|
||||||
|
|
||||||
/* --ring: 43 50% 69%; */
|
|
||||||
|
|
||||||
/* } */
|
|
||||||
|
|
||||||
/* } */
|
|
||||||
|
|
||||||
/**/
|
|
||||||
|
|
||||||
/* @layer base { */
|
|
||||||
|
|
||||||
/* :root { */
|
|
||||||
|
|
||||||
/* --background: 258 70% 100%; */
|
|
||||||
|
|
||||||
/* --foreground: 258 77% 0%; */
|
|
||||||
|
|
||||||
/* --muted: 258 29% 85%; */
|
|
||||||
|
|
||||||
/* --muted-foreground: 258 10% 40%; */
|
|
||||||
|
|
||||||
/* --popover: 258 70% 100%; */
|
|
||||||
|
|
||||||
/* --popover-foreground: 258 77% 0%; */
|
|
||||||
|
|
||||||
/* --card: 258 70% 100%; */
|
|
||||||
|
|
||||||
/* --card-foreground: 258 77% 0%; */
|
|
||||||
|
|
||||||
/* --border: 220 13% 91%; */
|
|
||||||
|
|
||||||
/* --input: 220 13% 91%; */
|
|
||||||
|
|
||||||
/* --primary: 258 58% 37%; */
|
|
||||||
|
|
||||||
/* --primary-foreground: 258 58% 97%; */
|
|
||||||
|
|
||||||
/* --secondary: 258 19% 81%; */
|
|
||||||
|
|
||||||
/* --secondary-foreground: 258 19% 21%; */
|
|
||||||
|
|
||||||
/* --accent: 258 19% 81%; */
|
|
||||||
|
|
||||||
/* --accent-foreground: 258 19% 21%; */
|
|
||||||
|
|
||||||
/* --destructive: 19 98% 27%; */
|
|
||||||
|
|
||||||
/* --destructive-foreground: 19 98% 87%; */
|
|
||||||
|
|
||||||
/* --ring: 258 58% 37%; */
|
|
||||||
|
|
||||||
/* --radius: 0.5rem; */
|
|
||||||
|
|
||||||
/* } */
|
|
||||||
|
|
||||||
/**/
|
|
||||||
|
|
||||||
/* .dark { */
|
|
||||||
|
|
||||||
/* --background: 258 53% 3%; */
|
|
||||||
|
|
||||||
/* --foreground: 258 40% 97%; */
|
|
||||||
|
|
||||||
/* --muted: 258 29% 15%; */
|
|
||||||
|
|
||||||
/* --muted-foreground: 258 10% 60%; */
|
|
||||||
|
|
||||||
/* --popover: 258 53% 3%; */
|
|
||||||
|
|
||||||
/* --popover-foreground: 258 40% 97%; */
|
|
||||||
|
|
||||||
/* --card: 258 53% 3%; */
|
|
||||||
|
|
||||||
/* --card-foreground: 258 40% 97%; */
|
|
||||||
|
|
||||||
/* --border: 215 27.9% 16.9%; */
|
|
||||||
|
|
||||||
/* --input: 215 27.9% 16.9%; */
|
|
||||||
|
|
||||||
/* --primary: 258 58% 37%; */
|
|
||||||
|
|
||||||
/* --primary-foreground: 258 58% 97%; */
|
|
||||||
|
|
||||||
/* --secondary: 258 15% 10%; */
|
|
||||||
|
|
||||||
/* --secondary-foreground: 258 15% 70%; */
|
|
||||||
|
|
||||||
/* --accent: 258 15% 10%; */
|
|
||||||
|
|
||||||
/* --accent-foreground: 258 15% 70%; */
|
|
||||||
|
|
||||||
/* --destructive: 19 98% 46%; */
|
|
||||||
|
|
||||||
/* --destructive-foreground: 0 0% 100%; */
|
|
||||||
|
|
||||||
/* --ring: 258 58% 37%; */
|
|
||||||
|
|
||||||
/* } */
|
|
||||||
|
|
||||||
/* } */
|
|
||||||
|
|
||||||
.file\:border-0::file-selector-button {
|
.file\:border-0::file-selector-button {
|
||||||
border-width: 0px;
|
border-width: 0px;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue