diff options
Diffstat (limited to 'examples/docs')
| -rw-r--r-- | examples/docs/package.json | 16 | ||||
| -rw-r--r-- | examples/docs/src/components/Header/Header.astro | 10 | ||||
| -rw-r--r-- | examples/docs/src/components/LeftSidebar/LeftSidebar.astro | 50 | ||||
| -rw-r--r-- | examples/docs/src/layouts/MainLayout.astro | 29 |
4 files changed, 50 insertions, 55 deletions
diff --git a/examples/docs/package.json b/examples/docs/package.json index 034a1a47e..5ed95a744 100644 --- a/examples/docs/package.json +++ b/examples/docs/package.json @@ -11,17 +11,19 @@ "astro": "astro" }, "dependencies": { - "astro": "^1.1.1", - "preact": "^10.7.3", - "react": "^18.1.0", - "react-dom": "^18.1.0", - "@astrojs/react": "^1.1.0", - "@astrojs/preact": "^1.0.2", "@algolia/client-search": "^4.13.1", "@docsearch/css": "^3.1.0", "@docsearch/react": "^3.1.0", "@types/react": "^17.0.45", + "preact": "^10.7.3", + "react": "^18.1.0", + "react-dom": "^18.1.0" + }, + "devDependencies": { + "@astrojs/preact": "^1.0.2", "@types/node": "^18.0.0", - "@types/react-dom": "^18.0.0" + "@types/react-dom": "^18.0.0", + "@astrojs/react": "^1.1.1", + "astro": "^1.1.2" } } diff --git a/examples/docs/src/components/Header/Header.astro b/examples/docs/src/components/Header/Header.astro index 58fe46ee9..bada732a6 100644 --- a/examples/docs/src/components/Header/Header.astro +++ b/examples/docs/src/components/Header/Header.astro @@ -135,15 +135,13 @@ const lang = getLanguageFromURL(currentPage); max-width: 200px; } + :global(.search-item > *) { + flex-grow: 1; + } + @media (min-width: 50em) { .search-item { max-width: 400px; } } </style> - -<style is:global> - .search-item > * { - flex-grow: 1; - } -</style> diff --git a/examples/docs/src/components/LeftSidebar/LeftSidebar.astro b/examples/docs/src/components/LeftSidebar/LeftSidebar.astro index 90aae26e2..d0fe8da4e 100644 --- a/examples/docs/src/components/LeftSidebar/LeftSidebar.astro +++ b/examples/docs/src/components/LeftSidebar/LeftSidebar.astro @@ -14,27 +14,25 @@ const sidebar = SIDEBAR[langCode]; <nav aria-labelledby="grid-left"> <ul class="nav-groups"> - { - Object.entries(sidebar).map(([header, children]) => ( - <li> - <div class="nav-group"> - <h2>{header}</h2> - <ul> - {children.map((child) => { - const url = Astro.site?.pathname + child.link; - return ( - <li class="nav-link"> - <a href={url} aria-current={currentPageMatch === child.link ? 'page' : false}> - {child.text} - </a> - </li> - ); - })} - </ul> - </div> - </li> - )) - } + {Object.entries(sidebar).map(([header, children]) => ( + <li> + <div class="nav-group"> + <h2>{header}</h2> + <ul> + {children.map((child) => { + const url = Astro.site?.pathname + child.link; + return ( + <li class="nav-link"> + <a href={url} aria-current={currentPageMatch === child.link ? 'page' : false}> + {child.text} + </a> + </li> + ); + })} + </ul> + </div> + </li> + ))} </ul> </nav> @@ -103,15 +101,13 @@ const sidebar = SIDEBAR[langCode]; font-weight: 600; } + :global(:root.theme-dark) .nav-link a[aria-current='page'] { + color: hsla(var(--color-base-white), 100%, 1); + } + @media (min-width: 50em) { .nav-groups { padding: 0; } } </style> - -<style is:global> - :root.theme-dark .nav-link a[aria-current='page'] { - color: hsla(var(--color-base-white), 100%, 1); - } -</style> diff --git a/examples/docs/src/layouts/MainLayout.astro b/examples/docs/src/layouts/MainLayout.astro index 60d43922a..79a2f81a9 100644 --- a/examples/docs/src/layouts/MainLayout.astro +++ b/examples/docs/src/layouts/MainLayout.astro @@ -47,6 +47,11 @@ const githubEditUrl = `${CONFIG.GITHUB_EDIT_URL}/${currentFile}`; overflow-x: hidden; } + .layout :global(> *) { + width: 100%; + height: 100%; + } + .grid-sidebar { height: 100vh; position: sticky; @@ -73,6 +78,15 @@ const githubEditUrl = `${CONFIG.GITHUB_EDIT_URL}/${currentFile}`; display: none; } + :global(.mobile-sidebar-toggle) { + overflow: hidden; + } + + :global(.mobile-sidebar-toggle) #grid-left { + display: block; + top: 2rem; + } + @media (min-width: 50em) { .layout { overflow: initial; @@ -102,21 +116,6 @@ const githubEditUrl = `${CONFIG.GITHUB_EDIT_URL}/${currentFile}`; } } </style> - <style is:global> - .layout > * { - width: 100%; - height: 100%; - } - - .mobile-sidebar-toggle { - overflow: hidden; - } - - .mobile-sidebar-toggle #grid-left { - display: block; - top: 2rem; - } - </style> </head> <body> |