diff options
Diffstat (limited to 'examples/docs/src/components')
| -rw-r--r-- | examples/docs/src/components/Header/Header.astro | 10 | ||||
| -rw-r--r-- | examples/docs/src/components/LeftSidebar/LeftSidebar.astro | 50 |
2 files changed, 33 insertions, 27 deletions
diff --git a/examples/docs/src/components/Header/Header.astro b/examples/docs/src/components/Header/Header.astro index bada732a6..58fe46ee9 100644 --- a/examples/docs/src/components/Header/Header.astro +++ b/examples/docs/src/components/Header/Header.astro @@ -135,13 +135,15 @@ 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 d0fe8da4e..90aae26e2 100644 --- a/examples/docs/src/components/LeftSidebar/LeftSidebar.astro +++ b/examples/docs/src/components/LeftSidebar/LeftSidebar.astro @@ -14,25 +14,27 @@ 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> @@ -101,13 +103,15 @@ 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> |