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>

assets/css/code.css

@@ -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 {

assets/css/typography.css

@@ -73,5 +73,10 @@
       @apply text-lg;
       line-height: 1.75;
     }
+    table {
+      display: block;
+      overflow-x: auto;
+      max-width: 100%;
+    }
   }
 }

assets/images/docker-docs-white.svg

@@ -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 {

assets/images/home-abstract-faint.svg

@@ -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>

content/language/_index.md

@@ -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>

hugo_stats.json

@@ -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:max-w-[300px]",
-      "lg:pb-0",
+      "lg:ml-auto",
-      "lg:px-4",
+      "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:col-start-3",
-      "md:flex",
+      "md:flex-row",
-      "md:gap-2",
+      "md:gap-8",
-      "md:grid-cols-1",
+      "md:grid-cols-2",
-      "md:h-screen",
+      "md:grid-cols-3",
-      "md:hidden",
+      "md:h-[334px]",
-      "md:ml-[21px]",
+      "md:max-w-[66%]",
-      "md:scale-50",
+      "md:scale-100",
-      "md:w-full",
-      "md:w-lvw",
-      "md:w-screen",
-      "md:z-10",
       "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",

i18n/en.yaml

@@ -5,7 +5,7 @@ editPage:
 requestChanges:
   other: Request changes
 tableOfContents:
-  other: Contents
+  other: Table of contents
 relatedContent:
   other: Related content
 

layouts/_default/baseof.html

@@ -7,17 +7,34 @@
 
 <body class="bg-background-light text-base dark:bg-background-dark dark:text-white">
   {{ partial "header.html" . }}
-  <main class="flex">
+  <main class="grid grid-cols-1 xl:grid-cols-main lg:grid-cols-main-lg">
-    <div id="sidebar"
+    <!-- First column: visible on lg and xl -->
-      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">
+    <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>

layouts/_default/list.html

@@ -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 }}

layouts/_default/single.html

@@ -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>

layouts/index.html

@@ -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">
+      <div class="absolute right-0 top-0 hidden md:block">
-        <svg class="dark:hidden" width="555" height="334" viewBox="0 0 555 334" fill="none"
+        {{- (resources.Get "images/home-abstract-faint.svg").Content | safe.HTML -}}
-          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>
     </div>
   </main>

layouts/partials/cli-aside.html

@@ -1,3 +1,5 @@
-<aside class="space-y-4 lg:hidden w-[300px]">
+<aside class="py-4 space-y-4">
-  {{ partial "toc-cli.html" . }}
+  <div id="TableOfContents">
+    {{ partial "toc-cli.html" . }}
+  </div>
 </aside>

layouts/partials/footer.html

@@ -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 w-full max-w-[840px] flex-col gap-10">
-    <div class="flex sm:flex-col gap-4 items-center justify-evenly">
+    <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>

layouts/partials/header.html

@@ -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="() => {
+      <button x-data @click="$dispatch('togglesidebar')"
-      $store.showSidebar = ! $store.showSidebar;
+        class="icon-svg block px-4 lg:hidden h-full" aria-label="Menu">
-      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">
         {{ partialCached "icon" "menu" "menu" }}
       </button>
       {{ end }}

layouts/partials/pagemeta.html

@@ -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 }}

layouts/partials/sidebar.html

@@ -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 flex flex-col">
-<nav id="sectiontree" class="text-sm w-[300px] md:w-full flex flex-col">
+  <div class="block py-4 lg:hidden text-gray-light dark:text-gray-dark">This section</div>
-  <div class="hidden md:block p-4 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 }}

layouts/partials/toc-cli.html

@@ -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) */}}

layouts/partials/top-nav.html

@@ -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 }}>
+      <li {{- if or (eq $firstSection .Name) }} class="border-b-4" {{- end }}>
-        <a class="block py-1 px-2" href="{{ .URL }}">{{ .Name }}</a>
+        <a class="block px-2 py-1" href="{{ .URL }}">{{ .Name }}</a>
       </li>
       {{ end }}
     </ul>

layouts/shortcodes/grid.html

@@ -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 }}

layouts/tag/baseof.html

@@ -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>

layouts/tag/taxonomy.html

@@ -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

tailwind.config.js

@@ -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",