wip: separate mobile and low width desktop modes

src/styles/css-config/base.css

@@ -6,7 +6,6 @@ html {
   font-weight: 400;
 
   height: 100svh;
-  width: 100svw;
 
   font-synthesis: none;
   text-rendering: optimizeLegibility;

src/styles/docs/docs.css

@@ -86,7 +86,7 @@ ul {
   margin-block: 0 !important;
 }
 
-@media (min-width: 65rem) {
+@media (min-width: 40rem) {
   .docs-content {
     margin-inline: 1.272rem;
 

src/styles/docs/nav/nav-tree.css

@@ -96,7 +96,7 @@ html.dark .nav-shevron {
   [data-part="item-content"]>div.__current-type-doc {
     background-color: hsl(var(--nav-selected-bkg));
 
-    &>a {
+    & a {
       color: hsl(var(--nav-selected-text));
     }
   }

src/styles/docs/nav/nav.css

@@ -13,14 +13,13 @@
   max-height: 500px;
   scrollbar-width: none;
   -ms-overflow-style: none;
-  --width: 30rem;
+  --width: 25rem;
 
   &::-webkit-scrollbar {
     display: none;
   }
 
-  & svg,
+  & div {
-  div {
     height: max-content;
     width: 100%;
   }
@@ -37,8 +36,7 @@
     left: -1rem;
     width: 0;
     height: calc(100svh - 2.5rem);
-    font-size: 0.745rem;
+    font-size: 1rem;
-    font-weight: 600;
     scrollbar-width: none;
     -ms-overflow-style: none;
 
@@ -73,8 +71,7 @@
       text-wrap: nowrap;
 
       & [data-part="item-trigger"] {
-        min-height: 3em;
+        max-width: 90%;
-        max-width: 80%;
       }
 
       & [data-part="item"] {
@@ -94,11 +91,10 @@
           }
 
           & [data-part="item-content"] {
-            max-width: 70%;
+            max-width: 80%;
             margin-left: 3.33em;
 
             & > div {
-              min-height: 4em;
               display: grid;
 
               & a {
@@ -115,15 +111,24 @@
   }
 }
 
-@media (max-width: 55rem) {
+@media (max-width: 40rem) {
-  .nav-toggle {
-    --width: 45svw;
-  }
-}
-
-@media (max-width: 38rem) {
   .nav-toggle {
     --width: 100svw;
+
+    & svg {
+      height: max-content;
+      width: 100%;
+    }
+
+    & .navtree {
+      & [data-part="item-trigger"] {
+        min-height: 3em;
+      }
+
+      & [data-part="item-content"] > div {
+        min-height: 4em;
+      }
+    }
   }
 }
 

src/styles/docs/nav/search.css

@@ -387,7 +387,7 @@ button[data-close-modal] {
   --search-cancel-space: 5rem;
 }
 
-@media (min-width: 85rem) {
+@media (min-width: 40rem) {
   /* difault styles */
   .search-label {
     display: block;

src/styles/docs/toc/toc.css

@@ -85,9 +85,9 @@
   }
 }
 
-@media (max-width: 55rem) {
+@media (min-width: 40rem) {
   .toc-toggle {
-    --width: 25svw;
+    --width: 19rem;
   }
 
   .toc-wrapper {
@@ -101,12 +101,12 @@
   }
 
   .toc-wrapper {
-    --width: 25svw;
+    --width: 19rem;
     background-color: transparent;
     display: block;
     position: sticky;
     top: 4rem;
-    min-width: max-content;
+    width: max-content;
     max-height: calc(100svh - 8rem);
     overflow-y: scroll;
     z-index: 10;
@@ -144,6 +144,6 @@
 
 @media (min-width: 85rem) {
   .toc-wrapper {
-    width: max-content;
+    width: 19rem;
   }
 }

src/styles/global.css

@@ -186,11 +186,13 @@ footer {
   }
 }
 
-@media (min-width: 85rem) {
+@media (min-width: 40rem) {
   html {
     font-size: 16px;
   }
+}
 
+@media (min-width: 85rem) {
   .header-title {
     display: block;
   }