summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--src/objects/_backdrop.scss2
-rw-r--r--src/objects/_lightbox.scss77
-rwxr-xr-xstatic/ava_feralbot.pngbin0 -> 69371 bytes
-rwxr-xr-xstatic/volpeon_spooky.pngbin0 -> 26024 bytes
-rw-r--r--tpl/index.pug13
-rw-r--r--tpl/objects/backdrop.pug5
-rw-r--r--tpl/objects/lightbox.pug14
7 files changed, 87 insertions, 24 deletions
diff --git a/src/objects/_backdrop.scss b/src/objects/_backdrop.scss
index 9ab140e..a0ec11e 100644
--- a/src/objects/_backdrop.scss
+++ b/src/objects/_backdrop.scss
@@ -18,7 +18,7 @@
18 18
19 @include iro.props-store(( 19 @include iro.props-store((
20 --colors: ( 20 --colors: (
21 --bg: rgba(#000, .75), 21 --bg: rgba(#000, .85),
22 ), 22 ),
23 ), 'colors-dark'); 23 ), 'colors-dark');
24 24
diff --git a/src/objects/_lightbox.scss b/src/objects/_lightbox.scss
index 3ba9744..59ae03f 100644
--- a/src/objects/_lightbox.scss
+++ b/src/objects/_lightbox.scss
@@ -4,32 +4,81 @@
4@include iro.props-namespace('lightbox') { 4@include iro.props-namespace('lightbox') {
5 @include iro.props-store(( 5 @include iro.props-store((
6 --dims: ( 6 --dims: (
7 7 --pad-x: fn.global-dim(--size --150),
8 --pad-y: fn.global-dim(--size --150),
9 --spacing: fn.global-dim(--size --200),
10 --thumbnail: (
11 --size: fn.global-dim(--size --800),
12 --spacing: fn.global-dim(--size --100),
13 --selected: 3px,
14 ),
8 ), 15 ),
9 ), 'dims'); 16 ), 'dims');
10 17
18 @include iro.props-store((
19 --colors: (
20 --thumbnail: (
21 --selected: fn.global-color(--fg-lo),
22 ),
23 ),
24 ), 'colors');
25
11 @include iro.bem-object(iro.props-namespace()) { 26 @include iro.bem-object(iro.props-namespace()) {
12 display: contents; 27 display: grid;
28 grid-template-rows: auto minmax(0, 1fr) auto;
29 grid-template-columns: minmax(0, 1fr) auto;
30 grid-template-areas: 'header close' 'content content' 'footer footer';
31 gap: fn.dim(--spacing);
32 min-height: 0;
33
34 @include iro.bem-elem('footer') {
35 grid-area: footer;
36 display: flex;
37 gap: fn.dim(--thumbnail --spacing);
38 padding: fn.dim(--thumbnail --selected);
39 overflow: auto;
40 }
13 41
14 @include iro.bem-elem('header') { 42 @include iro.bem-elem('header') {
15 display: flex; 43 grid-area: header;
16 box-sizing: border-box; 44 overflow: hidden;
17 flex: 0 0 auto; 45 text-overflow: ellipsis;
18 align-items: center; 46 white-space: nowrap;
19 width: 100%;
20 } 47 }
21 48
22 @include iro.bem-elem('img') { 49 @include iro.bem-elem('img') {
23 align-self: center; 50 grid-area: content;
24 max-width: 100%; 51 justify-self: center;
25 min-height: 0; 52 max-width: 100%;
26 max-height: 100%; 53 max-height: 100%;
27 margin-top: auto; 54 }
28 margin-bottom: auto; 55
56 @include iro.bem-elem('thumbnail') {
57 opacity: .75;
58
59 &:hover {
60 opacity: 1;
61 }
62
63 @include iro.bem-is('selected') {
64 opacity: 1;
65 box-shadow: 0 0 0 fn.dim(--thumbnail --selected) fn.color(--thumbnail --selected);
66 }
67 }
68
69 @include iro.bem-elem('thumbnail-img') {
70 display: block;
71 width: fn.dim(--thumbnail --size);
72 height: fn.dim(--thumbnail --size);
73 object-fit: cover;
74 object-position: center center;
29 } 75 }
30 76
31 @include iro.bem-elem('close-btn') { 77 @include iro.bem-elem('close-btn') {
32 margin-left: auto; 78 --icon-stroke-width: 2px;
79
80 grid-area: close;
81 font-size: fn.global-dim(--font-size --150);
33 } 82 }
34 } 83 }
35} 84}
diff --git a/static/ava_feralbot.png b/static/ava_feralbot.png
new file mode 100755
index 0000000..402f927
--- /dev/null
+++ b/static/ava_feralbot.png
Binary files differ
diff --git a/static/volpeon_spooky.png b/static/volpeon_spooky.png
new file mode 100755
index 0000000..223769d
--- /dev/null
+++ b/static/volpeon_spooky.png
Binary files differ
diff --git a/tpl/index.pug b/tpl/index.pug
index fde71fd..ed538df 100644
--- a/tpl/index.pug
+++ b/tpl/index.pug
@@ -554,7 +554,16 @@ html
554 +rule('medium') 554 +rule('medium')
555 555
556 +box 556 +box
557 +backdrop(class='t-dark' center=true) 557 +backdrop(class='t-dark')
558 +lightbox('avatar.png') 558 +lightbox(['avatar.png', 'ava_feralbot.png', 'volpeon_spooky.png'])
559 = "Let's try multiple links! "
560 a(href="https://mk.vulpes.one/files/3023f361-124a-4c80-bb69-9535e47c2925")
561 = "https://mk.vulpes.one/files/3023f361-124a-4c80-bb69-9535e47c2925"
562 = ' '
563 a(href="https://mk.vulpes.one/files/741dcfd3-6a26-48ae-8985-d0c3ccca016c")
564 = "https://mk.vulpes.one/files/741dcfd3-6a26-48ae-8985-d0c3ccca016c"
565 = ' '
566 a(href="https://mk.vulpes.one/files/081e0684-08dc-4a42-b810-b0ac63ec7d06")
567 = "https://mk.vulpes.one/files/081e0684-08dc-4a42-b810-b0ac63ec7d06"
559 568
560 569
diff --git a/tpl/objects/backdrop.pug b/tpl/objects/backdrop.pug
index 3de1f99..cbe8866 100644
--- a/tpl/objects/backdrop.pug
+++ b/tpl/objects/backdrop.pug
@@ -1,9 +1,8 @@
1mixin backdrop 1mixin backdrop
2 - 2 -
3 let classes = { 3 let classes = {
4 'o-backdrop': true, 4 'o-backdrop': true,
5 'u-p-relative': true, 5 'u-p-relative': true,
6 'o-backdrop--center': attributes.center
7 } 6 }
8 if (attributes.class) { 7 if (attributes.class) {
9 classes[attributes.class] = true; 8 classes[attributes.class] = true;
diff --git a/tpl/objects/lightbox.pug b/tpl/objects/lightbox.pug
index ba68299..bfb4f49 100644
--- a/tpl/objects/lightbox.pug
+++ b/tpl/objects/lightbox.pug
@@ -1,5 +1,11 @@
1mixin lightbox(src) 1mixin lightbox(images)
2 .o-lightbox 2 .o-lightbox
3 header.o-lightbox__header 3 header.o-lightbox__header.s-colored-links
4 +action-button(round=true quiet=true icon='x' class='o-lightbox__close-btn') 4 block
5 img.o-lightbox__img(src=src) 5 +action-button(round=true quiet=true icon='x' class='o-lightbox__close-btn')
6 img.o-lightbox__img(src=images[0])
7 footer.o-lightbox__footer
8 each img, i in images
9 - classes = i === 0 ? 'is-selected' : ''
10 button.o-lightbox__thumbnail(class=classes)
11 img.o-lightbox__thumbnail-img(src=img)