Resume
/
subman-nextjs
2
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

style layoutr

This commit is contained in:
andrzej 2024-06-20 12:49:24 +02:00
parent c63175a0f8
commit 782ccb76f5
2 changed files with 84 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/app/layout.tsx
View File

@ -3,6 +3,7 @@ import { Inter } from "next/font/google";
import { Toaster } from "@/components/ui/toaster"; import { Toaster } from "@/components/ui/toaster";
import "./tailwind.css"; import "./tailwind.css";
import Link from "next/link"; import Link from "next/link";
import { ComponentProps } from "react";
const inter = Inter({ subsets: ["latin"] }); const inter = Inter({ subsets: ["latin"] });
@ -11,6 +12,13 @@ export const metadata: Metadata = {
description: "A self-hosted literary submission tracker." description: "A self-hosted literary submission tracker."
}; };
function NavLink(props: ComponentProps<"div"> & { href: string }) {
return (
<Link href={props.href}><h1 className="text-4xl font-black my-2">{props.children}</h1></Link>
)
}
export default function RootLayout({ export default function RootLayout({
children, children,
}: Readonly<{ }: Readonly<{
@ -19,10 +27,15 @@ export default function RootLayout({
return ( return (
<html lang="en"> <html lang="en">
<body className={inter.className}> <body className={inter.className}>
<div id="layout-container" className="flex"> <div id="layout-container" className="flex p-4">
<div id="sidebar" > <div id="sidebar" >
<Link href="/story/create"><h1>Create Story</h1></Link> <header className="mb-6">
<Link href="/publication/create"><h1>Create Publication</h1></Link> <h1 className="font-black text-6xl antialiased">SubMan</h1>
<p className="font-bold text-xl antialiased">The self-hosted <br /> literary submission tracker.</p>
</header>
<NavLink href="/story">STORIES</NavLink>
<NavLink href="/publication">PUBLICATIONS</NavLink>
<NavLink href="/submission">SUBMISSIONS</NavLink>
</div> </div>
{children} {children}
</div> </div>

68
src/app/tailwind.css
View File

@ -684,6 +684,14 @@ body {
z-index: 100; z-index: 100;
} }
.m-4 {
margin: 1rem;
}
.m-2 {
margin: 0.5rem;
}
.-mx-1 { .-mx-1 {
margin-left: -0.25rem; margin-left: -0.25rem;
margin-right: -0.25rem; margin-right: -0.25rem;
@ -699,6 +707,11 @@ body {
margin-bottom: 0.25rem; margin-bottom: 0.25rem;
} }
.my-2 {
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
.mb-4 { .mb-4 {
margin-bottom: 1rem; margin-bottom: 1rem;
} }
@ -719,6 +732,10 @@ body {
margin-top: 1rem; margin-top: 1rem;
} }
.mb-6 {
margin-bottom: 1.5rem;
}
.flex { .flex {
display: flex; display: flex;
} }
@ -856,6 +873,38 @@ body {
width: 100%; width: 100%;
} }
.w-3\/4 {
width: 75%;
}
.w-1\/5 {
width: 20%;
}
.w-11 {
width: 2.75rem;
}
.w-5 {
width: 1.25rem;
}
.w-8 {
width: 2rem;
}
.w-6 {
width: 1.5rem;
}
.w-16 {
width: 4rem;
}
.w-20 {
width: 5rem;
}
.min-w-\[8rem\] { .min-w-\[8rem\] {
min-width: 8rem; min-width: 8rem;
} }
@ -1244,6 +1293,10 @@ body {
text-align: center; text-align: center;
} }
.text-right {
text-align: right;
}
.align-middle { .align-middle {
vertical-align: middle; vertical-align: middle;
} }
@ -1286,6 +1339,16 @@ body {
line-height: 1.75rem; line-height: 1.75rem;
} }
.text-4xl {
font-size: 2.25rem;
line-height: 2.5rem;
}
.text-6xl {
font-size: 3.75rem;
line-height: 1;
}
.font-black { .font-black {
font-weight: 900; font-weight: 900;
} }
@ -1379,6 +1442,11 @@ body {
text-underline-offset: 4px; text-underline-offset: 4px;
} }
.antialiased {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.opacity-0 { .opacity-0 {
opacity: 0; opacity: 0;
} }