theme: extract more styles (#22734)

Extract shared styling into appropriate utilities.
Improve toc width.

.vscode/docker.code-snippets

@@ -39,4 +39,9 @@
     ],
     "description": "Insert a Hugo tabs block with two tabs and snippet stops for names and content",
   },
+  "Insert a Button": {
+    "prefix": ["button"],
+    "body": ["{{< button url=\"$1\" text=\"$2\" >}}"],
+    "description": "Insert a Hugo button",
+  },
 }

assets/css/components.css

@@ -94,6 +94,9 @@
     @apply h-12 w-12 overflow-hidden;
   }
 }
+.button {
+  @apply mt-1 inline-block rounded-sm bg-blue-500 p-1 px-3 text-blue-50 text-white hover:bg-blue-600 dark:bg-blue-500 hover:dark:bg-blue-400;
+}
 
 .summary-bar {
   @apply my-1 mt-4 flex flex-col rounded-sm border-1 border-gray-100 bg-gray-50 p-4 dark:border-gray-800 dark:bg-gray-900;

assets/css/utilities.css

@@ -251,3 +251,6 @@
     }
   }
 }
+@utility chip {
+  @apply border-divider-light dark:border-divider-dark inline-flex items-center gap-1 rounded-full border bg-gray-100 px-2 text-sm text-gray-800 select-none dark:bg-gray-700 dark:text-gray-200;
+}

content/get-started/introduction/get-docker-desktop.md

@@ -26,6 +26,7 @@ This guide will walk you through the installation process, enabling you to exper
 > Commercial use of Docker Desktop in larger enterprises (more than 250
 > employees OR more than $10 million USD in annual revenue) requires a [paid subscription](https://www.docker.com/pricing/?_gl=1*1nyypal*_ga*MTYxMTUxMzkzOS4xNjgzNTM0MTcw*_ga_XJWPQMJYHQ*MTcxNjk4MzU4Mi4xMjE2LjEuMTcxNjk4MzkzNS4xNy4wLjA.).
 
+<div class="not-prose">
 {{< card
   title="Docker Desktop for Mac"
   description="[Download (Apple Silicon)](https://desktop.docker.com/mac/main/arm64/Docker.dmg?utm_source=docker&utm_medium=webreferral&utm_campaign=docs-driven-download-mac-arm64) | [Download (Intel)](https://desktop.docker.com/mac/main/amd64/Docker.dmg?utm_source=docker&utm_medium=webreferral&utm_campaign=docs-driven-download-mac-amd64) | [Install instructions](/desktop/setup/install/mac-install)"
@@ -40,7 +41,7 @@ This guide will walk you through the installation process, enabling you to exper
   title="Docker Desktop for Linux"
   description="[Install instructions](/desktop/setup/install/linux/)"
   icon="/icons/Linux.svg" >}}
-
+</div>
 
 Once it's installed, complete the setup process and you're all set to run a Docker container.
 

layouts/_default/baseof.html

@@ -29,7 +29,7 @@
               }
           }
       })"
-        class="bg-background-toc dark:bg-background-toc fixed top-0 z-40 hidden h-screen w-full flex-none overflow-x-hidden overflow-y-auto md:sticky md:top-16 md:z-auto md:block md:h-[calc(100vh-64px)] md:w-[300px]"
+        class="bg-background-toc dark:bg-background-toc fixed top-0 z-40 hidden h-screen w-full flex-none overflow-x-hidden overflow-y-auto md:sticky md:top-16 md:z-auto md:block md:h-[calc(100vh-64px)] md:w-[320px]"
         :class="{ 'hidden': ! $store.showSidebar }"
       >
         <!-- Gray backdrop on small screens -->
@@ -40,7 +40,7 @@
           x-transition.opacity
         ></div>
         <div
-          class="bg-background-toc dark:bg-background-toc z-50 w-full p-4 md:block md:w-[300px]"
+          class="bg-background-toc dark:bg-background-toc z-50 w-full p-3 md:block md:w-[300px]"
         >
           <!-- Collapse button for small screens -->
           <button class="my-4 md:hidden" @click="$store.showSidebar = false">

layouts/guides/landing.html

@@ -239,7 +239,7 @@
 
 {{- define "guide-metadata" }}
   <div
-    class="flex items-center justify-between gap-8 text-sm text-gray-200 dark:text-gray-300"
+    class="flex items-center justify-between gap-8 text-sm text-gray-400 dark:text-gray-300"
   >
     <div class="flex flex-wrap gap-2 md:flex-nowrap">
       {{- $langs := .GetTerms "languages" }}
@@ -261,9 +261,7 @@
 {{- end }}
 
 {{- define "termchip" }}
-  <span
-    class="border-divider-light dark:border-divider-dark inline-flex min-w-0 items-center rounded-full border bg-gray-100 px-2 text-sm whitespace-nowrap text-gray-200 select-none dark:bg-gray-800 dark:text-gray-300"
-  >
+  <span class="chip">
     <span class="icon-svg icon-sm pb-0.5">
       {{ partialCached "icon" "tag" "tag" }}
     </span>

layouts/partials/components/guide-summary.html

@@ -1,6 +1,6 @@
 <div class="not-prose">
   <div
-    class="m-4 flex flex-col gap-4 bg-gray-200 p-6 sm:flex-row dark:bg-gray-300"
+    class="mt-1.5 mb-1.5 flex flex-col gap-4 rounded-sm bg-gray-100 p-6 sm:flex-row dark:bg-gray-800"
   >
     <div class="flex flex-grow flex-col sm:items-center">
       <span><strong>Skill level</strong></span>

layouts/partials/languages.html

@@ -10,9 +10,7 @@
   {{- if not .Page.Params.icon }}
     {{- errorf "[languages] language is missing an icon: '%s' in %s" (urlize (strings.ToLower .Title)) page.File.Filename }}
   {{- end }}
-  <span
-    class="border-divider-light dark:border-divider-dark inline-flex items-center gap-1 rounded-full border bg-gray-100 px-2 text-sm text-gray-800 select-none dark:bg-gray-700 dark:text-gray-300"
-  >
+  <span class="chip">
     <img
       class="py-1"
       height="18"

layouts/partials/tags.html

@@ -7,10 +7,7 @@
   {{- if eq .File nil }}
     {{- errorf "[tags] Undefined tag: '%s' in %s" (urlize (strings.ToLower .Title)) page.File.Filename }}
   {{- end }}
-  <a
-    class="border-divider-light dark:border-divider-dark bg-gray-00 inline-flex items-center rounded-full border px-2 text-sm text-gray-800 select-none hover:bg-gray-100 dark:bg-gray-800 dark:text-gray-200 hover:dark:bg-gray-700"
-    href="{{ .Permalink }}"
-  >
+  <a class="chip" href="{{ .Permalink }}">
     <span class="icon-svg icon-sm pb-0.5">
       {{ partialCached "icon" "tag" "tag" }}
     </span>

layouts/shortcodes/button.html

@@ -7,10 +7,6 @@
 {{- else -}}
   {{ $url = ref .Page $url }}
 {{- end -}}
-<div class="not-prose my-4">
-  <a
-    href="{{ $url }}"
-    class="cursor-pointer rounded-sm bg-blue-500 px-4 py-2 text-white hover:bg-blue-400 dark:bg-blue-800 dark:hover:bg-blue-700"
-    >{{ $text }}</a
-  >
+<div class="button not-prose">
+  <a href="{{ $url }}">{{ $text }}</a>
 </div>