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' }) |