@splendidlabz/styles 4.6.5 → 4.6.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@splendidlabz/styles",
-  "version": "4.6.5",
+  "version": "4.6.7",
   "description": "",
   "type": "module",
   "homepage": "https://splendidlabz.com/docs/styles",
@@ -13,7 +13,7 @@
   "exports": {
     ".": "./src/styles.css",
     "./components": "./src/components/index.css",
-    "./layouts": "./src/layouts/index.css",
+    "./layouts": "./src/layouts/direct.css",
     "./layouts/no-tw": "./dist/no-tw/styles.css",
     "./scripts": "./scripts/index.js",
     "./scripts/*": "./scripts/*.js"

package/src/generic/anchors-and-buttons.css

@@ -8,7 +8,7 @@
     gap: 0.5em;
     max-width: 100%;
     padding: 0.125lh 0.75lh;
-    font-family: inherit;
+    font: inherit;
     text-decoration-line: none !important;
     cursor: pointer;
 

package/src/layout-reset.css

@@ -0,0 +1,13 @@
+
+html,
+body {
+  height: 100%;
+}
+
+/*********************
+* Fills the viewport, fallbacks to vh *
+*********************/
+body {
+  height: 100vh;
+  height: 100svh;
+}

package/src/layouts/direct.css

@@ -0,0 +1,2 @@
+@import '../layout-reset.css' layer(reset);
+@import './index.css';

package/src/layouts/shell/shell-grid.css

@@ -1,11 +1,39 @@
+
+@utility shell-body {
+  & {
+    display: grid;
+    grid-template-columns:
+      minmax(0, var(--lsb-width, auto))
+      minmax(0, 1fr);
+    grid-template-rows: 1fr;
+    gap: var(--gap, 0);
+  }
+
+  &:has(> .right-sidebar) {
+    grid-template-columns:
+      minmax(0, var(--lsb-width, auto))
+      minmax(0, var(--content-width, 1fr))
+      minmax(0, var(--rsb-width, auto));
+  }
+
+  > .left-sidebar,
+  > .right-sidebar,
+  > .content {
+    overflow: auto;
+    grid-column-end: span var(--span, 1);
+    height: inherit; 
+  }
+}
+
 /* Potential improvements for flexibility with Style Queries or CSS IF in the future. */
 @utility shell-grid {
   @apply shell-body;
 
   & {
     /* Seems to be ok to use inherit too? Test it out. If that's ok, remove this and just use shell-body */
-    /* height: inherit;  */
-    height: 100dvh;
+    height: inherit; 
+
+    /* height: 100dvh; */
   }
 
   &:has(> .header, header, .footer, footer) {

package/src/layouts/shell/shell-simple.css

@@ -13,29 +13,3 @@
     }
   }
 }
-
-@utility shell-body {
-  & {
-    display: grid;
-    grid-template-columns:
-      minmax(0, var(--lsb-width, auto))
-      minmax(0, 1fr);
-    gap: var(--gap, 0);
-    height: inherit;
-  }
-
-  &:has(> .right-sidebar) {
-    grid-template-columns:
-      minmax(0, var(--lsb-width, auto))
-      minmax(0, var(--content-width, 1fr))
-      minmax(0, var(--rsb-width, auto));
-  }
-
-  > .left-sidebar,
-  > .right-sidebar,
-  > .content {
-    overflow: auto;
-    grid-column-end: span var(--span, 1);
-    height: auto;
-  }
-}

package/src/reset.css

@@ -13,19 +13,6 @@ html {
   box-sizing: border-box;
 }
 
-html,
-body {
-  height: 100%;
-}
-
-/*********************
-* Fills the viewport, fallbacks to vh *
-*********************/
-body {
-  min-height: 100vh;
-  min-height: 100svh;
-}
-
 /*********************
 * Remove default margin and paddings *
 *********************/

package/src/styles.css

@@ -1,5 +1,7 @@
 /* Splendid Styles */
+
 @import './reset.css' layer(reset);
+@import './layout-reset.css' layer(reset);
 @import './variables/index.css';
 @import './tools/index.css';
 @import './generic/index.css';