starlight-theme-bejamas 0.1.15 → 0.1.16

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # starlight-theme-bejamas
 
+## 0.1.16
+
+### Patch Changes
+
+- [#78](https://github.com/bejamas/ui/pull/78) [`a2d6526`](https://github.com/bejamas/ui/commit/a2d6526f3c6e205d1ccd219665afef299263db9c) Thanks [@thomkrupa](https://github.com/thomkrupa)! - improve mobile design
+
 ## 0.1.15
 
 ### Patch Changes

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "starlight-theme-bejamas",
   "author": "Bejamas",
-  "version": "0.1.15",
+  "version": "0.1.16",
   "license": "MIT",
   "description": "A Starlight theme using bejamas/ui",
   "type": "module",

package/src/overrides/Header.astro

@@ -46,7 +46,7 @@ const shouldRenderNav = options.nav && options.nav.length > 0;
   <div class="sl-flex sl-bejamas-header-search sl-justify-end print:hidden">
     {shouldRenderSearch && <Search />}
   </div>
-  <div class="sl-hidden md:sl-flex print:hidden right-group">
+  <div class="header-desktop-right print:hidden right-group">
     <div class="sl-flex social-icons">
       <SocialIcons />
     </div>
@@ -81,10 +81,18 @@ const shouldRenderNav = options.nav && options.nav.length > 0;
       display: none;
     }
 
-    @media (min-width: 50rem) {
+    .header-desktop-right {
+      display: none;
+    }
+
+    @media (min-width: 64rem) {
       .sl-bejamas-main-nav {
         display: block;
       }
+
+      .header-desktop-right {
+        display: flex;
+      }
     }
 
     .sl-justify-end {

package/src/overrides/PageFrame.astro

@@ -3,17 +3,22 @@ import MobileMenuToggle from "virtual:starlight/components/MobileMenuToggle";
 
 const { hasSidebar } = Astro.locals.starlightRoute;
 const { template } = Astro.locals.starlightRoute.entry.data;
+
+// Splash templates disable Starlight's sidebar by default, but we still want
+// the mobile menu toggle there to expose docs/components navigation.
+const shouldRenderSidebarNav = hasSidebar || template === "splash";
+const isSplashTemplate = template === "splash";
 ---
 
-<div class="page sl-flex">
+<div class:list={["page sl-flex", shouldRenderSidebarNav && "page-has-sidebar-nav"]}>
   <header class="header">
     <slot name="header" />
     <div class="fade"></div>
   </header>
   {
-    hasSidebar && (
+    shouldRenderSidebarNav && (
       <nav
-        class="sidebar print:hidden"
+        class:list={["sidebar print:hidden", isSplashTemplate && "sidebar-splash"]}
         aria-label={Astro.locals.t("sidebarNav.accessibleLabel")}
       >
         <MobileMenuToggle />
@@ -26,6 +31,74 @@ const { template } = Astro.locals.starlightRoute.entry.data;
     )
   }
 
+  {
+    isSplashTemplate && (
+      <script is:inline>
+        (() => {
+          const installReset = () => {
+            const nav = document.querySelector("nav.sidebar-splash");
+            if (!(nav instanceof HTMLElement)) return () => {};
+
+            const pane = nav.querySelector("#starlight__sidebar");
+            const toggle = nav.querySelector("starlight-menu-button");
+
+            if (!(pane instanceof HTMLElement)) return () => {};
+
+            const resetToTop = () => {
+              pane.scrollTop = 0;
+            };
+
+            // Avoid opening splash menus at a persisted offset.
+            resetToTop();
+
+            if (!(toggle instanceof HTMLElement)) return () => {};
+
+            const onToggleChange = () => {
+              if (toggle.getAttribute("aria-expanded") === "true") {
+                requestAnimationFrame(resetToTop);
+              }
+            };
+
+            const onToggleClick = () => {
+              requestAnimationFrame(onToggleChange);
+            };
+
+            toggle.addEventListener("click", onToggleClick);
+
+            const observer = new MutationObserver(onToggleChange);
+            observer.observe(toggle, {
+              attributes: true,
+              attributeFilter: ["aria-expanded"],
+            });
+
+            return () => {
+              toggle.removeEventListener("click", onToggleClick);
+              observer.disconnect();
+            };
+          };
+
+          let cleanup = installReset();
+
+          const onAstroPageLoad = () => {
+            cleanup();
+            cleanup = installReset();
+          };
+
+          document.addEventListener("astro:page-load", onAstroPageLoad);
+
+          addEventListener(
+            "pagehide",
+            () => {
+              cleanup();
+              document.removeEventListener("astro:page-load", onAstroPageLoad);
+            },
+            { once: true },
+          );
+        })();
+      </script>
+    )
+  }
+
   <div class="main-frame">
     {
       template === "splash" ? (
@@ -89,13 +162,14 @@ const { template } = Astro.locals.starlightRoute.entry.data;
       background-color: var(--background);
     }
 
-    @media (min-width: 72rem) {
+    @media (min-width: 64rem) {
       .header {
         background-color: transparent;
       }
     }
 
-    :global([data-has-sidebar]) .header {
+    :global([data-has-sidebar]) .header,
+    .page-has-sidebar-nav .header {
       padding-inline-end: calc(
         var(--sl-nav-gap) + var(--sl-nav-pad-x) + var(--sl-menu-button-size)
       );
@@ -109,8 +183,17 @@ const { template } = Astro.locals.starlightRoute.entry.data;
       inset-inline-start: 0;
       width: 100%;
       background-color: var(--background);
-      overflow-y: auto;
+      height: 100svh;
+      overflow: scroll;
+      overflow-y: scroll;
+      overflow-x: hidden;
       scrollbar-width: none;
+      scroll-behavior: auto;
+      -webkit-overflow-scrolling: touch;
+      overscroll-behavior: contain;
+      overscroll-behavior-y: contain;
+      top: 0;
+      padding-top: calc(var(--spacing) * 18);
     }
 
     :global([aria-expanded="true"]) ~ .sidebar-pane {
@@ -155,7 +238,7 @@ const { template } = Astro.locals.starlightRoute.entry.data;
       }
     }
 
-    .main-frame-inner::before,
+    /* .main-frame-inner::before,
     .main-frame-inner::after {
       content: "";
       position: absolute;
@@ -175,10 +258,11 @@ const { template } = Astro.locals.starlightRoute.entry.data;
 
     .main-frame-inner::after {
       right: -1px;
-    }
+    } */
 
-    @media (min-width: 50rem) {
-      :global([data-has-sidebar]) .header {
+    @media (min-width: 64rem) {
+      :global([data-has-sidebar]) .header,
+      .page-has-sidebar-nav .header {
         padding-inline-end: var(--sl-nav-pad-x);
       }
       .sidebar-pane {
@@ -187,6 +271,11 @@ const { template } = Astro.locals.starlightRoute.entry.data;
         background-color: var(--sl-color-bg-sidebar);
         border-inline-end: 1px solid var(--sl-color-hairline-shade);
       }
+
+      /* Keep splash templates desktop layout unchanged; only mobile gets menu panel. */
+      .sidebar-splash .sidebar-pane {
+        display: none;
+      }
     }
   }
 </style>

package/src/overrides/Sidebar.astro

@@ -4,12 +4,23 @@ import SidebarPersister from "@astrojs/starlight/components/SidebarPersister.ast
 import SidebarSublist from "@astrojs/starlight/components/SidebarSublist.astro";
 
 const { sidebar } = Astro.locals.starlightRoute;
+const { template } = Astro.locals.starlightRoute.entry.data;
+const isSplashTemplate = template === "splash";
 ---
 
-<SidebarPersister>
-  <div class="fade"></div>
-  <SidebarSublist sublist={sidebar} />
-</SidebarPersister>
+{
+  isSplashTemplate ? (
+    <>
+      <div class="fade"></div>
+      <SidebarSublist sublist={sidebar} />
+    </>
+  ) : (
+    <SidebarPersister>
+      <div class="fade"></div>
+      <SidebarSublist sublist={sidebar} />
+    </SidebarPersister>
+  )
+}
 
 <div class="md:sl-hidden">
   <MobileMenuFooter />

package/src/styles/theme.css

@@ -3,17 +3,36 @@
 @import "@fontsource-variable/inter/index.css";
 
 @layer bejamas {
-  @media (min-width: 50rem) {
+  html {
+    background-color: var(--sl-page-background);
+  }
+
+  @media (min-width: 64rem) {
     :root::after {
       content: "";
       position: fixed;
       inset: 0;
       right: calc(var(--spacing) * 6);
-      background: linear-gradient(
-        var(--sl-page-background) 49.99%,
-        var(--sl-main-frame-inner-background) 50%
-      );
+      background:
+        linear-gradient(
+            to bottom,
+            transparent 50%,
+            var(--sl-main-frame-inner-border) 50%
+          )
+          left / 1px 100% no-repeat,
+        linear-gradient(
+            to bottom,
+            transparent 50%,
+            var(--sl-main-frame-inner-border) 50%
+          )
+          right / 1px 100% no-repeat,
+        linear-gradient(
+          to bottom,
+          var(--sl-page-background) 49.99%,
+          var(--sl-main-frame-inner-background) 50%
+        );
       z-index: -1;
+      left: var(--sl-sidebar-width);
     }
   }
 
@@ -107,12 +126,12 @@
     --sl-main-frame-inner-background: color-mix(
       in oklab,
       var(--muted) 30%,
-      transparent
+      var(--background)
     );
     --sl-main-frame-inner-border: color-mix(
       in oklab,
       var(--border) 50%,
-      transparent
+      var(--background)
     );
   }
 }
@@ -199,6 +218,32 @@
     margin-bottom: 1px;
   }
 
+  @media (max-width: 49.99rem) {
+    .sidebar-pane .sidebar-content {
+      --sl-sidebar-item-padding-inline: 0.5rem;
+      padding-top: calc(var(--spacing) * 3);
+    }
+
+    .sidebar-content::before {
+      display: none;
+    }
+
+    .sidebar-content .large {
+      font-size: var(--sl-text-xl);
+      line-height: 1.25;
+    }
+
+    .sidebar-content ul ul a > span {
+      font-size: var(--sl-text-lg);
+      line-height: 1.35;
+    }
+
+    .sidebar-content .group-label > span {
+      font-size: var(--sl-text-sm);
+      font-weight: 500;
+    }
+  }
+
   .right-sidebar-container {
     max-width: 20rem;
     margin-right: 0;
@@ -691,6 +736,16 @@
     font-size: calc(var(--spacing) * 8);
   }
 
+  @media (min-width: 50rem) and (max-width: calc(64rem - 0.01rem)) {
+    starlight-menu-button button {
+      display: flex;
+    }
+
+    [data-mobile-menu-expanded] {
+      overflow: hidden;
+    }
+  }
+
   #starlight__on-this-page--mobile {
     /* border-top: 1px solid var(--border); */
     border-bottom: 0;