diff options
Diffstat (limited to 'tpl/views')
| -rw-r--r-- | tpl/views/avatar.pug | 64 |
1 files changed, 60 insertions, 4 deletions
diff --git a/tpl/views/avatar.pug b/tpl/views/avatar.pug index fcde68d..b08f5d7 100644 --- a/tpl/views/avatar.pug +++ b/tpl/views/avatar.pug | |||
| @@ -2,11 +2,39 @@ mixin view-avatar | |||
| 2 | +view('avatar', 'Avatar') | 2 | +view('avatar', 'Avatar') |
| 3 | .c-box | 3 | .c-box |
| 4 | div(style={ display: 'flex', gap: '.3em' }) | 4 | div(style={ display: 'flex', gap: '.3em' }) |
| 5 | +avatar(size='150' hue=180 href='#') | 5 | +avatar(size='400' href='#') |
| 6 | = 'Vo' | 6 | = 'Vo' |
| 7 | +avatar(size='150' hue=225) | 7 | +avatar(size='400' status='green' hue=45) |
| 8 | = 'lp' | ||
| 9 | +avatar(size='400' src='avatar.png') | ||
| 10 | +avatar(size='400' src='avatar.png' status='red') | ||
| 11 | br | ||
| 12 | br | ||
| 13 | div(style={ display: 'flex', gap: '.3em' }) | ||
| 14 | +avatar(size='300' href='#') | ||
| 15 | = 'Vo' | ||
| 16 | +avatar(size='300' status='green' hue=45) | ||
| 17 | = 'lp' | ||
| 18 | +avatar(size='300' src='avatar.png') | ||
| 19 | +avatar(size='300' src='avatar.png' status='red') | ||
| 20 | br | ||
| 21 | br | ||
| 22 | div(style={ display: 'flex', gap: '.3em' }) | ||
| 23 | +avatar(size='200' href='#') | ||
| 24 | = 'Vo' | ||
| 25 | +avatar(size='200' status='green' hue=45) | ||
| 26 | = 'lp' | ||
| 27 | +avatar(size='200' src='avatar.png') | ||
| 28 | +avatar(size='200' src='avatar.png' status='red') | ||
| 29 | br | ||
| 30 | br | ||
| 31 | div(style={ display: 'flex', gap: '.3em' }) | ||
| 32 | +avatar(size='150' href='#') | ||
| 33 | = 'Vo' | ||
| 34 | +avatar(size='150' status='green' hue=45) | ||
| 8 | = 'lp' | 35 | = 'lp' |
| 9 | +avatar(size='150' src='avatar.png') | 36 | +avatar(size='150' src='avatar.png') |
| 37 | +avatar(size='150' src='avatar.png' status='red') | ||
| 10 | br | 38 | br |
| 11 | br | 39 | br |
| 12 | div(style={ display: 'flex', gap: '.3em' }) | 40 | div(style={ display: 'flex', gap: '.3em' }) |
| @@ -36,11 +64,39 @@ mixin view-avatar | |||
| 36 | 64 | ||
| 37 | .c-box | 65 | .c-box |
| 38 | div(style={ display: 'flex', gap: '.3em' }) | 66 | div(style={ display: 'flex', gap: '.3em' }) |
| 39 | +avatar(circle=true size='150' hue=180 href='#') | 67 | +avatar(circle=true size='400' href='#') |
| 68 | = 'Vo' | ||
| 69 | +avatar(circle=true size='400' status='green' hue=45) | ||
| 70 | = 'lp' | ||
| 71 | +avatar(circle=true size='400' src='avatar.png') | ||
| 72 | +avatar(circle=true size='400' src='avatar.png' status='red') | ||
| 73 | br | ||
| 74 | br | ||
| 75 | div(style={ display: 'flex', gap: '.3em' }) | ||
| 76 | +avatar(circle=true size='300' href='#') | ||
| 77 | = 'Vo' | ||
| 78 | +avatar(circle=true size='300' status='green' hue=45) | ||
| 79 | = 'lp' | ||
| 80 | +avatar(circle=true size='300' src='avatar.png') | ||
| 81 | +avatar(circle=true size='300' src='avatar.png' status='red') | ||
| 82 | br | ||
| 83 | br | ||
| 84 | div(style={ display: 'flex', gap: '.3em' }) | ||
| 85 | +avatar(circle=true size='200' href='#') | ||
| 86 | = 'Vo' | ||
| 87 | +avatar(circle=true size='200' status='green' hue=45) | ||
| 88 | = 'lp' | ||
| 89 | +avatar(circle=true size='200' src='avatar.png') | ||
| 90 | +avatar(circle=true size='200' src='avatar.png' status='red') | ||
| 91 | br | ||
| 92 | br | ||
| 93 | div(style={ display: 'flex', gap: '.3em' }) | ||
| 94 | +avatar(circle=true size='150' href='#') | ||
| 40 | = 'Vo' | 95 | = 'Vo' |
| 41 | +avatar(circle=true size='150' hue=225) | 96 | +avatar(circle=true size='150' status='green' hue=45) |
| 42 | = 'lp' | 97 | = 'lp' |
| 43 | +avatar(circle=true size='150' src='avatar.png') | 98 | +avatar(circle=true size='150' src='avatar.png') |
| 99 | +avatar(circle=true size='150' src='avatar.png' status='red') | ||
| 44 | br | 100 | br |
| 45 | br | 101 | br |
| 46 | div(style={ display: 'flex', gap: '.3em' }) | 102 | div(style={ display: 'flex', gap: '.3em' }) |