mirror of
https://github.com/hanzo-docs/docs.git
synced 2026-10-25 04:20:02 +00:00
UI: Reduce px usage
This commit is contained in:
Fuma Nama
@@ -0,0 +1,5 @@
|
||||
---
|
||||
'fumadocs-ui': patch
|
||||
---
|
||||
|
||||
Reduce `px` usage
|
||||
@@ -41,7 +41,7 @@ export default function Layout({ children }: LayoutProps<'/'>) {
|
||||
<NavbarMenuTrigger>
|
||||
<Link href="/docs/ui">Documentation</Link>
|
||||
</NavbarMenuTrigger>
|
||||
<NavbarMenuContent className="text-[15px]">
|
||||
<NavbarMenuContent>
|
||||
<NavbarMenuLink href="/docs/ui" className="md:row-span-2">
|
||||
<div className="-mx-3 -mt-3">
|
||||
<Image
|
||||
|
||||
@@ -165,7 +165,7 @@ export function CreateAppAnimation() {
|
||||
{tick > timeWindowOpen && (
|
||||
<LaunchAppWindow className="absolute bottom-5 right-4 z-10 animate-in fade-in slide-in-from-top-10" />
|
||||
)}
|
||||
<pre className="overflow-hidden rounded-xl border text-[13px] shadow-lg bg-fd-card">
|
||||
<pre className="overflow-hidden rounded-xl border text-sm shadow-lg bg-fd-card">
|
||||
<div className="flex flex-row items-center gap-2 border-b px-4 py-2">
|
||||
<TerminalIcon className="size-4" />{' '}
|
||||
<span className="font-bold">Terminal</span>
|
||||
|
||||
@@ -57,9 +57,7 @@ export function baseOptions(): BaseLayoutProps {
|
||||
title: (
|
||||
<>
|
||||
{logo}
|
||||
<span className="font-medium in-[.uwu]:hidden in-[header]:text-[15px]">
|
||||
Fumadocs
|
||||
</span>
|
||||
<span className="font-medium in-[.uwu]:hidden">Fumadocs</span>
|
||||
</>
|
||||
),
|
||||
},
|
||||
|
||||
@@ -34,7 +34,7 @@ function pageTreeCodeTitles(): LoaderPlugin {
|
||||
) {
|
||||
return {
|
||||
...node,
|
||||
name: <code className="text-[13px]">{node.name}</code>,
|
||||
name: <code className="text-[0.8125rem]">{node.name}</code>,
|
||||
};
|
||||
}
|
||||
return node;
|
||||
|
||||
@@ -67,7 +67,7 @@ export default function ServerSelect(props: HTMLAttributes<HTMLDivElement>) {
|
||||
<SelectContent>
|
||||
{servers.map((item) => (
|
||||
<SelectItem key={item.url} value={item.url}>
|
||||
<code className="text-[13px]">{item.url}</code>
|
||||
<code className="text-[0.8125rem]">{item.url}</code>
|
||||
<p className="text-fd-muted-foreground">{item.description}</p>
|
||||
</SelectItem>
|
||||
))}
|
||||
|
||||
@@ -35,7 +35,7 @@ export default function ScalarPlayground({
|
||||
)}
|
||||
>
|
||||
<MethodLabel className="text-xs">{method}</MethodLabel>
|
||||
<code className="flex-1 overflow-auto text-nowrap text-[13px] text-fd-muted-foreground">
|
||||
<code className="flex-1 overflow-auto text-nowrap text-[0.8125rem] text-fd-muted-foreground">
|
||||
{path}
|
||||
</code>
|
||||
<ApiClientModalProvider
|
||||
|
||||
@@ -14,7 +14,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
|
||||
<input
|
||||
type={type}
|
||||
className={cn(
|
||||
'flex h-9 w-full rounded-md border bg-fd-secondary px-2 py-1.5 text-[13px] text-fd-secondary-foreground transition-colors placeholder:text-fd-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-fd-ring disabled:cursor-not-allowed disabled:opacity-50',
|
||||
'flex h-9 w-full rounded-md border bg-fd-secondary px-2 py-1.5 text-[0.8125rem] text-fd-secondary-foreground transition-colors placeholder:text-fd-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-fd-ring disabled:cursor-not-allowed disabled:opacity-50',
|
||||
className,
|
||||
)}
|
||||
ref={ref}
|
||||
|
||||
@@ -16,7 +16,7 @@ const SelectTrigger = forwardRef<
|
||||
<SelectPrimitive.Trigger
|
||||
ref={ref}
|
||||
className={cn(
|
||||
'flex items-center w-full rounded-md border p-2 gap-2 text-start text-[13px] text-fd-secondary-foreground bg-fd-secondary hover:bg-fd-accent focus:outline-none focus:ring focus:ring-fd-ring disabled:cursor-not-allowed disabled:opacity-50',
|
||||
'flex items-center w-full rounded-md border p-2 gap-2 text-start text-sm text-fd-secondary-foreground bg-fd-secondary hover:bg-fd-accent focus:outline-none focus:ring focus:ring-fd-ring disabled:cursor-not-allowed disabled:opacity-50',
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
@@ -101,7 +101,7 @@ const SelectItem = forwardRef<
|
||||
<SelectPrimitive.Item
|
||||
ref={ref}
|
||||
className={cn(
|
||||
'flex select-none flex-row items-center rounded-md py-1.5 px-2 text-[13px] outline-none focus:bg-fd-accent focus:text-fd-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
|
||||
'flex select-none flex-row items-center rounded-md py-1.5 px-2 text-sm outline-none focus:bg-fd-accent focus:text-fd-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
|
||||
@@ -270,7 +270,7 @@ export async function Operation({
|
||||
) : (
|
||||
<div className="flex flex-row items-center gap-2.5 p-3 rounded-xl border bg-fd-card text-fd-card-foreground not-prose">
|
||||
<MethodLabel className="text-xs">{method.method}</MethodLabel>
|
||||
<code className="flex-1 overflow-auto text-nowrap text-[13px] text-fd-muted-foreground">
|
||||
<code className="flex-1 overflow-auto text-nowrap text-[0.8125rem] text-fd-muted-foreground">
|
||||
{path}
|
||||
</code>
|
||||
</div>
|
||||
@@ -335,7 +335,7 @@ async function ResponseAccordion({
|
||||
<SelectTabTrigger items={contentTypes.map((v) => v[0])} />
|
||||
)}
|
||||
{contentTypes.length === 1 && (
|
||||
<p className="text-[13px] text-fd-muted-foreground">
|
||||
<p className="text-sm text-fd-muted-foreground">
|
||||
{contentTypes[0][0]}
|
||||
</p>
|
||||
)}
|
||||
|
||||
@@ -95,7 +95,7 @@ export const Accordion = forwardRef<
|
||||
{id ? <CopyButton id={id} /> : null}
|
||||
</AccordionPrimitive.Header>
|
||||
<AccordionPrimitive.Content className="overflow-hidden data-[state=closed]:animate-fd-accordion-up data-[state=open]:animate-fd-accordion-down">
|
||||
<div className="px-4 pb-2 text-[15px] prose-no-margin">
|
||||
<div className="px-4 pb-2 text-[0.9375rem] prose-no-margin">
|
||||
{children}
|
||||
</div>
|
||||
</AccordionPrimitive.Content>
|
||||
|
||||
@@ -137,7 +137,7 @@ export function CodeBlock({
|
||||
role="region"
|
||||
tabIndex={0}
|
||||
className={cn(
|
||||
'text-[13px] py-3.5 overflow-auto max-h-[600px] fd-scroll-container focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-fd-ring',
|
||||
'text-[0.8125rem] py-3.5 overflow-auto max-h-[600px] fd-scroll-container focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-fd-ring',
|
||||
viewportProps.className,
|
||||
)}
|
||||
style={
|
||||
|
||||
@@ -41,7 +41,7 @@ export function RootToggle({
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm font-medium">{selected.title}</p>
|
||||
<p className="text-[13px] text-fd-muted-foreground empty:hidden md:hidden">
|
||||
<p className="text-sm text-fd-muted-foreground empty:hidden md:hidden">
|
||||
{selected.description}
|
||||
</p>
|
||||
</div>
|
||||
@@ -85,7 +85,7 @@ export function RootToggle({
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm font-medium">{item.title}</p>
|
||||
<p className="text-[13px] text-fd-muted-foreground empty:hidden">
|
||||
<p className="text-[0.8125rem] text-fd-muted-foreground empty:hidden">
|
||||
{item.description}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -199,7 +199,7 @@ export function SidebarContentMobile({
|
||||
{...props}
|
||||
data-state={state}
|
||||
className={cn(
|
||||
'fixed text-[15px] flex flex-col shadow-lg border-s end-0 inset-y-0 w-[85%] max-w-[380px] z-40 bg-fd-background data-[state=open]:animate-fd-sidebar-in data-[state=closed]:animate-fd-sidebar-out',
|
||||
'fixed text-[0.9375rem] flex flex-col shadow-lg border-s end-0 inset-y-0 w-[85%] max-w-[380px] z-40 bg-fd-background data-[state=open]:animate-fd-sidebar-in data-[state=closed]:animate-fd-sidebar-out',
|
||||
!present && 'invisible',
|
||||
className,
|
||||
)}
|
||||
|
||||
@@ -163,7 +163,7 @@ export function TabsContent({
|
||||
value={value}
|
||||
forceMount
|
||||
className={cn(
|
||||
'p-4 text-[15px] bg-fd-background rounded-xl outline-none prose-no-margin data-[state=inactive]:hidden [&>figure:only-child]:-m-4 [&>figure:only-child]:border-none',
|
||||
'p-4 text-[0.9375rem] bg-fd-background rounded-xl outline-none prose-no-margin data-[state=inactive]:hidden [&>figure:only-child]:-m-4 [&>figure:only-child]:border-none',
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
|
||||
@@ -212,7 +212,7 @@ export function DocsLayout({
|
||||
<div className="flex">
|
||||
<Link
|
||||
href={nav.url ?? '/'}
|
||||
className="inline-flex text-[15px] items-center gap-2.5 font-medium me-auto"
|
||||
className="inline-flex text-[0.9375rem] items-center gap-2.5 font-medium me-auto"
|
||||
>
|
||||
{nav.title}
|
||||
</Link>
|
||||
|
||||
@@ -104,7 +104,7 @@ export function NavigationMenuLinkItem({
|
||||
{rest.children ?? (
|
||||
<>
|
||||
{banner}
|
||||
<p className="text-[15px] font-medium">{child.text}</p>
|
||||
<p className="text-base font-medium">{child.text}</p>
|
||||
<p className="text-sm text-fd-muted-foreground empty:hidden">
|
||||
{child.description}
|
||||
</p>
|
||||
|
||||
Reference in New Issue
Block a user