src/app/layout.tsx

@@ -3,7 +3,7 @@ import { Inter } from "next/font/google";
 
 import { ThemeProvider } from "./ui/theme";
 import { Toaster } from "@/components/ui/toaster";
-import "./globals.css";
+import "./tailwind.css";
 import Link from "next/link";
 import { ComponentProps } from "react";
 import { Send } from "lucide-react";
@@ -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-12 w-5/6">
+            <div className="grid grid-cols-6 w-5/6">
-              <div id="sidebar" className="col-start-1 col-end-3">
+              <div id="sidebar" className="col-start-1 col-end-2">
                 <header className="">
-                  <h1 className="font-black text-4xl text-primary-foreground bg-primary antialiased w-full p-2">SubMan</h1>
+                  <h1 className="font-black text-5xl antialiased inline">SubMan</h1>
-                  <p className="mt-2 mx-1 text-sm antialiased">The self-hosted literary submission tracker.</p>
+                  <p className="font-bold text-m antialiased">The self-hosted literary submission tracker.</p>
                 </header>
-                <Navlinks className="mt-6" />
+                <Navlinks />
               </div>
-              <div className="col-start-3 col-span-full">
+              <div className="col-start-2 col-span-full">
                 {children}
               </div>
             </div>

src/app/output.css

@@ -46,7 +46,7 @@ html,
   -o-tab-size: 4;
      tab-size: 4;
   /* 3 */
-  font-family: ui-sans-serif, system-ui;
+  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   /* 4 */
   font-feature-settings: normal;
   /* 5 */
@@ -135,7 +135,7 @@ code,
 kbd,
 samp,
 pre {
-  font-family: ui-monospace, SFMono-Regular;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
   /* 1 */
   font-feature-settings: normal;
   /* 2 */
@@ -568,18 +568,6 @@ 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;
 }
@@ -600,10 +588,6 @@ video {
   position: relative;
 }
 
-.inset-0 {
-  inset: 0px;
-}
-
 .left-1 {
   left: 0.25rem;
 }
@@ -612,10 +596,6 @@ video {
   left: 0.5rem;
 }
 
-.left-\[50\%\] {
-  left: 50%;
-}
-
 .right-1 {
   right: 0.25rem;
 }
@@ -624,10 +604,6 @@ video {
   right: 0.5rem;
 }
 
-.right-4 {
-  right: 1rem;
-}
-
 .top-0 {
   top: 0px;
 }
@@ -636,14 +612,6 @@ video {
   top: 0.5rem;
 }
 
-.top-4 {
-  top: 1rem;
-}
-
-.top-\[50\%\] {
-  top: 50%;
-}
-
 .z-50 {
   z-index: 50;
 }
@@ -652,22 +620,6 @@ 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;
@@ -683,16 +635,6 @@ 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;
 }
@@ -709,22 +651,10 @@ 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;
 }
@@ -745,11 +675,6 @@ video {
   display: grid;
 }
 
-.size-full {
-  width: 100%;
-  height: 100%;
-}
-
 .h-10 {
   height: 2.5rem;
 }
@@ -834,10 +759,6 @@ video {
   width: 1rem;
 }
 
-.w-5\/6 {
-  width: 83.333333%;
-}
-
 .w-7 {
   width: 1.75rem;
 }
@@ -871,10 +792,6 @@ video {
   width: 100%;
 }
 
-.w-screen {
-  width: 100vw;
-}
-
 .min-w-\[8rem\] {
   min-width: 8rem;
 }
@@ -888,10 +805,6 @@ video {
   min-width: fit-content;
 }
 
-.max-w-lg {
-  max-width: 32rem;
-}
-
 .max-w-screen-sm {
   max-width: 640px;
 }
@@ -912,30 +825,6 @@ 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;
 }
@@ -946,10 +835,6 @@ video {
           user-select: none;
 }
 
-.grid-cols-6 {
-  grid-template-columns: repeat(6, minmax(0, 1fr));
-}
-
 .flex-row {
   flex-direction: row;
 }
@@ -982,22 +867,10 @@ 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));
@@ -1034,12 +907,6 @@ 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)));
@@ -1064,10 +931,6 @@ video {
   margin-bottom: calc(2rem * var(--tw-space-y-reverse));
 }
 
-.justify-self-end {
-  justify-self: end;
-}
-
 .overflow-auto {
   overflow: auto;
 }
@@ -1080,10 +943,6 @@ video {
   white-space: nowrap;
 }
 
-.rounded-full {
-  border-radius: 9999px;
-}
-
 .rounded-md {
   border-radius: calc(var(--radius) - 2px);
 }
@@ -1116,10 +975,6 @@ video {
   border-color: hsl(var(--primary));
 }
 
-.border-transparent {
-  border-color: transparent;
-}
-
 .bg-accent {
   background-color: hsl(var(--accent));
 }
@@ -1128,10 +983,6 @@ video {
   background-color: hsl(var(--background));
 }
 
-.bg-black\/80 {
-  background-color: rgb(0 0 0 / 0.8);
-}
-
 .bg-destructive {
   background-color: hsl(var(--destructive));
 }
@@ -1194,11 +1045,6 @@ 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;
@@ -1214,16 +1060,6 @@ 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;
@@ -1234,6 +1070,11 @@ 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;
@@ -1281,11 +1122,6 @@ video {
   line-height: 2.25rem;
 }
 
-.text-5xl {
-  font-size: 3rem;
-  line-height: 1;
-}
-
 .text-\[0\.8rem\] {
   font-size: 0.8rem;
 }
@@ -1295,21 +1131,11 @@ 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;
@@ -1319,10 +1145,6 @@ video {
   font-weight: 900;
 }
 
-.font-bold {
-  font-weight: 700;
-}
-
 .font-medium {
   font-weight: 500;
 }
@@ -1343,10 +1165,6 @@ video {
   line-height: 1;
 }
 
-.tracking-tight {
-  letter-spacing: -0.025em;
-}
-
 .tracking-widest {
   letter-spacing: 0.1em;
 }
@@ -1408,11 +1226,6 @@ video {
   text-underline-offset: 4px;
 }
 
-.antialiased {
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
 .opacity-0 {
   opacity: 0;
 }
@@ -1425,10 +1238,6 @@ video {
   opacity: 0.6;
 }
 
-.opacity-70 {
-  opacity: 0.7;
-}
-
 .opacity-90 {
   opacity: 0.9;
 }
@@ -1480,10 +1289,6 @@ video {
   transition-duration: 150ms;
 }
 
-.duration-200 {
-  transition-duration: 200ms;
-}
-
 @keyframes enter {
   from {
     opacity: var(--tw-enter-opacity, 1);
@@ -1498,10 +1303,6 @@ video {
   }
 }
 
-.duration-200 {
-  animation-duration: 200ms;
-}
-
 .file\:border-0::file-selector-button {
   border-width: 0px;
 }
@@ -1539,10 +1340,6 @@ 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);
 }
@@ -1787,10 +1584,6 @@ 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;
 }
@@ -1865,26 +1658,10 @@ 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%;
 }
@@ -1910,16 +1687,6 @@ 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));
@@ -1932,14 +1699,6 @@ 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%;
   }

src/app/tailwind.css

@@ -446,6 +446,38 @@ 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;
@@ -664,22 +696,10 @@ video {
   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;
@@ -705,11 +725,6 @@ video {
   margin-bottom: 1.5rem;
 }
 
-.mx-1 {
-  margin-left: 0.25rem;
-  margin-right: 0.25rem;
-}
-
 .mb-4 {
   margin-bottom: 1rem;
 }
@@ -967,10 +982,6 @@ video {
   grid-template-columns: repeat(6, minmax(0, 1fr));
 }
 
-.grid-cols-12 {
-  grid-template-columns: repeat(12, minmax(0, 1fr));
-}
-
 .flex-row {
   flex-direction: row;
 }
@@ -1019,10 +1030,6 @@ video {
   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));
@@ -1190,10 +1197,6 @@ video {
   background-color: transparent;
 }
 
-.bg-foreground {
-  background-color: hsl(var(--foreground));
-}
-
 .fill-current {
   fill: currentColor;
 }
@@ -1218,10 +1221,6 @@ video {
   padding: 1.5rem;
 }
 
-.p-2 {
-  padding: 0.5rem;
-}
-
 .px-2 {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
@@ -1297,10 +1296,6 @@ video {
   padding-top: 0.25rem;
 }
 
-.pl-2 {
-  padding-left: 0.5rem;
-}
-
 .text-left {
   text-align: left;
 }
@@ -1352,31 +1347,6 @@ video {
   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;
 }
@@ -1462,6 +1432,18 @@ video {
   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;
 }
@@ -1564,6 +1546,98 @@ video {
   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;
 }

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-xl font-black my-2 w-full pl-2 antialiased",
+        className={clsx("text-3xl font-black my-2",
           {
-            "text-primary-foreground bg-primary": pathname === e.link
+            "text-primary": pathname === e.link
           }
         )}
       >{e.label}</NavLink >))
       }
-    </div>
+    </>
   )
 }