mirror of https://github.com/docker/docs.git
hugo: improve site layout on medium screens
- Keep the top-nav menu on medium screens - Keep the sidebar navigation on medium screens - Keep the right-hand toc on large screens - Adjust breakpoints Signed-off-by: David Karlsson <35727626+dvdksn@users.noreply.github.com>
This commit is contained in:
David Karlsson
parent
46a3512a54
commit
1fb862bcf9
|
|
@ -270,13 +270,14 @@
|
|||
"leading-snug",
|
||||
"left-0",
|
||||
"lg:block",
|
||||
"lg:flex",
|
||||
"lg:grid-cols-2",
|
||||
"lg:grid-cols-3",
|
||||
"lg:grid-cols-main-lg",
|
||||
"lg:hidden",
|
||||
"lg:max-w-[300px]",
|
||||
"lg:ml-auto",
|
||||
"lg:no-underline",
|
||||
"lg:pb-2",
|
||||
"lg:scale-100",
|
||||
"lg:text-base",
|
||||
"lg:w-[1200px]",
|
||||
|
|
@ -294,11 +295,14 @@
|
|||
"mb-8",
|
||||
"md:block",
|
||||
"md:col-start-3",
|
||||
"md:flex",
|
||||
"md:flex-row",
|
||||
"md:gap-8",
|
||||
"md:grid-cols-2",
|
||||
"md:grid-cols-3",
|
||||
"md:grid-cols-main-md",
|
||||
"md:h-[334px]",
|
||||
"md:hidden",
|
||||
"md:max-w-[66%]",
|
||||
"md:scale-100",
|
||||
"min-h-screen",
|
||||
|
|
@ -417,10 +421,7 @@
|
|||
"warning",
|
||||
"xl:grid-cols-3",
|
||||
"xl:grid-cols-4",
|
||||
"xl:grid-cols-main",
|
||||
"xl:hidden",
|
||||
"xl:no-underline",
|
||||
"xl:pb-2",
|
||||
"xl:grid-cols-main-xl",
|
||||
"xl:w-[1200px]",
|
||||
"youtube-video",
|
||||
"z-10",
|
||||
|
|
|
|||
|
|
@ -7,9 +7,9 @@
|
|||
|
||||
<body class="bg-background-light text-base dark:bg-background-dark dark:text-white">
|
||||
{{ partial "header.html" . }}
|
||||
<main class="grid grid-cols-1 xl:grid-cols-main lg:grid-cols-main-lg">
|
||||
<main class="grid grid-cols-1 xl:grid-cols-main-xl lg:grid-cols-main-lg md:grid-cols-main-md">
|
||||
<!-- First column: visible on lg and xl -->
|
||||
<div class="hidden lg:block bg-background-light dark:bg-gray-dark-100"
|
||||
<div class="hidden md:block bg-background-light dark:bg-gray-dark-100 overflow-y-scroll"
|
||||
{{- $classes := "'fixed', 'z-20', 'left-0', 'top-16', 'w-full', 'flex', 'h-lvh'" }}
|
||||
x-data @togglesidebar.window="
|
||||
if ($store.showSidebar == false) {
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
{{ with .Title }}
|
||||
<h1 class="scroll-mt-36">{{ . }}</h1>
|
||||
{{ end }}
|
||||
<div class="block xl:hidden">
|
||||
<div class="block lg:hidden">
|
||||
{{ partial "pagemeta.html" . }}
|
||||
</div>
|
||||
{{ .Content }}
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
{{ with .Title }}
|
||||
<h1 class="scroll-mt-36">{{ . }}</h1>
|
||||
{{ end }}
|
||||
<div class="block xl:hidden">
|
||||
<div class="block lg:hidden">
|
||||
{{ partial "pagemeta.html" . }}
|
||||
<hr>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<div class="flex h-full items-center md:gap-8 gap-2">
|
||||
{{ if not .IsHome }}
|
||||
<button x-data @click="$dispatch('togglesidebar')"
|
||||
class="icon-svg block px-4 lg:hidden h-full" aria-label="Menu">
|
||||
class="icon-svg block px-4 md: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-0 xl:pb-2">{{ T "tableOfContents" }}</div>
|
||||
<div class="text-lg pb-0 lg: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="link xl:no-underline" href="#{{ .ID }}">{{ .Title }}</a>
|
||||
<a class="link lg: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 pb-4 gap-4 flex lg:hidden flex-col justify-evenly">
|
||||
<nav class="text-sm pb-4 gap-4 flex md: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
|
||||
|
|
@ -23,7 +23,7 @@
|
|||
{{ $allSections = $allSections | append (index $e "title") }}
|
||||
{{ end }}
|
||||
<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>
|
||||
<div class="block py-4 md: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 */}}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
{{ $firstSection := (index ($scratch.GetSortedMapValues "sections") 0).title }}
|
||||
<div>
|
||||
<nav>
|
||||
<ul class="mt-1 box-content hidden gap-4 lg:flex">
|
||||
<ul class="mt-1 box-content hidden gap-4 md:flex">
|
||||
{{ range site.Menus.main }}
|
||||
<li {{- if or (eq $firstSection .Name) }} class="border-b-4" {{- end }}>
|
||||
<a class="block px-2 py-1" href="{{ .URL }}">{{ .Name }}</a>
|
||||
|
|
|
|||
|
|
@ -46,8 +46,9 @@ module.exports = {
|
|||
}),
|
||||
|
||||
gridTemplateColumns: {
|
||||
'main': 'minmax(300px, 1fr) minmax(840px, 1fr) 1fr',
|
||||
'main-lg': '300px 1fr',
|
||||
'main-xl': 'minmax(300px, 1fr) minmax(100ch, 1fr) 1fr',
|
||||
'main-lg': '300px minmax(75ch, 2fr) 1fr',
|
||||
'main-md': '250px 1fr',
|
||||
},
|
||||
},
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue