various small fixes

- light theme footer css
- fixed l/r overlay css
- fixed discolored generics
- fixed scroll margin
- elements selected by url now display as hovered
- fixed top padding in mobile layout
- fixed padding for import string on type pages
- fixed padding on module listing pages
- fixed link clickable areas on left nav

src/components/navigation/sidebars/nav/Tree.tsx

@@ -102,13 +102,11 @@ export const Tree: Component<TreeProps> = props => {
                                   : ""
                               }
                             >
-                              <p>
+                              <a
-                                <a
+                                href={`/docs/types/${submodule.type}/${submodule.name}`}
-                                  href={`/docs/types/${submodule.type}/${submodule.name}`}
+                              >
-                                >
+                                {submodule.name}
-                                  {submodule.name}
+                              </a>
-                                </a>
-                              </p>
                             </div>
                           )}
                         </For>

src/components/type/Properties.astro

@@ -41,8 +41,11 @@ const { propsKeys, propsData } = Astro.props;
             <Tag client:idle/>
             { item }<span class="type-datatype">:&nbsp;<a
               href={typeLink}
-              target="_blank"
+            >{ linkText }</a>{genericType &&
-            >{ linkText }</a>{genericType && (<a href={genericTypeLink} class="type-datatype generic-type">&lt;{genericType}&gt;</a>)}</span>
+            (<span class="type-datatype">&lt;</span><a
+              href={genericTypeLink}>{genericType}</a
+              ><span class="type-datatype">&gt;</span>
+            )}</span>
           </p>
           {
             propData.flags && propData.flags.length > 0 ? (

src/pages/docs/types/[type]/[name].astro

@@ -57,9 +57,8 @@ const details = data.details
       <hr />
       <h2 class="typedocs-title" data-pagefind-weight="10">
         {route.name}:
-          {data.super ? (
+          {data.super?.name ? (
             <a
-              target="_blank"
               href={superLink!}
               data-pagefind-ignore
             >
@@ -70,11 +69,11 @@ const details = data.details
           )
           }
       </h2>
+      <code class="type-module" data-pagefind-ignore>import {data.module}</code>
       {
         route && data ? (
           <section class="typedocs-data typedata">
             <subheading class="typedocs-subheading">
-              <code class="type-module" data-pagefind-ignore>import {data.module}</code>
               {data.flags ? (
                 <div class="type-flags" data-pagefind-ignore>{data.flags.map(flag => (
                   <span class="type-flag">

src/pages/docs/types/[type]/index.astro

@@ -34,21 +34,26 @@ const details = route.data.details
   title={route.type + " Type Documentation"}
   description="Quickshell Type Documentation"
 >
-  <hr />
+  <div class="docs-content">
-  <h2 class="typedocs-title">{route.type[0].toUpperCase() + route.type.slice(1)} Definitions</h2>
+    <hr />
-  <div class="root-nav" data-pagefind-ignore>
+    <h2 class="typedocs-title">{route.type[0].toUpperCase() + route.type.slice(1)} Definitions</h2>
-    {route.data.contains!.map((childName:string) => 
+    <section>
-      (
+      <span>{route.data.description}</span>
-      <div class="root-nav-entry">
+      <div class="root-nav" data-pagefind-ignore>
-        <a class="root-nav-link" href={`/docs/types/${route.data.module === "index"
+        {route.data.contains!.map((childName:string) => 
-        ? route.data.name
+          (
-        : route.data.module}/${childName}`}>
+          <div class="root-nav-entry">
-        {childName}
+            <a class="root-nav-link" href={`/docs/types/${route.data.module === "index"
-        </a>
+            ? route.data.name
-        <span class="root-nav-desc">{children[childName] || "See Configuration"}</span>
+            : route.data.module}/${childName}`}>
+            {childName}
+            </a>
+            <span class="root-nav-desc">{children[childName] || "See Configuration"}</span>
+          </div>
+          )
+        )}
       </div>
-      )
+      {details && <span class="parsedMD" set:html={details}/>}
-    )}
+    </section>
   </div>
-  {details ? <span class="parsedMD" set:html={details}/> : (<span class="toparse">{route.data.description}</span>)}
 </DocsLayout>

src/styles/css-config/base.css

@@ -56,8 +56,10 @@ html {
   --nav-selected-bkg: var(--blue) 100 90;
   --nav-selected-text: var(--blue) 60 60;
   --nav-indicator-bkg: var(--blue) 45 80;
-  --overlay-bkg: var(--blue) 10 93;
+  --overlay-bkg: var(--blue) 25 93;
   --overlay-bkg-border: var(--blue) 10 75;
+  --footer-bkg: var(--blue) 32 92;
+  --footer-bkg-border: var(--blue) 32 84;
 }
 
 html.dark {
@@ -103,13 +105,10 @@ 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) 66 7;
+  --overlay-bkg: var(--blue) 75 5;
-  --overlay-bkg-1: var(--blue) 66 9;
+  --overlay-bkg-border: var(--blue) 45 15;
-  --overlay-bkg-2: var(--blue) 60 12;
+  --footer-bkg: var(--blue) 66 5;
-  --overlay-bkg-green: var(--green) 66 7;
+  --footer-bkg-border: var(--blue) 75 21;
-  --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-types.css

@@ -5,16 +5,13 @@
   border-radius: 6px;
   border: 1px solid hsla(var(--blue) 10 15 / 0.6);
   margin-top: 1rem;
-  margin-inline: 1.272rem;
 
   & .root-nav-entry {
     position: relative;
     display: grid;
     grid-template-columns: 1fr;
-    grid-template-rows: 42px;
     text-wrap: pretty;
     padding: 0.5rem 1rem;
-    padding-top: 1.5rem;
 
     &:not(:last-child) {
       border-bottom: 1px solid hsla(var(--blue) 10 15 / 0.6);
@@ -239,7 +236,7 @@ html.dark .typeprops {
   & .typeprop-root {
     border: 1px solid hsla(var(--prop-color) / 0.3);
 
-    &:hover {
+    &:hover, &:target {
       border: 1px solid hsla(var(--prop-color) / 0.6);
     }
   }
@@ -281,7 +278,7 @@ html.dark .typefuncs {
   & .typefunc-root {
     border: 1px solid hsla(var(--func-color) / 0.3);
 
-    &:hover {
+    &:hover, &:target {
       border: 1px solid hsla(var(--func-color) / 0.6);
     }
   }
@@ -333,7 +330,7 @@ html.dark .typesignals {
   & .typesignal-root {
     border: 1px solid hsla(var(--signal-color) / 0.3);
 
-    &:hover {
+    &:hover, &:target {
       border: 1px solid hsla(var(--signal-color) / 0.6);
     }
   }
@@ -371,7 +368,7 @@ html.dark .typevariants {
   & .typevariant-root {
     border: 1px solid hsla(var(--var-color) / 0.3);
 
-    &:hover {
+    &:hover, &:target {
       border: 1px solid hsla(var(--var-color) / 0.6);
     }
   }
@@ -381,7 +378,7 @@ html.dark .typevariants {
   .root-nav {
     & .root-nav-entry {
       display: grid;
-      grid-template-columns: 0.70fr 1.30fr;
+      grid-template-columns: 0.60fr 1.40fr;
 
       & .root-nav-link {
         justify-self: start;
@@ -406,13 +403,7 @@ html.dark .typevariants {
 
       & .root-nav-desc {
         padding-left: 1rem;
-
+        border-left: 1px solid hsl(var(--blue) 10 15 / 0.6);
-        &::before {
-          content: "";
-          position: absolute;
-          inset: -1rem 0 0 0;
-          border-left: 1px solid hsla(var(--blue) 10 15 / 0.6);
-        }
       }
     }
   }
@@ -431,10 +422,6 @@ html.dark .typevariants {
 }
 
 @media (min-width: 85rem) {
-  .root-nav {
-    min-width: 45svw;
-  }
-
   .types-nav {
     display: block;
     position: fixed;

src/styles/docs/docs.css

@@ -40,6 +40,7 @@
 
 .c-breadcrumbs {
   --color-link-breadcrumbs: hsl(var(--accent-600));
+  margin-top: 0.5rem;
   margin-bottom: 0.318rem;
   max-width: 100svw;
 }

src/styles/docs/nav/nav-tree.css

@@ -82,10 +82,6 @@ html.dark .nav-shevron {
     &>a {
       width: 100%;
       margin-left: 0.2rem;
-
-      &:hover {
-        text-decoration: none;
-      }
     }
   }
 

src/styles/docs/nav/nav.css

@@ -32,8 +32,8 @@
     scrollbar-width: none;
     font-size: 1.2rem;
     -ms-overflow-style: none;
-    background: hsla(var(--blue) 75 5);
+    background: hsla(var(--overlay-bkg));
-    border-right: 1px solid hsl(var(--blue) 45 15);
+    border-right: 1px solid hsl(var(--overlay-bkg-border));
 
     &::-webkit-scrollbar {
       display: none;

src/styles/docs/toc/toc.css

@@ -59,7 +59,7 @@
     scrollbar-width: none;
     -ms-overflow-style: none;
     background-color: hsl(var(--overlay-bkg));
-    border-left: solid hsl(var(--overlay-bkg-border)) 1px;
+    border-left: 1px solid hsl(var(--overlay-bkg-border));
 
     &::-webkit-scrollbar {
       display: none;

src/styles/global.css

@@ -33,6 +33,11 @@ a {
   }
 }
 
+[id] {
+  /*offset for header*/
+  scroll-margin-top: 4rem;
+}
+
 html.dark {
   & .header {
     background-color: hsl(var(--secondary-900));
@@ -119,9 +124,8 @@ footer {
   padding: 1rem;
   overflow: hidden;
   flex-shrink: 0;
-  background: hsla(var(--blue) 66 5);
+  background: hsl(var(--footer-bkg));
 
-  /*border-top: 1px solid hsl(var(--bg-800));*/
   &::before {
     content: "";
     position: absolute;
@@ -132,7 +136,7 @@ footer {
     background: linear-gradient(
       90deg,
       transparent 0%,
-      hsl(var(--blue) 75 21) 50%,
+      hsl(var(--footer-bkg-border)) 50%,
       transparent 100%
     );
   }