From 7535420c390a4ca60eaa173dc2d00a23f8150094 Mon Sep 17 00:00:00 2001 From: Mike Perrotti Date: Tue, 15 Oct 2024 18:14:52 -0400 Subject: [PATCH 01/14] updates header nav content and layout --- .../components/header.js | 20 +++++ .../components/header.module.css | 46 ++++++++++ .../navigation/navigation.module.css | 87 ++++++++++++++++++ .../src/components/navigation/navigation.tsx | 88 +++++++++++++++++++ .../side-panel/side-panel.module.css | 8 ++ .../src/components/side-panel/side-panel.tsx | 63 +++++++++++++ 6 files changed, 312 insertions(+) create mode 100644 apps/docs/src/@primer/gatsby-theme-doctocat/components/header.js create mode 100644 apps/docs/src/@primer/gatsby-theme-doctocat/components/header.module.css create mode 100644 apps/docs/src/components/navigation/navigation.module.css create mode 100644 apps/docs/src/components/navigation/navigation.tsx create mode 100644 apps/docs/src/components/side-panel/side-panel.module.css create mode 100644 apps/docs/src/components/side-panel/side-panel.tsx diff --git a/apps/docs/src/@primer/gatsby-theme-doctocat/components/header.js b/apps/docs/src/@primer/gatsby-theme-doctocat/components/header.js new file mode 100644 index 000000000..1801b740a --- /dev/null +++ b/apps/docs/src/@primer/gatsby-theme-doctocat/components/header.js @@ -0,0 +1,20 @@ +import React from 'react' +import styles from './header.module.css' +import {MarkGithubIcon} from '@primer/octicons-react' +import {Navigation} from '../../../components/navigation/navigation' +import {SidePanel} from '../../../components/side-panel/side-panel' + +export default function Header() { + return ( +
+ + + Primer + + +
+ +
+
+ ) +} diff --git a/apps/docs/src/@primer/gatsby-theme-doctocat/components/header.module.css b/apps/docs/src/@primer/gatsby-theme-doctocat/components/header.module.css new file mode 100644 index 000000000..be929af2d --- /dev/null +++ b/apps/docs/src/@primer/gatsby-theme-doctocat/components/header.module.css @@ -0,0 +1,46 @@ +.PageHeader { + position: sticky; + top: 0; + width: 100%; + display: flex; + align-items: center; + padding: var(--base-size-16) var(--base-size-24) var(--base-size-16) + var(--base-size-24); + border-bottom: 1px solid var(--borderColor-default, #d1d9e0); + background: var(--brand-color-canvas-default); + z-index: 1; +} + +.SiteTitle { + display: flex; + gap: var(--base-size-8); + align-items: center; + text-decoration: none; +} + +.SiteTitle svg { + fill: var(--brand-color-text-default); +} + +.Title { + display: inline-block; + font-size: var(--text-body-size-large); + font-weight: var(--base-text-weight-semibold); + color: var(--fgColor-default, #1f2328); + font-family: var(--brand-fontStack-sansSerif); +} + +.SidePanel { + display: none; + margin-left: auto; +} + +@media (max-width: 768px) { + .PageHeader { + padding: var(--base-size-16); + } + + .SidePanel { + display: block; + } +} diff --git a/apps/docs/src/components/navigation/navigation.module.css b/apps/docs/src/components/navigation/navigation.module.css new file mode 100644 index 000000000..6ecb53d82 --- /dev/null +++ b/apps/docs/src/components/navigation/navigation.module.css @@ -0,0 +1,87 @@ +.Navigation { + display: flex; + align-items: center; + flex-grow: 1; +} + +.Separator { + color: var(--borderColor-default, #d1d9e0); + font-weight: var(--base-text-weight-light); + margin-left: var(--base-size-12); + margin-right: var(--base-size-12); + @media (max-width: 1012px) { + margin-right: 0; + } +} + +.HorizontalList { + display: flex; + list-style: none; + align-items: center; + flex-grow: 1; + margin: 0; + padding: 0; + gap: var(--base-size-2); + padding-right: var(--base-size-16); +} + +.HorizontalList:not(:has([data-active='true'])) { + justify-content: flex-end; +} + +.Link { + font-family: var(--brand-fontStack-sansSerif); + display: inline-flex; + align-items: center; + justify-content: center; + color: var(--fgColor-muted, #59636e); + text-decoration: none; + font-size: var(--text-body-size-large, 1rem); + padding: 0 var(--base-size-12); + height: var(--base-size-32); + border: 1px solid transparent; + border-radius: var(--borderRadius-medium, 0.375rem); +} + +.DropdownLink { + font-family: var(--brand-fontStack-sansSerif); + color: var(--fgColor-muted, #59636e); + font-size: var(--text-body-size-large, 1rem); +} + +.Icon { + margin-bottom: 6px; +} + +.Link:hover { + background: var(--bgColor-muted, #f6f8fa); +} + +.Link:focus-visible { + outline: 2px solid var(--focus-outlineColor, #0969da); + outline-offset: -2px; +} + +.Link[data-active] { + color: var(--fgColor-default, #1f2328); + text-decoration: none; + font-weight: var(--base-text-weight-semibold); + padding: 0; +} + +.Dropdown { + display: none; +} + +@media (max-width: 1012px) { + .HorizontalList { + display: none; + } + .Dropdown { + display: block; + } +} + +.ActiveLink { + margin-right: auto; +} diff --git a/apps/docs/src/components/navigation/navigation.tsx b/apps/docs/src/components/navigation/navigation.tsx new file mode 100644 index 000000000..70328dbc2 --- /dev/null +++ b/apps/docs/src/components/navigation/navigation.tsx @@ -0,0 +1,88 @@ +import React from 'react' +import {ArrowUpRightIcon, TriangleDownIcon} from '@primer/octicons-react' +import styles from './navigation.module.css' +import {ActionList, ActionMenu, Button} from '@primer/react' + +const navItems = [ + {href: 'https://primer.style/', label: 'Product UI'}, // TODO: update to https://primer.style/product when we launch the new docs site + {href: 'https://primer.style/octicons', label: 'Octicons'}, + {href: '/', label: 'Marketing UI'}, + {href: 'https://brand.github.com/', label: 'Brand Toolkit', external: true}, +] + +export function Navigation() { + const activeItem = navItems.find((item) => item.label === 'Marketing UI') + const otherItems = navItems.filter((item) => item.label !== 'Marketing UI') + const sortedNavItems = activeItem ? [activeItem, ...otherItems] : otherItems + + return ( + + ) +} diff --git a/apps/docs/src/components/side-panel/side-panel.module.css b/apps/docs/src/components/side-panel/side-panel.module.css new file mode 100644 index 000000000..dd19e47fb --- /dev/null +++ b/apps/docs/src/components/side-panel/side-panel.module.css @@ -0,0 +1,8 @@ +.SidePanel { + position: relative; +} + +.Header { + padding: var(--base-size-16); + border-bottom: 1px solid var(--borderColor-default, #d1d9e0); +} diff --git a/apps/docs/src/components/side-panel/side-panel.tsx b/apps/docs/src/components/side-panel/side-panel.tsx new file mode 100644 index 000000000..c00d2340d --- /dev/null +++ b/apps/docs/src/components/side-panel/side-panel.tsx @@ -0,0 +1,63 @@ +import React from 'react' +import {useState, useRef} from 'react' +import {IconButton} from '@primer/react' +import {Dialog} from '@primer/react/experimental' +import {ThreeBarsIcon, XIcon} from '@primer/octicons-react' +import styles from './side-panel.module.css' +import {Sidebar} from '@primer/gatsby-theme-doctocat' + +export function SidePanel() { + const [isOpen, setIsOpen] = useState(false) + const closeButtonRef = useRef(null) + const openButtonRef = useRef(null) + + const openDialog = () => { + setIsOpen(true) + } + + const closeDialog = () => { + setIsOpen(false) + } + + const renderHeader = ({dialogLabelId}: {dialogLabelId: string}) => ( +
+ +
+ ) + + return ( +
+ + {isOpen && ( + + + + )} +
+ ) +} From de95bbc0b1a29f312a304a39a2b1c85384d81d67 Mon Sep 17 00:00:00 2001 From: Mike Perrotti Date: Tue, 15 Oct 2024 19:10:06 -0400 Subject: [PATCH 02/14] moves search input to sidebar and updates functionality --- .../components/header.js | 2 + .../components/nav-items.js | 57 ++++++++++ .../components/sidebar.js | 107 ++++++++++++++++++ .../src/components/side-panel/side-panel.tsx | 2 +- 4 files changed, 167 insertions(+), 1 deletion(-) create mode 100644 apps/docs/src/@primer/gatsby-theme-doctocat/components/nav-items.js create mode 100644 apps/docs/src/@primer/gatsby-theme-doctocat/components/sidebar.js diff --git a/apps/docs/src/@primer/gatsby-theme-doctocat/components/header.js b/apps/docs/src/@primer/gatsby-theme-doctocat/components/header.js index 1801b740a..a984a221f 100644 --- a/apps/docs/src/@primer/gatsby-theme-doctocat/components/header.js +++ b/apps/docs/src/@primer/gatsby-theme-doctocat/components/header.js @@ -4,6 +4,8 @@ import {MarkGithubIcon} from '@primer/octicons-react' import {Navigation} from '../../../components/navigation/navigation' import {SidePanel} from '../../../components/side-panel/side-panel' +export const HEADER_HEIGHT = 56 + export default function Header() { return (
diff --git a/apps/docs/src/@primer/gatsby-theme-doctocat/components/nav-items.js b/apps/docs/src/@primer/gatsby-theme-doctocat/components/nav-items.js new file mode 100644 index 000000000..d7330f7fa --- /dev/null +++ b/apps/docs/src/@primer/gatsby-theme-doctocat/components/nav-items.js @@ -0,0 +1,57 @@ +import {NavList} from '@primer/react/drafts' +import {useLocation} from '@reach/router' +import {Link as GatsbyLink, withPrefix} from 'gatsby' +import React from 'react' +import VisuallyHidden from '@primer/gatsby-theme-doctocat/src/components/visually-hidden' + +function NavItem({href, children}) { + const location = useLocation() + const isCurrent = withPrefix(href) === location.pathname + return ( + + {children} + + ) +} + +function NavItems({items}) { + return ( + <> + +

Site navigation

+ + + {items.map((item) => ( + + {item.children ? ( + + {item.children.map((child) => ( + + {child.title} + {child.children ? ( + + {child.children.map((subChild) => ( + + {subChild.title} + + ))} + + ) : null} + + ))} + + ) : ( + {item.title} + )} + + ))} + + + ) +} + +export default NavItems diff --git a/apps/docs/src/@primer/gatsby-theme-doctocat/components/sidebar.js b/apps/docs/src/@primer/gatsby-theme-doctocat/components/sidebar.js new file mode 100644 index 000000000..a93546dec --- /dev/null +++ b/apps/docs/src/@primer/gatsby-theme-doctocat/components/sidebar.js @@ -0,0 +1,107 @@ +import {Box, TextInput} from '@primer/react' +import {SearchIcon} from '@primer/octicons-react' +import React, {useState} from 'react' +import navItems from '../nav.yml' +import {HEADER_HEIGHT} from './header' +import NavItems from './nav-items' + +function usePersistentScroll(id) { + const ref = React.useRef() + + const handleScroll = React.useCallback( + // Save scroll position in session storage on every scroll change + (event) => window.sessionStorage.setItem(id, event.target.scrollTop), + [id], + ) + + React.useLayoutEffect(() => { + // Restore scroll position when component mounts + const scrollPosition = window.sessionStorage.getItem(id) + if (scrollPosition && ref.current) { + ref.current.scrollTop = scrollPosition + } + }, [id]) + + // Return props to spread onto the scroll container + return { + ref, + onScroll: handleScroll, + } +} + +function Sidebar({hideBorder}) { + const scrollContainerProps = usePersistentScroll('sidebar') + const [filter, setFilter] = useState('') + + const handleFilterChange = (e) => { + setFilter(e.target.value.toLowerCase()) + } + + const filterNavItems = (item) => { + if (item.title.toLowerCase().includes(filter)) { + return true + } + if (item.children) { + // Filter children that match the filter + const filteredChildren = item.children.filter((child) => + child.title.toLowerCase().includes(filter), + ) + // If there are any matching children, return a new item with filtered children + if (filteredChildren.length > 0) { + return { + ...item, + children: filteredChildren, + } + } + } + return false + } + + const filteredNavItems = navItems + .map((item) => { + if (filterNavItems(item)) { + return item.children + ? {...item, children: item.children.filter(filterNavItems)} + : item + } + return null + }) + .filter(Boolean) + + return ( + + + + + + + + + ) +} + +export default Sidebar diff --git a/apps/docs/src/components/side-panel/side-panel.tsx b/apps/docs/src/components/side-panel/side-panel.tsx index c00d2340d..6e8946049 100644 --- a/apps/docs/src/components/side-panel/side-panel.tsx +++ b/apps/docs/src/components/side-panel/side-panel.tsx @@ -55,7 +55,7 @@ export function SidePanel() { renderHeader={renderHeader} returnFocusRef={openButtonRef} > - + )} From 4155f7055d522039f8040e867f5d862e564fd357 Mon Sep 17 00:00:00 2001 From: Mike Perrotti Date: Wed, 16 Oct 2024 11:24:01 -0400 Subject: [PATCH 03/14] fixes dropdown text/icon color --- apps/docs/src/components/navigation/navigation.module.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/apps/docs/src/components/navigation/navigation.module.css b/apps/docs/src/components/navigation/navigation.module.css index 6ecb53d82..6fe2e788b 100644 --- a/apps/docs/src/components/navigation/navigation.module.css +++ b/apps/docs/src/components/navigation/navigation.module.css @@ -73,6 +73,10 @@ display: none; } +.Dropdown button { + color: var(--fgColor-default, #1f2328); +} + @media (max-width: 1012px) { .HorizontalList { display: none; From 3f056c8bcc02de25653b89222c7a026a5a0b7221 Mon Sep 17 00:00:00 2001 From: Mike Perrotti Date: Fri, 18 Oct 2024 13:28:28 -0400 Subject: [PATCH 04/14] updates site name to Primer Marketing UI --- apps/docs/content/index.mdx | 2 +- apps/docs/gatsby-config.js | 4 ++-- .../docs/src/@primer/gatsby-theme-doctocat/components/hero.js | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/apps/docs/content/index.mdx b/apps/docs/content/index.mdx index 2b1bc726b..e7a3bc98e 100644 --- a/apps/docs/content/index.mdx +++ b/apps/docs/content/index.mdx @@ -12,7 +12,7 @@ import {LinkExternalIcon} from '@primer/octicons-react' mt: 5, }} > - Primer Brand + Primer Marketing UI Read the installation instructions to get started. - Primer Brand + Primer Marketing UI Date: Fri, 18 Oct 2024 14:58:36 -0400 Subject: [PATCH 05/14] updates site name to Primer Brand UI --- apps/docs/content/index.mdx | 2 +- apps/docs/gatsby-config.js | 4 ++-- .../docs/src/@primer/gatsby-theme-doctocat/components/hero.js | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/apps/docs/content/index.mdx b/apps/docs/content/index.mdx index e7a3bc98e..c6bc38e02 100644 --- a/apps/docs/content/index.mdx +++ b/apps/docs/content/index.mdx @@ -12,7 +12,7 @@ import {LinkExternalIcon} from '@primer/octicons-react' mt: 5, }} > - Primer Marketing UI + Primer Brand UI Read the installation instructions to get started. - Primer Marketing UI + Primer Brand UI Date: Fri, 18 Oct 2024 15:32:17 -0400 Subject: [PATCH 06/14] update Marketing UI to Brand UI in header nav --- apps/docs/src/components/navigation/navigation.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/apps/docs/src/components/navigation/navigation.tsx b/apps/docs/src/components/navigation/navigation.tsx index 70328dbc2..7de7a03a1 100644 --- a/apps/docs/src/components/navigation/navigation.tsx +++ b/apps/docs/src/components/navigation/navigation.tsx @@ -6,13 +6,13 @@ import {ActionList, ActionMenu, Button} from '@primer/react' const navItems = [ {href: 'https://primer.style/', label: 'Product UI'}, // TODO: update to https://primer.style/product when we launch the new docs site {href: 'https://primer.style/octicons', label: 'Octicons'}, - {href: '/', label: 'Marketing UI'}, + {href: '/', label: 'Brand UI'}, {href: 'https://brand.github.com/', label: 'Brand Toolkit', external: true}, ] export function Navigation() { - const activeItem = navItems.find((item) => item.label === 'Marketing UI') - const otherItems = navItems.filter((item) => item.label !== 'Marketing UI') + const activeItem = navItems.find((item) => item.label === 'Brand UI') + const otherItems = navItems.filter((item) => item.label !== 'Brand UI') const sortedNavItems = activeItem ? [activeItem, ...otherItems] : otherItems return ( From d30c5bc3c20ebb8c5ecec1214bbfdeabca057dce Mon Sep 17 00:00:00 2001 From: Mike Perrotti Date: Fri, 18 Oct 2024 15:51:37 -0400 Subject: [PATCH 07/14] updates sidebar spacing to match primer-docs --- .../src/@primer/gatsby-theme-doctocat/components/sidebar.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/apps/docs/src/@primer/gatsby-theme-doctocat/components/sidebar.js b/apps/docs/src/@primer/gatsby-theme-doctocat/components/sidebar.js index a93546dec..9675b3384 100644 --- a/apps/docs/src/@primer/gatsby-theme-doctocat/components/sidebar.js +++ b/apps/docs/src/@primer/gatsby-theme-doctocat/components/sidebar.js @@ -87,7 +87,7 @@ function Sidebar({hideBorder}) { height: '100%', borderStyle: 'solid', borderColor: 'border.subtle', - p: 2, + padding: 'var(--base-size-24)', }} > @@ -97,7 +97,9 @@ function Sidebar({hideBorder}) { block onChange={handleFilterChange} /> - + + + From bf1bb1a783d1adcd35054afe3d38eadf52489464 Mon Sep 17 00:00:00 2001 From: Mike Perrotti Date: Fri, 18 Oct 2024 15:52:53 -0400 Subject: [PATCH 08/14] updates sidebar width to match primer-docs --- .../src/@primer/gatsby-theme-doctocat/components/sidebar.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/docs/src/@primer/gatsby-theme-doctocat/components/sidebar.js b/apps/docs/src/@primer/gatsby-theme-doctocat/components/sidebar.js index 9675b3384..912c90e6d 100644 --- a/apps/docs/src/@primer/gatsby-theme-doctocat/components/sidebar.js +++ b/apps/docs/src/@primer/gatsby-theme-doctocat/components/sidebar.js @@ -74,7 +74,7 @@ function Sidebar({hideBorder}) { position: 'sticky', top: HEADER_HEIGHT, height: `calc(100vh - ${HEADER_HEIGHT}px)`, - width: 260, + width: 280, }} > Date: Tue, 22 Oct 2024 14:56:47 -0400 Subject: [PATCH 09/14] fix bug where Brand UI wasn't appearing in the header --- apps/docs/src/components/navigation/navigation.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/docs/src/components/navigation/navigation.tsx b/apps/docs/src/components/navigation/navigation.tsx index 7de7a03a1..8374c30fc 100644 --- a/apps/docs/src/components/navigation/navigation.tsx +++ b/apps/docs/src/components/navigation/navigation.tsx @@ -53,7 +53,7 @@ export function Navigation() {
    {sortedNavItems.map((item) => { - const active = item.label === 'Marketing UI' + const active = item.label === 'Brand UI' return (
  • Date: Tue, 22 Oct 2024 17:34:04 -0400 Subject: [PATCH 10/14] updates landing page to match primer-docs --- apps/docs/content/index.mdx | 6 +- .../docs/scripts/components-with-animation.js | 6 +- .../components/hero-layout.js | 41 +++++++++++++ .../components/hero-layout.module.css | 35 +++++++++++ .../gatsby-theme-doctocat/components/hero.js | 58 +++++++++---------- .../components/hero.module.css | 6 ++ 6 files changed, 114 insertions(+), 38 deletions(-) create mode 100644 apps/docs/src/@primer/gatsby-theme-doctocat/components/hero-layout.js create mode 100644 apps/docs/src/@primer/gatsby-theme-doctocat/components/hero-layout.module.css create mode 100644 apps/docs/src/@primer/gatsby-theme-doctocat/components/hero.module.css diff --git a/apps/docs/content/index.mdx b/apps/docs/content/index.mdx index c6bc38e02..06a66e80b 100644 --- a/apps/docs/content/index.mdx +++ b/apps/docs/content/index.mdx @@ -8,12 +8,12 @@ import {LinkExternalIcon} from '@primer/octicons-react' - Primer Brand UI - Read the installation instructions to get started. + + Read the installation instructions to get started. + + +
    +
    +
    + +
    +
    +
    + + + {children} + ({login})), + )} + /> + +
    +
    +
    + + ) +} + +export default HeroLayout diff --git a/apps/docs/src/@primer/gatsby-theme-doctocat/components/hero-layout.module.css b/apps/docs/src/@primer/gatsby-theme-doctocat/components/hero-layout.module.css new file mode 100644 index 000000000..ba15fe724 --- /dev/null +++ b/apps/docs/src/@primer/gatsby-theme-doctocat/components/hero-layout.module.css @@ -0,0 +1,35 @@ +.HeroPageWrapper { + flex-direction: column; + min-height: 100vh; + display: flex; +} + +.HeroLayoutWrapper { + display: flex; + flex: 1 1 auto; + flex-direction: row; +} + +.HeroLayoutSidebarWrapper { + display: block; + + @media screen and (max-width: 64rem) { + display: none; + } +} + +.HeroLayoutMain { + padding: var(--base-size-24); + padding-bottom: var(--base-size-16); + width: 100%; + @media screen and (max-width: 48rem) { + padding-bottom: 0; + } +} + +.LandingPageLayout { + padding: 0 var(--base-size-48); + @media screen and (max-width: 48rem) { + padding: 0 0; + } +} diff --git a/apps/docs/src/@primer/gatsby-theme-doctocat/components/hero.js b/apps/docs/src/@primer/gatsby-theme-doctocat/components/hero.js index ec1f95519..e975e048d 100644 --- a/apps/docs/src/@primer/gatsby-theme-doctocat/components/hero.js +++ b/apps/docs/src/@primer/gatsby-theme-doctocat/components/hero.js @@ -1,38 +1,32 @@ -import {Box as PRCBox, Heading, Text, ThemeProvider} from '@primer/react' import React from 'react' -import {Container} from '@primer/gatsby-theme-doctocat' -import heroIllustration from '../primer-components-hero.svg' -import {version} from '../../../../../../packages/react/package' +import {Heading, Stack, Text} from '@primer/react-brand' +import styles from './hero.module.css' export default function Hero() { return ( - - - - - Primer Brand UI - - - v{version} - - - - - + + + + Primer brand + + + Primer Brand is a GitHub's design system for creating React-based + marketing websites and digital experiences. + + +
    + Mona +
    +     ) } diff --git a/apps/docs/src/@primer/gatsby-theme-doctocat/components/hero.module.css b/apps/docs/src/@primer/gatsby-theme-doctocat/components/hero.module.css new file mode 100644 index 000000000..23688f634 --- /dev/null +++ b/apps/docs/src/@primer/gatsby-theme-doctocat/components/hero.module.css @@ -0,0 +1,6 @@ +.HeroImage { + flex-shrink: 0; + @media screen and (max-width: 64rem) { + display: none; + } +} From 35363c8892378197875edaf06c431cceab794769 Mon Sep 17 00:00:00 2001 From: Mike Perrotti Date: Wed, 23 Oct 2024 16:51:42 -0400 Subject: [PATCH 11/14] updates sidebar nav to use Mona Sans --- .../docs/src/@primer/gatsby-theme-doctocat/components/sidebar.js | 1 + 1 file changed, 1 insertion(+) diff --git a/apps/docs/src/@primer/gatsby-theme-doctocat/components/sidebar.js b/apps/docs/src/@primer/gatsby-theme-doctocat/components/sidebar.js index 912c90e6d..5786e1531 100644 --- a/apps/docs/src/@primer/gatsby-theme-doctocat/components/sidebar.js +++ b/apps/docs/src/@primer/gatsby-theme-doctocat/components/sidebar.js @@ -75,6 +75,7 @@ function Sidebar({hideBorder}) { top: HEADER_HEIGHT, height: `calc(100vh - ${HEADER_HEIGHT}px)`, width: 280, + fontFamily: 'var(--brand-fontStack-sansSerif)', }} > Date: Thu, 24 Oct 2024 11:25:12 -0400 Subject: [PATCH 12/14] adjusts layout for wide viewports --- .../components/hero-layout.module.css | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/apps/docs/src/@primer/gatsby-theme-doctocat/components/hero-layout.module.css b/apps/docs/src/@primer/gatsby-theme-doctocat/components/hero-layout.module.css index ba15fe724..304f972b7 100644 --- a/apps/docs/src/@primer/gatsby-theme-doctocat/components/hero-layout.module.css +++ b/apps/docs/src/@primer/gatsby-theme-doctocat/components/hero-layout.module.css @@ -8,6 +8,7 @@ display: flex; flex: 1 1 auto; flex-direction: row; + /* padding: var(--base-size-24); */ } .HeroLayoutSidebarWrapper { @@ -20,7 +21,6 @@ .HeroLayoutMain { padding: var(--base-size-24); - padding-bottom: var(--base-size-16); width: 100%; @media screen and (max-width: 48rem) { padding-bottom: 0; @@ -28,8 +28,7 @@ } .LandingPageLayout { - padding: 0 var(--base-size-48); - @media screen and (max-width: 48rem) { - padding: 0 0; - } + max-width: 1340px; + margin: 0 auto; + width: 100%; } From fd62a82de55997664a269c278e03ddc2fe46830b Mon Sep 17 00:00:00 2001 From: Mike Perrotti Date: Thu, 24 Oct 2024 11:25:47 -0400 Subject: [PATCH 13/14] rm commented CSS --- .../gatsby-theme-doctocat/components/hero-layout.module.css | 1 - 1 file changed, 1 deletion(-) diff --git a/apps/docs/src/@primer/gatsby-theme-doctocat/components/hero-layout.module.css b/apps/docs/src/@primer/gatsby-theme-doctocat/components/hero-layout.module.css index 304f972b7..5cad218bb 100644 --- a/apps/docs/src/@primer/gatsby-theme-doctocat/components/hero-layout.module.css +++ b/apps/docs/src/@primer/gatsby-theme-doctocat/components/hero-layout.module.css @@ -8,7 +8,6 @@ display: flex; flex: 1 1 auto; flex-direction: row; - /* padding: var(--base-size-24); */ } .HeroLayoutSidebarWrapper { From 007d305851660c53954768c7db83ba2929a2a3b1 Mon Sep 17 00:00:00 2001 From: Mike Perrotti Date: Thu, 24 Oct 2024 11:29:10 -0400 Subject: [PATCH 14/14] updates hero header text --- apps/docs/src/@primer/gatsby-theme-doctocat/components/hero.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/docs/src/@primer/gatsby-theme-doctocat/components/hero.js b/apps/docs/src/@primer/gatsby-theme-doctocat/components/hero.js index e975e048d..79879f8fa 100644 --- a/apps/docs/src/@primer/gatsby-theme-doctocat/components/hero.js +++ b/apps/docs/src/@primer/gatsby-theme-doctocat/components/hero.js @@ -13,7 +13,7 @@ export default function Hero() { > - Primer brand + Primer Brand UI Primer Brand is a GitHub's design system for creating React-based