hugo: css overhaul

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/js/src/toc.js

@@ -1,4 +1,4 @@
-const toc = document.querySelector("#TableOfContents");
+const toc = document.querySelector("#TableOfContents .toc");
 const headings = document.querySelectorAll("main article h2, main article h3");
 
 if (toc) {

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

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",
@@ -273,38 +271,40 @@
       "left-0",
       "lg:block",
       "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:no-underline",
+      "lg:pb-2",
+      "lg:scale-100",
       "lg:text-base",
-      "lg:w-full",
+      "lg:w-[1200px]",
       "link",
       "lntable",
       "lntd",
       "m-auto",
       "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:gap-2",
-      "md:grid-cols-1",
-      "md:h-screen",
+      "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:ml-[21px]",
-      "md:scale-50",
-      "md:w-full",
-      "md:w-lvw",
-      "md:w-screen",
-      "md:z-10",
+      "md:max-w-[66%]",
+      "md:scale-100",
       "min-h-screen",
       "min-w-0",
       "ml-3",
@@ -332,15 +332,18 @@
       "p-6",
       "p-8",
       "p-[2px]",
+      "pb-0",
       "pb-0.5",
       "pb-2",
+      "pb-32",
       "pb-4",
       "pl-1",
       "pl-2",
       "pl-3",
       "pl-4",
       "pl-5",
       "place-items-center",
+      "pr-2",
       "prose",
       "pt-0",
       "px-1",
@@ -351,6 +354,7 @@
       "py-2",
       "py-20",
       "py-4",
+      "py-8",
       "regular-install",
       "relative",
       "restricted",
@@ -364,23 +368,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 +415,14 @@
       "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",
+      "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">
-    <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-xl lg:grid-cols-main-lg md:grid-cols-main-md">
+    <!-- First column: visible on lg and xl -->
+    <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) {
+             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 lg: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 lg:hidden">
       {{ partial "pagemeta.html" . }}
       <hr>
     </div>