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 +++++++++++++++++++++++-------- 1 file changed, 23 insertions(+), 8 deletions(-) (limited to 'tpl/views/card.pug') 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}` -- cgit v1.2.3-54-g00ecf