fix: various theme improvements (#22725)

Harmonize various areas of the theme.

Author: ArthurFlag

assets/css/global.css

@@ -104,3 +104,6 @@ input[type="search"]::-ms-clear {
     list-style-type: lower-roman;
   }
 }
+.navbar-group:first-of-type {
+  margin-top: 0.2rem !important;
+}

assets/css/utilities.css

@@ -118,9 +118,20 @@
   }
 }
 
+@utility navbar-entry-margin {
+  @apply px-2 py-1;
+}
+
+@utility navbar-group {
+  @apply mt-5;
+}
+
+@utility navbar-entry-background-current {
+  @apply bg-gray-100 dark:bg-gray-900;
+}
 @utility navbar-group-font-title {
   font-size: var(--color-navbar-group-font-title-size);
-  @apply font-semibold uppercase;
+  @apply pb-1.5 font-semibold uppercase;
   color: var(--color-navbar-text);
   .dark & {
     color: var(--color-navbar-text-dark);

layouts/_default/_markup/render-codeblock.html

@@ -40,7 +40,7 @@
           >
             <button
               @click="collapse = false"
-              class="bg-blue flex items-center rounded-full px-2 text-sm text-white dark:bg-blue-400"
+              class="bg-blue flex items-center rounded-full px-2 text-sm text-white dark:bg-blue-500"
             >
               <span>Show more</span>
               <span class="icon-svg"
@@ -53,7 +53,7 @@
             <button
               @click="collapse = true"
               x-show="!collapse"
-              class="rounded-sm-b-lg bg-blue mx-auto mt-4 flex items-center px-2 text-sm text-white dark:bg-blue-800"
+              class="bg-blue mx-auto mt-4 flex items-center rounded-full px-2 text-sm text-white dark:bg-blue-500"
             >
               <span>Hide</span>
               <span class="icon-svg"

layouts/guides/single.html

@@ -6,9 +6,6 @@
 {{ define "main" }}
   {{ partial "content-default.html" . }}
   <div class="prose dark:prose-invert max-w-4xl">
-    <div class="md-dropdown ml-auto hidden lg:block">
-      {{ partial "md-dropdown.html" . }}
-    </div>
     {{ if (.Store.Get "multipage") }}
       {{- with .PrevInSection }}
         <div class="not-prose col-start-2 my-4">

layouts/index.html

@@ -293,19 +293,19 @@ <h2 class="text-2xl">Community resources</h2>
             <div class="flex flex-col gap-4 md:flex-row">
               <a
                 href="https://forums.docker.com/"
-                class="cursor-pointer rounded-sm bg-white px-4 py-2 hover:bg-gray-50 dark:bg-gray-400 dark:text-white dark:hover:bg-gray-500"
+                class="cursor-pointer rounded-sm bg-white px-4 py-2 hover:bg-gray-50 dark:bg-gray-500 dark:text-white dark:hover:bg-gray-600"
               >
                 Visit Docker Forum
               </a>
               <a
                 href="https://dockr.ly/comm-slack"
-                class="cursor-pointer rounded-sm bg-white px-4 py-2 hover:bg-gray-50 dark:bg-gray-400 dark:text-white dark:hover:bg-gray-500"
+                class="cursor-pointer rounded-sm bg-white px-4 py-2 hover:bg-gray-50 dark:bg-gray-500 dark:text-white dark:hover:bg-gray-600"
               >
                 Join Docker Slack
               </a>
               <a
                 href="https://www.docker.com/community/captains/"
-                class="cursor-pointer rounded-sm bg-white px-4 py-2 hover:bg-gray-50 dark:bg-gray-400 dark:text-white dark:hover:bg-gray-500"
+                class="cursor-pointer rounded-sm bg-white px-4 py-2 hover:bg-gray-50 dark:bg-gray-500 dark:text-white dark:hover:bg-gray-600"
               >
                 Find your Docker Captain
               </a>

layouts/partials/languages.html

@@ -11,7 +11,7 @@
     {{- 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-200 select-none dark:bg-gray-800 dark:text-gray-400"
+    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"
   >
     <img
       class="py-1"

layouts/partials/search-bar.html

@@ -62,7 +62,7 @@
     class="bg-background-light dark:bg-background-dark absolute top-full right-0 z-50 w-screen max-w-xl rounded-sm px-6 py-4 shadow-lg"
   >
     <div id="search-bar-results">
-      {{- $emptyState := `<div class="p-2 text-gray-200 dark:text-gray-500">Start typing to search… or try <button @click="open=false" class="open-kapa-widget link">Ask AI</button></div>` }}
+      {{- $emptyState := `<div class="p-2 text-gray-500 dark:text-gray-400">Start typing to search… or try <button @click="open=false" class="open-kapa-widget link">Ask AI</button></div>` }}
       {{- $emptyState | safe.HTML }}
       <!-- results -->
     </div>

layouts/partials/sidebar/guides.html

@@ -28,7 +28,7 @@
       {{- end }}
     </div>
     {{- with ($root.Params.time) }}
-      <div class="flex gap-2 text-gray-200 dark:text-gray-500">
+      <div class="flex gap-2 text-gray-400 dark:text-gray-400">
         <span class="icon-svg"
           >{{ partialCached "icon" "schedule" "schedule" }}</span
         >

layouts/partials/sidebar/sections.html

@@ -32,32 +32,36 @@
   {{- end }}
   {{- range .Params.sidebar.groups }}
     <!--  Main titles -->
-    <li class="navbar-group-font-title mt-2 px-2 py-2 pt-5 pb-2">
-      {{ . }}
-    </li>
-    {{- range where $pages "Params.sidebar.group" . }}
-      {{- if .IsSection }}
-        {{- template "renderList" . }}
-      {{- else }}
-        {{- template "renderSingle" . }}
+    <div class="navbar-group">
+      <li class="navbar-group-font-title">
+        {{ . }}
+      </li>
+      {{- range where $pages "Params.sidebar.group" . }}
+        {{- if .IsSection }}
+          {{- template "renderList" . }}
+        {{- else }}
+          {{- template "renderSingle" . }}
+        {{- end }}
       {{- end }}
-    {{- end }}
+    </div>
   {{- end }}
+
 {{ end }}
 
 {{/* Recursive template for sidebar items */}}
 {{ define "renderList" }}
   {{ $isCurrent := eq page . }}
   {{ $expanded := or $isCurrent (page.IsDescendant .) }}
-  <li x-data="{ expanded: {{ $expanded }} }">
+  <li class="" x-data="{ expanded: {{ $expanded }} }">
     <div
-      class="justify-between{{ if $isCurrent }}
-        bg-gray-100 dark:bg-gray-900
-      {{ end }} flex w-full items-center rounded-sm px-4"
+      class="{{ if $isCurrent }}
+        navbar-entry-background-current
+      {{ end }} flex w-full items-center justify-between rounded-sm"
     >
-      <div class="w-full truncate py-1">
+      <div class="navbar-entry-margin w-full truncate">
         {{- if .Permalink }}
           {{/* If the link is not empty, use it */}}
+          <!-- Sections that have children and linking to a page -->
           <a
             {{ if $isCurrent }}
               aria-current="page" id="sidebar-current-page"
@@ -69,6 +73,7 @@
           </a>
         {{- else }}
           {{/* Otherwise, just expand the section */}}
+          <!-- Sections that have children and do not link to a page -->
           <button
             @click="expanded = !expanded"
             class="hover:text-blue w-full text-left select-none hover:dark:text-blue-400"
@@ -77,9 +82,10 @@
           </button>
         {{- end }}
       </div>
+      <!-- Expand group button -->
       <button
         @click="expanded = !expanded"
-        class="rounded-sm hover:bg-gray-300 hover:dark:bg-gray-300"
+        class="rounded-sm hover:bg-gray-200 hover:dark:bg-gray-800"
       >
         <span
           :class="{ 'hidden' : expanded }"
@@ -106,9 +112,9 @@
 
 {{ define "renderSingle" }}
   {{- if .Params.sidebar.goto }}
-    <li class="hover:text-blue px-4 hover:dark:text-blue-400">
+    <li class="navbar-entry-margin hover:text-blue hover:dark:text-blue-400">
       <a
-        class="block w-full truncate py-2"
+        class="block w-full truncate"
         href="{{ .Params.sidebar.goto }}"
         title="{{ .LinkTitle }}"
       >
@@ -118,15 +124,15 @@
   {{- else }}
     {{ $isCurrent := eq page . }}
     <li
-      class="hover:text-blue {{ if $isCurrent }}
-        bg-gray-100 dark:bg-gray-900
-      {{ end }} rounded-sm px-4 hover:dark:text-blue-400"
+      class="navbar-entry-margin hover:text-blue {{ if $isCurrent }}
+        navbar-entry-background-current
+      {{ end }} rounded-sm hover:dark:text-blue-400"
     >
       <a
         {{ if $isCurrent }}
           aria-current="page" id="sidebar-current-page"
         {{ end }}
-        class="block w-full truncate py-2"
+        class="block w-full truncate"
         href="{{ .Permalink }}"
         title="{{ .LinkTitle }}"
       >
@@ -139,8 +145,8 @@
 {{ define "renderTitle" }}
   {{ .LinkTitle }}
   {{- with .Params.sidebar.badge }}
-    <span
-      >{{- partial "components/badge.html" (dict "color" .color "content" .text) }}</span
-    >
+    <span>
+      {{- partial "components/badge.html" (dict "color" .color "content" .text) }}
+    </span>
   {{- end }}
 {{ end }}