Fix experience between 880-1024 px widths

Tweak Mintlify CSS so that we don't simply show the quite inferior mobile view when someone shrinks their desktop browser window to <1024px width. Instead, continue to show the sidebar, the search bar, and most other elements until the window really gets too small.

Author: morsssss

styles.css

@@ -0,0 +1,59 @@
+/* These rules allow us to retain the desktop view until 880px. We could go all
+ * the way to the traditional 768px breakpoint, but our left sidebar is rather wide.
+ *
+ * Mintlify provides an id for most of the areas we want to fix up.
+ * For the rest, they use a `lg:hidden` class on the element to be shown at desktop
+ * resolutions, and a just plan `hidden` class on the element to be shown at
+ * mobile resolution.
+ * Unfortunately in some cases we do need to specify more specific classes.
+ */
+
+@media (min-width: 880px) {
+/* Retain the left sidebar, but make it a little narrower */
+  #sidebar {
+    display: block;
+    width: 16rem;
+  }
+
+/* Retain left padding in main section so it doesn't overlap with the sidebar */
+  #content-area {
+    padding-left: 21.5rem;
+  }
+
+/* Don't introduce new left margin in main section */
+  #content-area {
+    margin-left: -3rem;
+  }
+
+/* Keep left sidebar font at 14px */
+  #sidebar-content {
+    font-size: .875em;
+  }
+
+  /* Retain full searchbar */
+  #navbar .h-full .hidden.flex-1.justify-center {
+    display: block;
+  }
+
+  #navbar .h-full .lg\:hidden {
+    display: none;
+  }
+
+/* Retain tabs */
+  #navbar .hidden.px-12.h-12 {
+    display: block;
+  }
+
+/* Hide mobile menu */
+  #navbar button.lg\:hidden {
+    display: none;
+  }
+}
+
+@media (min-width: 1024px) {
+/* Use Mintlify's default styles at this width */
+  #content-area {
+    padding-left: 23.7rem;
+    width: 18rem;
+  }
+}