Improved bubble

2 files changed, 11 insertions, 5 deletions

diff --git a/src/layouts/_bubble-group.scss b/src/layouts/_bubble-group.scss
index 7593881..3e280b5 100644
--- a/src/layouts/_bubble-group.scss
+++ b/src/layouts/_bubble-group.scss
@@ -5,7 +5,12 @@
     @include iro.props-store((
         --dims: (
             --spacing-x: fn.global-dim(--size --225),
-            --spacing-y: fn.global-dim(--size --50),
+            --spacing-y: fn.global-dim(--size --150),
+
+            --compact: (
+                --spacing-x: fn.global-dim(--size --225),
+                --spacing-y: fn.global-dim(--size --50),
+            )
         )
     ), 'dims');
 
@@ -18,10 +23,7 @@
         gap:                   fn.dim(--spacing-y) fn.dim(--spacing-x);
         
         @include iro.bem-elem('avatar') {
-            grid-area:    avatar;
-            position:     sticky;
-            top:          0;
-            justify-self: end;
+            grid-area: avatar;
         }
         
         @include iro.bem-elem('bubble') {
@@ -30,6 +32,7 @@
         
         @include iro.bem-modifier('compact') {
             justify-items: start;
+            gap:           fn.dim(--compact --spacing-y) fn.dim(--compact --spacing-x);
         }
         
         @include iro.bem-modifier('arrow') {
diff --git a/src/layouts/_card.scss b/src/layouts/_card.scss
index e6c379d..9e54d50 100644
--- a/src/layouts/_card.scss
+++ b/src/layouts/_card.scss
@@ -7,14 +7,17 @@
         --dims: (
             --pad-x: fn.global-dim(--size --150),
             --pad-y: fn.global-dim(--size --85),
+
             --75: (
                 --pad-x: fn.global-dim(--size --100),
                 --pad-y: fn.global-dim(--size --50),
             ),
+
             --200: (
                 --pad-x: fn.global-dim(--size --300),
                 --pad-y: fn.global-dim(--size --150),
             ),
+            
             --300: (
                 --pad-x: fn.global-dim(--size --450),
                 --pad-y: fn.global-dim(--size --225),