added generic types on props, tweaked nav and footer coloring

src/components/type/Properties.astro

@@ -6,7 +6,7 @@ import type {
 } from "@config/io/types";
 import { Tag, Flag } from "@icons";
 
-import TypeDetails from "./TypeDetails.astro"
+import TypeDetails from "./TypeDetails.astro";
 
 export interface Props {
   propsKeys: string[];
@@ -21,14 +21,20 @@ const { propsKeys, propsData } = Astro.props;
       const propData = propsData[item]
       let typeLink:string;
       let linkText:string;
+      let genericType:string|undefined;
+      let genericTypeLink:string|undefined;
       const gadget = propData.type.gadget;
       if (gadget) {
         typeLink = "#"
         linkText = `[${Object.keys(gadget).toString()}]`
       } else {
-        typeLink = getQMLTypeLink(propData.type as unknown as QMLTypeLinkObject)
+        typeLink = getQMLTypeLink(propData.type)
         linkText = propData.type.name || propData.type.type
       }
+      if (propData.type.of) {
+        genericType = propData.type.of.name;
+        genericTypeLink = getQMLTypeLink(propData.type.of)
+      }
       return (
         <li id={ item } class="typedata-root typeprop-root">
           <p class="typedata-name typeprop-name">
@@ -36,7 +42,7 @@ const { propsKeys, propsData } = Astro.props;
             { item }<span class="type-datatype">:&nbsp;<a
               href={typeLink}
               target="_blank"
-              >{ linkText }</a></span>
+            >{ linkText }</a>{genericType && (<a href={genericTypeLink} class="type-datatype generic-type">&lt;{genericType}&gt;</a>)}</span>
           </p>
           {
             propData.flags && propData.flags.length > 0 ? (

src/styles/css-config/base.css

@@ -103,7 +103,12 @@ html.dark {
   --nav-selected-bkg: var(--blue) 40 13;
   --nav-selected-text: var(--blue) 100 70;
   --nav-indicator-bkg: var(--blue) 30 30;
-  --overlay-bkg: var(--blue) 41 4;
+  --overlay-bkg: var(--blue) 66 7;
+  --overlay-bkg-1: var(--blue) 66 9;
+  --overlay-bkg-2: var(--blue) 60 12;
+  --overlay-bkg-green: var(--green) 66 7;
+  --overlay-bkg-green-1: var(--green) 66 9;
+  --overlay-bkg-green-2: var(--green) 45 21;
   --overlay-bkg-border: var(--blue) 17 13;
 }
 

src/styles/docs/docs.css

@@ -21,6 +21,7 @@
 
 .docs-content {
   flex-grow: 1;
+  margin-bottom: 2.3rem;
 
   & section {
     max-width: 100svw;

src/styles/docs/nav/nav.css

@@ -32,16 +32,26 @@
     scrollbar-width: none;
     font-size: 1.2rem;
     -ms-overflow-style: none;
-    background-color: hsl(var(--overlay-bkg));
+    background: hsl(var(--bg-900));
-    border-right: solid hsl(var(--overlay-bkg-border)) 1px;
+
+    &::before {
+      content: "";
+      position: absolute;
+      inset: 0;
+      background: linear-gradient(
+        135deg,
+        hsla(var(--secondary-900) / 1) 36%,
+        hsla(var(--overlay-bkg-1) / 1) 100%
+      );
+      filter: blur(21px);
+      /* border-top: solid hsl(var(--overlay-bkg-border)) 1px; */
+    }
 
     &::-webkit-scrollbar {
       display: none;
     }
 
-    transition:
+    transition: left 0.3s ease, padding 0.3s ease;
-      left 0.3s ease,
-      padding 0.3s ease;
 
     &.shown {
       display: flex;
@@ -86,7 +96,10 @@
       & [data-part="item"] {
         & [data-part="item-content"] > div {
           min-height: 3em;
-            & > p { margin: auto 0; }
+
+          & > p {
+            margin: auto 0;
+          }
         }
       }
     }

src/styles/docs/toc/toc.css

@@ -65,9 +65,7 @@
       display: none;
     }
 
-    transition:
+    transition: width 0.3s ease, padding 0.3s ease;
-      width 0.3s ease,
-      padding 0.3s ease;
 
     &.shown {
       overflow-y: scroll;
@@ -105,7 +103,7 @@
     display: block;
     position: sticky;
     top: 3.5rem;
-    width: 19rem;
+    max-width: 19rem;
     max-height: calc(100svh - 3.5rem);
     overflow-y: scroll;
     z-index: 9;

src/styles/global.css

@@ -111,20 +111,56 @@ html.dark {
 }
 
 footer {
+  position: relative;
   width: 100%;
   font-size: 0.9rem;
   display: flex;
   justify-content: space-between;
   padding: 1rem;
-  background-color: hsl(var(--overlay-bkg));
+  overflow: hidden;
-  border-top: solid hsl(var(--overlay-bkg-border)) 1px;
+  flex-shrink: 0;
+
+  &::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background: hsl(var(--overlay-bkg));
+    background: linear-gradient(
+      180deg,
+      hsla(var(--overlay-bkg-2) / 1) 30%,
+      hsla(var(--overlay-bkg-1) / 1) 66%,
+      hsla(var(--overlay-bkg-2) / 1) 100%
+    );
+    filter: blur(4rem);
+    /* border-top: solid hsl(var(--overlay-bkg-border)) 1px; */
+  }
 
   & a {
     color: hsl(var(--text-dark));
     transition: color 0.3s ease;
 
+    & .hint {
+      transition: color 0.3s ease;
+    }
+
+    &:nth-child(2) .hint {
+      color: hsl(var(--green) 30 45);
+    }
+
+    &:nth-child(3) .hint {
+      color: hsl(var(--blue) 30 45);
+    }
+
     &:hover {
       color: hsl(var(--text));
+
+      &:nth-child(2) .hint {
+        color: hsl(var(--green) 60 60);
+      }
+
+      &:nth-child(3) .hint {
+        color: hsl(var(--blue) 60 66);
+      }
     }
   }
 
@@ -135,16 +171,18 @@ footer {
     gap: 0.127rem;
     color: hsl(var(--text-dark));
 
-    & > p { margin-bottom: 0.2rem }
+    & > p {
+      margin-bottom: 0.2rem;
+    }
 
-    & > a { text-decoration: none }
+    & > a {
-
+      text-decoration: none;
-    & .hint {
-      color: hsl(var(--text-darker));
     }
   }
 
-  & .links { justify-self: flex-end }
+  & .links {
+    justify-self: flex-end;
+  }
 
   & .socials {
     display: flex;
@@ -152,7 +190,9 @@ footer {
     align-items: flex-start;
     font-size: 2.5rem;
 
-    & a { display: flex }
+    & a {
+      display: flex;
+    }
   }
 }
 
@@ -163,9 +203,13 @@ footer {
 }
 
 @media (min-width: 65rem) {
-  .toc-collapsed-spacer { display: none }
+  .toc-collapsed-spacer {
+    display: none;
+  }
 }
 
 @media (min-width: 85rem) {
-  .nav-collapsed-spacer { display: none }
+  .nav-collapsed-spacer {
+    display: none;
+  }
 }