centersl/docker-docs
1
0
Fork 0
mirror of https://github.com/docker/docs.git synced 2026-03-27 14:28:47 +07:00
Code Issues Packages Projects Releases Wiki Activity

site: improve header buttons, remove support link

Browse Source 
Signed-off-by: David Karlsson <35727626+dvdksn@users.noreply.github.com>
This commit is contained in:
David Karlsson
2025-12-12 16:29:32 +01:00
parent e39461ce72
commit 4cc579f17b
6 changed files with 132 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
assets/css/utilities.css
View File

@@ -257,20 +257,6 @@
font-size: 90%;
}
@utility topbar-button {
@apply text-center max-w-40 text-white font-semibold min-h-10 px-2 bg-(--topnav-button-bg) rounded-md border-1 border-blue-300;
@apply inline-flex justify-center items-center gap-1.5 hover:bg-blue-400 hover:border-blue-300 transition-colors;
svg {
font-size: 19px;
}
}
@utility topbar-button-clear {
@apply text-center text-white/95 font-semibold min-h-9 px-0 hover:text-white/85 transition-colors;
svg {
font-size: 19px;
}
}
.footer {
@apply hidden md:flex flex-row ml-auto justify-between px-4 pt-6 pb-2 gap-6;
@apply bg-gray-100 dark:bg-gray-900 border-t border-gray-200 dark:border-gray-700;
@@ -311,3 +297,55 @@
#ot-sdk-btn.ot-sdk-show-settings:hover, #ot-sdk-btn.optanon-show-settings:hover{
@apply hover:!bg-transparent !text-gray-600 dark:!text-gray-400 underline underline-offset-4 decoration-1;
}
@keyframes reflection {
0% {
transform: translateX(-100%);
}
18% {
transform: translateX(100%);
}
100% {
transform: translateX(100%);
}
}
@utility shimmer {
position: relative;
overflow: hidden;
& > * {
position: relative;
z-index: 2;
}
&::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(
110deg,
transparent 0%,
transparent 43%,
rgba(123, 164, 244, 0.25) 49%,
rgba(170, 196, 248, 0.45) 50%,
rgba(123, 164, 244, 0.25) 51%,
transparent 57%,
transparent 100%
);
transform: translateX(-100%);
pointer-events: none;
z-index: 1;
@media (prefers-reduced-motion: no-preference) {
animation: reflection 3s ease-in-out 3s forwards;
}
}
&:hover {
@apply bg-blue-800 border-blue-400;
}
}

76
hugo_stats.json
View File

@@ -4,7 +4,9 @@
"classes": [
"--mount",
"--tmpfs",
"-mr-8",
"-mt-8",
"-pr-8",
"-top-10",
"-top-16",
"-v",
@@ -35,8 +37,8 @@
"Command-Prompt-CLI",
"Command-line-setup",
"Compliant",
"Covered",
"Custom-builder",
"DNS-resolution",
"DSOS-Legacy-DVP-programs",
"DVP-program",
"Debian",
@@ -108,9 +110,9 @@
"Manual-verification",
"Manually-create-assets",
"NetworkManager",
"Networking-mode",
"Node",
"Non-compliant",
"Not-covered",
"Okta",
"Okta-SAML",
"Old-Dockerfile",
@@ -147,9 +149,12 @@
"Updated-Dockerfile",
"Use-Docker-Init",
"Use-OpenAI",
"Using-Docker-Hardened-Image",
"Using-Docker-Hardened-Images",
"Using-the-CLI",
"Using-the-Docker-Official-Image",
"Using-the-GUI",
"Using-the-official-Docker-image",
"Using-the-official-image",
"VS-Code",
"Vue",
@@ -167,6 +172,7 @@
"Without-systemd",
"[display:none]",
"absolute",
"active:border-2",
"admonition",
"admonition-content",
"admonition-danger",
@@ -176,6 +182,7 @@
"admonition-tip",
"admonition-title",
"admonition-warning",
"ask-ai-button",
"aspect-video",
"bake-action",
"bg-amber-500",
@@ -186,10 +193,14 @@
"bg-blue-400",
"bg-blue-500",
"bg-blue-600",
"bg-gradient-to-br",
"bg-blue-700",
"bg-blue-800",
"bg-cyan-500",
"bg-gradient-to-r",
"bg-gray-100",
"bg-gray-400",
"bg-gray-50",
"bg-gray-500",
"bg-gray-700",
"bg-green-400",
"bg-green-500",
@@ -204,9 +215,14 @@
"border",
"border-0",
"border-1",
"border-2",
"border-b",
"border-b-4",
"border-blue",
"border-blue-300",
"border-blue-400",
"border-blue-500",
"border-cyan-400",
"border-divider-light",
"border-gray-100",
"border-gray-200",
@@ -218,6 +234,7 @@
"border-none",
"border-t",
"border-transparent",
"border-white",
"bottom-0",
"breadcrumbs",
"build-push-action",
@@ -245,6 +262,7 @@
"dark:bg-blue-500",
"dark:bg-blue-800",
"dark:bg-gray-300",
"dark:bg-gray-400",
"dark:bg-gray-500",
"dark:bg-gray-800",
"dark:bg-gray-900",
@@ -263,7 +281,6 @@
"dark:border-green-400",
"dark:border-l-magenta-dark",
"dark:focus:ring-3-blue-dark",
"dark:from-blue-300",
"dark:hidden",
"dark:hover:bg-blue-400",
"dark:hover:bg-blue-500",
@@ -285,9 +302,9 @@
"dark:text-gray-400",
"dark:text-gray-500",
"dark:text-gray-600",
"dark:text-gray-800",
"dark:text-magenta-dark",
"dark:text-white",
"dark:to-blue-400",
"docker/bake-action",
"docker/build-push-action",
"download-links",
@@ -306,8 +323,13 @@
"flex-shrink",
"flex-shrink-0",
"flex-wrap",
"focus:border-2",
"focus:border-blue-400",
"focus:outline-none",
"focus:ring",
"focus:ring-2",
"focus:ring-3-blue-light",
"focus:ring-blue-400",
"font-bold",
"font-medium",
"font-normal",
@@ -316,7 +338,8 @@
"footnote-backref",
"footnote-ref",
"footnotes",
"from-blue-400",
"from-blue-500",
"from-cyan-400",
"gap-0",
"gap-1",
"gap-12",
@@ -340,6 +363,7 @@
"h-5",
"h-6",
"h-8",
"h-[42px]",
"h-[calc(100vh-64px)]",
"h-fit",
"h-full",
@@ -348,20 +372,31 @@
"hidden",
"hidden'",
"highlight",
"hover:bg-blue-300",
"hover:bg-blue-400",
"hover:bg-blue-50",
"hover:bg-blue-500",
"hover:bg-blue-600",
"hover:bg-blue-800",
"hover:bg-cyan-400",
"hover:bg-gray-100",
"hover:bg-gray-200",
"hover:bg-gray-50",
"hover:border-blue-300",
"hover:border-blue-400",
"hover:border-white/20",
"hover:dark:bg-gray-800",
"hover:dark:text-blue-400",
"hover:dark:text-blue-700",
"hover:opacity-80",
"hover:opacity-90",
"hover:scale-105",
"hover:shadow-[0_0_30px_rgba(147,51,234,0.6)]",
"hover:shadow-[0_0_30px_rgba(34,211,238,0.5)]",
"hover:text-blue",
"hover:underline",
"icon-lg",
"icon-md",
"icon-sm",
"icon-svg",
"icon-svg-stroke",
@@ -381,7 +416,9 @@
"leading-snug",
"leading-tight",
"left-0",
"lg:absolute",
"lg:block",
"lg:border-none",
"lg:flex",
"lg:flex-row",
"lg:gap-4",
@@ -390,11 +427,14 @@
"lg:grid-cols-3",
"lg:grid-cols-4",
"lg:hidden",
"lg:hover:bg-transparent",
"lg:hover:opacity-80",
"lg:inline",
"lg:max-w-xl",
"lg:no-underline",
"lg:pb-2",
"lg:scale-100",
"lg:w-full",
"link",
"links",
"lntable",
@@ -477,12 +517,12 @@
"overflow-x-auto",
"overflow-x-hidden",
"overflow-y-auto",
"p-1",
"p-2",
"p-3",
"p-4",
"p-6",
"p-8",
"p-[2px]",
"pb-0",
"pb-0.5",
"pb-1",
@@ -493,6 +533,7 @@
"pl-3",
"pl-4",
"pl-5",
"placeholder-blue-300",
"pr-2",
"prose",
"pt-2",
@@ -504,13 +545,17 @@
"py-0.5",
"py-1",
"py-2",
"py-2.5",
"py-20",
"py-3",
"py-4",
"py-8",
"py-[0.5625rem]",
"relative",
"right-0",
"right-2",
"right-8",
"ring",
"ring-3-2",
"ring-3-[1.5px]",
"ring-3-blue-light-400",
@@ -518,8 +563,10 @@
"rotate-45",
"rounded",
"rounded-full",
"rounded-lg",
"rounded-md",
"rounded-sm",
"rounded-xl",
"scale-50",
"scale-75",
"scroll-mt-2",
@@ -533,7 +580,14 @@
"self-center",
"self-start",
"shadow",
"shadow-[0_0_20px_rgba(147,51,234,0.4)]",
"shadow-[0_0_20px_rgba(34,211,238,0.3)]",
"shadow-black",
"shadow-blue-800",
"shadow-gray-600",
"shadow-lg",
"shadow-md",
"shimmer",
"sm:block",
"sm:flex-row",
"sm:hidden",
@@ -555,6 +609,7 @@
"text-base",
"text-black",
"text-blue",
"text-blue-600",
"text-blue-light",
"text-divider-light",
"text-gray",
@@ -572,21 +627,24 @@
"text-white",
"text-xl",
"text-xs",
"to-blue-200",
"to-blue-600",
"to-purple-600",
"toc",
"top-0",
"top-1",
"top-16",
"top-6",
"topbar-button",
"topbar-button-clear",
"transition",
"transition-all",
"transition-colors",
"transition-opacity",
"transition-transform",
"truncate",
"w-0",
"w-2",
"w-5",
"w-64",
"w-65",
"w-8",
"w-[1200px]",

34
layouts/_default/baseof.html
View File

@@ -49,40 +49,6 @@
>
Back
</button>
<!-- Top nav buttons appear here on sm width -->
<div class="flex flex-col gap-2 md:hidden mb-4">
<button
@click="open = false"
class="topbar-button open-kapa-widget w-full flex items-center gap-2"
>
<span>Ask&nbsp;AI</span>
<span class="icon-svg">
{{ partialCached "utils/svg.html" "/icons/sparkle.svg" }}
</span>
</button>
<div class="topbar-button w-full flex items-center gap-2" id="search-bar-container">
{{ partialCached "search-bar.html" "-" }}
</div>
{{ partial "contact-support-button.html" .}}
<button
aria-label="Theme switch"
id="theme-switch"
class="topbar-button flex items-center"
x-data="{ theme: localStorage.getItem('theme-preference') }"
x-init="$watch('theme', value => {
localStorage.setItem('theme-preference', value);
document.firstElementChild.className = value;
})"
@click="theme = (theme === 'dark' ? 'light' : 'dark')"
>
<span class="icon-svg icon-sm dark:hidden"
>{{ partialCached "icon" "icons/sun.svg" "sun" }}
</span>
<span class="icon-svg icon-sm hidden dark:block">
{{ partialCached "icon" "icons/moon.svg" "moon" }}
</span>
</button>
</div>
<!-- Actual Sidebar Content -->
{{ block "left" . }}
{{ partial "sidebar/mainnav.html" . }}

12
layouts/partials/contact-support-button.html
View File

@@ -1,12 +0,0 @@
{{ $class := "" }}
{{ if eq . "notext" }}
{{ $class = "hidden lg:inline" }}
{{ end }}
<a class="topbar-button w-full flex items-center gap-2"
href="https://hub.docker.com/support/contact"
aria-label="Contact support">
<span class="{{ $class }}">Contact support</span>
<span class="icon-svg icon-sm">
{{ partial "utils/svg.html" "/icons/headset.svg" }}
</span>
</a>

26
layouts/partials/header.html
View File

@@ -46,28 +46,25 @@
</nav>
</div>
<div id="buttons" class="flex min-w-0 items-center justify-end flex-shrink-0">
<!-- Hide on small screens, show on md+ -->
<div class="hidden md:flex items-center gap-3">
<div class="flex items-center gap-2">
<button
@click="open = false"
class="topbar-button open-kapa-widget"
class="cursor-pointer flex items-center gap-2 p-2 rounded-lg bg-blue-700 border border-blue-500 text-white transition-colors focus:outline-none focus:ring focus:ring-blue-400 shimmer open-kapa-widget"
>
<span class="hidden lg:inline">Ask&nbsp;AI</span>
<span class="icon-svg">
{{ partialCached "utils/svg.html" "/icons/sparkle.svg" }}
{{ partial "utils/svg.html" "/icons/sparkle.svg" }}
</span>
<span class="hidden px-1 lg:inline">Ask&nbsp;AI</span>
</button>
<div class="topbar-button" id="search-bar-container">
<div id="search-bar-container">
{{ partialCached "search-bar.html" "-" }}
</div>
{{ partial "contact-support-button.html" "notext" }}
<button
aria-label="Theme switch"
id="theme-switch"
class="topbar-button-clear"
class="cursor-pointer p-2 rounded-lg bg-blue-700 border border-blue-500 hover:bg-blue-800 hover:border-blue-400 transition-colors focus:outline-none focus:ring focus:ring-blue-400"
x-data="{ theme: localStorage.getItem('theme-preference') }"
x-init="$watch('theme', value => {
localStorage.setItem('theme-preference', value);
@@ -75,21 +72,14 @@
})"
@click="theme = (theme === 'dark' ? 'light' : 'dark')"
>
<span class="icon-svg icon-sm dark:hidden"
<span class="icon-svg dark:hidden"
>{{ partialCached "icon" "icons/sun.svg" "sun" }}
</span>
<span class="icon-svg icon-sm hidden dark:block">
<span class="icon-svg hidden dark:block">
{{ partialCached "icon" "icons/moon.svg" "moon" }}
</span>
</button>
</div>
<!-- On sm screens, hide all buttons here (they will be in sidebar) -->
</div>
</div>
</header>
</button>
</div>
<!-- On sm screens, hide all buttons here (they will be in sidebar) -->
</div>
</div>
</header>

10
layouts/partials/search-bar.html
View File

@@ -4,10 +4,10 @@
@click.outside="open = false;"
@keyup.escape.window="open = false"
id="search-bar"
class="relative flex w-full max-w-full items-center overflow-visible"
class="h-full relative flex items-center overflow-visible"
>
<input
class="min-w-0 border-none outline-none focus:outline-none"
class="rounded-lg hidden w-64 lg:inline focus:outline-none bg-blue-700 border border-blue-500 px-3 py-[0.5625rem] focus:ring focus:ring-blue-400 placeholder-blue-300 h-[42px]"
x-ref="searchBarInput"
type="search"
id="search-bar-input"
@@ -30,12 +30,12 @@
<button
id="search-bar-icon"
@click="window.location.href = '/search/?q=' + $refs.searchBarInput.value;"
class="cursor-pointer transition-opacity hover:opacity-80"
class="lg:absolute right-2 p-1 rounded-lg cursor-pointer transition-colors hover:bg-blue-600 lg:hover:bg-transparent lg:hover:opacity-80"
aria-label="Search"
>
<span class="icon-svg-stroke">
<div class="bg-blue-700 rounded-md p-2 border border-blue-500 lg:border-none icon-svg">
{{ partial "utils/svg.html" "/icons/search.svg" }}
</span>
</div>
</button>
<div
id="search-bar-dropdown"