diff options
Diffstat (limited to 'tpl')
-rw-r--r-- | tpl/objects/card.pug | 11 | ||||
-rw-r--r-- | tpl/objects/divider.pug | 2 | ||||
-rw-r--r-- | tpl/views/card.pug | 3 | ||||
-rw-r--r-- | tpl/views/divider.pug | 10 |
4 files changed, 24 insertions, 2 deletions
diff --git a/tpl/objects/card.pug b/tpl/objects/card.pug index 2ab9bef..e0f6a15 100644 --- a/tpl/objects/card.pug +++ b/tpl/objects/card.pug | |||
@@ -26,7 +26,16 @@ mixin card-image | |||
26 | classes[attributes.class] = true; | 26 | classes[attributes.class] = true; |
27 | } | 27 | } |
28 | 28 | ||
29 | img(class=classes src=attributes.src style=attributes.style) | 29 | let imgClasses = { |
30 | 'o-card__image-img': true, | ||
31 | 'l-card-list__card-image': attributes.list | ||
32 | } | ||
33 | |||
34 | div(class=classes) | ||
35 | img(class=imgClasses src=attributes.src style=attributes.style) | ||
36 | if block | ||
37 | .o-card__image-overlay | ||
38 | block | ||
30 | 39 | ||
31 | mixin card-body | 40 | mixin card-body |
32 | .o-card__body(style=attributes.style) | 41 | .o-card__body(style=attributes.style) |
diff --git a/tpl/objects/divider.pug b/tpl/objects/divider.pug index 46425cd..ed4d27a 100644 --- a/tpl/objects/divider.pug +++ b/tpl/objects/divider.pug | |||
@@ -3,6 +3,8 @@ mixin divider(level) | |||
3 | let classes = { | 3 | let classes = { |
4 | 'o-divider': true, | 4 | 'o-divider': true, |
5 | 'o-divider--labelled': !!block, | 5 | 'o-divider--labelled': !!block, |
6 | 'o-divider--vertical': !!attributes.vertical, | ||
7 | 'o-divider--dot': !!attributes.dot, | ||
6 | ['o-divider--' + level]: true, | 8 | ['o-divider--' + level]: true, |
7 | ['o-divider--' + attributes.color]: !!attributes.color | 9 | ['o-divider--' + attributes.color]: !!attributes.color |
8 | } | 10 | } |
diff --git a/tpl/views/card.pug b/tpl/views/card.pug index 633cf01..61081a9 100644 --- a/tpl/views/card.pug +++ b/tpl/views/card.pug | |||
@@ -36,6 +36,7 @@ mixin view-card | |||
36 | 36 | ||
37 | +card(quiet=true href='#' class='l-card-list__card') | 37 | +card(quiet=true href='#' class='l-card-list__card') |
38 | +card-image(src='Drawing_Half.png' style={ 'aspect-ratio': '21 / 9' }) | 38 | +card-image(src='Drawing_Half.png' style={ 'aspect-ratio': '21 / 9' }) |
39 | +badge= 'Drawings' | ||
39 | +card-body | 40 | +card-body |
40 | +card-title= 'XS Heading' | 41 | +card-title= 'XS Heading' |
41 | +card-content | 42 | +card-content |
@@ -59,7 +60,7 @@ mixin view-card | |||
59 | div(class=classes) | 60 | div(class=classes) |
60 | each img, i in ['Drawing_Half.png', '0000 Cover@0.5x.webp', 'avatar.png', '01 Design Cody.png', 'avatar.png', 'Drawing_Half.png'] | 61 | each img, i in ['Drawing_Half.png', '0000 Cover@0.5x.webp', 'avatar.png', '01 Design Cody.png', 'avatar.png', 'Drawing_Half.png'] |
61 | +card(quiet=quiet href='#' class='l-card-list__card') | 62 | +card(quiet=quiet href='#' class='l-card-list__card') |
62 | +card-image(src=img class='l-card-list__card-image') | 63 | +card-image(src=img list=true) |
63 | +card-body | 64 | +card-body |
64 | .l-media | 65 | .l-media |
65 | .l-media__block.l-media__block--main | 66 | .l-media__block.l-media__block--main |
diff --git a/tpl/views/divider.pug b/tpl/views/divider.pug index e2f2e01..ea08984 100644 --- a/tpl/views/divider.pug +++ b/tpl/views/divider.pug | |||
@@ -23,6 +23,16 @@ mixin view-divider | |||
23 | +divider('medium') | 23 | +divider('medium') |
24 | +divider('faint') | 24 | +divider('faint') |
25 | 25 | ||
26 | .c-box | ||
27 | .l-media(style="height: 1em") | ||
28 | +divider('strong')(vertical=true class="l-media__block") | ||
29 | +divider('medium')(vertical=true class="l-media__block") | ||
30 | +divider('faint')(vertical=true class="l-media__block") | ||
31 | .l-media(style="height: 1em") | ||
32 | +divider('strong')(dot=true class="l-media__block") | ||
33 | +divider('medium')(dot=true class="l-media__block") | ||
34 | +divider('faint')(dot=true class="l-media__block") | ||
35 | |||
26 | each theme in ['accent', 'negative'] | 36 | each theme in ['accent', 'negative'] |
27 | .c-box | 37 | .c-box |
28 | +divider('strong')(color=theme)= 'Strong' | 38 | +divider('strong')(color=theme)= 'Strong' |