From d42b26f0b635c4d4eb303e0cf5bcc0d6c4a656e7 Mon Sep 17 00:00:00 2001
From: outfoxxed <outfoxxed@outfoxxed.me>
Date: Sun, 13 Oct 2024 03:19:40 -0700
Subject: [PATCH] wip: separate mobile and low width desktop modes

---
 src/styles/css-config/base.css   |  1 -
 src/styles/docs/docs.css         |  2 +-
 src/styles/docs/nav/nav-tree.css |  2 +-
 src/styles/docs/nav/nav.css      | 37 ++++++++++++++++++--------------
 src/styles/docs/nav/search.css   |  2 +-
 src/styles/docs/toc/toc.css      | 10 ++++-----
 src/styles/global.css            |  4 +++-
 7 files changed, 32 insertions(+), 26 deletions(-)

diff --git a/src/styles/css-config/base.css b/src/styles/css-config/base.css
index e6843c2..3cd9939 100644
--- a/src/styles/css-config/base.css
+++ b/src/styles/css-config/base.css
@@ -6,7 +6,6 @@ html {
   font-weight: 400;
 
   height: 100svh;
-  width: 100svw;
 
   font-synthesis: none;
   text-rendering: optimizeLegibility;
diff --git a/src/styles/docs/docs.css b/src/styles/docs/docs.css
index 3aa6865..77e38cc 100644
--- a/src/styles/docs/docs.css
+++ b/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;
 
diff --git a/src/styles/docs/nav/nav-tree.css b/src/styles/docs/nav/nav-tree.css
index dfd6424..b7a33e5 100644
--- a/src/styles/docs/nav/nav-tree.css
+++ b/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));
     }
   }
diff --git a/src/styles/docs/nav/nav.css b/src/styles/docs/nav/nav.css
index 6c19165..a262f29 100644
--- a/src/styles/docs/nav/nav.css
+++ b/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-weight: 600;
+    font-size: 1rem;
     scrollbar-width: none;
     -ms-overflow-style: none;
 
@@ -73,8 +71,7 @@
       text-wrap: nowrap;
 
       & [data-part="item-trigger"] {
-        min-height: 3em;
-        max-width: 80%;
+        max-width: 90%;
       }
 
       & [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) {
-  .nav-toggle {
-    --width: 45svw;
-  }
-}
-
-@media (max-width: 38rem) {
+@media (max-width: 40rem) {
   .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;
+      }
+    }
   }
 }
 
diff --git a/src/styles/docs/nav/search.css b/src/styles/docs/nav/search.css
index ea1bfb0..87964ab 100644
--- a/src/styles/docs/nav/search.css
+++ b/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;
diff --git a/src/styles/docs/toc/toc.css b/src/styles/docs/toc/toc.css
index e1619fa..edc867a 100644
--- a/src/styles/docs/toc/toc.css
+++ b/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;
   }
 }
diff --git a/src/styles/global.css b/src/styles/global.css
index de6d5ba..a68b54f 100644
--- a/src/styles/global.css
+++ b/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;
   }