PrivateCoffee/tldraw
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

[Docs] Tweak sidebar titles (#2706)

Browse source 
This PR adjusts the way that sidebar titles look.

### Change Type

- [x] `documentation` — Changes to the documentation only[^2]
This commit is contained in:
Steve Ruiz 2024-02-01 18:16:30 +00:00 committed by GitHub
parent b76d7b3db1
commit 53698bed70
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 22 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
.ignore
View file

@ -16,5 +16,6 @@ yarn.lock
apps/example/www/index.css apps/example/www/index.css
**/dist/* **/dist/*
*.cjs *.cjs
apps/docs/.next
packages/tldraw/tldraw.css packages/tldraw/tldraw.css

4
apps/docs/components/Sidebar.tsx
View file

@ -200,7 +200,7 @@ function SidebarArticle({
return ( return (
<li className="sidebar__article"> <li className="sidebar__article">
<Link href={url} className="sidebar__link" data-active={isActive}> <Link href={url} title={title} className="sidebar__link" data-active={isActive}>
{title} {title}
</Link> </Link>
@ -213,7 +213,7 @@ function SidebarArticle({
key={heading.slug} key={heading.slug}
data-heading-level={heading.title === 'Constructor' ? 2 : heading.level} data-heading-level={heading.title === 'Constructor' ? 2 : heading.level}
> >
<Link href={`#${heading.slug}`} className="sidebar__link"> <Link href={`#${heading.slug}`} title={heading.title} className="sidebar__link">
{heading.isCode ? ( {heading.isCode ? (
<code>{heading.title.replace(/\[([^\]]+)\]\([^)]+\)/g, '$1')}</code> <code>{heading.title.replace(/\[([^\]]+)\]\([^)]+\)/g, '$1')}</code>
) : ( ) : (

37
apps/docs/styles/globals.css
View file

@ -21,7 +21,7 @@
/* Light theme */ /* Light theme */
--color-text: #1d1d1d; --color-text: #1d1d1d;
--color-text-secondary: #999; --color-text-secondary: #666;
--color-background: #ffffff; --color-background: #ffffff;
--color-contrast: #ffffff; --color-contrast: #ffffff;
--color-accent: #2f80ed; --color-accent: #2f80ed;
@ -820,19 +820,19 @@ body {
font-size: 13px; font-size: 13px;
} }
.sidebar__list li .sidebar__category li[data-heading-level="3"] a, .sidebar__list li .sidebar__category li[data-heading-level='3'] a,
.sidebar__list li .sidebar__article li[data-heading-level="3"] a { .sidebar__list li .sidebar__article li[data-heading-level='3'] a {
padding-left: 16px; padding-left: 16px;
} }
.sidebar__list li .sidebar__category .sidebar__group li[data-heading-level="2"] a, .sidebar__list li .sidebar__category .sidebar__group li[data-heading-level='2'] a,
.sidebar__list li .sidebar__article .sidebar__group li[data-heading-level="2"] a { .sidebar__list li .sidebar__article .sidebar__group li[data-heading-level='2'] a {
padding-left: 16px; padding-left: 16px;
color: var(--color-text-secondary); color: var(--color-text-secondary);
} }
.sidebar__list li .sidebar__category .sidebar__group li[data-heading-level="3"] a, .sidebar__list li .sidebar__category .sidebar__group li[data-heading-level='3'] a,
.sidebar__list li .sidebar__article .sidebar__group li[data-heading-level="3"] a { .sidebar__list li .sidebar__article .sidebar__group li[data-heading-level='3'] a {
padding-left: 24px; padding-left: 24px;
} }
@ -880,10 +880,11 @@ body {
} }
.sidebar__section__title { .sidebar__section__title {
font-size: 14px; font-size: 12px;
font-weight: normal; font-weight: 500;
margin-bottom: 4px; margin-bottom: 4px;
position: relative; position: relative;
letter-spacing: 0.5px;
height: 40px; height: 40px;
display: flex; display: flex;
align-items: center; align-items: center;
@ -1401,9 +1402,9 @@ html[data-theme='light'] .hero__dark {
.NavigationMenuContent { .NavigationMenuContent {
position: absolute; position: absolute;
width: 100%; width: 100%;
top: calc(100% + 4px); top: calc(100% + 4px);
left: 4px; left: 4px;
overflow: hidden; overflow: hidden;
border-radius: var(--border-radius-menu); border-radius: var(--border-radius-menu);
background-color: var(--color-background); background-color: var(--color-background);
@ -1430,14 +1431,14 @@ html[data-theme='light'] .hero__dark {
} }
.NavigationMenuViewport { .NavigationMenuViewport {
position: relative; position: relative;
width: 100%; width: 100%;
height: var(--radix-navigation-menu-viewport-height); height: var(--radix-navigation-menu-viewport-height);
} }
@media only screen and (min-width: 600px) { @media only screen and (min-width: 600px) {
.NavigationMenuViewport { .NavigationMenuViewport {
width: var(--radix-navigation-menu-viewport-width); width: var(--radix-navigation-menu-viewport-width);
} }
} }
.CaretDown { .CaretDown {