Final layout adjustments

This commit is contained in:
braginini
2023-05-22 18:31:23 +02:00
parent 7e62d86e44
commit 393143d083
28 changed files with 281 additions and 43 deletions

View File

@@ -266,7 +266,7 @@ export function CodeGroup({ children, title, ...props }) {
<CodeGroupContext.Provider value={true}>
<Container
{...containerProps}
className="not-prose my-6 overflow-hidden rounded-2xl bg-zinc-900 shadow-md dark:ring-1 dark:ring-white/10"
className="not-prose my-6 overflow-hidden rounded-l bg-zinc-900 shadow-md dark:ring-1 dark:ring-white/10"
>
<CodeGroupHeader title={title} {...headerProps}>
{children}

View File

@@ -169,7 +169,7 @@ export function Layout({ children, title, tableOfContents }) {
<Footer />
</div>
{!router.route.startsWith("/ipa/resources") && <div className="hidden xl:sticky xl:top-[4.5rem] xl:-mr-6 xl:block xl:h-[calc(100vh-4.5rem)] xl:flex-none xl:overflow-y-auto xl:py-16 xl:pr-6">
<nav aria-labelledby="on-this-page-title" className="w-56">
<nav aria-labelledby="on-this-page-title" className="w-80">
{tableOfContents.length > 0 && (
<>
<h2

View File

@@ -33,7 +33,7 @@ export const docsNavigation = [
],
},
{
title: 'Self-hosted NetBird',
title: 'Self-hosting NetBird',
links: [
{ title: 'Installation guide', href: '/docs/selfhosted/selfhosted-guide' },
{ title: 'Supported IdPs', href: '/docs/selfhosted/identity-providers' },
@@ -79,7 +79,7 @@ function NavigationGroup({ group, className }) {
<li className={clsx('relative mt-6', className)}>
<motion.h2
layout="position"
className="text-s font-semibold text-zinc-900 dark:text-white"
className="text-xs font-semibold text-zinc-900 dark:text-white"
>
{group.title}
</motion.h2>

View File

@@ -41,7 +41,7 @@ function InfoIcon(props) {
export function Note({ children }) {
return (
<div className="my-6 flex gap-2.5 rounded-2xl border border-orange-500/20 bg-orange-50/50 p-4 leading-6 text-orange-900 dark:border-orange-500/30 dark:bg-orange-500/5 dark:text-orange-200 dark:[--tw-prose-links-hover:theme(colors.orange.300)] dark:[--tw-prose-links:theme(colors.white)]">
<div className="my-6 flex gap-2.5 rounded-l border border-orange-500/20 bg-orange-50/50 p-4 leading-6 text-orange-900 dark:border-orange-500/30 dark:bg-orange-500/5 dark:text-orange-200 dark:[--tw-prose-links-hover:theme(colors.orange.300)] dark:[--tw-prose-links:theme(colors.white)]">
<InfoIcon className="mt-1 h-4 w-4 flex-none fill-orange-500 stroke-white dark:fill-orange-200/20 dark:stroke-orange-200" />
<div className="[&>:first-child]:mt-0 [&>:last-child]:mb-0">
{children}