You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
235 lines
5.4 KiB
235 lines
5.4 KiB
5 months ago
|
<script lang="ts">
|
||
|
|
import ThemeToggle from './ThemeToggle.svelte';
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<header class="topbar">
|
||
|
|
<div class="inner">
|
||
|
|
<a class="brand" href="/active" aria-label="Active home">
|
||
|
|
<span class="brand-mark" aria-hidden="true"></span>
|
||
|
|
<span class="brand-name">active</span>
|
||
|
|
<span class="brand-version" aria-label="version">0.0.1</span>
|
||
|
|
</a>
|
||
|
|
|
||
|
|
<nav class="primary" aria-label="Primary">
|
||
|
|
<a href="/active">Docs</a>
|
||
|
|
<a href="/test">Playground</a>
|
||
|
|
<a href="https://github.com/" target="_blank" rel="noreferrer noopener">GitHub</a>
|
||
|
|
</nav>
|
||
|
|
|
||
|
|
<div class="search" role="search">
|
||
|
|
<svg viewBox="0 0 20 20" width="14" height="14" aria-hidden="true">
|
||
|
|
<path
|
||
|
|
fill="none"
|
||
|
|
stroke="currentColor"
|
||
|
|
stroke-width="1.6"
|
||
|
|
stroke-linecap="round"
|
||
|
|
stroke-linejoin="round"
|
||
|
|
d="M9 3.5a5.5 5.5 0 1 0 3.4 9.85l3.62 3.62 1.06-1.06-3.62-3.62A5.5 5.5 0 0 0 9 3.5Z"
|
||
|
|
/>
|
||
|
|
</svg>
|
||
|
|
<input type="search" placeholder="Search docs..." aria-label="Search docs" />
|
||
|
|
<kbd>⌘K</kbd>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="actions">
|
||
|
|
<ThemeToggle />
|
||
|
|
<a class="icon-btn" href="https://github.com/" target="_blank" rel="noreferrer noopener" aria-label="GitHub">
|
||
|
|
<svg viewBox="0 0 16 16" width="16" height="16" aria-hidden="true">
|
||
|
|
<path
|
||
|
|
fill="currentColor"
|
||
|
|
d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8Z"
|
||
|
|
/>
|
||
|
|
</svg>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
.topbar {
|
||
|
|
position: sticky;
|
||
|
|
top: 0;
|
||
|
|
z-index: 50;
|
||
|
|
height: var(--size-topbar);
|
||
|
|
background: var(--c-bg-overlay);
|
||
|
|
backdrop-filter: saturate(180%) blur(10px);
|
||
|
|
-webkit-backdrop-filter: saturate(180%) blur(10px);
|
||
|
|
border-bottom: 1px solid var(--c-border);
|
||
|
|
}
|
||
|
|
|
||
|
|
.inner {
|
||
|
|
height: 100%;
|
||
|
|
max-width: 1440px;
|
||
|
|
margin: 0 auto;
|
||
|
|
padding: 0 1.5rem;
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: auto 1fr minmax(220px, 360px) auto;
|
||
|
|
align-items: center;
|
||
|
|
gap: 2rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.brand {
|
||
|
|
display: inline-flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: 0.5rem;
|
||
|
|
color: var(--c-fg);
|
||
|
|
font-weight: 600;
|
||
|
|
font-size: 1rem;
|
||
|
|
letter-spacing: -0.02em;
|
||
|
|
}
|
||
|
|
|
||
|
|
.brand:hover {
|
||
|
|
text-decoration: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.brand-mark {
|
||
|
|
position: relative;
|
||
|
|
display: inline-block;
|
||
|
|
width: 24px;
|
||
|
|
height: 24px;
|
||
|
|
border-radius: 7px;
|
||
|
|
background: linear-gradient(135deg, var(--c-accent) 0%, var(--c-accent-emphasized) 100%);
|
||
|
|
box-shadow:
|
||
|
|
inset 0 0 0 1px hsl(0 0% 100% / 0.18),
|
||
|
|
0 1px 2px rgb(0 0 0 / 0.15),
|
||
|
|
0 0 0 1px color-mix(in oklab, var(--c-accent) 25%, transparent);
|
||
|
|
}
|
||
|
|
|
||
|
|
.brand-mark::after {
|
||
|
|
content: '';
|
||
|
|
position: absolute;
|
||
|
|
inset: 4px;
|
||
|
|
border-radius: 3px;
|
||
|
|
background:
|
||
|
|
linear-gradient(135deg, transparent 40%, hsl(0 0% 100% / 0.35)),
|
||
|
|
repeating-linear-gradient(
|
||
|
|
45deg,
|
||
|
|
hsl(0 0% 100% / 0.18) 0 1px,
|
||
|
|
transparent 1px 4px
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
.brand-name {
|
||
|
|
font-family: var(--font-mono);
|
||
|
|
font-weight: 600;
|
||
|
|
}
|
||
|
|
|
||
|
|
.brand-version {
|
||
|
|
font-size: 0.7rem;
|
||
|
|
font-weight: 500;
|
||
|
|
color: var(--c-fg-subtle);
|
||
|
|
background: var(--c-bg-muted);
|
||
|
|
padding: 0.1rem 0.4rem;
|
||
|
|
border-radius: var(--r-sm);
|
||
|
|
border: 1px solid var(--c-border);
|
||
|
|
margin-left: 0.25rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.primary {
|
||
|
|
display: flex;
|
||
|
|
gap: 0.25rem;
|
||
|
|
font-size: 0.9rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.primary a {
|
||
|
|
color: var(--c-fg-muted);
|
||
|
|
padding: 0.4rem 0.7rem;
|
||
|
|
border-radius: var(--r-md);
|
||
|
|
font-weight: 500;
|
||
|
|
transition: background-color 120ms var(--ease), color 120ms var(--ease);
|
||
|
|
}
|
||
|
|
|
||
|
|
.primary a:hover {
|
||
|
|
color: var(--c-fg);
|
||
|
|
background: var(--c-bg-muted);
|
||
|
|
text-decoration: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.search {
|
||
|
|
position: relative;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: 0.5rem;
|
||
|
|
background: var(--c-bg-subtle);
|
||
|
|
border: 1px solid var(--c-border);
|
||
|
|
border-radius: var(--r-md);
|
||
|
|
padding: 0 0.6rem;
|
||
|
|
height: 34px;
|
||
|
|
color: var(--c-fg-subtle);
|
||
|
|
transition:
|
||
|
|
border-color 120ms var(--ease),
|
||
|
|
box-shadow 120ms var(--ease);
|
||
|
|
}
|
||
|
|
|
||
|
|
.search:focus-within {
|
||
|
|
border-color: var(--c-accent);
|
||
|
|
box-shadow: 0 0 0 3px var(--c-accent-subtle);
|
||
|
|
}
|
||
|
|
|
||
|
|
.search input {
|
||
|
|
flex: 1;
|
||
|
|
min-width: 0;
|
||
|
|
border: none;
|
||
|
|
background: transparent;
|
||
|
|
outline: none;
|
||
|
|
font-size: 0.875rem;
|
||
|
|
color: var(--c-fg);
|
||
|
|
}
|
||
|
|
|
||
|
|
.search input::placeholder {
|
||
|
|
color: var(--c-fg-subtle);
|
||
|
|
}
|
||
|
|
|
||
|
|
.search kbd {
|
||
|
|
font-family: var(--font-mono);
|
||
|
|
font-size: 0.7rem;
|
||
|
|
color: var(--c-fg-subtle);
|
||
|
|
background: var(--c-bg-muted);
|
||
|
|
padding: 0.1rem 0.35rem;
|
||
|
|
border-radius: var(--r-sm);
|
||
|
|
border: 1px solid var(--c-border);
|
||
|
|
}
|
||
|
|
|
||
|
|
.actions {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: 0.4rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.icon-btn {
|
||
|
|
display: inline-flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
width: 34px;
|
||
|
|
height: 34px;
|
||
|
|
border-radius: var(--r-md);
|
||
|
|
color: var(--c-fg-muted);
|
||
|
|
transition: background-color 120ms var(--ease), color 120ms var(--ease);
|
||
|
|
}
|
||
|
|
|
||
|
|
.icon-btn:hover {
|
||
|
|
background: var(--c-bg-muted);
|
||
|
|
color: var(--c-fg);
|
||
|
|
text-decoration: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (max-width: 980px) {
|
||
|
|
.inner {
|
||
|
|
grid-template-columns: auto 1fr auto;
|
||
|
|
gap: 1rem;
|
||
|
|
}
|
||
|
|
.search {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (max-width: 640px) {
|
||
|
|
.primary {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
.brand-version {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|