fixed badges, sections, light theme dimming, added font pull from google api

src/config/Head.astro

@@ -26,3 +26,7 @@ const { title, description } = Astro.props;
 <meta name="twitter:title" content={title} />
 <meta name="twitter:description" content={description} />
 <!-- <meta name="twitter:image" content={image} /> -->
+<!-- Font -->
+<link rel="preconnect" href="https://fonts.googleapis.com"/>
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
+<link href="https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap" rel="stylesheet"/>

src/styles/docs/badge.css

@@ -19,3 +19,12 @@
   border-radius: 5px;
   width: max-content;
 }
+
+@media (max-width: 40rem) {
+  .type-badges {
+    max-width: 50%;
+    padding-top: 0.317rem;
+    flex-flow: row wrap;
+    justify-content: initial;
+  }
+}

src/styles/docs/docs-types.css

@@ -34,10 +34,12 @@
         left: 0;
         width: 100%;
         height: 1px;
-        background: linear-gradient(90deg,
+        background: linear-gradient(
+          90deg,
           transparent 25%,
           hsla(var(--accent-500) / 0.88) 50%,
-            transparent 75%);
+          transparent 75%
+        );
       }
     }
   }
@@ -357,9 +359,11 @@ html.dark .typevariants {
 
         &::before {
           width: 0;
-          background: linear-gradient(to right,
+          background: linear-gradient(
+            to right,
             hsla(var(--accent-400) / 0.5) var(--percent),
-              hsla(var(--accent-400) / 0) 100%);
+            hsla(var(--accent-400) / 0) 100%
+          );
           animation: percentToZero 250ms ease-in-out forwards;
           transition: width 0.25s ease-in-out;
         }

src/styles/docs/docs.css

@@ -1,6 +1,10 @@
 @import "./docs-config.css";
 @import "./docs-types.css";
 
+.docslayout {
+  transition: background-color 0.3s;
+}
+
 .docslayout-root {
   margin-inline: 0.618rem;
   margin-top: 3.5rem;
@@ -26,6 +30,11 @@
   pointer-events: none;
 }
 
+:not(html.dark) > .dim-content-toc,
+:not(html.dark) > .dim-content-nav {
+  background-color: #909090;
+}
+
 .docs-content {
   flex-grow: 1;