Skip to content

Commit 201bad0

Browse files
author
Dan Costello
committed
Styles
1 parent 204590e commit 201bad0

7 files changed

Lines changed: 66 additions & 19 deletions

File tree

‎app/docs/[[...slug]]/page.tsx‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -19,10 +19,15 @@ export default async function Page(props: {
1919
const MDXContent = page.data.body;
2020

2121
return (
22-
<DocsPage toc={page.data.toc} full={page.data.full}>
23-
<DocsTitle>{page.data.title}</DocsTitle>
22+
<DocsPage
23+
toc={page.data.toc}
24+
full={page.data.full}
25+
tableOfContent={{
26+
style: 'clerk',
27+
}}>
28+
<DocsTitle className="font-normal border-b border-fd-muted-foreground pb-2">{page.data.title}</DocsTitle>
2429
<DocsDescription>{page.data.description}</DocsDescription>
25-
<DocsBody>
30+
<DocsBody className="prose dark:prose-invert">
2631
<MDXContent
2732
components={getMDXComponents({
2833
// this allows you to link to other pages with relative file paths

‎app/global.css‎

Lines changed: 55 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,57 @@
11
@import 'tailwindcss';
2-
@import 'fumadocs-ui/css/neutral.css';
32
@import 'fumadocs-ui/css/preset.css';
3+
4+
@theme {
5+
--fd-sidebar-width: 0px;
6+
--fd-toc-width: 0px;
7+
--fd-layout-width: 100vw;
8+
--fd-banner-height: 0px;
9+
--fd-nav-height: 0px;
10+
--fd-tocnav-height: 0px;
11+
/* --default-font-family: ; */
12+
13+
--color-fd-background: hsl(0, 0%, 98%);
14+
--color-fd-foreground: hsl(0, 0%, 3.9%);
15+
--color-fd-muted: hsl(220, 90%, 96.1%);
16+
--color-fd-muted-foreground: hsl(0, 0%, 30.1%);
17+
--color-fd-popover: hsl(0, 0%, 98%);
18+
--color-fd-popover-foreground: hsl(0, 0%, 15.1%);
19+
--color-fd-card: hsl(220, 50%, 98%);
20+
--color-fd-card-foreground: hsl(0, 0%, 3.9%);
21+
--color-fd-border: hsl(220, 50%, 89.8%);
22+
--color-fd-primary: hsl(210, 80%, 20.2%);
23+
--color-fd-primary-foreground: hsl(0, 0%, 98%);
24+
--color-fd-secondary: hsl(220, 90%, 96.1%);
25+
--color-fd-secondary-foreground: hsl(0, 0%, 9%);
26+
--color-fd-accent: hsl(220, 50%, 94.1%);
27+
--color-fd-accent-foreground: hsl(0, 0%, 9%);
28+
--color-fd-ring: hsl(220, 100%, 63.9%);
29+
}
30+
31+
.dark {
32+
--color-fd-background: hsl(220, 60%, 8%);
33+
--color-fd-foreground: hsl(220, 60%, 94.5%);
34+
--color-fd-muted: hsl(220, 50%, 10%);
35+
--color-fd-muted-foreground: hsl(220, 30%, 65%);
36+
--color-fd-popover: hsl(220, 50%, 10%);
37+
--color-fd-popover-foreground: hsl(220, 60%, 94.5%);
38+
--color-fd-card: hsla(220, 56%, 15%, 0.4);
39+
--color-fd-card-foreground: hsl(220, 60%, 94.5%);
40+
--color-fd-border: hsla(220, 50%, 50%, 0.2);
41+
--color-fd-primary: hsl(205, 100%, 85%);
42+
--color-fd-primary-foreground: hsl(0, 0%, 9%);
43+
--color-fd-secondary: hsl(220, 50%, 20%);
44+
--color-fd-secondary-foreground: hsl(220, 80%, 90%);
45+
--color-fd-accent: hsl(220, 40%, 20%);
46+
--color-fd-accent-foreground: hsl(220, 80%, 90%);
47+
--color-fd-ring: hsl(205, 100%, 85%);
48+
}
49+
50+
.dark body {
51+
background-image: linear-gradient(
52+
rgba(5, 105, 255, 0.15),
53+
transparent 20rem,
54+
transparent
55+
);
56+
background-repeat: no-repeat;
57+
}

‎app/layout.config.tsx‎

Lines changed: 2 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import type { BaseLayoutProps } from 'fumadocs-ui/layouts/shared';
2+
import Image from 'next/image';
23

34
/**
45
* Shared layout configurations
@@ -11,15 +12,7 @@ export const baseOptions: BaseLayoutProps = {
1112
nav: {
1213
title: (
1314
<>
14-
<svg
15-
width="24"
16-
height="24"
17-
xmlns="http://www.w3.org/2000/svg"
18-
aria-label="Logo"
19-
>
20-
<circle cx={12} cy={12} r={12} fill="currentColor" />
21-
</svg>
22-
My App
15+
<Image src="/logo.png" width={160} height={22} alt="UserClouds logo" className="dark:saturate-200"/>
2316
</>
2417
),
2518
},

‎app/layout.tsx‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,10 @@
11
import './global.css';
22
import { RootProvider } from 'fumadocs-ui/provider';
3-
import { Inter } from 'next/font/google';
43
import type { ReactNode } from 'react';
54

6-
const inter = Inter({
7-
subsets: ['latin'],
8-
});
9-
105
export default function Layout({ children }: { children: ReactNode }) {
116
return (
12-
<html lang="en" className={inter.className} suppressHydrationWarning>
7+
<html lang="en" suppressHydrationWarning>
138
<body className="flex flex-col min-h-screen">
149
<RootProvider>{children}</RootProvider>
1510
</body>

‎public/icon.png‎

14.6 KB
Loading

‎public/logo-light.png‎

9.43 KB
Loading

‎public/logo.png‎

6.33 KB
Loading

0 commit comments

Comments
 (0)