fix: Updating navbar styling

Author: yhakbar

docs-starlight/src/assets/pipelines.svg

@@ -16,24 +16,24 @@ const shouldRenderSearch =
 ---
 
 <div class="header sl-flex">
-	<div class="title-wrapper sl-flex">
+	<!-- <div class="title-wrapper sl-flex"> -->
 		<SiteTitle {...Astro.props} />
-	</div>
+	<!-- </div> -->
 	<div class="sl-flex print:hidden">
 		{shouldRenderSearch && <Search {...Astro.props} />}
 	</div>
 	<div class="sl-hidden md:sl-flex print:hidden right-group">
 		<div class="sl-flex social-icons">
 			<SocialIcons {...Astro.props} />
 		</div>
-		<div class="sl-flex social-icons">
+		<div class="sl-hidden lg:sl-flex pipelines-pill">
 			<a href="https://www.gruntwork.io/platform/pipelines" class="pipeline-pill">
 				<span class="pipeline-icon">
-					<svg width="20" height="20" viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="10" fill="#A78BFA"/><circle cx="10" cy="10" r="4" fill="#fff"/></svg>
+					<img src="/src/assets/pipelines.svg" width="24" height="24" class="product-icon" alt="Pipeline" />
 				</span>
 				<span class="pipeline-text">
-					<span class="pipeline-title">Learn about Gruntwork Pipelines</span>
-					<span class="pipeline-subtitle">CI/CD built for Terragrunt & Stacks</span>
+					<span class="pipeline-title">Automate your pipeline</span>
+					<span class="pipeline-subtitle">CI/CD built for Terragrunt</span>
 				</span>
 				<span class="pipeline-arrow">
 					<svg width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M8 6l4 4-4 4" stroke="#A78BFA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
@@ -42,7 +42,7 @@ const shouldRenderSearch =
 		</div>
 		<div class="sl-flex social-icons">
 			<a href="https://www.gruntwork.io/services/terragrunt" class="support-btn">
-				Enterprise Support
+				Support
 				<span class="support-arrow">
 					<svg width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M8 6l4 4-4 4" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
 				</span>
@@ -61,15 +61,6 @@ const shouldRenderSearch =
 		height: 100%;
 	}
 
-	.title-wrapper {
-		/* Prevent long titles overflowing and covering the search and menu buttons on narrow viewports. */
-		overflow: clip;
-		/* Avoid clipping focus ring around link inside title wrapper. */
-		padding: 0.25rem;
-		margin: -0.25rem;
-		min-width: 0;
-	}
-
 	.right-group,
 	.social-icons {
 		gap: 1rem;
@@ -115,7 +106,7 @@ const shouldRenderSearch =
 	.pipeline-pill {
 		display: flex;
 		align-items: center;
-		background: rgba(167, 139, 250, 0.08);
+		/* background: rgba(167, 139, 250, 0.08); */
 		border-radius: 999px;
 		padding: 0.5rem 1.25rem 0.5rem 0.5rem;
 		gap: 0.75rem;
@@ -171,4 +162,5 @@ const shouldRenderSearch =
 		align-items: center;
 		margin-left: 0.25rem;
 	}
+
 </style>

docs-starlight/src/components/Header.astro

@@ -2,15 +2,15 @@
 import { logos } from 'virtual:starlight/user-images';
 import config from 'virtual:starlight/user-config';
 import type { Props } from '@astrojs/starlight/props';
-const { siteTitle, siteTitleHref } = Astro.props;
+const { siteTitleHref } = Astro.props;
 ---
 
 <a href={siteTitleHref} class="site-title sl-flex">
 	{
 		config.logo && logos.dark && (
 			<>
 				<img
-					class:list={{ 'light:sl-hidden print:hidden': !('src' in config.logo) }}
+					class:list={{ 'light:sl-hidden print:hidden light-logo': !('src' in config.logo) }}
 					alt={config.logo.alt}
 					src={logos.dark.src}
 					width={logos.dark.width}
@@ -19,7 +19,7 @@ const { siteTitle, siteTitleHref } = Astro.props;
 				{/* Show light alternate if a user configure both light and dark logos. */}
 				{!('src' in config.logo) && (
 					<img
-						class="dark:sl-hidden print:block"
+						class="dark:sl-hidden print:block dark-logo"
 						alt={config.logo.alt}
 						src={logos.light?.src}
 						width={logos.light?.width}
@@ -45,7 +45,18 @@ const { siteTitle, siteTitleHref } = Astro.props;
 		height: calc(var(--sl-nav-height) - 2 * var(--sl-nav-pad-y));
 		width: auto;
 		max-width: 100%;
+		min-width: var(--sl-nav-height);
 		object-fit: contain;
 		object-position: 0 50%;
 	}
+
+	@media (max-width: 768px) {
+		img.dark-logo {
+			content: url('/src/assets/logo-dark.svg');
+		}
+
+		img.light-logo {
+			content: url('/src/assets/logo-light.svg');
+		}
+	}
 </style>