Update

7 files changed, 42 insertions, 51 deletions

diff --git a/src/_config.scss b/src/_config.scss
index 73e0725..7d73bca 100644
--- a/src/_config.scss
+++ b/src/_config.scss
@@ -109,15 +109,15 @@ $theme-light: (
             --75:  -4,
             --100: 0,
         
-            --200: easing.cubic-bezier(.2, .1, .8, 1, math.div(1, 8)) * 106,
-            --300: easing.cubic-bezier(.2, .1, .8, 1, math.div(2, 8)) * 106,
-            --400: easing.cubic-bezier(.2, .1, .8, 1, math.div(3, 8)) * 106,
+            --200: easing.cubic-bezier(.2, .1, .9, .9, math.div(1, 7)) * 100,
+            --300: easing.cubic-bezier(.2, .1, .9, .9, math.div(2, 7)) * 100,
+            --400: easing.cubic-bezier(.2, .1, .9, .9, math.div(3, 7)) * 100,
         
-            --500: easing.cubic-bezier(.2, .1, .8, 1, math.div(4, 8)) * 106,
-            --600: easing.cubic-bezier(.2, .1, .8, 1, math.div(5, 8)) * 106,
-            --700: easing.cubic-bezier(.2, .1, .8, 1, math.div(6, 8)) * 106,
-            --800: easing.cubic-bezier(.2, .1, .8, 1, math.div(7, 8)) * 106,
-            --900: easing.cubic-bezier(.2, .1, .8, 1, math.div(8, 8)) * 106,
+            --500: easing.cubic-bezier(.2, .1, .9, .9, math.div(4, 7)) * 100,
+            --600: easing.cubic-bezier(.2, .1, .9, .9, math.div(5, 7)) * 100,
+            --700: easing.cubic-bezier(.2, .1, .9, .9, math.div(6, 7)) * 100,
+            --800: easing.cubic-bezier(.2, .1, .9, .9, math.div(7, 7)) * 100,
+            --900: 108,
         ),
 
         --colors: (
diff --git a/src/_utils.scss b/src/_utils.scss
index 06afa62..a5e842d 100644
--- a/src/_utils.scss
+++ b/src/_utils.scss
@@ -169,9 +169,9 @@ $sizes: 0 10 50 75 100 125 200 400 700 800 !default;
     position: relative;
 }
 
-@include iro.bem-utility('p-sticky-top') {
-    position: sticky;
-    top:      0;
+@include iro.bem-utility('p-sticky-bs') {
+    position:          sticky;
+    inset-block-start: 0;
 }
 
 @each $dir, $suffix in $dirs {
diff --git a/src/layouts/_card-list.scss b/src/layouts/_card-list.scss
index 362325a..65b6a66 100644
--- a/src/layouts/_card-list.scss
+++ b/src/layouts/_card-list.scss
@@ -50,13 +50,13 @@
             column-gap: fn.dim(--masonry --col-gap);
 
             @include iro.bem-elem('card') {
-                margin-bottom: fn.dim(--masonry --col-gap);
-                break-inside:  avoid;
+                margin-block-end: fn.dim(--masonry --col-gap);
+                break-inside:     avoid;
             }
 
             @include iro.bem-modifier('quiet') {
                 @include iro.bem-elem('card') {
-                    margin-bottom: fn.dim(--masonry --row-gap);
+                    margin-block-end: fn.dim(--masonry --row-gap);
                 }
             }
         }
diff --git a/src/objects/_card.scss b/src/objects/_card.scss
index c6c47d7..b7829ff 100644
--- a/src/objects/_card.scss
+++ b/src/objects/_card.scss
@@ -32,12 +32,6 @@
                 --border:  fn.global-color(--focus --border),
                 --outline: fn.global-color(--focus --outline),
             ),
-
-            --quiet: (
-                --hover: (
-                    --border: fn.global-color(--text-disabled),
-                ),
-            ),
         ),
     ));
 
@@ -67,9 +61,9 @@
         }
 
         @include iro.bem-elem('image') {
-            position:         relative;
+            display:          block;
             inline-size:      100%;
-            overflow:         hidden;
+            object-fit:       cover;
             background-color: fn.color(--image-bg);
 
             &:first-child {
@@ -87,13 +81,6 @@
             }
         }
 
-        @include iro.bem-elem('image-img') {
-            display:     block;
-            object-fit:  cover;
-            inline-size: 100%;
-            block-size:  100%;
-        }
-
         @include iro.bem-elem('body') {
             padding-block:  fn.dim(--pad-b);
             padding-inline: fn.dim(--pad-i);
@@ -130,12 +117,13 @@
 
             @include iro.bem-multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') {
                 &:hover,
+                &:focus-visible,
                 &:active {
                     @include iro.bem-elem('image') {
-                        outline: fn.dim(--border) solid fn.color(--quiet --hover --border);
+                        opacity: 0.75;
                     }
                 }
-                
+
                 &:focus-visible {
                     outline:    none;
                     box-shadow: none;
@@ -148,9 +136,10 @@
             }
 
             @include iro.bem-elem('image') {
+                position:        relative;
                 margin:          calc(-1 * fn.dim(--key-focus --border));
-                border:          fn.dim(--key-focus --border) solid transparent;
-                border-radius:   calc(fn.dim(--rounding) + fn.dim(--key-focus --border));
+                border:          fn.dim(--key-focus --border-offset) solid transparent;
+                border-radius:   calc(fn.dim(--rounding) + fn.dim(--key-focus --border-offset));
                 background-clip: padding-box;
             }
 
diff --git a/src/objects/_lightbox.scss b/src/objects/_lightbox.scss
index 7844eae..4902958 100644
--- a/src/objects/_lightbox.scss
+++ b/src/objects/_lightbox.scss
@@ -10,10 +10,11 @@ $static-themes: 'black' 'white' !default;
         --dims: (
             --pad: fn.global-dim(--size --150),
             --thumbnail: (
-                --size:     fn.global-dim(--size --700),
-                --spacing:  fn.global-dim(--size --100),
-                --idle:     fn.global-dim(--border --thin),
-                --selected: fn.global-dim(--border --medium),
+                --size:      fn.global-dim(--size --700),
+                --rounding:  fn.global-dim(--rounding),
+                --spacing:   fn.global-dim(--size --100),
+                --idle:      fn.global-dim(--border --thin),
+                --selected:  fn.global-dim(--border --medium),
             ),
             --close-button: (
                 --font-size: fn.global-dim(--font-size --200),
@@ -147,12 +148,14 @@ $static-themes: 'black' 'white' !default;
         }
 
         @include iro.bem-elem('thumbnail') {
-            position:    relative;
-            flex:        0 0 auto;
-            inline-size: fn.dim(--thumbnail --size);
-            block-size:  fn.dim(--thumbnail --size);
-            outline:     fn.dim(--thumbnail --idle) solid fn.color(--thumbnail --idle);
-            opacity:     .75;
+            position:      relative;
+            flex:          0 0 auto;
+            inline-size:   fn.dim(--thumbnail --size);
+            block-size:    fn.dim(--thumbnail --size);
+            overflow:      hidden;
+            border-radius: fn.dim(--thumbnail --rounding);
+            outline:       fn.dim(--thumbnail --idle) solid fn.color(--thumbnail --idle);
+            opacity:       .75;
 
             &:hover,
             &:focus-visible {
diff --git a/tpl/objects/card.pug b/tpl/objects/card.pug
index d622d3b..2ab9bef 100644
--- a/tpl/objects/card.pug
+++ b/tpl/objects/card.pug
@@ -26,8 +26,7 @@ mixin card-image
             classes[attributes.class] = true;
         }
 
-    div(class=classes)
-        img.o-card__image-img(src=attributes.src style=attributes.style)
+    img(class=classes src=attributes.src style=attributes.style)
 
 mixin card-body
     .o-card__body(style=attributes.style)
diff --git a/tpl/views/card.pug b/tpl/views/card.pug
index 4871d30..3163b00 100644
--- a/tpl/views/card.pug
+++ b/tpl/views/card.pug
@@ -1,7 +1,7 @@
 mixin view-card 
     +view('card', 'Card')(wide=true)
-        .c-box(style={ display: 'flex', 'flex-direction': 'column', gap: '2em' })
-            +card(href='#')
+        .l-card-list.l-card-list--masonry
+            +card(href='#' class='l-card-list__card')
                 +card-image(src='Drawing_Half.png' style={ 'aspect-ratio': '21 / 9' })
                 +card-avatar(src='avatar.png')
                 +card-body
@@ -12,13 +12,13 @@ mixin view-card
                 +card-footer
                     = 'Footer'
 
-            +card
+            +card(class='l-card-list__card')
                 +card-body
                     .l-media
                         +avatar(class='l-media__block' src='avatar.png')
                         .l-media__block.l-media__block--main
                             strong.u-d-block= 'Volpeon'
-                            small.u-d-block= '@volpeon@is-a.wyvern.rip'
+                            small.u-c-mute.u-d-block= '@volpeon@is-a.wyvern.rip'
                     +card-content
                         p= loremIpsum
                         p= loremIpsum
@@ -36,7 +36,7 @@ mixin view-card
                         .l-media__block.u-mis-auto
                             +a-button(primary=true)= 'Reply'
 
-            +card(quiet=true href='#')
+            +card(quiet=true href='#' class='l-card-list__card')
                 +card-image(src='Drawing_Half.png' style={ 'aspect-ratio': '21 / 9' })
                 +card-body
                     +card-title= 'XS Heading'
@@ -66,4 +66,4 @@ mixin view-card
                             .l-media
                                 .l-media__block.l-media__block--main
                                     h1.u-mbs-0= 'XS Heading'
-                                    small.u-c-mute-more= `Episode ${i + 1}`
+                                    small.u-c-mute= `Episode ${i + 1}`