@redseed/redseed-ui-tailwindcss 6.0.5 → 6.1.1

package/components/two_column_layout.css

@@ -1,16 +1,23 @@
 .rsui-two-column-layout {
-    @apply flex flex-col sm:flex-row gap-6 sm:gap-8;
+    @apply @container w-full;
 }
 
-.rsui-two-column-layout--left-aside {
-    @apply flex-col-reverse lg:flex-row-reverse;
+.rsui-two-column-layout__container {
+    @apply flex flex-col @4xl:flex-row gap-6 @4xl:gap-8;
+}
+
+.rsui-two-column-layout__container--top-aside {
+    @apply flex-col-reverse @4xl:flex-row;
+}
+
+.rsui-two-column-layout__container--left-aside {
+    @apply flex-col-reverse @4xl:flex-row-reverse;
 }
 
 .rsui-two-column-layout__main {
-    @apply flex-1 min-w-0 overflow-x-auto;
+    @apply flex-1 w-full @4xl:w-(--phi-inverse-percentage) overflow-auto flex flex-col gap-6 @4xl:gap-8;
 }
 
 .rsui-two-column-layout__aside {
-    @apply shrink-0 lg:w-72 xl:w-100;
+    @apply shrink-0 w-full @4xl:w-(--phi-inverse-squared-percentage) overflow-auto flex flex-col gap-6 @4xl:gap-8;
 }
-

package/index.css

@@ -1,3 +1,4 @@
+@import './variables.css';
 @import './colors.css';
 @import './colors_dark_mode.css';
 @import './theme.css';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redseed/redseed-ui-tailwindcss",
-  "version": "6.0.5",
+  "version": "6.1.1",
   "description": "RedSeed UI Tailwindcss",
   "main": "index.js",
   "style": "index.css",

package/variables.css

@@ -0,0 +1,7 @@
+:root {
+    --phi: 1.618033988749895;
+    --phi-inverse: calc(1 / var(--phi)); /* Approximately 0.618033988749895 */
+    --phi-inverse-squared: calc(var(--phi-inverse) * var(--phi-inverse)); /* Approximately 0.381966011250105 */
+    --phi-inverse-percentage: calc(var(--phi-inverse) * 100%); /* Approximately 61.8033988749895% */
+    --phi-inverse-squared-percentage: calc(var(--phi-inverse-squared) * 100%); /* Approximately 38.1966011250105% */
+}