mirror of
https://github.com/docker/docs.git
synced 2026-03-28 14:58:53 +07:00
038e6dc682
- Extract classes to utilities and components. - Reduce number of colors used. - Harmonize button colors. - Restyle admonitions. - Move **Page options** button to main article. - Various color tweaks.
62 lines
2.1 KiB
HTML
62 lines
2.1 KiB
HTML
<header
|
|
class="sticky top-0 z-20 h-16 w-full bg-gradient-to-r from-blue-600 to-blue-500 to-50% px-6 text-white dark:from-blue-600 dark:to-blue-500"
|
|
>
|
|
<div
|
|
class="mx-auto flex h-full max-w-[1920px] items-center justify-between gap-2 lg:gap-8"
|
|
>
|
|
<div class="flex h-full items-center gap-2 lg:gap-8">
|
|
{{- if not .IsHome }}
|
|
<button
|
|
x-data
|
|
@click="$store.showSidebar = true"
|
|
class="icon-svg block h-full px-4 md:hidden"
|
|
aria-label="Menu"
|
|
>
|
|
{{ partialCached "icon" "menu" "menu" }}
|
|
</button>
|
|
{{- end }}
|
|
<div>
|
|
{{/* main logo */}}
|
|
<a title="Docker Docs home page" href="{{ site.BaseURL }}">
|
|
<div class="hidden sm:block">
|
|
{{- (resources.Get "images/docker-docs-white.svg").Content | safe.HTML -}}
|
|
</div>
|
|
<div class="block sm:hidden">
|
|
{{- (resources.Get "images/docker-docs-white-condensed.svg").Content | safe.HTML -}}
|
|
</div>
|
|
</a>
|
|
</div>
|
|
<nav class="mt-1 hidden md:block">
|
|
<ul class="flex text-sm md:text-base lg:gap-4">
|
|
{{ range site.Menus.main }}
|
|
<li
|
|
{{- if or (eq page.Permalink .Page.Permalink) (page.IsDescendant .Page) }}
|
|
class="border-b-4"
|
|
{{- else }}
|
|
class="border-b-4 border-transparent hover:border-white/20"
|
|
{{- end }}
|
|
>
|
|
<a class="block px-2 py-1 whitespace-nowrap" href="{{ .URL }}"
|
|
>{{ .Name }}</a
|
|
>
|
|
</li>
|
|
{{ end }}
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
<div class="flex min-w-0 flex-grow items-center justify-end gap-4">
|
|
{{ partialCached "search-bar.html" "-" }}
|
|
<button
|
|
@click="open = false"
|
|
class="open-kapa-widget flex items-center gap-1 rounded-sm px-2 py-1 transition hover:bg-white/20 dark:text-white"
|
|
>
|
|
<span>Ask AI</span>
|
|
<img
|
|
src="{{ (resources.Get "images/ai-stars.svg").Permalink }}"
|
|
alt="AI Stars"
|
|
/>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</header>
|