added index to the docs/types route, minor fixes to styling

src/styles/docs/docs.css

@@ -8,6 +8,7 @@
   justify-content: center;
   flex-direction: row;
   flex-grow: 1;
+  transition: filter 0.3s;
 }
 
 .docslayout-inner {
@@ -19,6 +20,10 @@
   flex-direction: row;
 }
 
+.dim-content .docslayout-root {
+  filter: brightness(50%);
+}
+
 .docs-content {
   flex-grow: 1;
 
@@ -44,7 +49,7 @@
 }
 
 .heading {
-  & > [id] {
+  &>[id] {
     width: max-content;
   }
 
@@ -82,7 +87,7 @@ ul {
 .markdown-alert {
   margin-block: 0.618rem;
 
-  & > *:not(:first-child) {
+  &>*:not(:first-child) {
     margin-block: 0.724rem;
   }
 }

src/styles/docs/nav/nav.css

@@ -39,7 +39,8 @@
       display: none;
     }
 
-    transition: left 0.3s ease, padding 0.3s ease;
+    transition: left 0.3s ease,
+    padding 0.3s ease;
 
     &.shown {
       display: flex;
@@ -82,10 +83,10 @@
       }
 
       & [data-part="item"] {
-        & [data-part="item-content"] > div {
+        & [data-part="item-content"]>div {
           min-height: 3em;
 
-          & > a {
+          &>a {
             margin: auto 0;
           }
         }
@@ -94,6 +95,12 @@
   }
 }
 
+.link-outside {
+  width: 100%;
+  height: 100%;
+  text-align: start;
+}
+
 @media (min-width: 40rem) {
   .nav-toggle {
     .nav-items {
@@ -128,7 +135,7 @@
         }
 
         & [data-part="item"] {
-          & [data-part="item-content"] > div {
+          & [data-part="item-content"]>div {
             min-height: 2.2rem;
           }
         }

src/styles/docs/toc/toc.css

@@ -13,17 +13,7 @@
 
 .toc-wrapper-mobile {
   display: block;
-  scrollbar-width: none;
-  -ms-overflow-style: none;
 
-  &::-webkit-scrollbar {
-    display: none;
-  }
-
-  background-color: transparent;
-}
-
-.toc-content {
   background-color: transparent;
 }
 
@@ -35,7 +25,7 @@
   font-size: 1.614rem;
   max-height: 500px;
 
-  & > svg {
+  &>svg {
     height: 100%;
     width: 24px;
   }
@@ -60,14 +50,20 @@
     -ms-overflow-style: none;
     background-color: hsl(var(--overlay-bkg));
     border-left: 1px solid hsl(var(--overlay-bkg-border));
+    cursor: default;
 
     &::-webkit-scrollbar {
       display: none;
     }
 
-    transition: width 0.3s ease, padding 0.3s ease;
+    transition: width 0.3s ease,
+    padding 0.3s ease;
 
     &.shown {
+      & .toc-content {
+        background-color: transparent;
+      }
+
       overflow-y: scroll;
       width: var(--width);
       display: flex;
@@ -122,7 +118,7 @@
       list-style: none;
 
       &.active {
-        & > .toc_a {
+        &>.toc_a {
           color: hsl(var(--green) 72 60);
         }
       }

src/styles/docs/toc/types-toc.css

@@ -63,6 +63,8 @@
     }
 
     &:hover {
+      cursor: pointer;
+
       & svg {
         opacity: 1;
       }