diff --git a/tablet-width.css b/tablet-width.css new file mode 100644 index 0000000..5df2a7b --- /dev/null +++ b/tablet-width.css @@ -0,0 +1,80 @@ +/* These rules allow us to retain most elements of the desktop view between 880px and 1024px. + * We could extend these all the way to the traditional 768px breakpoint, + * but the width of our current left sidebar makes that undesirable. + * + * 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 plain `hidden` class on the element to be shown at + * mobile resolution. + * + * Unfortunately in some cases we do need to select elements by using a few of classes. + * Ideally we'd have id's for these too. + */ + +@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. + * Don't introduce new left margin in main section. + */ + #content-area { + padding-left: 21.5rem; + margin-left: -3rem; + } + +/* Keep left sidebar font at 14px */ + #sidebar-content { + font-size: .875em; + } + +/* Retain full searchbar */ + @supports selector(:has()) { + div:has(> #search-bar-entry) { + display: block; + } + } + + @supports not selector(:has()) { + #navbar .h-full .hidden.flex-1.justify-center { + display: block; + } + } + +/* Hide little search control */ + #search-bar-entry-mobile { + display: none; + } + +/* Retain tabs */ + @supports selector(:has()) { + div:has(> .nav-tabs) { + display: block; + } + } + + @supports not selector(:has()) { + #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; + } + + #sidebar { + width: 18rem; + } +} \ No newline at end of file