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 +++++++++++++---------- tpl/objects/card.pug | 3 +-- tpl/views/card.pug | 12 ++++++------ 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}` -- cgit v1.2.3-54-g00ecf