From 0f2ff105bbd911ba04c717af92fd116472d2b2d9 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Sat, 29 Jun 2024 14:50:39 +0200 Subject: Update --- src/_config.scss | 16 ++++++++-------- src/_utils.scss | 6 +++--- src/layouts/_card-list.scss | 6 +++--- src/objects/_card.scss | 27 ++++++++------------------- src/objects/_lightbox.scss | 23 +++++++++++++---------- 5 files changed, 35 insertions(+), 43 deletions(-) (limited to 'src') 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 { -- cgit v1.2.3-70-g09d2