feat(docs): scrollbar styling (#69)

This PR adds scrollbar styling for the sidebar, code blocks, and the
page.

Author: lazarv

docs/src/components/Sidebar.module.css

@@ -107,7 +107,8 @@ article ~ .root {
   padding: 4rem 1rem 1rem 1rem;
   width: 100%;
   z-index: 10;
-  overflow: auto;
+  overflow-x: hidden;
+  overflow-y: auto;
   pointer-events: auto;
   /* view-transition-name: sidebar; */
 

docs/src/pages/global.css

@@ -12,6 +12,8 @@ body {
   padding: 0;
   min-height: 100vh;
   width: 100%;
+  scrollbar-width: auto;
+  scrollbar-color: theme("colors.gray.200") transparent;
 }
 
 html {
@@ -26,6 +28,39 @@ body {
   @apply flex flex-col w-full overflow-x-hidden from-white to-gray-200 bg-gradient-to-b dark:from-zinc-800 dark:to-zinc-900 dark:bg-gradient-to-b dark:text-gray-300;
 }
 
+aside,
+pre {
+  scrollbar-width: thin;
+}
+
+aside {
+  scrollbar-color: theme("colors.gray.200") transparent;
+}
+
+pre {
+  scrollbar-color: theme("colors.gray.600") transparent;
+}
+
+@media (prefers-color-scheme: dark) {
+  html:not(.light) aside {
+    scrollbar-color: theme("colors.gray.600") transparent;
+  }
+}
+
+html.dark aside {
+  scrollbar-color: theme("colors.gray.600") transparent;
+}
+
+@media (prefers-color-scheme: dark) {
+  html:not(.light) {
+    scrollbar-color: theme("colors.gray.600") transparent;
+  }
+}
+
+html.dark {
+  scrollbar-color: theme("colors.gray.600") transparent;
+}
+
 main {
   @apply container max-w-screen-xl mx-auto flex flex-col flex-1 bg-transparent;