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,
-            transparent 25%,
-            hsla(var(--accent-500) / 0.88) 50%,
-            transparent 75%);
+        background: linear-gradient(
+          90deg,
+          transparent 25%,
+          hsla(var(--accent-500) / 0.88) 50%,
+          transparent 75%
+        );
       }
     }
   }
@@ -48,7 +50,7 @@
 }
 
 #injectedMd {
-  &>p:not(:first-child) {
+  & > p:not(:first-child) {
     margin-block: 0.724rem;
   }
 }
@@ -63,7 +65,7 @@
 }
 
 .typedocs-content {
-  &>p {
+  & > p {
     margin-block: 0.618rem;
   }
 
@@ -113,11 +115,11 @@
 
   & .typedata-detailsdata,
   .typedocs-subheading {
-    &>p {
+    & > p {
       margin-top: 0.618rem;
     }
 
-    &>p:last-child {
+    & > p:last-child {
       margin-bottom: 0;
     }
 
@@ -177,7 +179,7 @@
   width: max-content;
   transition: opacity 0.5s;
 
-  &>a {
+  & > a {
     opacity: inherit;
   }
 }
@@ -234,7 +236,7 @@ html.dark .typeprops {
         align-items: center;
         gap: 0.117rem;
 
-        &>svg {
+        & > svg {
           height: 1.272rem;
           width: 1.272rem;
         }
@@ -286,7 +288,7 @@ html.dark .typefuncs {
         align-items: center;
         gap: 0.117rem;
 
-        &>svg {
+        & > svg {
           height: 1.272rem;
           width: 1.272rem;
         }
@@ -357,9 +359,11 @@ html.dark .typevariants {
 
         &::before {
           width: 0;
-          background: linear-gradient(to right,
-              hsla(var(--accent-400) / 0.5) var(--percent),
-              hsla(var(--accent-400) / 0) 100%);
+          background: linear-gradient(
+            to right,
+            hsla(var(--accent-400) / 0.5) var(--percent),
+            hsla(var(--accent-400) / 0) 100%
+          );
           animation: percentToZero 250ms ease-in-out forwards;
           transition: width 0.25s ease-in-out;
         }
@@ -380,7 +384,7 @@ html.dark .typevariants {
   .typedocs-content {
     margin-inline: 1.272rem;
 
-    &>p {
+    & > p {
       margin-block: 1.217rem;
     }
   }

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;
 
@@ -51,7 +60,7 @@
 }
 
 .heading {
-  &>[id] {
+  & > [id] {
     width: max-content;
   }
 
@@ -89,7 +98,7 @@ ul {
 .markdown-alert {
   margin-block: 0.618rem;
 
-  &>*:not(:first-child) {
+  & > *:not(:first-child) {
     margin-block: 0.724rem;
   }
 }