summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2024-06-29 14:50:39 +0200
committerVolpeon <git@volpeon.ink>2024-06-29 14:50:39 +0200
commit0f2ff105bbd911ba04c717af92fd116472d2b2d9 (patch)
tree9c2fccc3bd5982094b3bf5d986bda4d7bcbf9332
parentUpdate (diff)
downloadiro-design-0f2ff105bbd911ba04c717af92fd116472d2b2d9.tar.gz
iro-design-0f2ff105bbd911ba04c717af92fd116472d2b2d9.tar.bz2
iro-design-0f2ff105bbd911ba04c717af92fd116472d2b2d9.zip
Update
-rw-r--r--src/_config.scss16
-rw-r--r--src/_utils.scss6
-rw-r--r--src/layouts/_card-list.scss6
-rw-r--r--src/objects/_card.scss27
-rw-r--r--src/objects/_lightbox.scss23
-rw-r--r--tpl/objects/card.pug3
-rw-r--r--tpl/views/card.pug12
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: (
109 --75: -4, 109 --75: -4,
110 --100: 0, 110 --100: 0,
111 111
112 --200: easing.cubic-bezier(.2, .1, .8, 1, math.div(1, 8)) * 106, 112 --200: easing.cubic-bezier(.2, .1, .9, .9, math.div(1, 7)) * 100,
113 --300: easing.cubic-bezier(.2, .1, .8, 1, math.div(2, 8)) * 106, 113 --300: easing.cubic-bezier(.2, .1, .9, .9, math.div(2, 7)) * 100,
114 --400: easing.cubic-bezier(.2, .1, .8, 1, math.div(3, 8)) * 106, 114 --400: easing.cubic-bezier(.2, .1, .9, .9, math.div(3, 7)) * 100,
115 115
116 --500: easing.cubic-bezier(.2, .1, .8, 1, math.div(4, 8)) * 106, 116 --500: easing.cubic-bezier(.2, .1, .9, .9, math.div(4, 7)) * 100,
117 --600: easing.cubic-bezier(.2, .1, .8, 1, math.div(5, 8)) * 106, 117 --600: easing.cubic-bezier(.2, .1, .9, .9, math.div(5, 7)) * 100,
118 --700: easing.cubic-bezier(.2, .1, .8, 1, math.div(6, 8)) * 106, 118 --700: easing.cubic-bezier(.2, .1, .9, .9, math.div(6, 7)) * 100,
119 --800: easing.cubic-bezier(.2, .1, .8, 1, math.div(7, 8)) * 106, 119 --800: easing.cubic-bezier(.2, .1, .9, .9, math.div(7, 7)) * 100,
120 --900: easing.cubic-bezier(.2, .1, .8, 1, math.div(8, 8)) * 106, 120 --900: 108,
121 ), 121 ),
122 122
123 --colors: ( 123 --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;
169 position: relative; 169 position: relative;
170} 170}
171 171
172@include iro.bem-utility('p-sticky-top') { 172@include iro.bem-utility('p-sticky-bs') {
173 position: sticky; 173 position: sticky;
174 top: 0; 174 inset-block-start: 0;
175} 175}
176 176
177@each $dir, $suffix in $dirs { 177@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 @@
50 column-gap: fn.dim(--masonry --col-gap); 50 column-gap: fn.dim(--masonry --col-gap);
51 51
52 @include iro.bem-elem('card') { 52 @include iro.bem-elem('card') {
53 margin-bottom: fn.dim(--masonry --col-gap); 53 margin-block-end: fn.dim(--masonry --col-gap);
54 break-inside: avoid; 54 break-inside: avoid;
55 } 55 }
56 56
57 @include iro.bem-modifier('quiet') { 57 @include iro.bem-modifier('quiet') {
58 @include iro.bem-elem('card') { 58 @include iro.bem-elem('card') {
59 margin-bottom: fn.dim(--masonry --row-gap); 59 margin-block-end: fn.dim(--masonry --row-gap);
60 } 60 }
61 } 61 }
62 } 62 }
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 @@
32 --border: fn.global-color(--focus --border), 32 --border: fn.global-color(--focus --border),
33 --outline: fn.global-color(--focus --outline), 33 --outline: fn.global-color(--focus --outline),
34 ), 34 ),
35
36 --quiet: (
37 --hover: (
38 --border: fn.global-color(--text-disabled),
39 ),
40 ),
41 ), 35 ),
42 )); 36 ));
43 37
@@ -67,9 +61,9 @@
67 } 61 }
68 62
69 @include iro.bem-elem('image') { 63 @include iro.bem-elem('image') {
70 position: relative; 64 display: block;
71 inline-size: 100%; 65 inline-size: 100%;
72 overflow: hidden; 66 object-fit: cover;
73 background-color: fn.color(--image-bg); 67 background-color: fn.color(--image-bg);
74 68
75 &:first-child { 69 &:first-child {
@@ -87,13 +81,6 @@
87 } 81 }
88 } 82 }
89 83
90 @include iro.bem-elem('image-img') {
91 display: block;
92 object-fit: cover;
93 inline-size: 100%;
94 block-size: 100%;
95 }
96
97 @include iro.bem-elem('body') { 84 @include iro.bem-elem('body') {
98 padding-block: fn.dim(--pad-b); 85 padding-block: fn.dim(--pad-b);
99 padding-inline: fn.dim(--pad-i); 86 padding-inline: fn.dim(--pad-i);
@@ -130,12 +117,13 @@
130 117
131 @include iro.bem-multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') { 118 @include iro.bem-multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') {
132 &:hover, 119 &:hover,
120 &:focus-visible,
133 &:active { 121 &:active {
134 @include iro.bem-elem('image') { 122 @include iro.bem-elem('image') {
135 outline: fn.dim(--border) solid fn.color(--quiet --hover --border); 123 opacity: 0.75;
136 } 124 }
137 } 125 }
138 126
139 &:focus-visible { 127 &:focus-visible {
140 outline: none; 128 outline: none;
141 box-shadow: none; 129 box-shadow: none;
@@ -148,9 +136,10 @@
148 } 136 }
149 137
150 @include iro.bem-elem('image') { 138 @include iro.bem-elem('image') {
139 position: relative;
151 margin: calc(-1 * fn.dim(--key-focus --border)); 140 margin: calc(-1 * fn.dim(--key-focus --border));
152 border: fn.dim(--key-focus --border) solid transparent; 141 border: fn.dim(--key-focus --border-offset) solid transparent;
153 border-radius: calc(fn.dim(--rounding) + fn.dim(--key-focus --border)); 142 border-radius: calc(fn.dim(--rounding) + fn.dim(--key-focus --border-offset));
154 background-clip: padding-box; 143 background-clip: padding-box;
155 } 144 }
156 145
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;
10 --dims: ( 10 --dims: (
11 --pad: fn.global-dim(--size --150), 11 --pad: fn.global-dim(--size --150),
12 --thumbnail: ( 12 --thumbnail: (
13 --size: fn.global-dim(--size --700), 13 --size: fn.global-dim(--size --700),
14 --spacing: fn.global-dim(--size --100), 14 --rounding: fn.global-dim(--rounding),
15 --idle: fn.global-dim(--border --thin), 15 --spacing: fn.global-dim(--size --100),
16 --selected: fn.global-dim(--border --medium), 16 --idle: fn.global-dim(--border --thin),
17 --selected: fn.global-dim(--border --medium),
17 ), 18 ),
18 --close-button: ( 19 --close-button: (
19 --font-size: fn.global-dim(--font-size --200), 20 --font-size: fn.global-dim(--font-size --200),
@@ -147,12 +148,14 @@ $static-themes: 'black' 'white' !default;
147 } 148 }
148 149
149 @include iro.bem-elem('thumbnail') { 150 @include iro.bem-elem('thumbnail') {
150 position: relative; 151 position: relative;
151 flex: 0 0 auto; 152 flex: 0 0 auto;
152 inline-size: fn.dim(--thumbnail --size); 153 inline-size: fn.dim(--thumbnail --size);
153 block-size: fn.dim(--thumbnail --size); 154 block-size: fn.dim(--thumbnail --size);
154 outline: fn.dim(--thumbnail --idle) solid fn.color(--thumbnail --idle); 155 overflow: hidden;
155 opacity: .75; 156 border-radius: fn.dim(--thumbnail --rounding);
157 outline: fn.dim(--thumbnail --idle) solid fn.color(--thumbnail --idle);
158 opacity: .75;
156 159
157 &:hover, 160 &:hover,
158 &:focus-visible { 161 &: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
26 classes[attributes.class] = true; 26 classes[attributes.class] = true;
27 } 27 }
28 28
29 div(class=classes) 29 img(class=classes src=attributes.src style=attributes.style)
30 img.o-card__image-img(src=attributes.src style=attributes.style)
31 30
32mixin card-body 31mixin card-body
33 .o-card__body(style=attributes.style) 32 .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 @@
1mixin view-card 1mixin view-card
2 +view('card', 'Card')(wide=true) 2 +view('card', 'Card')(wide=true)
3 .c-box(style={ display: 'flex', 'flex-direction': 'column', gap: '2em' }) 3 .l-card-list.l-card-list--masonry
4 +card(href='#') 4 +card(href='#' class='l-card-list__card')
5 +card-image(src='Drawing_Half.png' style={ 'aspect-ratio': '21 / 9' }) 5 +card-image(src='Drawing_Half.png' style={ 'aspect-ratio': '21 / 9' })
6 +card-avatar(src='avatar.png') 6 +card-avatar(src='avatar.png')
7 +card-body 7 +card-body
@@ -12,13 +12,13 @@ mixin view-card
12 +card-footer 12 +card-footer
13 = 'Footer' 13 = 'Footer'
14 14
15 +card 15 +card(class='l-card-list__card')
16 +card-body 16 +card-body
17 .l-media 17 .l-media
18 +avatar(class='l-media__block' src='avatar.png') 18 +avatar(class='l-media__block' src='avatar.png')
19 .l-media__block.l-media__block--main 19 .l-media__block.l-media__block--main
20 strong.u-d-block= 'Volpeon' 20 strong.u-d-block= 'Volpeon'
21 small.u-d-block= '@volpeon@is-a.wyvern.rip' 21 small.u-c-mute.u-d-block= '@volpeon@is-a.wyvern.rip'
22 +card-content 22 +card-content
23 p= loremIpsum 23 p= loremIpsum
24 p= loremIpsum 24 p= loremIpsum
@@ -36,7 +36,7 @@ mixin view-card
36 .l-media__block.u-mis-auto 36 .l-media__block.u-mis-auto
37 +a-button(primary=true)= 'Reply' 37 +a-button(primary=true)= 'Reply'
38 38
39 +card(quiet=true href='#') 39 +card(quiet=true href='#' class='l-card-list__card')
40 +card-image(src='Drawing_Half.png' style={ 'aspect-ratio': '21 / 9' }) 40 +card-image(src='Drawing_Half.png' style={ 'aspect-ratio': '21 / 9' })
41 +card-body 41 +card-body
42 +card-title= 'XS Heading' 42 +card-title= 'XS Heading'
@@ -66,4 +66,4 @@ mixin view-card
66 .l-media 66 .l-media
67 .l-media__block.l-media__block--main 67 .l-media__block.l-media__block--main
68 h1.u-mbs-0= 'XS Heading' 68 h1.u-mbs-0= 'XS Heading'
69 small.u-c-mute-more= `Episode ${i + 1}` 69 small.u-c-mute= `Episode ${i + 1}`