@refrakt-md/skeleton 0.24.4 → 0.24.6

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@refrakt-md/skeleton",
   "description": "The structural cascade layer + layer-order contract every refrakt theme builds on — ships `@layer skeleton` and the `@layer skeleton, skin;` order declaration, plus the token-name contract",
-  "version": "0.24.4",
+  "version": "0.24.6",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -29,7 +29,7 @@
     "styles"
   ],
   "dependencies": {
-    "@refrakt-md/types": "0.24.4"
+    "@refrakt-md/types": "0.24.6"
   },
   "scripts": {
     "build": "tsc"

package/styles/layouts/blog.css

@@ -3,7 +3,9 @@
  * hide, the posts flex, the card block, the meta/tags flex rows, the sticky sidebar
  * + list reset, and the responsive grid/sidebar reflow. Header height var, colours,
  * borders, type, padding, and gaps are skin. */
-.rf-blog-header { position: sticky; top: 0; z-index: 100; }
+/* Height pinned to --rf-header-height so the docked mobile nav panel
+   (top: var(--rf-header-height)) lines up with the header bottom. */
+.rf-blog-header { position: sticky; top: 0; z-index: 100; height: var(--rf-header-height, 3.5rem); }
 .rf-blog-header__inner { display: flex; align-items: center; }
 .rf-blog-header__inner .rf-search-trigger { margin-left: auto; }
 .rf-blog-header__inner p ~ p { order: 1; }

package/styles/layouts/default.css

@@ -2,7 +2,10 @@
  * the named-track content grid + width-variant placement, the container context,
  * and the footer flex + width cap. Colours, borders, type, padding, and the section
  * rhythm/inset margins are skin (Lumina's layouts/default.css). */
-.rf-header { position: sticky; top: 0; z-index: 100; }
+/* Height pinned to --rf-header-height so the docked mobile nav panel
+   (top: var(--rf-header-height)) lines up exactly with the header bottom
+   regardless of brand/logo size. */
+.rf-header { position: sticky; top: 0; z-index: 100; height: var(--rf-header-height, 3.5rem); }
 .rf-header__inner { display: flex; align-items: center; }
 .rf-header__inner .rf-search-trigger { margin-left: auto; order: 1; }
 .rf-header__inner > rf-nav { order: 3; }

package/styles/layouts/docs.css

@@ -3,7 +3,11 @@
  * container + width-variant grid, the has-toc flex + sticky TOC, the scroll-padding
  * offset, the mobile toolbar flex + breadcrumb ellipsis, and the responsive hides.
  * Colours, borders, type, padding, scrollbar chrome, and content padding are skin. */
-.rf-docs-header { position: fixed; top: 0; left: 0; right: 0; z-index: 10; }
+/* Height is pinned to --rf-header-height (not content-driven) so the sticky
+   toolbar and the docked mobile nav panel can offset against a known value —
+   otherwise a header that renders shorter than the assumed height leaves a
+   gap the page content scrolls through, and a taller one overlaps. */
+.rf-docs-header { position: fixed; top: 0; left: 0; right: 0; z-index: 10; height: var(--rf-header-height, 3.5rem); }
 .rf-docs-header__inner { display: flex; align-items: center; }
 .rf-docs-header__inner .rf-search-trigger { margin-left: auto; order: 1; }
 .rf-docs-header__inner > rf-nav { order: 3; }
@@ -76,7 +80,8 @@ html:has(.rf-docs-header) { scroll-padding-top: 5rem; }
 @media (max-width: 768px) {
 	.rf-docs-header { position: sticky; top: 0; }
 	.rf-docs-header__inner p ~ p { display: none; }
-	.rf-docs-toolbar { display: flex; position: sticky; top: calc(3.5rem - 1px); z-index: 100; }
-	.rf-mobile-panel--nav { top: calc(6.25rem - 1px); }
+	.rf-docs-toolbar { display: flex; position: sticky; top: var(--rf-header-height, 3.5rem); z-index: 100; }
+	/* header height + ~2.75rem toolbar */
+	.rf-mobile-panel--nav { top: calc(var(--rf-header-height, 3.5rem) + 2.75rem); }
 	.rf-docs-sidebar { display: none; }
 }