From c339aa50022e53b31273c9fe4bcebdadaa51b916 Mon Sep 17 00:00:00 2001
From: andrzej <andrzejjamesstepien@gmail.com>
Date: Sat, 22 Jun 2024 18:12:55 +0200
Subject: [PATCH] improve nav and layout styling

---
 src/app/layout.tsx      |  12 +-
 src/app/output.css      | 255 ++++++++++++++++++++++++++++++++++++++--
 src/app/tailwind.css    | 198 ++++++++++---------------------
 src/app/ui/navLinks.tsx |   8 +-
 4 files changed, 320 insertions(+), 153 deletions(-)

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index b15b540..192d55d 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -33,15 +33,15 @@ export default function RootLayout({
           disableTransitionOnChange
         >
           <div id="layout-container" className="p-4 w-screen mt-6 flex justify-center">
-            <div className="grid grid-cols-6 w-5/6">
-              <div id="sidebar" className="col-start-1 col-end-2">
+            <div className="grid grid-cols-12 w-5/6">
+              <div id="sidebar" className="col-start-1 col-end-3">
                 <header className="">
-                  <h1 className="font-black text-5xl antialiased inline">SubMan</h1>
-                  <p className="font-bold text-m antialiased">The self-hosted literary submission tracker.</p>
+                  <h1 className="font-black text-4xl text-primary-foreground bg-primary antialiased w-full p-2">SubMan</h1>
+                  <p className="mt-2 mx-1 text-sm antialiased">The self-hosted literary submission tracker.</p>
                 </header>
-                <Navlinks />
+                <Navlinks className="mt-6" />
               </div>
-              <div className="col-start-2 col-span-full">
+              <div className="col-start-3 col-span-full">
                 {children}
               </div>
             </div>
diff --git a/src/app/output.css b/src/app/output.css
index 9559dc4..73d96ab 100644
--- a/src/app/output.css
+++ b/src/app/output.css
@@ -46,7 +46,7 @@ html,
   -o-tab-size: 4;
      tab-size: 4;
   /* 3 */
-  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  font-family: ui-sans-serif, system-ui;
   /* 4 */
   font-feature-settings: normal;
   /* 5 */
@@ -135,7 +135,7 @@ code,
 kbd,
 samp,
 pre {
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  font-family: ui-monospace, SFMono-Regular;
   /* 1 */
   font-feature-settings: normal;
   /* 2 */
@@ -568,6 +568,18 @@ video {
   }
 }
 
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
 .pointer-events-auto {
   pointer-events: auto;
 }
@@ -588,6 +600,10 @@ video {
   position: relative;
 }
 
+.inset-0 {
+  inset: 0px;
+}
+
 .left-1 {
   left: 0.25rem;
 }
@@ -596,6 +612,10 @@ video {
   left: 0.5rem;
 }
 
+.left-\[50\%\] {
+  left: 50%;
+}
+
 .right-1 {
   right: 0.25rem;
 }
@@ -604,6 +624,10 @@ video {
   right: 0.5rem;
 }
 
+.right-4 {
+  right: 1rem;
+}
+
 .top-0 {
   top: 0px;
 }
@@ -612,6 +636,14 @@ video {
   top: 0.5rem;
 }
 
+.top-4 {
+  top: 1rem;
+}
+
+.top-\[50\%\] {
+  top: 50%;
+}
+
 .z-50 {
   z-index: 50;
 }
@@ -620,6 +652,22 @@ video {
   z-index: 100;
 }
 
+.col-span-full {
+  grid-column: 1 / -1;
+}
+
+.col-start-1 {
+  grid-column-start: 1;
+}
+
+.col-start-2 {
+  grid-column-start: 2;
+}
+
+.col-end-2 {
+  grid-column-end: 2;
+}
+
 .-mx-1 {
   margin-left: -0.25rem;
   margin-right: -0.25rem;
@@ -635,6 +683,16 @@ video {
   margin-bottom: 0.25rem;
 }
 
+.my-2 {
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.my-6 {
+  margin-top: 1.5rem;
+  margin-bottom: 1.5rem;
+}
+
 .mb-4 {
   margin-bottom: 1rem;
 }
@@ -651,10 +709,22 @@ video {
   margin-top: 0.5rem;
 }
 
+.mt-3 {
+  margin-top: 0.75rem;
+}
+
 .mt-4 {
   margin-top: 1rem;
 }
 
+.mt-6 {
+  margin-top: 1.5rem;
+}
+
+.inline {
+  display: inline;
+}
+
 .flex {
   display: flex;
 }
@@ -675,6 +745,11 @@ video {
   display: grid;
 }
 
+.size-full {
+  width: 100%;
+  height: 100%;
+}
+
 .h-10 {
   height: 2.5rem;
 }
@@ -759,6 +834,10 @@ video {
   width: 1rem;
 }
 
+.w-5\/6 {
+  width: 83.333333%;
+}
+
 .w-7 {
   width: 1.75rem;
 }
@@ -792,6 +871,10 @@ video {
   width: 100%;
 }
 
+.w-screen {
+  width: 100vw;
+}
+
 .min-w-\[8rem\] {
   min-width: 8rem;
 }
@@ -805,6 +888,10 @@ video {
   min-width: fit-content;
 }
 
+.max-w-lg {
+  max-width: 32rem;
+}
+
 .max-w-screen-sm {
   max-width: 640px;
 }
@@ -825,6 +912,30 @@ video {
   border-collapse: collapse;
 }
 
+.translate-x-\[-50\%\] {
+  --tw-translate-x: -50%;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.translate-y-\[-50\%\] {
+  --tw-translate-y: -50%;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.transform {
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.animate-spin {
+  animation: spin 1s linear infinite;
+}
+
 .cursor-default {
   cursor: default;
 }
@@ -835,6 +946,10 @@ video {
           user-select: none;
 }
 
+.grid-cols-6 {
+  grid-template-columns: repeat(6, minmax(0, 1fr));
+}
+
 .flex-row {
   flex-direction: row;
 }
@@ -867,10 +982,22 @@ video {
   justify-content: space-between;
 }
 
+.justify-around {
+  justify-content: space-around;
+}
+
 .gap-1 {
   gap: 0.25rem;
 }
 
+.gap-2 {
+  gap: 0.5rem;
+}
+
+.gap-4 {
+  gap: 1rem;
+}
+
 .space-x-1 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse: 0;
   margin-right: calc(0.25rem * var(--tw-space-x-reverse));
@@ -907,6 +1034,12 @@ video {
   margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
 }
 
+.space-y-1\.5 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(0.375rem * var(--tw-space-y-reverse));
+}
+
 .space-y-2 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
   margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
@@ -931,6 +1064,10 @@ video {
   margin-bottom: calc(2rem * var(--tw-space-y-reverse));
 }
 
+.justify-self-end {
+  justify-self: end;
+}
+
 .overflow-auto {
   overflow: auto;
 }
@@ -943,6 +1080,10 @@ video {
   white-space: nowrap;
 }
 
+.rounded-full {
+  border-radius: 9999px;
+}
+
 .rounded-md {
   border-radius: calc(var(--radius) - 2px);
 }
@@ -975,6 +1116,10 @@ video {
   border-color: hsl(var(--primary));
 }
 
+.border-transparent {
+  border-color: transparent;
+}
+
 .bg-accent {
   background-color: hsl(var(--accent));
 }
@@ -983,6 +1128,10 @@ video {
   background-color: hsl(var(--background));
 }
 
+.bg-black\/80 {
+  background-color: rgb(0 0 0 / 0.8);
+}
+
 .bg-destructive {
   background-color: hsl(var(--destructive));
 }
@@ -1045,6 +1194,11 @@ video {
   padding-right: 0.5rem;
 }
 
+.px-2\.5 {
+  padding-left: 0.625rem;
+  padding-right: 0.625rem;
+}
+
 .px-3 {
   padding-left: 0.75rem;
   padding-right: 0.75rem;
@@ -1060,6 +1214,16 @@ video {
   padding-right: 2rem;
 }
 
+.py-0 {
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+
+.py-0\.5 {
+  padding-top: 0.125rem;
+  padding-bottom: 0.125rem;
+}
+
 .py-1 {
   padding-top: 0.25rem;
   padding-bottom: 0.25rem;
@@ -1070,11 +1234,6 @@ video {
   padding-bottom: 0.375rem;
 }
 
-.py-10 {
-  padding-top: 2.5rem;
-  padding-bottom: 2.5rem;
-}
-
 .py-2 {
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
@@ -1122,6 +1281,11 @@ video {
   line-height: 2.25rem;
 }
 
+.text-5xl {
+  font-size: 3rem;
+  line-height: 1;
+}
+
 .text-\[0\.8rem\] {
   font-size: 0.8rem;
 }
@@ -1131,11 +1295,21 @@ video {
   line-height: 1.5rem;
 }
 
+.text-lg {
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+}
+
 .text-sm {
   font-size: 0.875rem;
   line-height: 1.25rem;
 }
 
+.text-xl {
+  font-size: 1.25rem;
+  line-height: 1.75rem;
+}
+
 .text-xs {
   font-size: 0.75rem;
   line-height: 1rem;
@@ -1145,6 +1319,10 @@ video {
   font-weight: 900;
 }
 
+.font-bold {
+  font-weight: 700;
+}
+
 .font-medium {
   font-weight: 500;
 }
@@ -1165,6 +1343,10 @@ video {
   line-height: 1;
 }
 
+.tracking-tight {
+  letter-spacing: -0.025em;
+}
+
 .tracking-widest {
   letter-spacing: 0.1em;
 }
@@ -1226,6 +1408,11 @@ video {
   text-underline-offset: 4px;
 }
 
+.antialiased {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
 .opacity-0 {
   opacity: 0;
 }
@@ -1238,6 +1425,10 @@ video {
   opacity: 0.6;
 }
 
+.opacity-70 {
+  opacity: 0.7;
+}
+
 .opacity-90 {
   opacity: 0.9;
 }
@@ -1289,6 +1480,10 @@ video {
   transition-duration: 150ms;
 }
 
+.duration-200 {
+  transition-duration: 200ms;
+}
+
 @keyframes enter {
   from {
     opacity: var(--tw-enter-opacity, 1);
@@ -1303,6 +1498,10 @@ video {
   }
 }
 
+.duration-200 {
+  animation-duration: 200ms;
+}
+
 .file\:border-0::file-selector-button {
   border-width: 0px;
 }
@@ -1340,6 +1539,10 @@ video {
   background-color: hsl(var(--accent));
 }
 
+.hover\:bg-destructive\/80:hover {
+  background-color: hsl(var(--destructive) / 0.8);
+}
+
 .hover\:bg-destructive\/90:hover {
   background-color: hsl(var(--destructive) / 0.9);
 }
@@ -1584,6 +1787,10 @@ video {
   color: hsl(var(--primary-foreground));
 }
 
+.data-\[state\=open\]\:text-muted-foreground[data-state=open] {
+  color: hsl(var(--muted-foreground));
+}
+
 .data-\[disabled\]\:opacity-50[data-disabled] {
   opacity: 0.5;
 }
@@ -1658,10 +1865,26 @@ video {
   --tw-enter-translate-y: 0.5rem;
 }
 
+.data-\[state\=closed\]\:slide-out-to-left-1\/2[data-state=closed] {
+  --tw-exit-translate-x: -50%;
+}
+
 .data-\[state\=closed\]\:slide-out-to-right-full[data-state=closed] {
   --tw-exit-translate-x: 100%;
 }
 
+.data-\[state\=closed\]\:slide-out-to-top-\[48\%\][data-state=closed] {
+  --tw-exit-translate-y: -48%;
+}
+
+.data-\[state\=open\]\:slide-in-from-left-1\/2[data-state=open] {
+  --tw-enter-translate-x: -50%;
+}
+
+.data-\[state\=open\]\:slide-in-from-top-\[48\%\][data-state=open] {
+  --tw-enter-translate-y: -48%;
+}
+
 .data-\[state\=open\]\:slide-in-from-top-full[data-state=open] {
   --tw-enter-translate-y: -100%;
 }
@@ -1687,6 +1910,16 @@ video {
     flex-direction: column;
   }
 
+  .sm\:justify-end {
+    justify-content: flex-end;
+  }
+
+  .sm\:space-x-2 > :not([hidden]) ~ :not([hidden]) {
+    --tw-space-x-reverse: 0;
+    margin-right: calc(0.5rem * var(--tw-space-x-reverse));
+    margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
+  }
+
   .sm\:space-x-4 > :not([hidden]) ~ :not([hidden]) {
     --tw-space-x-reverse: 0;
     margin-right: calc(1rem * var(--tw-space-x-reverse));
@@ -1699,6 +1932,14 @@ video {
     margin-bottom: calc(0px * var(--tw-space-y-reverse));
   }
 
+  .sm\:rounded-lg {
+    border-radius: var(--radius);
+  }
+
+  .sm\:text-left {
+    text-align: left;
+  }
+
   .data-\[state\=open\]\:sm\:slide-in-from-bottom-full[data-state=open] {
     --tw-enter-translate-y: 100%;
   }
diff --git a/src/app/tailwind.css b/src/app/tailwind.css
index 4625413..5331ad0 100644
--- a/src/app/tailwind.css
+++ b/src/app/tailwind.css
@@ -446,38 +446,6 @@ video {
   display: none;
 }
 
-: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;
-}
-
-* {
-  border-color: hsl(var(--border));
-}
-
-body {
-  background-color: hsl(var(--background));
-  color: hsl(var(--foreground));
-}
-
 *, ::before, ::after {
   --tw-border-spacing-x: 0;
   --tw-border-spacing-y: 0;
@@ -696,10 +664,22 @@ body {
   grid-column-start: 2;
 }
 
+.col-start-3 {
+  grid-column-start: 3;
+}
+
 .col-end-2 {
   grid-column-end: 2;
 }
 
+.col-end-3 {
+  grid-column-end: 3;
+}
+
+.m-2 {
+  margin: 0.5rem;
+}
+
 .-mx-1 {
   margin-left: -0.25rem;
   margin-right: -0.25rem;
@@ -725,6 +705,11 @@ body {
   margin-bottom: 1.5rem;
 }
 
+.mx-1 {
+  margin-left: 0.25rem;
+  margin-right: 0.25rem;
+}
+
 .mb-4 {
   margin-bottom: 1rem;
 }
@@ -982,6 +967,10 @@ body {
   grid-template-columns: repeat(6, minmax(0, 1fr));
 }
 
+.grid-cols-12 {
+  grid-template-columns: repeat(12, minmax(0, 1fr));
+}
+
 .flex-row {
   flex-direction: row;
 }
@@ -1030,6 +1019,10 @@ body {
   gap: 1rem;
 }
 
+.gap-5 {
+  gap: 1.25rem;
+}
+
 .space-x-1 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse: 0;
   margin-right: calc(0.25rem * var(--tw-space-x-reverse));
@@ -1197,6 +1190,10 @@ body {
   background-color: transparent;
 }
 
+.bg-foreground {
+  background-color: hsl(var(--foreground));
+}
+
 .fill-current {
   fill: currentColor;
 }
@@ -1221,6 +1218,10 @@ body {
   padding: 1.5rem;
 }
 
+.p-2 {
+  padding: 0.5rem;
+}
+
 .px-2 {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
@@ -1296,6 +1297,10 @@ body {
   padding-top: 0.25rem;
 }
 
+.pl-2 {
+  padding-left: 0.5rem;
+}
+
 .text-left {
   text-align: left;
 }
@@ -1347,6 +1352,31 @@ body {
   line-height: 1rem;
 }
 
+.text-2xl {
+  font-size: 1.5rem;
+  line-height: 2rem;
+}
+
+.text-lg\/3 {
+  font-size: 1.125rem;
+  line-height: .75rem;
+}
+
+.text-lg\/5 {
+  font-size: 1.125rem;
+  line-height: 1.25rem;
+}
+
+.text-4xl {
+  font-size: 2.25rem;
+  line-height: 2.5rem;
+}
+
+.text-sm\/3 {
+  font-size: 0.875rem;
+  line-height: .75rem;
+}
+
 .font-black {
   font-weight: 900;
 }
@@ -1432,18 +1462,6 @@ body {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
-.text-secondary {
-  color: hsl(var(--secondary));
-}
-
-.text-accent {
-  color: hsl(var(--accent));
-}
-
-.text-popover {
-  color: hsl(var(--popover));
-}
-
 .underline {
   text-decoration-line: underline;
 }
@@ -1546,98 +1564,6 @@ body {
   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%; */
-
-/*     } */
-
-/*   } */
-
 .file\:border-0::file-selector-button {
   border-width: 0px;
 }
diff --git a/src/app/ui/navLinks.tsx b/src/app/ui/navLinks.tsx
index b419cc7..9261de0 100644
--- a/src/app/ui/navLinks.tsx
+++ b/src/app/ui/navLinks.tsx
@@ -18,15 +18,15 @@ export default function Navlinks(props: ComponentProps<"div">) {
     { link: "/submission", label: "SUBMISSIONS" },
   ]
   return (
-    <>
+    <div className={props.className}>
       {links.map(e => (<NavLink key={e.link} href={e.link}
-        className={clsx("text-3xl font-black my-2",
+        className={clsx("text-xl font-black my-2 w-full pl-2 antialiased",
           {
-            "text-primary": pathname === e.link
+            "text-primary-foreground bg-primary": pathname === e.link
           }
         )}
       >{e.label}</NavLink >))
       }
-    </>
+    </div>
   )
 }