starlight-theme-bejamas 0.1.16 → 0.1.17

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # starlight-theme-bejamas
 
+## 0.1.17
+
+### Patch Changes
+
+- [#80](https://github.com/bejamas/ui/pull/80) [`c3f2b3a`](https://github.com/bejamas/ui/commit/c3f2b3a2f94f8c60657e33bab49320a5d5258e11) Thanks [@thomkrupa](https://github.com/thomkrupa)! - fix shared splash layout bg
+
+- [#82](https://github.com/bejamas/ui/pull/82) [`043d0fa`](https://github.com/bejamas/ui/commit/043d0faa76a34f25620f7ad8bc30d8aa9be8e3be) Thanks [@thomkrupa](https://github.com/thomkrupa)! - fix sidebar margin
+
 ## 0.1.16
 
 ### Patch Changes

package/package.json

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

package/src/overrides/Header.astro

@@ -123,6 +123,11 @@ const shouldRenderNav = options.nav && options.nav.length > 0;
       :global(:root[data-has-sidebar]) {
         --__sidebar-pad: calc(2 * var(--sl-nav-pad-x));
       }
+      :global(.page-mobile-sidebar-only) .header {
+        --__sidebar-pad: 0rem;
+        display: flex;
+        grid-template-columns: none;
+      }
       :global(:root:not([data-has-toc])) {
         --__toc-width: 0rem;
       }

package/src/overrides/PageFrame.astro

@@ -10,7 +10,13 @@ const shouldRenderSidebarNav = hasSidebar || template === "splash";
 const isSplashTemplate = template === "splash";
 ---
 
-<div class:list={["page sl-flex", shouldRenderSidebarNav && "page-has-sidebar-nav"]}>
+<div
+  class:list={[
+    "page sl-flex",
+    shouldRenderSidebarNav && "page-has-sidebar-nav",
+    isSplashTemplate && "page-mobile-sidebar-only",
+  ]}
+>
   <header class="header">
     <slot name="header" />
     <div class="fade"></div>
@@ -99,7 +105,7 @@ const isSplashTemplate = template === "splash";
     )
   }
 
-  <div class="main-frame">
+  <div class:list={["main-frame", isSplashTemplate && "main-frame-splash"]}>
     {
       template === "splash" ? (
         <slot />
@@ -213,6 +219,11 @@ const isSplashTemplate = template === "splash";
         content: "";
         padding-bottom: 1px;
       }
+
+      .sidebar-pane {
+        padding-top: 0;
+        margin-top: margin-top: calc(var(--spacing) * 18);
+      }
     }
 
     .main-frame {
@@ -220,6 +231,18 @@ const isSplashTemplate = template === "splash";
       /* padding-inline-start: var(--sl-content-inline-start); */
     }
 
+    .main-frame-splash {
+      position: relative;
+      isolation: isolate;
+      --sl-splash-frame-top: calc(var(--spacing) * 8);
+      --sl-splash-frame-inline: 0;
+    }
+
+    .main-frame-splash > * {
+      position: relative;
+      z-index: 1;
+    }
+
     .main-frame-inner {
       position: relative;
       background-color: var(--sl-main-frame-inner-background);
@@ -238,6 +261,27 @@ const isSplashTemplate = template === "splash";
       }
     }
 
+    @media (min-width: 48rem) {
+      .main-frame-splash::before {
+        content: "";
+        position: absolute;
+        inset-inline: var(--sl-splash-frame-inline);
+        inset-block-start: var(--sl-splash-frame-top);
+        inset-block-end: 0;
+        border: 1px solid var(--sl-main-frame-inner-border);
+        border-bottom: 0;
+        border-radius: calc(var(--radius) + 12px) calc(var(--radius) + 12px) 0 0;
+        background-color: var(--sl-main-frame-inner-background);
+        pointer-events: none;
+        z-index: 0;
+      }
+
+      /* Pages with their own local splash frame keep full control. */
+      :global(.main-frame-splash:has(.page-bg))::before {
+        content: none;
+      }
+    }
+
     /* .main-frame-inner::before,
     .main-frame-inner::after {
       content: "";
@@ -261,6 +305,11 @@ const isSplashTemplate = template === "splash";
     } */
 
     @media (min-width: 64rem) {
+      .page-mobile-sidebar-only {
+        --sl-sidebar-width: 0;
+        --sl-content-inline-start: 0;
+      }
+
       :global([data-has-sidebar]) .header,
       .page-has-sidebar-nav .header {
         padding-inline-end: var(--sl-nav-pad-x);

package/src/overrides/PageTitle.astro

@@ -12,6 +12,7 @@ const isRtl = dir === "rtl";
   class:list={[
     "sl-bejamas-docs-title",
     entry.data.template === "splash" && "mt-10",
+    entry.data.template === "splash" && "px-0 sm:px-6 md:px-8",
   ]}
 >
   <div class="flex items-center">

package/src/styles/theme.css

@@ -32,8 +32,16 @@
           var(--sl-main-frame-inner-background) 50%
         );
       z-index: -1;
+      left: calc(var(--spacing) * 6);
+    }
+
+    :root[data-has-sidebar]::after {
       left: var(--sl-sidebar-width);
     }
+
+    :root[data-has-sidebar]:has(.page-mobile-sidebar-only)::after {
+      left: calc(var(--spacing) * 6);
+    }
   }
 
   .page {