feat(nav): top-bar Hosting + Client Portal links
Adds external links to anhonesthost.com (Hosting) and secure.anhonesthost.com (Client Portal) in both the Starlight header (via the SiteTitle override) and the custom hub page header. Hidden on narrow viewports so the search box, hamburger, and theme toggle keep room.
This commit is contained in:
@@ -2,25 +2,37 @@
|
|||||||
const { siteTitleHref } = Astro.locals.starlightRoute;
|
const { siteTitleHref } = Astro.locals.starlightRoute;
|
||||||
---
|
---
|
||||||
|
|
||||||
<a href={siteTitleHref} class="site-title sl-flex" translate="no" aria-label="AnHonestHost Knowledge Base">
|
<div class="site-title-row sl-flex">
|
||||||
<svg
|
<a href={siteTitleHref} class="site-title sl-flex" translate="no" aria-label="AnHonestHost Knowledge Base">
|
||||||
class="brand-logo"
|
<svg
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
class="brand-logo"
|
||||||
viewBox="0 0 240 32"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
fill="none"
|
viewBox="0 0 240 32"
|
||||||
height="28"
|
fill="none"
|
||||||
role="img"
|
height="28"
|
||||||
aria-hidden="true"
|
role="img"
|
||||||
>
|
aria-hidden="true"
|
||||||
<path d="M12 4L3 16L12 28" stroke="#00d4aa" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
|
>
|
||||||
<path d="M24 4L33 16L24 28" stroke="#00d4aa" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
|
<path d="M12 4L3 16L12 28" stroke="#00d4aa" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
<line x1="12" y1="16" x2="24" y2="16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" opacity="0.35"/>
|
<path d="M24 4L33 16L24 28" stroke="#00d4aa" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
<text x="44" y="21" font-family="Inter, system-ui, -apple-system, sans-serif" font-size="18" font-weight="800" fill="currentColor" letter-spacing="-0.5">AnHonest<tspan fill="#00d4aa">Host</tspan></text>
|
<line x1="12" y1="16" x2="24" y2="16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" opacity="0.35"/>
|
||||||
</svg>
|
<text x="44" y="21" font-family="Inter, system-ui, -apple-system, sans-serif" font-size="18" font-weight="800" fill="currentColor" letter-spacing="-0.5">AnHonest<tspan fill="#00d4aa">Host</tspan></text>
|
||||||
<span class="kb-label">Knowledge Base</span>
|
</svg>
|
||||||
</a>
|
<span class="kb-label">Knowledge Base</span>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<nav class="ext-nav" aria-label="AnHonestHost links">
|
||||||
|
<a href="https://anhonesthost.com/" class="ext-link">Hosting</a>
|
||||||
|
<a href="https://secure.anhonesthost.com/clientarea.php" class="ext-link">Client Portal</a>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
.site-title-row {
|
||||||
|
align-items: center;
|
||||||
|
gap: 1.5rem;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
.site-title {
|
.site-title {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 0.75rem;
|
gap: 0.75rem;
|
||||||
@@ -41,9 +53,32 @@ const { siteTitleHref } = Astro.locals.starlightRoute;
|
|||||||
border-left: 1px solid var(--anhh-border-color, #334155);
|
border-left: 1px solid var(--anhh-border-color, #334155);
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
}
|
}
|
||||||
@media (max-width: 50em) {
|
.ext-nav {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 1.25rem;
|
||||||
|
}
|
||||||
|
.ext-link {
|
||||||
|
font-size: 0.875rem;
|
||||||
|
font-weight: 500;
|
||||||
|
color: var(--anhh-text-secondary, #94a3b8);
|
||||||
|
text-decoration: none;
|
||||||
|
white-space: nowrap;
|
||||||
|
transition: color 120ms ease;
|
||||||
|
}
|
||||||
|
.ext-link:hover,
|
||||||
|
.ext-link:focus {
|
||||||
|
color: var(--anhh-accent, #00d4aa);
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
/* Hide kb-label and external nav on narrow viewports — search + hamburger
|
||||||
|
get tight on mobile. */
|
||||||
|
@media (max-width: 60em) {
|
||||||
.kb-label {
|
.kb-label {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
.ext-nav {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -79,6 +79,11 @@ const visibleProducts: Product[] = Array.from(byProduct.entries())
|
|||||||
}
|
}
|
||||||
header {
|
header {
|
||||||
border-bottom: 1px solid var(--anhh-border-color, #334155);
|
border-bottom: 1px solid var(--anhh-border-color, #334155);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 1.5rem;
|
||||||
|
flex-wrap: wrap;
|
||||||
}
|
}
|
||||||
a.brand {
|
a.brand {
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
@@ -87,6 +92,28 @@ const visibleProducts: Product[] = Array.from(byProduct.entries())
|
|||||||
color: inherit;
|
color: inherit;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
.ext-nav {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 1.25rem;
|
||||||
|
}
|
||||||
|
.ext-link {
|
||||||
|
font-size: 0.875rem;
|
||||||
|
font-weight: 500;
|
||||||
|
color: var(--anhh-text-secondary, #94a3b8);
|
||||||
|
text-decoration: none;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
.ext-link:hover,
|
||||||
|
.ext-link:focus {
|
||||||
|
color: var(--anhh-accent, #00d4aa);
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
@media (max-width: 40em) {
|
||||||
|
.ext-nav {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
.kb-label {
|
.kb-label {
|
||||||
font-size: 0.875rem;
|
font-size: 0.875rem;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
@@ -177,6 +204,10 @@ const visibleProducts: Product[] = Array.from(byProduct.entries())
|
|||||||
</svg>
|
</svg>
|
||||||
<span class="kb-label">Knowledge Base</span>
|
<span class="kb-label">Knowledge Base</span>
|
||||||
</a>
|
</a>
|
||||||
|
<nav class="ext-nav" aria-label="AnHonestHost links">
|
||||||
|
<a href="https://anhonesthost.com/" class="ext-link">Hosting</a>
|
||||||
|
<a href="https://secure.anhonesthost.com/clientarea.php" class="ext-link">Client Portal</a>
|
||||||
|
</nav>
|
||||||
</header>
|
</header>
|
||||||
<main>
|
<main>
|
||||||
<h1>Knowledge Base</h1>
|
<h1>Knowledge Base</h1>
|
||||||
|
|||||||
Reference in New Issue
Block a user