From 36adc42e60355de84d7631d3026ec6143213bdca Mon Sep 17 00:00:00 2001
From: outfoxxed <outfoxxed@outfoxxed.me>
Date: Thu, 17 Oct 2024 20:22:14 -0700
Subject: [PATCH] style tweaks for bg / padding of toc / listing / nav

---
 src/styles/css-config/base.css    |  7 ++++++-
 src/styles/docs/docs-types.css    | 18 ++++++++++--------
 src/styles/docs/nav/nav-tree.css  |  5 +++--
 src/styles/docs/toc/types-toc.css | 15 ++++++++-------
 4 files changed, 27 insertions(+), 18 deletions(-)

diff --git a/src/styles/css-config/base.css b/src/styles/css-config/base.css
index cfbae03..2191537 100644
--- a/src/styles/css-config/base.css
+++ b/src/styles/css-config/base.css
@@ -51,11 +51,13 @@ html {
   --signal-link-color: 270 85 60;
   --var-color: 190 78 70;
   --var-link-color: 190 85 60;
-  --inner-param-color: 215 60 70;
+  --inner-param-color: 215 80 27;
+  --inner-param-border-color: 215 50 50;
   --nav-hovered-bkg: var(--blue) 100 93;
   --nav-selected-bkg: var(--blue) 100 90;
   --nav-selected-text: var(--blue) 60 60;
   --nav-indicator-bkg: var(--blue) 45 80;
+  --toc-hovered-bkg: 0 0 0 / 0.1;
   --overlay-bkg: var(--blue) 25 93;
   --overlay-bkg-border: var(--blue) 10 75;
   --footer-bkg: var(--blue) 32 92;
@@ -101,10 +103,13 @@ html.dark {
   --var-color: 190 78 70;
   --var-link-color: 190 85 60;
   --inner-param-color: 215 60 70;
+  --inner-param-border-color: 215 26 46;
+  --inner-param-color: 215 60 70;
   --nav-hovered-bkg: var(--blue) 40 10;
   --nav-selected-bkg: var(--blue) 40 13;
   --nav-selected-text: var(--blue) 100 70;
   --nav-indicator-bkg: var(--blue) 30 30;
+  --toc-hovered-bkg: 0 0 100 / 0.07;
   --overlay-bkg: var(--blue) 75 5;
   --overlay-bkg-border: var(--blue) 45 15;
   --footer-bkg: var(--blue) 66 5;
diff --git a/src/styles/docs/docs-types.css b/src/styles/docs/docs-types.css
index a7991c9..694f1a4 100644
--- a/src/styles/docs/docs-types.css
+++ b/src/styles/docs/docs-types.css
@@ -101,7 +101,7 @@
     transition: border 0.3s;
 
     & .typedata-title {
-      margin-bottom: 1.618rem;
+      margin-bottom: 0.8rem;
 
       & .typedata-name {
         font-size: 1.272rem;
@@ -130,8 +130,8 @@
           align-items: center;
           gap: 0.117rem;
           color: hsl(var(--inner-param-color));
-          border: 1px solid hsl(var(--inner-param-color));
-          border-radius: 5px;
+          border: 1px solid hsl(var(--inner-param-border-color));
+          border-radius: 6px;
         }
       }
     }
@@ -391,6 +391,13 @@ html.dark .typevariants {
   }
 }
 
+@media (min-width: 40rem) {
+  .typedocs-content .typedata-title {
+    display: flex;
+    justify-content: space-between;
+  }
+}
+
 @media (min-width: 65rem) {
   .root-nav {
     & .root-nav-entry {
@@ -426,11 +433,6 @@ html.dark .typevariants {
   .typedocs-content {
     margin-inline: 1.272rem;
 
-    & .typedata-title {
-      display: flex;
-      justify-content: space-between;
-    }
-
     & section {
       min-width: 30svw;
     }
diff --git a/src/styles/docs/nav/nav-tree.css b/src/styles/docs/nav/nav-tree.css
index 8f09d40..e686fea 100644
--- a/src/styles/docs/nav/nav-tree.css
+++ b/src/styles/docs/nav/nav-tree.css
@@ -69,7 +69,6 @@ html.dark .nav-shevron {
     display: flex;
     flex-direction: column;
     gap: 0.15em;
-    padding: 0.4rem;
     margin: 0.4rem 0;
     border-radius: 6px;
 
@@ -80,8 +79,10 @@ html.dark .nav-shevron {
     }
 
     &>a {
+      padding: 0.4rem;
+      padding-left: 0.6rem;
       width: 100%;
-      margin-left: 0.2rem;
+      text-decoration: none;
     }
   }
 
diff --git a/src/styles/docs/toc/types-toc.css b/src/styles/docs/toc/types-toc.css
index 82cd168..61b650b 100644
--- a/src/styles/docs/toc/types-toc.css
+++ b/src/styles/docs/toc/types-toc.css
@@ -50,30 +50,31 @@
   z-index: 21;
 
   & .types-item {
-    margin-block: 10px;
+    margin-block: 0.1rem;
     width: 100%;
     transition: background-color 0.3s;
-    padding: 0.117rem;
-    padding-left: 0.338rem;
+    padding-left: 0.3rem;
     border-radius: 5px;
 
     & svg {
       opacity: 0.6;
-      width: 1.3rem;
-      height: 1.3rem;
+      width: 1.25rem;
+      height: 1.25rem;
       transition: opacity 0.5s;
     }
 
     & a {
       display: flex;
       align-items: center;
-      gap: 0.287rem;
+      gap: 0.3rem;
       width: 100%;
+      padding: 0.3rem;
+      text-decoration: none;
     }
 
     &:hover {
       cursor: pointer;
-      background-color: hsla(0 0 100 / 0.07);
+      background-color: hsl(var(--toc-hovered-bkg));
 
       & svg {
         opacity: 1;