mirror of https://github.com/docker/docs.git
hugo: css overhaul
- Remove manual breakpoint definitions and use tailwind defaults - Fix various overflow and other rendering issues Signed-off-by: David Karlsson <35727626+dvdksn@users.noreply.github.com>
This commit is contained in:
David Karlsson
parent
22ea9e5e34
commit
46a3512a54
|
|
@ -16,9 +16,12 @@
|
|||
background: theme("colors.gray.light.200");
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
white-space: nowrap;
|
||||
font-weight: 400;
|
||||
overflow-wrap: anywhere;
|
||||
padding: 0 4px;
|
||||
table & {
|
||||
overflow-wrap: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.highlight {
|
||||
|
|
|
|||
|
|
@ -73,5 +73,10 @@
|
|||
@apply text-lg;
|
||||
line-height: 1.75;
|
||||
}
|
||||
table {
|
||||
display: block;
|
||||
overflow-x: auto;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg height="24" id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3477.6 530.79">
|
||||
<svg height="22" id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3477.6 530.79">
|
||||
<defs>
|
||||
<style>
|
||||
.cls-1 {
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 10 KiB |
|
|
@ -0,0 +1,58 @@
|
|||
<svg class="dark:hidden" width="555" height="334" viewBox="0 0 555 334" fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<g style="mix-blend-mode: multiply">
|
||||
<path d="M0 249.997L283.445 0H555V334H89.8843L0 249.997Z" fill="url(#paint0_linear_129_29139)" />
|
||||
</g>
|
||||
<g style="mix-blend-mode: multiply">
|
||||
<path d="M80 84.003L363.445 334H554.5V0H169.884L80 84.003Z" fill="url(#paint1_linear_129_29139)" />
|
||||
</g>
|
||||
<g style="mix-blend-mode: multiply">
|
||||
<path d="M279 334L555 104V182.33V254.174V334H279Z" fill="url(#paint2_linear_129_29139)" />
|
||||
</g>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear_129_29139" x1="18.5" y1="61.5" x2="502" y2="240.5"
|
||||
gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#C0E0FA" />
|
||||
<stop offset="1" stop-color="#EFEFF2" />
|
||||
</linearGradient>
|
||||
<linearGradient id="paint1_linear_129_29139" x1="98.5" y1="272.5" x2="582" y2="93.5"
|
||||
gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#F7ECFF" />
|
||||
<stop offset="1" stop-color="#EFEFF2" />
|
||||
</linearGradient>
|
||||
<linearGradient id="paint2_linear_129_29139" x1="282.381" y1="-33.7561" x2="1315.56" y2="352.19"
|
||||
gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#C6EAE1" />
|
||||
<stop offset="1" stop-color="#EFEFF2" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
<svg class="hidden dark:block" width="555" height="334" viewBox="0 0 555 334" fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<g style="mix-blend-mode: multiply">
|
||||
<path d="M0 249.997L283.445 0H555V334H89.8843L0 249.997Z" fill="url(#paint0_linear_129_29443)" />
|
||||
</g>
|
||||
<g style="mix-blend-mode: multiply">
|
||||
<path d="M80 84.003L363.445 334H554.5V0H169.884L80 84.003Z" fill="url(#paint1_linear_129_29443)" />
|
||||
</g>
|
||||
<g style="mix-blend-mode: multiply">
|
||||
<path d="M279 334L555 104V182.33V254.174V334H279Z" fill="url(#paint2_linear_129_29443)" />
|
||||
</g>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear_129_29443" x1="18.5" y1="61.5" x2="502" y2="240.5"
|
||||
gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#C0E0FA" />
|
||||
<stop offset="1" stop-color="#EFEFF2" />
|
||||
</linearGradient>
|
||||
<linearGradient id="paint1_linear_129_29443" x1="98.5" y1="272.5" x2="582" y2="93.5"
|
||||
gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#F7ECFF" />
|
||||
<stop offset="1" stop-color="#EFEFF2" />
|
||||
</linearGradient>
|
||||
<linearGradient id="paint2_linear_129_29443" x1="282.381" y1="-33.7561" x2="1315.56" y2="352.19"
|
||||
gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#C6EAE1" />
|
||||
<stop offset="1" stop-color="#EFEFF2" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.5 KiB |
|
|
@ -23,7 +23,7 @@ In addition to the language-specific modules, Docker documentation also provides
|
|||
|
||||
Learn how to containerize your applications and start developing using Docker. Choose one of the following languages to get started.
|
||||
|
||||
<div class="grid grid-cols-3 auto-rows-fr sm:flex-col sm:h-auto gap-4">
|
||||
<div class="grid grid-cols-2 md:grid-cols-3 h-auto gap-4">
|
||||
<div class="flex items-center flex-1 shadow p-4">
|
||||
<a href="/language/nodejs/"><img class="m-auto rounded" src="/language/images/nodejs.webp" alt="Develop with Node"></a>
|
||||
</div>
|
||||
|
|
@ -48,4 +48,4 @@ Learn how to containerize your applications and start developing using Docker. C
|
|||
<div class="flex items-center flex-1 shadow p-4">
|
||||
<a href="/language/php/"><img class="m-auto rounded" src="/language/images/php-logo.webp" alt="Develop with PHP"></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@
|
|||
"!mt-0",
|
||||
"--mount",
|
||||
"--tmpfs",
|
||||
"-mb-3",
|
||||
"-mt-4",
|
||||
"-top-16",
|
||||
"-v",
|
||||
|
|
@ -112,7 +113,6 @@
|
|||
"Without-systemd",
|
||||
"absolute",
|
||||
"aspect-video",
|
||||
"auto-rows-fr",
|
||||
"bake-action",
|
||||
"basis-1/3",
|
||||
"basis-2/3",
|
||||
|
|
@ -150,6 +150,7 @@
|
|||
"build-push-action",
|
||||
"chroma",
|
||||
"cls-1",
|
||||
"col-start-2",
|
||||
"cursor-not-allowed",
|
||||
"cursor-pointer",
|
||||
"dark:bg-accent-dark",
|
||||
|
|
@ -208,8 +209,6 @@
|
|||
"flex-1",
|
||||
"flex-col",
|
||||
"flex-col-reverse",
|
||||
"flex-initial",
|
||||
"flex-row-reverse",
|
||||
"flex-wrap",
|
||||
"font-medium",
|
||||
"footnote-backref",
|
||||
|
|
@ -227,17 +226,15 @@
|
|||
"gap-6",
|
||||
"gap-8",
|
||||
"grid",
|
||||
"grid-cols-1",
|
||||
"grid-cols-2",
|
||||
"grid-cols-3",
|
||||
"grid-cols-4",
|
||||
"group",
|
||||
"group-hover:block'",
|
||||
"grow",
|
||||
"h-16",
|
||||
"h-2",
|
||||
"h-32",
|
||||
"h-8",
|
||||
"h-[334px]",
|
||||
"h-auto",
|
||||
"h-full",
|
||||
"h-max",
|
||||
"h-screen",
|
||||
|
|
@ -258,6 +255,7 @@
|
|||
"icon-sm",
|
||||
"icon-svg",
|
||||
"important",
|
||||
"information",
|
||||
"inline",
|
||||
"inset-0",
|
||||
"invertible",
|
||||
|
|
@ -272,14 +270,16 @@
|
|||
"leading-snug",
|
||||
"left-0",
|
||||
"lg:block",
|
||||
"lg:flex",
|
||||
"lg:grid-cols-2",
|
||||
"lg:grow-0",
|
||||
"lg:grid-cols-3",
|
||||
"lg:grid-cols-main-lg",
|
||||
"lg:hidden",
|
||||
"lg:link",
|
||||
"lg:pb-0",
|
||||
"lg:px-4",
|
||||
"lg:max-w-[300px]",
|
||||
"lg:ml-auto",
|
||||
"lg:scale-100",
|
||||
"lg:text-base",
|
||||
"lg:w-full",
|
||||
"lg:w-[1200px]",
|
||||
"link",
|
||||
"lntable",
|
||||
"lntd",
|
||||
|
|
@ -287,24 +287,20 @@
|
|||
"max-h-full",
|
||||
"max-w-56",
|
||||
"max-w-[1400px]",
|
||||
"max-w-[66%]",
|
||||
"max-w-[840px]",
|
||||
"max-w-full",
|
||||
"max-w-none",
|
||||
"mb-4",
|
||||
"mb-8",
|
||||
"md:block",
|
||||
"md:fixed",
|
||||
"md:flex",
|
||||
"md:gap-2",
|
||||
"md:grid-cols-1",
|
||||
"md:h-screen",
|
||||
"md:hidden",
|
||||
"md:ml-[21px]",
|
||||
"md:scale-50",
|
||||
"md:w-full",
|
||||
"md:w-lvw",
|
||||
"md:w-screen",
|
||||
"md:z-10",
|
||||
"md:col-start-3",
|
||||
"md:flex-row",
|
||||
"md:gap-8",
|
||||
"md:grid-cols-2",
|
||||
"md:grid-cols-3",
|
||||
"md:h-[334px]",
|
||||
"md:max-w-[66%]",
|
||||
"md:scale-100",
|
||||
"min-h-screen",
|
||||
"min-w-0",
|
||||
"ml-3",
|
||||
|
|
@ -332,8 +328,10 @@
|
|||
"p-6",
|
||||
"p-8",
|
||||
"p-[2px]",
|
||||
"pb-0",
|
||||
"pb-0.5",
|
||||
"pb-2",
|
||||
"pb-32",
|
||||
"pb-4",
|
||||
"pl-1",
|
||||
"pl-2",
|
||||
|
|
@ -341,6 +339,7 @@
|
|||
"pl-4",
|
||||
"pl-5",
|
||||
"place-items-center",
|
||||
"pr-2",
|
||||
"prose",
|
||||
"pt-0",
|
||||
"px-1",
|
||||
|
|
@ -351,6 +350,7 @@
|
|||
"py-2",
|
||||
"py-20",
|
||||
"py-4",
|
||||
"py-8",
|
||||
"regular-install",
|
||||
"relative",
|
||||
"restricted",
|
||||
|
|
@ -364,23 +364,13 @@
|
|||
"rounded-b-lg",
|
||||
"rounded-full",
|
||||
"rounded-sm",
|
||||
"scale-50",
|
||||
"scale-75",
|
||||
"scroll-mt-20",
|
||||
"scroll-mt-36",
|
||||
"self-center",
|
||||
"shadow",
|
||||
"shrink",
|
||||
"shrink-0",
|
||||
"sidebar-hover",
|
||||
"sm:col-start-2",
|
||||
"sm:flex",
|
||||
"sm:flex-col",
|
||||
"sm:grid-cols-2",
|
||||
"sm:h-auto",
|
||||
"sm:h-full",
|
||||
"sm:hidden",
|
||||
"sm:max-w-full",
|
||||
"sm:py-8",
|
||||
"sm:scale-75",
|
||||
"space-x-2",
|
||||
"space-y-4",
|
||||
"sticky",
|
||||
|
|
@ -421,14 +411,17 @@
|
|||
"w-2",
|
||||
"w-8",
|
||||
"w-[1200px]",
|
||||
"w-[300px]",
|
||||
"w-[32px]",
|
||||
"w-[840px]",
|
||||
"w-full",
|
||||
"w-lvw",
|
||||
"warning",
|
||||
"xl:grid-cols-1",
|
||||
"xl:grid-cols-2",
|
||||
"xl:grid-cols-3",
|
||||
"xl:grid-cols-4",
|
||||
"xl:grid-cols-main",
|
||||
"xl:hidden",
|
||||
"xl:no-underline",
|
||||
"xl:pb-2",
|
||||
"xl:w-[1200px]",
|
||||
"youtube-video",
|
||||
"z-10",
|
||||
"z-20",
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ editPage:
|
|||
requestChanges:
|
||||
other: Request changes
|
||||
tableOfContents:
|
||||
other: Contents
|
||||
other: Table of contents
|
||||
relatedContent:
|
||||
other: Related content
|
||||
|
||||
|
|
|
|||
|
|
@ -7,17 +7,34 @@
|
|||
|
||||
<body class="bg-background-light text-base dark:bg-background-dark dark:text-white">
|
||||
{{ partial "header.html" . }}
|
||||
<main class="flex">
|
||||
<div id="sidebar"
|
||||
class="sticky top-16 flex h-screen shrink-0 grow flex-row-reverse overflow-y-scroll bg-background-light dark:bg-gray-dark-100 md:fixed md:z-10 md:hidden md:h-screen md:w-screen lg:grow-0">
|
||||
<main class="grid grid-cols-1 xl:grid-cols-main lg:grid-cols-main-lg">
|
||||
<!-- First column: visible on lg and xl -->
|
||||
<div class="hidden lg:block bg-background-light dark:bg-gray-dark-100"
|
||||
{{- $classes := "'fixed', 'z-20', 'left-0', 'top-16', 'w-full', 'flex', 'h-lvh'" }}
|
||||
x-data @togglesidebar.window="
|
||||
if ($store.showSidebar == false) {
|
||||
document.body.classList.add('overflow-hidden');
|
||||
$el.classList.remove('hidden');
|
||||
$el.classList.add({{$classes}});
|
||||
$store.showSidebar = true;
|
||||
return;
|
||||
}
|
||||
document.body.classList.remove('overflow-hidden');
|
||||
$el.classList.add('hidden');
|
||||
$el.classList.remove({{$classes}});
|
||||
$store.showSidebar = false;
|
||||
"
|
||||
>
|
||||
<div class="w-full ml-auto p-2">
|
||||
{{ block "left" . }}
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-[840px] flex-initial overflow-clip p-6 pt-0 md:w-lvw">
|
||||
<div class="min-w-0 px-4 pb-32">
|
||||
{{ block "main" . }}
|
||||
{{ end }}
|
||||
</div>
|
||||
<div class="sticky top-16 h-screen w-[300px] shrink grow overflow-y-scroll lg:hidden">
|
||||
<div class="sticky top-16 pb-32 h-screen hidden lg:block overflow-x-hidden overflow-y-scroll pr-2">
|
||||
{{ block "right" . }}
|
||||
{{ end }}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
{{ with .Title }}
|
||||
<h1 class="scroll-mt-36">{{ . }}</h1>
|
||||
{{ end }}
|
||||
<div class="hidden lg:block">
|
||||
<div class="block xl:hidden">
|
||||
{{ partial "pagemeta.html" . }}
|
||||
</div>
|
||||
{{ .Content }}
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
{{ with .Title }}
|
||||
<h1 class="scroll-mt-36">{{ . }}</h1>
|
||||
{{ end }}
|
||||
<div class="hidden lg:block">
|
||||
<div class="block xl:hidden">
|
||||
{{ partial "pagemeta.html" . }}
|
||||
<hr>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
</div>
|
||||
{{ partial "header.html" . }}
|
||||
<main class="flex min-h-screen w-full flex-col items-stretch self-center">
|
||||
<div class="flex w-[1200px] flex-col items-stretch gap-20 self-center py-20 lg:w-full lg:px-4">
|
||||
<div class="flex xl:w-[1200px] flex-col items-stretch gap-20 self-center py-20 w-full px-4">
|
||||
<div class="bg-pattern-blue relative overflow-hidden rounded drop-shadow">
|
||||
<div class="flex h-full flex-col items-start justify-between gap-4 p-8">
|
||||
<div class="flex items-center gap-6">
|
||||
|
|
@ -34,14 +34,14 @@
|
|||
Get Docker
|
||||
</a>
|
||||
</div>
|
||||
<div class="absolute bottom-0 right-0 origin-bottom-right md:scale-50">
|
||||
<div class="absolute bottom-0 right-0 origin-bottom-right scale-50 lg:scale-100">
|
||||
<img class="dark:hidden" alt="Low-fi desktop app" src="/assets/images/app-wf-light-1.svg" />
|
||||
<img class="hidden dark:block" alt="Low-fi desktop app" src="/assets/images/app-wf-dark-1.svg" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="grid grid-cols-3 gap-4 sm:flex sm:flex-col md:grid-cols-1">
|
||||
<div class="grid grid-cols-1 gap-4 lg:grid-cols-3">
|
||||
<div>
|
||||
<a class="h-full" href="/get-started/overview/">
|
||||
<div
|
||||
|
|
@ -109,7 +109,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="z-10 grid grid-cols-2 gap-20 md:grid-cols-1">
|
||||
<div class="z-10 grid grid-cols-1 gap-20 lg:grid-cols-2">
|
||||
<div class="bg-pattern-verde relative rounded p-6 drop-shadow">
|
||||
<div class="flex h-full flex-col items-start justify-between gap-12">
|
||||
<div class="flex flex-col gap-4">
|
||||
|
|
@ -126,7 +126,7 @@
|
|||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="absolute bottom-0 right-0 origin-bottom-right sm:scale-75">
|
||||
<div class="absolute bottom-0 right-0 origin-bottom-right scale-75 md:scale-100">
|
||||
<img class="dark:hidden" alt="Low-fi desktop app" src="/assets/images/app-wf-light-2.svg" />
|
||||
<img class="hidden dark:block" alt="Low-fi desktop app" src="/assets/images/app-wf-dark-2.svg" />
|
||||
</div>
|
||||
|
|
@ -144,12 +144,12 @@
|
|||
native multi-platform builds. Get started today for free.
|
||||
</p>
|
||||
</div>
|
||||
<div class="grid grid-cols-3 gap-4 justify-self-end sm:grid-cols-2">
|
||||
<div class="grid grid-cols-2 gap-4 justify-self-end md:grid-cols-3">
|
||||
<a href="https://build.docker.com/"
|
||||
class="cursor-pointer rounded bg-blue-light px-4 py-2 text-white transition duration-300 hover:bg-blue-light-400 dark:bg-blue-dark-400 dark:hover:bg-blue-dark">Dashboard</a>
|
||||
<a href="/build/cloud/"
|
||||
class="cursor-pointer rounded bg-blue-light px-4 py-2 text-white transition duration-300 hover:bg-blue-light-400 dark:bg-blue-dark-400 dark:hover:bg-blue-dark">Docs</a>
|
||||
<div class="ml-auto sm:col-start-2">
|
||||
<div class="ml-auto col-start-2 md:col-start-3">
|
||||
{{ $dbcLogoWhite := resources.Get "images/build-cloud-white.svg" }}
|
||||
{{ $dbcLogoLight := resources.Get "images/build-cloud-light.svg" }}
|
||||
<img class="hidden h-full w-full dark:block" alt="Docker Build Cloud logo" src="{{ $dbcLogoWhite.Permalink }}" />
|
||||
|
|
@ -163,7 +163,7 @@
|
|||
|
||||
<div>
|
||||
<h2 class="mb-4 text-xl">Browse by section</h2>
|
||||
<div class="grid grid-cols-4 gap-4 sm:flex sm:flex-col lg:grid-cols-2 xl:grid-cols-3">
|
||||
<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
|
||||
{{ range .Params.grid }}
|
||||
<div>
|
||||
<div
|
||||
|
|
@ -203,9 +203,9 @@
|
|||
</div>
|
||||
|
||||
<div
|
||||
class="relative flex h-[334px] items-center justify-center overflow-hidden bg-gray-light-100 dark:bg-gray-dark-200 sm:h-full sm:py-8">
|
||||
class="relative flex md:h-[334px] items-center justify-center overflow-hidden bg-gray-light-100 dark:bg-gray-dark-200 h-full py-8">
|
||||
<div class="w-[1200px] px-4">
|
||||
<div class="flex max-w-[66%] flex-col gap-8 sm:max-w-full">
|
||||
<div class="flex md:max-w-[66%] flex-col gap-8 max-w-full">
|
||||
<h2 class="text-2xl">Community resources</h2>
|
||||
<p>
|
||||
Find fellow Docker enthusiasts, engage in insightful discussions,
|
||||
|
|
@ -213,7 +213,7 @@
|
|||
offer a rich online experience for developers to create valuable
|
||||
connections that challenge and inspire!
|
||||
</p>
|
||||
<div class="flex gap-4 sm:flex-col">
|
||||
<div class="flex gap-4 flex-col md:flex-row">
|
||||
<a href="https://forums.docker.com/"
|
||||
class="cursor-pointer rounded bg-white px-4 py-2 text-blue-light hover:bg-gray-light-100 dark:bg-gray-dark-400 dark:text-white dark:hover:bg-gray-dark-500">
|
||||
Visit Docker Forum
|
||||
|
|
@ -229,65 +229,8 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="absolute right-0 top-0 sm:hidden">
|
||||
<svg class="dark:hidden" width="555" height="334" viewBox="0 0 555 334" fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<g style="mix-blend-mode: multiply">
|
||||
<path d="M0 249.997L283.445 0H555V334H89.8843L0 249.997Z" fill="url(#paint0_linear_129_29139)" />
|
||||
</g>
|
||||
<g style="mix-blend-mode: multiply">
|
||||
<path d="M80 84.003L363.445 334H554.5V0H169.884L80 84.003Z" fill="url(#paint1_linear_129_29139)" />
|
||||
</g>
|
||||
<g style="mix-blend-mode: multiply">
|
||||
<path d="M279 334L555 104V182.33V254.174V334H279Z" fill="url(#paint2_linear_129_29139)" />
|
||||
</g>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear_129_29139" x1="18.5" y1="61.5" x2="502" y2="240.5"
|
||||
gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#C0E0FA" />
|
||||
<stop offset="1" stop-color="#EFEFF2" />
|
||||
</linearGradient>
|
||||
<linearGradient id="paint1_linear_129_29139" x1="98.5" y1="272.5" x2="582" y2="93.5"
|
||||
gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#F7ECFF" />
|
||||
<stop offset="1" stop-color="#EFEFF2" />
|
||||
</linearGradient>
|
||||
<linearGradient id="paint2_linear_129_29139" x1="282.381" y1="-33.7561" x2="1315.56" y2="352.19"
|
||||
gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#C6EAE1" />
|
||||
<stop offset="1" stop-color="#EFEFF2" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
<svg class="hidden dark:block" width="555" height="334" viewBox="0 0 555 334" fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<g style="mix-blend-mode: multiply">
|
||||
<path d="M0 249.997L283.445 0H555V334H89.8843L0 249.997Z" fill="url(#paint0_linear_129_29443)" />
|
||||
</g>
|
||||
<g style="mix-blend-mode: multiply">
|
||||
<path d="M80 84.003L363.445 334H554.5V0H169.884L80 84.003Z" fill="url(#paint1_linear_129_29443)" />
|
||||
</g>
|
||||
<g style="mix-blend-mode: multiply">
|
||||
<path d="M279 334L555 104V182.33V254.174V334H279Z" fill="url(#paint2_linear_129_29443)" />
|
||||
</g>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear_129_29443" x1="18.5" y1="61.5" x2="502" y2="240.5"
|
||||
gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#C0E0FA" />
|
||||
<stop offset="1" stop-color="#EFEFF2" />
|
||||
</linearGradient>
|
||||
<linearGradient id="paint1_linear_129_29443" x1="98.5" y1="272.5" x2="582" y2="93.5"
|
||||
gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#F7ECFF" />
|
||||
<stop offset="1" stop-color="#EFEFF2" />
|
||||
</linearGradient>
|
||||
<linearGradient id="paint2_linear_129_29443" x1="282.381" y1="-33.7561" x2="1315.56" y2="352.19"
|
||||
gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#C6EAE1" />
|
||||
<stop offset="1" stop-color="#EFEFF2" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
<div class="absolute right-0 top-0 hidden md:block">
|
||||
{{- (resources.Get "images/home-abstract-faint.svg").Content | safe.HTML -}}
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
<aside class="space-y-4 lg:hidden w-[300px]">
|
||||
{{ partial "toc-cli.html" . }}
|
||||
<aside class="py-4 space-y-4">
|
||||
<div id="TableOfContents">
|
||||
{{ partial "toc-cli.html" . }}
|
||||
</div>
|
||||
</aside>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<div class="flex justify-center py-20 px-4 bg-gray-light-200/50 dark:bg-gray-dark-300/50">
|
||||
<div class="flex w-[1200px] flex-col gap-10">
|
||||
<div class="flex sm:flex-col gap-4 items-center justify-evenly">
|
||||
<div class="flex w-full max-w-[840px] flex-col gap-10">
|
||||
<div class="flex flex-col md:flex-row gap-4 items-center justify-evenly">
|
||||
<a class="underline-offset-2 hover:underline" href="https://www.docker.com/">Product offerings</a>
|
||||
<a class="underline-offset-2 hover:underline" href="https://www.docker.com/pricing/">Pricing</a>
|
||||
<a class="underline-offset-2 hover:underline" href="https://www.docker.com/company/">About us</a>
|
||||
|
|
@ -8,7 +8,7 @@
|
|||
<a class="underline-offset-2 hover:underline" href="https://github.com/docker/docs/blob/main/CONTRIBUTING.md">Contribute</a>
|
||||
</div>
|
||||
<hr class="text-divider-light dark:text-divider-dark" />
|
||||
<div class="grid grid-cols-3 place-items-center gap-8 md:grid-cols-1">
|
||||
<div class="grid lg:grid-cols-3 place-items-center gap-8 grid-cols-1">
|
||||
<p class="text-sm">
|
||||
Copyright © 2013-{{ time.Now.Year}} Docker Inc. All rights reserved.
|
||||
</p>
|
||||
|
|
|
|||
|
|
@ -1,16 +1,9 @@
|
|||
<header class="sticky top-0 z-20 h-16 px-4 text-white bg-gradient-to-r from-accent-light to-blue-light-500 dark:from-accent-dark dark:to-blue-dark-100">
|
||||
<div class="mx-auto flex h-full max-w-[1400px] items-center justify-between">
|
||||
<div class="flex h-full items-center gap-8 md:gap-2">
|
||||
<div class="flex h-full items-center md:gap-8 gap-2">
|
||||
{{ if not .IsHome }}
|
||||
<button x-data @click="() => {
|
||||
$store.showSidebar = ! $store.showSidebar;
|
||||
const sidebar = document.querySelector('#sidebar');
|
||||
if ($store.showSidebar) {
|
||||
sidebar.classList.replace('md:hidden', 'md:block');
|
||||
} else {
|
||||
sidebar.classList.replace('md:block', 'md:hidden');
|
||||
}
|
||||
}" class="icon-svg hidden px-4 md:block" aria-label="Menu">
|
||||
<button x-data @click="$dispatch('togglesidebar')"
|
||||
class="icon-svg block px-4 lg:hidden h-full" aria-label="Menu">
|
||||
{{ partialCached "icon" "menu" "menu" }}
|
||||
</button>
|
||||
{{ end }}
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
</div>
|
||||
{{- end }}
|
||||
{{- with $toc }}
|
||||
<div class="text-lg pb-2 lg:pb-0">Table of contents</div>
|
||||
<div class="text-lg pb-0 xl:pb-2">{{ T "tableOfContents" }}</div>
|
||||
<nav class="toc">
|
||||
{{ $root := (index page.Fragments.Headings 0).Headings }}
|
||||
{{- template "walkHeadingFragments" $root }}
|
||||
|
|
@ -30,7 +30,7 @@
|
|||
{{- range . }}
|
||||
{{- if and (ge .Level $min) (le .Level $max) }}
|
||||
<li>
|
||||
<a class="lg:link" href="#{{ .ID }}">{{ .Title }}</a>
|
||||
<a class="link xl:no-underline" href="#{{ .ID }}">{{ .Title }}</a>
|
||||
</li>
|
||||
{{- end }}
|
||||
{{- with .Headings }}
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
{{ $firstSection := (index ($scratch.GetSortedMapValues "sections") 0).title }}
|
||||
|
||||
{{/* Render the top-nav in sidebar for small screens */}}
|
||||
<nav class="text-sm py-4 hidden gap-4 pl-4 md:flex flex-col justify-evenly">
|
||||
<nav class="text-sm pb-4 gap-4 flex lg:hidden flex-col justify-evenly">
|
||||
<div class="text-gray-light dark:text-gray-dark">Main sections</div>
|
||||
{{ range site.Menus.main }}
|
||||
<div class="pl-2 underline-offset-8 decoration-2 hover:underline decoration-blue-light dark:decoration-blue-dark hover:opacity-75
|
||||
|
|
@ -22,9 +22,8 @@
|
|||
{{ range $i, $e := ($scratch.GetSortedMapValues "sections") }}
|
||||
{{ $allSections = $allSections | append (index $e "title") }}
|
||||
{{ end }}
|
||||
<hr>
|
||||
<nav id="sectiontree" class="text-sm w-[300px] md:w-full flex flex-col">
|
||||
<div class="hidden md:block p-4 text-gray-light dark:text-gray-dark">This section</div>
|
||||
<nav id="sectiontree" class="text-sm flex flex-col">
|
||||
<div class="block py-4 lg:hidden text-gray-light dark:text-gray-dark">This section</div>
|
||||
{{/* The current page is in the table of contents */}}
|
||||
<ul>
|
||||
{{/* Walk the toc.yaml nodes under the current main section */}}
|
||||
|
|
@ -55,7 +54,7 @@
|
|||
{{ partialCached "icon" "expand_less" "expand_less" }}
|
||||
</span>
|
||||
</button>
|
||||
<ul class="{{if not $expanded}}hidden {{end}}ml-3 md:ml-[21px]">
|
||||
<ul class="{{if not $expanded}}hidden {{end}}ml-3">
|
||||
{{ range .entry.section }}
|
||||
{{ template "tocRender" (dict "entry" . "ctx" $ctx "sections" $sections ) }}
|
||||
{{ end }}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<div class="text-lg pb-2">{{ T "tableOfContents" }}</div>
|
||||
<nav id="TableOfContents">
|
||||
<nav class="toc">
|
||||
<ul>
|
||||
{{ range (.Scratch.Get "headings") }}
|
||||
{{/* add left padding depending on level (pl-2, pl-3, pl-4) */}}
|
||||
|
|
|
|||
|
|
@ -2,10 +2,10 @@
|
|||
{{ $firstSection := (index ($scratch.GetSortedMapValues "sections") 0).title }}
|
||||
<div>
|
||||
<nav>
|
||||
<ul class="box-content flex mt-1 gap-4 md:hidden">
|
||||
<ul class="mt-1 box-content hidden gap-4 lg:flex">
|
||||
{{ range site.Menus.main }}
|
||||
<li {{- if or (eq $firstSection .Name) }} class="border-b-4" {{- end }}>
|
||||
<a class="block py-1 px-2" href="{{ .URL }}">{{ .Name }}</a>
|
||||
<li {{- if or (eq $firstSection .Name) }} class="border-b-4" {{- end }}>
|
||||
<a class="block px-2 py-1" href="{{ .URL }}">{{ .Name }}</a>
|
||||
</li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
{{ $cols := .Get "cols" | default 3 }}
|
||||
<div class="not-prose grid grid-cols-{{ $cols }} xl:grid-cols-{{ sub $cols 1 }} gap-4 sm:flex sm:flex-col">
|
||||
<div class="not-prose grid grid-cols-1 md:grid-cols-{{ math.Max 2 (sub $cols 1) }} lg:grid-cols-{{ $cols }} gap-4">
|
||||
{{ $items := index .Page.Params (.Get "items" | default "grid") }}
|
||||
{{ range $items }}
|
||||
{{ $opts := dict "title" .title "link" .link "description" .description "icon" .icon "image" .image }}
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
<body class="flex flex-col min-h-screen bg-background-light text-base dark:bg-background-dark dark:text-white">
|
||||
{{ partial "header.html" . }}
|
||||
<main class="flex justify-center">
|
||||
<div class="w-[1200px] overflow-clip p-6 pt-0 md:w-lvw">
|
||||
<div class="lg:w-[1200px] overflow-clip p-6 pt-0 w-lvw">
|
||||
{{ block "main" . }}
|
||||
{{ end }}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<article class="DocSearch-content prose max-w-none dark:prose-invert">
|
||||
<h1 class="scroll-mt-36">{{ .Title }}</h1>
|
||||
{{ .Content }}
|
||||
<div class="grid grid-cols-3 gap-4 sm:flex sm:flex-col lg:grid-cols-2">
|
||||
<div class="grid grid-cols-1 gap-4 lg:grid-cols-2 xl:grid-cols-3">
|
||||
{{ range site.Taxonomies.tags }}
|
||||
{{ partial "components/card.html"
|
||||
(dict
|
||||
|
|
|
|||
|
|
@ -44,6 +44,11 @@ module.exports = {
|
|||
},
|
||||
},
|
||||
}),
|
||||
|
||||
gridTemplateColumns: {
|
||||
'main': 'minmax(300px, 1fr) minmax(840px, 1fr) 1fr',
|
||||
'main-lg': '300px 1fr',
|
||||
},
|
||||
},
|
||||
|
||||
// theme values
|
||||
|
|
@ -58,13 +63,6 @@ module.exports = {
|
|||
"4xl": ["2.5rem", { letterSpacing: "-0.015em", fontWeight: 500 }],
|
||||
},
|
||||
|
||||
screens: {
|
||||
sm: { max: "640px" },
|
||||
md: { max: "1024px" },
|
||||
lg: { max: "1280px" },
|
||||
xl: { max: "1440px" },
|
||||
},
|
||||
|
||||
colors: {
|
||||
white: "#fff",
|
||||
black: "#000",
|
||||
|
|
|
|||
Loading…
Reference in New Issue