starlight-theme-bejamas 0.1.4 → 0.1.6

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # starlight-theme-bejamas
 
+## 0.1.6
+
+### Patch Changes
+
+- [#25](https://github.com/bejamas/ui/pull/25) [`001ddca`](https://github.com/bejamas/ui/commit/001ddcae75e510cd5f2afca4e24af6412bf84ed9) Thanks [@thomkrupa](https://github.com/thomkrupa)! - improve source preview
+
+## 0.1.5
+
+### Patch Changes
+
+- [#19](https://github.com/bejamas/ui/pull/19) [`bd4c3a0`](https://github.com/bejamas/ui/commit/bd4c3a0b596718a25aefaf7b30d185d30693618a) Thanks [@thomkrupa](https://github.com/thomkrupa)! - improve page footer ui
+
 ## 0.1.4
 
 ### Patch Changes

package/package.json

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

package/src/overrides/Footer.astro

@@ -6,19 +6,20 @@ import config from "virtual:starlight/user-config";
 ---
 
 <footer class="sl-flex footer-wide">
-  <div class="meta sl-flex">
-    <EditLink />
-    <LastUpdated />
-  </div>
+  <div class="meta"><EditLink /><LastUpdated /></div>
   <Pagination />
   <div class="fade"></div>
 </footer>
 
 {
   config.credits && (
-    <a class="kudos sl-flex footer-wide" href="https://ui.bejamas.com">
-      Built at Bejamas
-    </a>
+    <div class="kudos sl-flex footer-wide">
+      <p>
+        Built at <a href="https://bejamas.com?utm_source=ui">Bejamas</a>. The
+        source code is available on{" "}
+        <a href="https://github.com/bejamas/ui">GitHub</a>.
+      </p>
+    </div>
   )
 }
 
@@ -62,6 +63,10 @@ import config from "virtual:starlight/user-config";
       margin-top: 3rem;
       font-size: var(--sl-text-sm);
       color: var(--sl-color-gray-3);
+      display: flex;
+    }
+
+    .meta:empty {
       display: none;
     }
 
@@ -74,15 +79,19 @@ import config from "virtual:starlight/user-config";
       gap: 0.5em;
       margin-block: 0;
       font-size: var(--sl-text-xs);
-      text-decoration: none;
       color: var(--muted-foreground);
       justify-content: center;
       padding-top: calc(var(--spacing) * 12);
-      padding-bottom: calc(var(--spacing) * 10);
+      padding-bottom: 0;
       background-color: var(--background);
       justify-content: center;
     }
-    .kudos:hover {
+    .kudos a {
+      color: var(--muted-foreground);
+      text-decoration: underline;
+      text-underline-offset: 0.1875rem;
+    }
+    .kudos a:hover {
       color: var(--foreground);
     }
 

package/src/overrides/Pagination.astro

@@ -7,7 +7,7 @@ const { prev, next } = pagination;
 const isRtl = dir === "rtl";
 ---
 
-<div class="sl-flex sl-justify-between print:hidden z-10" dir={dir}>
+<div class="print:hidden z-10 pagination-links" dir={dir}>
   {
     prev && (
       <Button as="a" href={prev.href} rel="prev" variant="outline">
@@ -29,15 +29,17 @@ const isRtl = dir === "rtl";
 <style>
   @layer starlight.core {
     .pagination-links {
-      display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
+      display: flex;
+      justify-content: flex-end;
       gap: 1rem;
+      margin-top: calc(var(--spacing) * 5);
     }
 
     [rel="next"] {
       justify-content: end;
       text-align: end;
       flex-direction: row-reverse;
+      margin-left: auto;
     }
 
     svg {

package/src/styles/theme.css

@@ -413,16 +413,102 @@
   }
 
   .sl-bejamas-component-preview {
-    min-height: 450px;
+    min-height: calc(var(--spacing) * 72);
     padding: 1rem;
     border: 1px solid var(--border);
-    border-radius: 0.5rem;
+    border-radius: var(--radius-md) var(--radius-md) 0 0;
     display: flex;
     justify-content: center;
     align-items: center;
     background-color: var(--background);
   }
 
+  .sl-bejamas-component-preview + .expressive-code {
+    margin-top: 0;
+  }
+
+  .sl-bejamas-component-preview + .expressive-code pre {
+    border-radius: 0;
+    border: 0;
+  }
+
+  .sl-bejamas-component-preview + .expressive-code {
+    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
+    border: 1px solid var(--border);
+    border-top: 0;
+  }
+
+  .expressive-code {
+    border-radius: var(--radius-lg);
+  }
+
+  .ec-collapse__toggle {
+    font-family: var(--font-sans);
+    background-color: var(--background);
+    color: var(--muted-foreground);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-lg);
+    padding: calc(var(--spacing) * 2) calc(var(--spacing) * 3);
+    font-size: var(--text-sm);
+    cursor: pointer;
+    font-weight: 500;
+    transition: all 0.15s ease-out;
+    bottom: 50%;
+    transform: translateY(50%) translateX(-50%);
+    height: calc(var(--spacing) * 8.5);
+  }
+
+  .expressive-code .ec-collapse.ec-collapse--collapsed .ec-collapse__content {
+    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
+  }
+
+  .ec-collapse__gradient {
+    height: 100%;
+  }
+
+  .ec-collapse.ec-collapse--collapsed::after {
+    content: "";
+    --blur: 4px;
+    --stop: 50%;
+    --height: 100%;
+    position: absolute;
+    pointer-events: none;
+    width: 100%;
+    height: var(--height);
+    user-select: none;
+    -webkit-user-select: none;
+    left: 0;
+    -webkit-backdrop-filter: blur(var(--blur));
+    backdrop-filter: blur(var(--blur));
+    background: linear-gradient(to bottom, transparent, var(--background));
+    mask-image: linear-gradient(
+      to top,
+      var(--background) var(--stop),
+      transparent
+    );
+    bottom: 0;
+    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
+  }
+
+  .ec-collapse.ec-collapse--expanded .ec-collapse__toggle {
+    display: none;
+  }
+
+  .ec-collapse.ec-collapse--expanded {
+    max-height: calc(var(--spacing) * 72);
+    overflow: auto;
+    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
+  }
+
+  .ec-collapse__toggle:hover {
+    background-color: var(--muted);
+    color: var(--foreground);
+  }
+
+  .ec-collapse__icon {
+    display: none;
+  }
+
   .sl-markdown-content ul:not(:where(.not-content *)) {
     list-style: disc;
     padding-left: 1rem;