fix headerlink

src/components/HeaderLink.astro

@@ -6,16 +6,13 @@ const { href, ...props } = Astro.props;
 // const isActive = href === pathname || href === '/' + subpath?.[0];
 ---
 
-<div>
+<div style={{display: 'flex'}}>
 	<a href={href} class="header-link">
 		<slot />
 	</a>
-	<span class="menu-separator">|</span>
+	<span class="menu-separator" style={{visibility: props.showSeparator ? 'visible' : 'hidden'}}>|</span>
 </div>
-<style define:vars={{showSeparator: props.showSeparator}}>
-	.menu-separator {
-		visibility: var(--showSeparator, hidden);
-	}
+<style>
 	.header-link {
 		padding: 0 1em;
 	}

src/styles/global.css

@@ -33,7 +33,6 @@ nav {
 
 a {
 	color: var(--accent-color);
-	/* text-decoration: none; */
 	text-underline-offset: 3px;
 	text-decoration-style: dotted;
 	text-decoration-color: var(--very-light-grey);