feat(css): add distinct sidebar title styling for better hierarchy

- Add Roman Silver background (#838996) and Platinum text (#e5e4e2) to sidebar titles
- Implement CSS variables for light/dark mode support
- Style custom title elements rendered by DocSidebarItem wrapper
- Improve sidebar category title hierarchy with increased spacing and borders
- Add dark mode adjustments for consistent appearance

Visual improvements:
- Clear distinction between sidebar title and navigation items
- Better visual hierarchy (title → categories → pages)
- Improved scannability and navigation structure

Technical:
- Uses CSS variables for theme compatibility
- Targets inline-styled title divs from DocSidebarItem component
- Maintains backward compatibility with legacy sidebar-category-title class

Fixes #32

Author: luandro

docusaurus.config.ts

@@ -166,11 +166,7 @@ const config: Config = {
   projectName: "comapeo-docs", // Usually your repo name.
 
   onBrokenLinks: "throw",
-  markdown: {
-    hooks: {
-      onBrokenMarkdownLinks: "warn",
-    },
-  },
+  onBrokenMarkdownLinks: "warn",
 
   // Even if you don't use internationalization, you can use this field to set
   // useful metadata like html lang. For example, if your site is Chinese, you

src/css/custom.css

@@ -49,15 +49,62 @@ img.emoji {
 .navbar__logo img {
   height: 135px;
 }
+
+/* Sidebar title/branding area styling - CSS variables for theme support */
+:root {
+  --sidebar-title-bg: #838996; /* Roman Silver */
+  --sidebar-title-text: #e5e4e2; /* Platinum */
+}
+
+/* Dark mode adjustments */
+[data-theme="dark"] {
+  --sidebar-title-bg: #606570; /* Slightly darker for dark mode */
+  --sidebar-title-text: #e5e4e2; /* Keep same for consistency */
+}
+
+/* Style the custom title elements rendered by DocSidebarItem wrapper */
+aside[class*="sidebar"] > div > div > div[style*="fontSize"] {
+  background-color: var(--sidebar-title-bg) !important;
+  color: var(--sidebar-title-text) !important;
+  margin-left: 0 !important;
+  margin-right: 0 !important;
+  padding: 0.8rem 1rem !important;
+  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
+  text-transform: uppercase;
+  font-size: 0.9rem !important;
+  font-weight: bold !important;
+  opacity: 1 !important;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+/* Dark mode border adjustment */
+[data-theme="dark"]
+  aside[class*="sidebar"]
+  > div
+  > div
+  > div[style*="fontSize"] {
+  border-bottom-color: rgba(255, 255, 255, 0.1);
+}
+
+/* Legacy class - keeping for backward compatibility but updating for better hierarchy */
 .sidebar-category-title {
   font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
   text-transform: uppercase;
   /* color: var(--ifm-color-primary); */
   font-size: 0.9rem;
   font-weight: bold;
   margin-bottom: 0.5rem;
-  margin-top: 0.5rem;
+  margin-top: 1rem; /* Increased from 0.5rem for more separation */
   margin-left: 1rem;
+  padding-top: 0.75rem;
+  border-top: 1px solid var(--ifm-toc-border-color);
+  color: var(--ifm-color-emphasis-600); /* Slightly muted for hierarchy */
+}
+
+/* First category doesn't need top border */
+.sidebar-category-title:first-of-type {
+  border-top: none;
+  margin-top: 0.5rem;
 }
 
 /* Docs content image sizing and layout */