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

[docs] Small style changes (#2805)

Browse source 
This PR has some superficial style changes for the docs.

### Change Type

- [ ] `patch` — Bug fix
- [ ] `minor` — New feature
- [ ] `major` — Breaking change
- [ ] `dependencies` — Changes to package dependencies[^1]
- [x] `documentation` — Changes to the documentation only[^2]
- [ ] `tests` — Changes to any test code only[^2]
- [ ] `internal` — Any other changes that don't affect the published
package[^2]
- [ ] I don't know
This commit is contained in:
Steve Ruiz 2024-02-13 10:07:29 +00:00 committed by GitHub
parent ad58bbb98b
commit 2c87c20b0e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 48 additions and 85 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
apps/docs/components/Autocomplete.css
View file

@ -5,6 +5,10 @@
flex-direction: row;
border-radius: 24px;
padding: 0 16px;
border: 1px solid var(--color-tint-2);
}
.autocomplete__wrapper:focus-within {
background-color: var(--color-tint-1);
}

68
apps/docs/components/Header.tsx
View file

@ -1,24 +1,24 @@
'use client'
import * as NavigationMenu from '@radix-ui/react-navigation-menu'
import Link from 'next/link'
import { Icon } from './Icon'
import { Chevron } from './Icons'
import { Search } from './Search'
import { ThemeSwitcher } from './ThemeSwitcher'
export function Header({ sectionId }: { sectionId?: string }) {
return (
<div className="layout__header">
<Link href="/quick-start">
<div
className="lockup"
style={{
mask: `url(/lockup.svg) center 100% / 100% no-repeat`,
WebkitMask: `url(/lockup.svg) center 100% / 100% no-repeat`,
}}
/>
</Link>
<div className="layout__header__left">
<Link href="/quick-start">
<div
className="lockup"
style={{
mask: `url(/lockup.svg) center 100% / 100% no-repeat`,
WebkitMask: `url(/lockup.svg) center 100% / 100% no-repeat`,
}}
/>
</Link>
</div>
<Search />
<div className="layout__header__sections_and_socials">
<SectionLinks sectionId={sectionId} />
@ -79,52 +79,6 @@ export function SectionLinks({ sectionId }: { sectionId?: string | null }) {
>
Examples
</a>
<NavigationMenu.Root className="NavigationMenuRoot">
<NavigationMenu.List className="NavigationMenuList">
<NavigationMenu.Item>
<NavigationMenu.Trigger
className="NavigationMenuTrigger"
onPointerMove={(event) => event.preventDefault()}
onPointerLeave={(event) => event.preventDefault()}
>
<span>
Community <Chevron className="CaretDown" aria-hidden />
</span>
</NavigationMenu.Trigger>
<NavigationMenu.Content
className="NavigationMenuContent"
onPointerMove={(event) => event.preventDefault()}
onPointerLeave={(event) => event.preventDefault()}
>
<ul>
<li>
<NavigationMenu.Link asChild>
<a href="/community/contributing">Contributing</a>
</NavigationMenu.Link>
</li>
<li>
<NavigationMenu.Link asChild>
<a href="/community/translations">Translations</a>
</NavigationMenu.Link>
</li>
<li>
<NavigationMenu.Link asChild>
<a href="/community/license">License</a>
</NavigationMenu.Link>
</li>
<li>
<NavigationMenu.Link asChild>
<a href="https://discord.com/invite/SBBEVCA4PG" target="_blank">
Discord
</a>
</NavigationMenu.Link>
</li>
</ul>
</NavigationMenu.Content>
</NavigationMenu.Item>
</NavigationMenu.List>
</NavigationMenu.Root>
</>
)
}

7
apps/docs/components/Search.tsx
View file

@ -111,9 +111,10 @@ export function Search() {
/>
{platform && (
<span className="search__keyboard">
{platform === 'mac' && <kbd data-platform="mac">⌘</kbd>}
{platform === 'nonMac' && <kbd data-platform="win">Ctrl</kbd>}
<kbd>K</kbd>
<kbd data-platform={platform === 'mac' ? 'mac' : 'win'}>
<span>{platform === 'mac' ? '⌘' : 'Ctrl'}</span>
<span>K</span>
</kbd>
</span>
)}
</div>

2
apps/docs/content/sections.json
View file

@ -18,7 +18,7 @@
"title": "Community",
"description": "Guides for contributing to tldraw's open source project.",
"categories": [],
"sidebar_behavior": "hidden"
"sidebar_behavior": "show-links"
},
{
"id": "reference",

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

@ -134,7 +134,7 @@ body {
top: 0px;
display: grid;
padding: 16px;
grid-template-columns: auto 1fr auto;
grid-template-columns: 250px 1fr auto;
gap: 16px;
justify-content: center;
align-items: center;
@ -158,23 +158,28 @@ body {
.layout_header__section {
text-decoration: none;
margin: 0 4px;
padding: 8px 12px;
font-size: 14px;
color: var(--color-text);
background-color: transparent;
transition: background-color 0.12s ease-in-out;
transition-delay: 0.1s;
position: relative;
}
.layout_header__section::after {
position: absolute;
display: block;
content: '';
inset: 7px 1px;
background-color: var(--bg);
border-radius: var(--border-radius-menu);
}
.layout_header__section[data-active='true'] {
background-color: var(--color-tint-1);
--bg: var(--color-tint-1);
}
@media (hover: hover) {
.layout_header__section:not([data-active='true']):hover {
background-color: var(--color-tint-1);
.layout_header__section:hover {
--bg: var(--color-tint-1);
}
}
@ -599,8 +604,6 @@ body {
gap: 12px;
}
.article__embed > iframe {
width: 100%;
height: 100%;
@ -1018,29 +1021,30 @@ body {
}
.search__keyboard {
display: block;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 50%;
right: 12px;
height: 100%;
padding: 0px;
top: 0px;
right: 0px;
z-index: 2;
transform: translateY(-50%);
color: var(--color-tint-5);
pointer-events: none;
transition: color 0.12s;
}
.search__keyboard kbd {
display: inline-block;
height: 24px;
min-width: 24px;
line-height: 26px;
padding: 0 4px;
display: inline-flex;
gap: 4px;
height: 100%;
align-items: center;
padding: 4px 12px;
margin-right: 0px;
text-align: center;
margin-right: 4px;
font-size: 12px;
color: var(--color-tint-6);
background-color: var(--color-tint-2);
border-radius: 2px;
font-size: 13px;
color: var(--color-text);
}
.search__ai-toggle {