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
**/dist/*
*.cjs
apps/docs/.next
packages/tldraw/tldraw.css

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

@ -200,7 +200,7 @@ function SidebarArticle({
return (
<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}
</Link>
@ -213,7 +213,7 @@ function SidebarArticle({
key={heading.slug}
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 ? (
<code>{heading.title.replace(/\[([^\]]+)\]\([^)]+\)/g, '$1')}</code>
) : (

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

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