diff options
| -rw-r--r-- | packages/web/astro.config.mjs | 1 | ||||
| -rw-r--r-- | packages/web/src/components/SiteTitle.astro | 59 |
2 files changed, 60 insertions, 0 deletions
diff --git a/packages/web/astro.config.mjs b/packages/web/astro.config.mjs index 98f229602..ec3131a34 100644 --- a/packages/web/astro.config.mjs +++ b/packages/web/astro.config.mjs @@ -96,6 +96,7 @@ export default defineConfig({ Hero: "./src/components/Hero.astro", Head: "./src/components/Head.astro", Header: "./src/components/Header.astro", + SiteTitle: "./src/components/SiteTitle.astro", }, plugins: [ theme({ diff --git a/packages/web/src/components/SiteTitle.astro b/packages/web/src/components/SiteTitle.astro new file mode 100644 index 000000000..28a30cb23 --- /dev/null +++ b/packages/web/src/components/SiteTitle.astro @@ -0,0 +1,59 @@ +--- +import { logos } from 'virtual:starlight/user-images'; +import config from 'virtual:starlight/user-config'; +const { siteTitle, siteTitleHref } = Astro.locals.starlightRoute; +--- + +<a href="/" class="site-title sl-flex"> + { + config.logo && logos.dark && ( + <> + <img + class:list={{ 'light:sl-hidden print:hidden': !('src' in config.logo) }} + alt={config.logo.alt} + src={logos.dark.src} + width={logos.dark.width} + height={logos.dark.height} + /> + {/* Show light alternate if a user configure both light and dark logos. */} + {!('src' in config.logo) && ( + <img + class="dark:sl-hidden print:block" + alt={config.logo.alt} + src={logos.light?.src} + width={logos.light?.width} + height={logos.light?.height} + /> + )} + </> + ) + } + <span class:list={{ 'sr-only': config.logo?.replacesTitle }} translate="no"> + {siteTitle} + </span> +</a> + +<style> + @layer starlight.core { + .site-title { + align-items: center; + gap: var(--sl-nav-gap); + font-size: var(--sl-text-h4); + font-weight: 600; + color: var(--sl-color-text-accent); + text-decoration: none; + white-space: nowrap; + min-width: 0; + } + span { + overflow: hidden; + } + img { + height: calc(var(--sl-nav-height) - 2 * var(--sl-nav-pad-y)); + width: auto; + max-width: 100%; + object-fit: contain; + object-position: 0 50%; + } + } +</style> |