[READ-ONLY] Mirror of https://github.com/bombshell-dev/docs. bomb.sh/docs
Something went wrong. Try again.
2.9 kB · 115 lines
Astro
at main
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116---import Search from '@astrojs/starlight/components/Search.astro';import SocialIcons from '@astrojs/starlight/components/SocialIcons.astro';import SiteTitle from './SiteTitle.astro';---
<div class="header"> <div class="title-wrapper sl-flex"> <SiteTitle /> </div> <div class="sl-flex print:hidden search-wrapper"> <Search /> </div> <div class="sl-hidden md:sl-flex print:hidden right-group"> <nav class="text-links" aria-label="Site"> <a href="/docs/">docs</a> <a href="/blog/">blog</a> </nav> <div class="sl-flex social-icons"> <SocialIcons /> </div> </div></div>
<style> .header { display: flex; gap: var(--sl-nav-gap); justify-content: space-between; align-items: center; height: 100%; }
/* bomb.sh parity: dim the logo while hovering the nav links */ .header:has(.right-group a:hover) :global(.site-title) { color: var(--color-gray-60); }
.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; }
.search-wrapper { flex-grow: 1; /* Stretch through the nav's block padding so the search runs the full nav height — its side borders become vertical grid bars. */ align-self: stretch; margin-block: calc(-1 * var(--sl-nav-pad-y)); }
@media (min-width: 50rem) { /* Size the title column so the search's left bar lands exactly on the sidebar/content boundary. The trailing +0.5rem compensates for this element's own negative margins (focus-ring clipping trick above), which otherwise pull the row 8px tighter. */ .title-wrapper { width: calc( var(--sl-sidebar-width) - var(--sl-nav-pad-x) - var(--sl-nav-gap) + 0.5rem ); flex-shrink: 0; } }
.right-group, .social-icons { gap: 1rem; align-items: center; }
.text-links { display: flex; gap: var(--space-150); align-items: center; font-family: var(--sl-font); font-size: var(--sl-text-sm); } .text-links a { color: var(--sl-color-text); text-decoration: none; padding-inline: var(--space-150); border-radius: 4px; transition: color 300ms cubic-bezier(0.23, 1, 0.32, 1); } .text-links a:hover { color: var(--color-pink-100); } .text-links a:focus-visible { outline: 2px solid var(--color-pink-100); outline-offset: 2px; }
.social-icons :global(a) { padding: 0.4em; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: all 300ms cubic-bezier(0.23, 1, 0.32, 1); } .social-icons :global(a:hover) { background: var(--surface-fill); color: var(--heading-highlight); transform: scale(1.05); } .social-icons :global(a:focus-visible) { outline: 2px solid var(--color-pink-100); outline-offset: 2px; }</style>