split out and clean up prose class

This commit is contained in:
MapleLeaf
2021-12-30 16:43:56 -06:00
parent 1b8cff7703
commit 87578bc7e5
2 changed files with 12 additions and 2 deletions

View File

@@ -6,7 +6,7 @@ import { SideNav } from "~/components/side-nav"
import { SidebarLayout } from "~/components/sidebar-layout" import { SidebarLayout } from "~/components/sidebar-layout"
import type { ContentIndexEntry } from "~/helpers/create-index.server" import type { ContentIndexEntry } from "~/helpers/create-index.server"
import { createContentIndex } from "~/helpers/create-index.server" import { createContentIndex } from "~/helpers/create-index.server"
import { linkClass } from "~/styles" import { docsProseClass, linkClass } from "~/styles"
type LoaderData = ContentIndexEntry[] type LoaderData = ContentIndexEntry[]
@@ -32,7 +32,7 @@ export default function Docs() {
</SideNav> </SideNav>
} }
body={ body={
<section className="prose max-w-none prose-invert prose-h1:font-light flex-1 prose-h1:mb-4 prose-p:my-4 prose-pre:text-[15px] prose-pre:font-monospace prose-h2:font-light h-[200vh]"> <section className={docsProseClass}>
<Outlet /> <Outlet />
</section> </section>
} }

View File

@@ -6,3 +6,13 @@ export const linkClass = clsx`
after:absolute after:block after:w-full after:h-px after:bg-white/50 after:translate-y-[3px] after:opacity-0 after:transition after:absolute after:block after:w-full after:h-px after:bg-white/50 after:translate-y-[3px] after:opacity-0 after:transition
hover:after:translate-y-[-1px] hover:after:opacity-100 hover:after:translate-y-[-1px] hover:after:opacity-100
` `
export const docsProseClass = clsx`
prose prose-invert
prose-h1:font-light prose-h1:mb-4
prose-h2:font-light
prose-h3:font-light
prose-p:my-4
prose-pre:text-[15px] prose-pre:font-monospace
max-w-none
`