guides: remove left sidebar on guide pages, center content, polish chrome

Guide content pages now use a clean, centered reading layout:
- Drop the 320px left sidebar for the whole guides section (baseof.html
  conditions the desktop sidebar on type != guides; mobile drawer kept)
- Remove the obsolete /guides/** -> layout: series cascade in hugo.yaml so
  collapsed guides route to guides/list.html instead of the old series layout
- New guides/single.html + updated guides/list.html: centered reading column
  (max-w-[92ch]) with the TOC taking the remaining width, justify-center so
  the pair sits balanced rather than left-heavy
- Render the guide summary as a lead paragraph under the h1 (content-default)
- aside.html: auto-hide the TOC scrollbar until hover (new scrollbar-hover
  utility)
- breadcrumbs: use an absolute font-size so they render identically inside
  prose (guide pages) and outside it (landing)

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: dvdksn

assets/css/utilities.css

@@ -208,6 +208,33 @@
     }
   }
 }
+@utility scrollbar-hover {
+  /* Firefox: hide the thumb until hover */
+  scrollbar-width: thin;
+  scrollbar-color: transparent transparent;
+  &:hover {
+    scrollbar-color: var(--color-gray-400) transparent;
+  }
+  .dark &:hover {
+    scrollbar-color: var(--color-gray-600) transparent;
+  }
+  /* WebKit: reserve the track, reveal the thumb only on hover */
+  &::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+  &::-webkit-scrollbar-thumb {
+    border-radius: 9999px;
+    background-color: transparent;
+  }
+  &:hover::-webkit-scrollbar-thumb {
+    background-color: var(--color-gray-400);
+  }
+  .dark &:hover::-webkit-scrollbar-thumb {
+    background-color: var(--color-gray-600);
+  }
+}
+
 @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;
 }
@@ -217,7 +244,8 @@
 }
 
 @utility breadcrumbs {
-  font-size: 90%;
+  /* Absolute size so breadcrumbs render identically inside and outside prose */
+  font-size: calc(var(--text-base) * 0.9);
 }
 
 @utility topbar-button {

hugo.yaml

@@ -13,11 +13,6 @@ taxonomies: {}
 # Cascade layout and type settings to content subtrees.
 # See https://gohugo.io/configuration/cascade/#target
 cascade:
-  # Guide sections use the series layout (metadata card + modules list)
-  - target:
-      path: /guides/**
-      kind: section
-    layout: series
   # Sample pages use the samples type (routes to layouts/samples/)
   - target:
       path: /reference/samples/**

layouts/_partials/aside.html

@@ -1,5 +1,5 @@
 <aside
-  class="sticky top-16 h-[calc(100vh-64px)] min-w-52 space-y-4 overflow-y-auto py-4 w-full"
+  class="scrollbar-hover sticky top-16 h-[calc(100vh-64px)] min-w-52 space-y-4 overflow-y-auto py-4 w-full"
 >
   {{ partial "github-links.html" . }}
   <div id="TableOfContents" class="overflow-x-auto">

layouts/_partials/content-default.html

@@ -1,5 +1,10 @@
 {{ partial "breadcrumbs.html" . }}
 <h1 data-pagefind-weight="10">{{ .Title | safeHTML }}</h1>
+{{- if and (eq .Type "guides") .Params.summary }}
+  <p class="mt-0 text-lg text-gray-500 dark:text-gray-400">
+    {{ .Params.summary }}
+  </p>
+{{- end }}
 <div class="hidden lg:block">
   {{ partialCached "md-dropdown.html" "-" "-" }}
 </div>

layouts/baseof.html

@@ -30,7 +30,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-[320px]"
+        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{{ if ne .Type "guides" }} md:sticky md:top-16 md:z-auto md:block md:h-[calc(100vh-64px)] md:w-[320px]{{ end }}"
         :class="{ 'hidden': ! $store.showSidebar }"
       >
         <!-- Gray backdrop on small screens -->

layouts/guides/list.html

@@ -2,8 +2,13 @@
   {{- partial "sidebar/mainnav.html" . }}
 {{ end }}
 
-{{ define "article" }}
-  <article class="prose dark:prose-invert max-w-5xl">
-    {{ partial "content-default.html" . }}
-  </article>
+{{ define "main" }}
+  <div class="mx-auto flex w-full max-w-7xl justify-center gap-12">
+    <article class="prose dark:prose-invert min-w-0 max-w-[92ch]">
+      {{ partial "content-default.html" . }}
+    </article>
+    <div class="-mt-8 hidden w-72 flex-none lg:block">
+      {{ partial "aside.html" . }}
+    </div>
+  </div>
 {{ end }}

layouts/guides/single.html

@@ -0,0 +1,14 @@
+{{ define "left" }}
+  {{- partial "sidebar/mainnav.html" . }}
+{{ end }}
+
+{{ define "main" }}
+  <div class="mx-auto flex w-full max-w-7xl justify-center gap-12">
+    <article class="prose dark:prose-invert min-w-0 max-w-[92ch]">
+      {{ partial "content-default.html" . }}
+    </article>
+    <div class="-mt-8 hidden w-72 flex-none lg:block">
+      {{ partial "aside.html" . }}
+    </div>
+  </div>
+{{ end }}