fix: visual touch-ups (#23012)

- **increase h2 mt**
- **tabs: remove rounded border**
- **fix page action icons**
- **increase article width**
- **reduce breadcrumb font size**

Author: ArthurFlag

assets/css/components.css

@@ -110,6 +110,6 @@
 }
 
 .tab-item {
-  @apply inline-block rounded-sm px-3 py-2 hover:bg-gray-100 dark:hover:bg-gray-900;
+  @apply inline-block rounded-t-sm px-3 py-2 hover:bg-gray-100 dark:hover:bg-gray-900;
   @apply dark:text-gray-200;
 }

assets/css/global.css

@@ -49,7 +49,7 @@ input[type="search"]::-ms-clear {
     margin-bottom: 0.4em !important;
   }
   > h2 {
-    @apply mt-5! mb-3!;
+    @apply mt-7! mb-3!;
     font-size: 160% !important;
     a {
       @apply hover:no-underline!;

assets/css/utilities.css

@@ -1,13 +1,3 @@
-@utility icon-svg {
-  svg {
-    font-size: 24px;
-    width: 1em;
-    height: 1em;
-    display: inline-block;
-    fill: currentColor;
-  }
-}
-
 @utility icon-xs {
   svg {
     font-size: 12px;
@@ -91,6 +81,15 @@
     fill: currentColor;
   }
 }
+@utility icon-svg-stroke {
+  svg {
+    font-size: 24px;
+    width: 1em;
+    height: 1em;
+    display: inline-block;
+    stroke: currentColor;
+  }
+}
 
 @utility icon-xs {
   svg {
@@ -257,3 +256,7 @@
 @utility pagination-link {
   @apply flex items-center justify-center rounded-sm p-2;
 }
+
+@utility breadcrumbs {
+  font-size: 90%;
+}

layouts/partials/breadcrumbs.html

@@ -2,7 +2,7 @@
   id="breadcrumbs"
   {{- $breadcrumbTitles := slice }}
   data-pagefind-ignore
-  class="mb-4 flex min-w-0 items-center gap-2 text-gray-400 dark:text-gray-300"
+  class="breadcrumbs mb-4 flex min-w-0 items-center gap-2 text-gray-400 dark:text-gray-300"
 >
   {{ range .Ancestors.Reverse }}
     {{ $breadcrumbTitles = $breadcrumbTitles | append .LinkTitle }}

layouts/partials/content-default.html

@@ -13,7 +13,7 @@ <h1 data-pagefind-weight="10">{{ .Title }}</h1>
     </div>
     {{ .Content }}
   </article>
-  <div class="-mt-8 -mr-8 hidden min-w-52 flex-1 lg:block">
+  <div class="-mt-8 -mr-20 hidden min-w-48 flex-1 lg:block">
     {{ partial "aside.html" . }}
   </div>
 </div>

layouts/partials/github-links.html

@@ -7,7 +7,7 @@
   {{ with .File }}
   {{ if not (in .Filename "/_vendor/") }}
 <p class="flex items-center gap-1">
-  <span class="icon-svg icon-sm">
+  <span class="icon-svg-stroke icon-sm">
     {{ partial "utils/svg.html" "theme/icons/edit.svg" }}
   </span>
   <a class="link" rel="noopener"
@@ -16,7 +16,7 @@
   {{ end }}
   {{ end }}
 <p class="flex items-center gap-1">
-  <span class="icon-svg icon-sm">
+  <span class="icon-svg-stroke icon-sm">
     {{ partial "utils/svg.html" "theme/icons/issue.svg" }}
   </span>
   <a class="link" rel="noopener"

layouts/partials/md-dropdown.html

@@ -1,4 +1,4 @@
-<details id="markdownDropdown" class="group relative z-10 inline-block" data-heap-id="markdown-dropdown">
+<details id="markdownDropdown" class="ml-3 group relative z-10 inline-block" data-heap-id="markdown-dropdown">
     <summary
       class="inline-flex cursor-pointer items-center gap-0 rounded-sm border border-gray-600 bg-white  py-1 pl-2
       text-base font-semibold text-gray-600 transition-colors hover:bg-gray-50 dark:border-gray-50 dark:bg-gray-950 dark:text-gray-100 dark:hover:bg-gray-900"