From 6376f1a5225b2fa45f6c861d4a265bf13b56d038 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Sat, 29 Jun 2024 10:01:02 +0200 Subject: Update --- tpl/views/card.pug | 31 +++++++++++++++++++++++-------- tpl/views/lightbox.pug | 20 ++++++++++++++++---- 2 files changed, 39 insertions(+), 12 deletions(-) (limited to 'tpl/views') diff --git a/tpl/views/card.pug b/tpl/views/card.pug index e466cdc..4871d30 100644 --- a/tpl/views/card.pug +++ b/tpl/views/card.pug @@ -1,5 +1,5 @@ mixin view-card - +view('card', 'Card') + +view('card', 'Card')(wide=true) .c-box(style={ display: 'flex', 'flex-direction': 'column', gap: '2em' }) +card(href='#') +card-image(src='Drawing_Half.png' style={ 'aspect-ratio': '21 / 9' }) @@ -44,11 +44,26 @@ mixin view-card p= loremIpsum p= loremIpsum - +divider('faint') + each layout in ['grid', 'masonry', 'masonry-h'] + - + let quiet = true - .l-card-list.l-card-list--masonry - each img in ['Drawing_Half.png', '0000 Cover@0.5x.webp', 'avatar.png', '01 Design Cody.png', 'avatar.png', 'Drawing_Half.png'] - +card(href='#' class='l-card-list__card') - +card-image(src=img) - +card-body - +card-title= 'XS Heading' + let classes = { + 'l-card-list': true, + 'l-card-list--aspect-5/4': layout === 'grid', + 'l-card-list--quiet': quiet, + } + classes[`l-card-list--${layout}`] = true; + + + +divider('faint')(class='u-mb-700') + + div(class=classes) + each img, i in ['Drawing_Half.png', '0000 Cover@0.5x.webp', 'avatar.png', '01 Design Cody.png', 'avatar.png', 'Drawing_Half.png'] + +card(quiet=quiet href='#' class='l-card-list__card') + +card-image(src=img class='l-card-list__card-image') + +card-body + .l-media + .l-media__block.l-media__block--main + h1.u-mbs-0= 'XS Heading' + small.u-c-mute-more= `Episode ${i + 1}` diff --git a/tpl/views/lightbox.pug b/tpl/views/lightbox.pug index 8169a35..4eb234a 100644 --- a/tpl/views/lightbox.pug +++ b/tpl/views/lightbox.pug @@ -1,8 +1,20 @@ mixin view-lightbox +view('lightbox', 'Lightbox') .c-box - +backdrop(class='t-media') - +lightbox(['avatar.png', 'ava_feralbot.png', 'volpeon_spooky.png']) + +lightbox(['avatar.png', 'ava_feralbot.png', 'volpeon_spooky.png']) + = "Let's try multiple links! " + a(href="https://mk.vulpes.one/files/3023f361-124a-4c80-bb69-9535e47c2925") + = "https://mk.vulpes.one/files/3023f361-124a-4c80-bb69-9535e47c2925" + = ' ' + a(href="https://mk.vulpes.one/files/741dcfd3-6a26-48ae-8985-d0c3ccca016c") + = "https://mk.vulpes.one/files/741dcfd3-6a26-48ae-8985-d0c3ccca016c" + = ' ' + a(href="https://mk.vulpes.one/files/081e0684-08dc-4a42-b810-b0ac63ec7d06") + = "https://mk.vulpes.one/files/081e0684-08dc-4a42-b810-b0ac63ec7d06" + + .c-box + +backdrop + +lightbox(['avatar.png', 'ava_feralbot.png', 'volpeon_spooky.png'])(theme='static-white') = "Let's try multiple links! " a(href="https://mk.vulpes.one/files/3023f361-124a-4c80-bb69-9535e47c2925") = "https://mk.vulpes.one/files/3023f361-124a-4c80-bb69-9535e47c2925" @@ -14,8 +26,8 @@ mixin view-lightbox = "https://mk.vulpes.one/files/081e0684-08dc-4a42-b810-b0ac63ec7d06" .c-box - +backdrop(class='t-media') - +lightbox(['avatar.png']) + +backdrop + +lightbox(['avatar.png'])(theme='static-white') = "Let's try multiple links! " a(href="https://mk.vulpes.one/files/3023f361-124a-4c80-bb69-9535e47c2925") = "https://mk.vulpes.one/files/3023f361-124a-4c80-bb69-9535e47c2925" -- cgit v1.2.3-54-g00ecf