improve overlay design and fix footer

To fix:
- css split between nav and nav-tree repeated due to mobile
- right overlay needs padding adjustments and resizing for mobile

src/components/Header.astro

@@ -43,23 +43,19 @@ const { headings } = Astro.props;
 ---
 <div class="header">
   <div class="header-item header-left">
-    <h3 class="header-title">
-      <a href="/">Quickshell</a>
-    </h3>
     {url.length > 2 ?
       <Nav mobile={true}/>
+      <div class="nav-collapsed-spacer header-spacer"/>
     : null}
-    <div class="spacer-mobile">|</div>
+    <h3 class="header-title">
-    <h3 class="header-title mobile">
       <a href="/">Quickshell</a>
     </h3>
   </div>
   <div class="header-item header-right">
     <Search/>
-    <div class="spacer-mobile">|</div>
+    <div class="header-spacer"/>
-    <div class="spacer-desktop">|</div>
     <ThemeSelect client:load />
-    <div class="spacer-mobile">|</div>
+    <div class="toc-collapsed-spacer header-spacer"/>
     {url.length > 2 ?
       <TOC headings={headings} types={sidebarData} mobile={true}/>
     : null}

src/styles/css-config/animations.css

@@ -57,26 +57,6 @@
   }
 }
 
-@keyframes rotateIn {
-  from {
-    transform: rotate(0deg);
-  }
-
-  to {
-    transform: rotate(180deg);
-  }
-}
-
-@keyframes rotateOut {
-  from {
-    transform: rotate(180deg);
-  }
-
-  to {
-    transform: rotate(0deg);
-  }
-}
-
 @keyframes rotateIn90 {
   from {
     transform: rotate(0deg);

src/styles/css-config/base.css

@@ -52,6 +52,8 @@ 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-border: var(--blue) 10 75;
 }
 
 html.dark {
@@ -93,6 +95,8 @@ 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-border: var(--blue) 17 13;
 }
 
 * {
@@ -103,7 +107,8 @@ html.dark {
 }
 
 body {
-  min-height: 100svh;
+  height: 100%;
-  height: max-content;
   width: 100%;
+  display: flex;
+  flex-direction: column;
 }

src/styles/docs/docs.css

@@ -3,7 +3,15 @@
 
 .docslayout-root {
   margin-inline: 0.618rem;
-  margin-top: 4rem;
+  margin-top: 3.5rem;
+  display: flex;
+  justify-content: center;
+  flex-direction: row;
+  flex-grow: 1;
+}
+
+.docslayout-inner {
+  flex-grow: 1;
 }
 
 .docs {
@@ -11,10 +19,6 @@
   flex-direction: row;
 }
 
-.docslayout-inner {
-  min-height: 100svh;
-}
-
 .docs-content {
   flex-grow: 1;
 
@@ -33,13 +37,8 @@
   }
 }
 
-.spacer-desktop {
-  display: none;
-}
-
 .c-breadcrumbs {
   --color-link-breadcrumbs: hsl(var(--accent-600));
-  margin-top: 1.056rem;
   margin-bottom: 0.318rem;
   max-width: 100svw;
 }
@@ -100,19 +99,13 @@ ul {
   }
 
   .c-breadcrumbs {
+    margin-top: 1.056rem;
     margin-inline: 1.272rem;
   }
 }
 
 @media (min-width: 85rem) {
-  .docslayout-root {
-    display: flex;
-    justify-content: center;
-    flex-direction: row;
-  }
-
   .docslayout-inner {
-    flex-grow: 1;
     max-width: 80rem;
   }
 

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

@@ -40,10 +40,15 @@
   height: 24px;
   border-radius: 50%;
   margin-left: 3px;
+  transition: transform 250ms ease-in-out;
 
   &:hover {
     background-color: hsl(var(--nav-indicator-bkg));
   }
+
+  &[data-state="open"] {
+    transform: rotate(180deg);
+  }
 }
 
 .nav-shevron {
@@ -54,18 +59,10 @@ html.dark .nav-shevron {
   color: white;
 }
 
-[data-scope="accordion"][data-part="item-indicator"][data-state="open"] {
-  animation: rotateIn 250ms ease-in-out forwards;
-}
-
-[data-scope="accordion"][data-part="item-indicator"][data-state="closed"] {
-  animation: rotateOut 250ms ease-in-out;
-}
-
 [data-scope="accordion"][data-part="item-content"] {
   --height: 709;
   margin-block: 0.175rem;
-  margin-left: 1.4rem;
+  margin-left: 1.6rem;
 
   & .arktree-item,
   [data-part="item-content"]>div {

src/styles/docs/nav/nav.css

@@ -13,17 +13,11 @@
   max-height: 500px;
   scrollbar-width: none;
   -ms-overflow-style: none;
-  --width: 25rem;
 
   &::-webkit-scrollbar {
     display: none;
   }
 
-  & div {
-    height: max-content;
-    width: 100%;
-  }
-
   &:hover {
     cursor: pointer;
   }
@@ -33,100 +27,110 @@
     z-index: 11;
     overflow: hidden;
     top: 2.6rem;
-    left: -1rem;
+    left: calc(-3rem + -80svw);
-    width: 0;
     height: calc(100svh - 2.5rem);
-    font-size: 1rem;
     scrollbar-width: none;
+    font-size: 1.2rem;
     -ms-overflow-style: none;
+    background-color: hsl(var(--overlay-bkg));
+    border-right: solid hsl(var(--overlay-bkg-border)) 1px;
 
     &::-webkit-scrollbar {
       display: none;
     }
 
     transition:
-      width 0.3s ease,
+      left 0.3s ease,
-      height 0.3s ease,
-      background-color 0.3s ease,
-      backdrop-filter 0.3s ease,
       padding 0.3s ease;
 
     &.shown {
-      width: var(--width);
-      background-color: hsl(var(--bg-900) / 0.6);
-      backdrop-filter: blur(3px) saturate(180%);
       display: flex;
       flex-direction: column;
-      align-items: center;
+      left: -1rem;
     }
 
     & .navtree {
-      padding: 1rem;
+      /* lines up with non overlay nav */
+      padding: 0.5rem 0.618rem;
+
       height: 100%;
-      width: 100%;
+      width: 80svw;
-      overflow-x: hidden;
+      box-sizing: content-box;
       overflow-y: scroll;
-      margin-bottom: 4rem;
+      scrollbar-width: none;
-      padding-left: 1rem;
+      -ms-overflow-style: none;
+      margin-bottom: 1rem;
       text-wrap: nowrap;
 
-      & [data-part="item-trigger"] {
+      & [data-part="item-indicator"] {
-        max-width: 90%;
+        margin-left: 1rem;
-      }
+        margin-right: 0.8rem;
-
+        height: 2rem;
-      & [data-part="item"] {
+        width: 2rem;
-        margin-left: unset;
-        display: flex;
-        flex-direction: column;
-        align-items: flex-start;
-        padding-right: 0;
-
-        & [data-part="item-content"] {
-          & [data-part="item-trigger"] {
-            margin-left: 1em;
-
-            & p {
-              text-align: left;
-            }
-          }
-
-          & [data-part="item-content"] {
-            max-width: 80%;
-            margin-left: 3.33em;
-
-            & > div {
-              display: grid;
-
-              & a {
-                display: grid;
-                justify-items: start;
-                align-items: center;
-                min-height: 100%;
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
-@media (max-width: 40rem) {
-  .nav-toggle {
-    --width: 100svw;
 
         & svg {
           height: max-content;
           width: 100%;
         }
-
-    & .navtree {
-      & [data-part="item-trigger"] {
-        min-height: 3em;
       }
 
+      & [data-part="item-trigger"] {
+        min-height: 3em;
+        font-size: 1.2rem;
+      }
+
+      & [data-part="item-content"] {
+        margin-left: 3.7rem;
+      }
+
+      & [data-part="item"] {
         & [data-part="item-content"] > div {
-        min-height: 4em;
+            min-height: 3em;
+            & > p { margin: auto 0; }
+        }
+      }
+    }
+  }
+}
+
+@media (min-width: 40rem) {
+  .nav-toggle {
+    .nav-items {
+      font-size: 1rem;
+      top: 2.5rem;
+      left: -24rem;
+
+      & .navtree {
+        width: 21rem;
+      }
+
+      & .navtree {
+        & [data-part="item-indicator"] {
+          margin-left: 0.2rem;
+          margin-right: 0rem;
+          height: 1.5rem;
+          width: 1.5rem;
+
+          & svg {
+            height: unset;
+            width: unset;
+          }
+        }
+
+        & [data-part="item-trigger"] {
+          min-height: 2.2rem;
+          font-size: 1rem;
+        }
+
+        & [data-part="item-content"] {
+          margin-left: 1.6rem;
+        }
+
+        & [data-part="item"] {
+          & [data-part="item-content"] > div {
+            min-height: 2.2rem;
+          }
+        }
       }
     }
   }
@@ -141,10 +145,10 @@
     display: block;
     width: 21rem;
     position: sticky;
-    top: 4rem;
+    top: 3.5rem;
     flex-shrink: 0;
-    overflow: scroll;
+    overflow-y: scroll;
-    max-height: calc(100svh - 8rem);
+    max-height: calc(100svh - 4rem);
     scrollbar-width: none;
     -ms-overflow-style: none;
     z-index: 10;
@@ -153,5 +157,6 @@
   .navtree {
     width: 100%;
     z-index: 1;
+    margin: 0.5rem 0;
   }
 }

src/styles/docs/toc/toc.css

@@ -28,7 +28,7 @@
 }
 
 .toc-toggle {
-  --width: 100svw;
+  --width: 80svw;
   display: block;
   position: unset;
   height: 24px;
@@ -51,32 +51,27 @@
 
   & .toc-mobile {
     position: absolute;
-    top: 2.6rem;
+    top: 2.5rem;
     right: -1rem;
     width: 0;
-    height: max(min(100svh, 800px), calc(100svh - 8rem));
+    height: calc(100svh - 3.5rem);
-    font-size: 0.745rem;
+    font-size: 1rem;
-    font-weight: 600;
     scrollbar-width: none;
     -ms-overflow-style: none;
+    background-color: hsl(var(--overlay-bkg));
+    border-left: solid hsl(var(--overlay-bkg-border)) 1px;
 
     &::-webkit-scrollbar {
       display: none;
     }
 
-    transition: width 0.3s ease,
+    transition:
-    height 0.3s ease,
+      width 0.3s ease,
-    background-color 0.3s ease,
-    backdrop-filter 0.3s ease,
       padding 0.3s ease;
 
     &.shown {
       overflow-y: scroll;
-      padding: 0.3rem;
       width: var(--width);
-      height: max(min(100svh, 800px), calc(100svh - 8rem));
-      background-color: hsl(var(--bg-900) / 0.6);
-      backdrop-filter: blur(3px) saturate(180%);
       display: flex;
       flex-direction: column;
       align-items: center;
@@ -95,6 +90,11 @@
 }
 
 @media (min-width: 65rem) {
+  .toc-wrapper {
+    width: 19rem;
+    flex-shrink: 0;
+  }
+
   .toc-wrapper-mobile {
     display: none;
   }
@@ -104,9 +104,9 @@
     background-color: transparent;
     display: block;
     position: sticky;
-    top: 4rem;
+    top: 3.5rem;
-    width: max-content;
+    width: 19rem;
-    max-height: calc(100svh - 8rem);
+    max-height: calc(100svh - 4rem);
     overflow-y: scroll;
     z-index: 9;
     margin-right: 1.272rem;
@@ -140,9 +140,3 @@
     }
   }
 }
-
-@media (min-width: 85rem) {
-  .toc-wrapper {
-    width: 19rem;
-  }
-}

src/styles/global.css

@@ -63,14 +63,16 @@ html.dark {
   position: fixed;
   top: 0;
   width: 100%;
-  z-index: 10;
+  z-index: 12;
   display: flex;
   align-items: center;
   height: 3.5rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
 }
 
 .header-title {
-  display: none;
+  display: block;
   font-size: 1.614em;
   font-weight: 700;
   line-height: 1.272;
@@ -90,17 +92,17 @@ html.dark {
 
 .header-left {
   justify-content: flex-start;
-  padding-left: 1rem;
 }
 
 .header-right {
   justify-content: flex-end;
-  padding-right: 1rem;
 }
 
-.spacer-mobile {
+.header-spacer {
-  font-size: 1.374rem;
+  height: 1.5rem;
-  color: hsla(var(--white) 40 50 / 0.3);
+  width: 2px;
+  background-color: hsla(var(--white) 40 50 / 0.3);
+  display: block;
 }
 
 .theme-toggle {
@@ -115,7 +117,6 @@ html.dark {
 footer {
   position: sticky;
   bottom: -3.5rem;
-  z-index: 10;
   width: 100%;
   height: 3.5rem;
   font-size: min(1.112rem, max(1svw, 0.8rem));
@@ -190,23 +191,10 @@ footer {
   }
 }
 
+@media (min-width: 65rem) {
+  .toc-collapsed-spacer { display: none }
+}
+
 @media (min-width: 85rem) {
-  .header-title {
+  .nav-collapsed-spacer { display: none }
-    display: block;
-  }
-
-  .header-title.mobile {
-    display: none;
-  }
-
-  .menu-toggle,
-  .spacer-mobile {
-    display: none;
-  }
-
-  .spacer-desktop {
-    display: block;
-    font-size: 1.374rem;
-    color: hsla(var(--white) 40 50 / 0.3);
-  }
 }