Simplify site title styling and logic (withastro#5741)

Co-authored-by: Chris Swithinbank <[email protected]>

astro.config.ts

@@ -27,11 +27,6 @@ export default defineConfig({
 		starlight({
 			title: 'Docs',
 			customCss: ['./src/styles/custom.css'],
-			logo: {
-				light: './src/assets/astro-logo-light.svg',
-				dark: './src/assets/astro-logo-dark.svg',
-				alt: 'Astro',
-			},
 			components: {
 				EditLink: './src/components/starlight/EditLink.astro',
 				Head: './src/components/starlight/Head.astro',

src/components/starlight/SiteTitle.astro

@@ -1,121 +1,51 @@
 ---
+import logo from '~/assets/astro-logo.svg?raw';
 import docs from '~/assets/docs.svg?raw';
-import { logos } from 'virtual:starlight/user-images';
-import config from 'virtual:starlight/user-config';
-import { pathWithBase } from '../../../node_modules/@astrojs/starlight/utils/base';
 import type { Props } from '@astrojs/starlight/props';
 
-const href = pathWithBase((Astro.props.locale || '') + '/getting-started/');
+const main = 'https://astro.build/';
+const self = '/' + (Astro.props.locale || 'en') + '/getting-started/';
 ---
 
 <span class="site-title sl-flex">
-	{
-		config.logo && logos.dark && (
-			<a href="https://astro.build/">
-				<img
-					class:list={{ 'dark-only': !('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="light-only"
-						alt={config.logo.alt}
-						src={logos.light?.src}
-						width={logos.light?.width}
-						height={logos.light?.height}
-					/>
-				)}
-			</a>
-		)
-	}
-	<a {href} class="docs" set:html={docs} aria-label="Astro Docs" />
+	<a class="astro-logo" href={main} set:html={logo} aria-label="Astro" />
+	<a class="docs-logo" href={self} set:html={docs} aria-label="Docs" />
 </span>
 
 <style>
 	.site-title {
-		--hover-offset: 0.15em;
-		justify-self: flex-start;
-		max-width: 100%;
-		overflow: hidden;
-		align-items: center;
-		gap: 0.25rem;
-		font-size: var(--sl-text-h4);
-		font-weight: 600;
-		color: var(--sl-color-text-accent);
-		text-decoration: none;
-		white-space: nowrap;
-	}
-	.site-title:focus-within {
-		overflow: visible;
-	}
-	.site-title a:first-child {
-		padding-top: 0.8rem;
+		gap: 1rem;
 	}
 	.site-title a {
-		position: relative;
-		margin-top: calc(var(--hover-offset) * -1);
-		margin-bottom: calc(var(--hover-offset) * -1);
-		transition: transform 0.18s cubic-bezier(0.23, 1, 0.32, 1);
+		display: flex;
 	}
-	.site-title a:hover {
-		transform: translateY(calc(var(--hover-offset) * -1));
+	.astro-logo {
+		color: var(--sl-color-white);
+	}
+	.docs-logo {
+		color: var(--sl-color-text-accent);
 	}
+
+	/* On focus, outline <img> and <svg> rather than <a> */
 	.site-title a:focus-visible {
 		outline: 0;
 	}
-	.site-title a:focus-visible::after {
-		content: '';
-		position: absolute;
-		top: var(--sl-nav-pad-y);
-		right: 0;
-		bottom: var(--sl-nav-pad-y);
-		left: 0;
-		outline: var(--sl-color-text-accent) auto 2px;
-	}
-	.site-title a:first-child:focus-visible::after {
-		left: -0.5em;
-		right: 0.25em;
+	.site-title a:focus-visible > :global(*) {
+		outline: auto;
+		outline-offset: 0.33rem;
+		border-radius: 1px;
 	}
-	img {
-		height: calc(var(--sl-nav-height) - 2 * var(--sl-nav-pad-y));
+	/* Adjust svg sizes to full nav height */
+	.site-title :global(svg) {
+		--display-height: 1.75rem;
+		/* `auto` ensures the `<svg>` scales down on really narrow viewports */
 		width: auto;
-		max-width: 100%;
-		object-fit: contain;
-		object-position: 0 50%;
-	}
-	:global([data-theme='light']) .dark-only {
-		display: none;
-	}
-	:global([data-theme='dark']) .light-only {
-		display: none;
-	}
-	.vertical-line {
-		height: 66%;
-		border-left: 2px solid var(--sl-color-gray-5);
-	}
-
-	.docs {
-		--padding: 0.5em;
-		display: flex;
-		height: calc(100% + 0.5em);
-		width: auto;
-		padding-left: var(--padding);
-		padding-right: var(--padding);
-		margin-left: calc(var(--padding) * -1);
-		object-fit: contain;
-		object-position: 0 50%;
-		color: var(--sl-color-text-accent);
+		height: auto;
+		margin-block: calc((var(--sl-nav-height) - var(--display-height)) / 2);
+		transition: transform 0.18s cubic-bezier(0.23, 1, 0.32, 1);
 	}
-
-	.docs :global(svg) {
-		margin: auto;
-		height: calc(var(--sl-nav-height) - 2 * var(--sl-nav-pad-y) - 0.25rem);
-		width: auto;
-		object-fit: contain;
-		object-position: 0 50%;
+	.site-title a:hover :global(svg) {
+		--hover-offset: 0.15rem;
+		transform: translateY(calc(var(--hover-offset) * -1));
 	}
 </style>