docs ui polish

docs/src/tailwind.css

@@ -14,3 +14,161 @@
 code {
   white-space: nowrap;
 }
+
+/* NAV BAR STYLES */
+.header {
+  @apply bg-white dark:bg-gray-900;
+}
+
+starlight-theme-select label {
+  @apply text-gray-600 dark:text-gray-400;
+}
+
+site-search {
+  @apply bg-red-50 dark:bg-gray-800;
+}
+
+site-search button[data-open-modal] {
+  @apply border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400;
+
+  kbd {
+    @apply bg-gray-50 dark:bg-gray-700;
+  }
+}
+
+/* SIDEBAR STYLES */
+.sidebar-pane {
+  border-inline-end: 0;
+  @apply dark:bg-gray-900 bg-white;
+}
+
+@media (min-width: 50rem) {
+  :root {
+    --sl-sidebar-pad-x: 1.25rem;
+  }
+}
+
+.sidebar-content {
+  @apply pt-6;
+
+  summary {
+    @apply gap-1 px-0 flex flex-row justify-between font-bold;
+
+    .caret {
+      @apply hidden;
+    }
+
+    @media (min-width: 50rem) {
+      /* Tweak alignment of group label and caret icon */
+      --caret-adjustment: 0.5px;
+      transform: translateY(var(--caret-adjustment));
+
+      .group-label {
+        transform: translateY(calc(-1 * var(--caret-adjustment)));
+      }
+    }
+  }
+
+  li {
+    border: 0;
+    --sl-sidebar-item-padding-inline: 0.45rem;
+    margin: 0;
+    padding: 0;
+  }
+
+  .top-level {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+
+  .top-level>* {
+    margin-block: 0;
+  }
+
+  .top-level>li:has(details) {
+    margin-block: 0.5rem;
+  }
+
+  .large {
+    @apply px-3 text-sm text-gray-400 dark:text-gray-500;
+
+    @media (min-width: 50rem) {
+      font-size: var(--sl-text-sm);
+    }
+  }
+
+  a.large {
+    @apply text-sm text-gray-900 dark:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-800;
+  }
+
+  a {
+    @apply px-3 py-2 text-sm text-gray-900 hover:bg-gray-100 dark:text-gray-100 dark:hover:bg-gray-800;
+
+    &[aria-current='page'] {
+      @apply bg-violet-50 text-violet-600 dark:bg-violet-100/10 dark:text-violet-300;
+    }
+  }
+}
+
+/* MARKDOWN CONTENT STYLES */
+
+.sl-markdown-content {
+  h1 {
+    @apply text-3xl font-bold dark:text-white;
+  }
+
+  h2 {
+    @apply text-2xl font-bold dark:text-white;
+  }
+
+  h3 {
+    @apply text-xl font-bold dark:text-white;
+  }
+
+  h4 {
+    @apply text-lg font-bold dark:text-white;
+  }
+
+  h5 {
+    @apply text-base font-bold dark:text-white;
+  }
+
+  h6 {
+    @apply text-sm font-bold dark:text-white;
+  }
+
+  p {
+    @apply text-base leading-normal text-gray-900 dark:text-gray-100;
+  }
+
+  a {
+    @apply text-violet-600 dark:text-violet-400 no-underline hover:underline hover:text-violet-700 dark:hover:text-violet-300;
+  }
+
+  code {
+    @apply font-mono bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 px-1.5 py-0.5 text-sm text-gray-600 dark:text-gray-300 rounded-md;
+  }
+}
+
+.content-panel {
+  border-top: none !important;
+}
+
+/* Next/Previous Page Links */
+.content-panel footer {
+  .pagination-links > a {
+    @apply text-sm border-gray-300/50 dark:border-gray-700/50 border shadow-none dark:bg-gray-800;
+
+    svg {
+      @apply hidden;
+    }
+
+    span {
+      @apply text-gray-400 dark:text-gray-500 text-xs font-bold;
+      span {
+        @apply text-base text-gray-900 dark:text-gray-100 font-normal;
+      }
+    }
+  }
+}