diff options
Diffstat (limited to 'tpl/views/card.pug')
-rw-r--r-- | tpl/views/card.pug | 31 |
1 files changed, 23 insertions, 8 deletions
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 @@ | |||
1 | mixin view-card | 1 | mixin view-card |
2 | +view('card', 'Card') | 2 | +view('card', 'Card')(wide=true) |
3 | .c-box(style={ display: 'flex', 'flex-direction': 'column', gap: '2em' }) | 3 | .c-box(style={ display: 'flex', 'flex-direction': 'column', gap: '2em' }) |
4 | +card(href='#') | 4 | +card(href='#') |
5 | +card-image(src='Drawing_Half.png' style={ 'aspect-ratio': '21 / 9' }) | 5 | +card-image(src='Drawing_Half.png' style={ 'aspect-ratio': '21 / 9' }) |
@@ -44,11 +44,26 @@ mixin view-card | |||
44 | p= loremIpsum | 44 | p= loremIpsum |
45 | p= loremIpsum | 45 | p= loremIpsum |
46 | 46 | ||
47 | +divider('faint') | 47 | each layout in ['grid', 'masonry', 'masonry-h'] |
48 | - | ||
49 | let quiet = true | ||
48 | 50 | ||
49 | .l-card-list.l-card-list--masonry | 51 | let classes = { |
50 | each img in ['Drawing_Half.png', '0000 Cover@0.5x.webp', 'avatar.png', '01 Design Cody.png', 'avatar.png', 'Drawing_Half.png'] | 52 | 'l-card-list': true, |
51 | +card(href='#' class='l-card-list__card') | 53 | 'l-card-list--aspect-5/4': layout === 'grid', |
52 | +card-image(src=img) | 54 | 'l-card-list--quiet': quiet, |
53 | +card-body | 55 | } |
54 | +card-title= 'XS Heading' | 56 | classes[`l-card-list--${layout}`] = true; |
57 | |||
58 | |||
59 | +divider('faint')(class='u-mb-700') | ||
60 | |||
61 | div(class=classes) | ||
62 | each img, i in ['Drawing_Half.png', '0000 Cover@0.5x.webp', 'avatar.png', '01 Design Cody.png', 'avatar.png', 'Drawing_Half.png'] | ||
63 | +card(quiet=quiet href='#' class='l-card-list__card') | ||
64 | +card-image(src=img class='l-card-list__card-image') | ||
65 | +card-body | ||
66 | .l-media | ||
67 | .l-media__block.l-media__block--main | ||
68 | h1.u-mbs-0= 'XS Heading' | ||
69 | small.u-c-mute-more= `Episode ${i + 1}` | ||