From 5e2696d9ae35b37a9f7d0fe1c52b93fb84570464 Mon Sep 17 00:00:00 2001
From: Volpeon <git@volpeon.ink>
Date: Fri, 25 Mar 2022 18:29:21 +0100
Subject: Split demo in :target views

---
 tpl/views/avatar.pug | 53 ++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 53 insertions(+)
 create mode 100644 tpl/views/avatar.pug

(limited to 'tpl/views/avatar.pug')

diff --git a/tpl/views/avatar.pug b/tpl/views/avatar.pug
new file mode 100644
index 0000000..01aaf93
--- /dev/null
+++ b/tpl/views/avatar.pug
@@ -0,0 +1,53 @@
+mixin view-avatar 
+    +view('avatar', 'Avatar')
+        .c-box
+            div(style={ display: 'flex', gap: '.3em' })
+                +avatar
+                    = 'Vo'
+                +avatar(status='green' hue=45)
+                    = 'lp'
+                +avatar(src='avatar.png')
+                +avatar(src='avatar.png' status='red')
+            br
+            br
+            div(style={ display: 'flex', gap: '.3em' })
+                +avatar(size='75' hue=90)
+                    = 'eo'
+                +avatar(size='75' status='green' hue=135)
+                    = 'n'
+                +avatar(size='75' src='avatar.png')
+                +avatar(size='75' src='avatar.png' status='red')
+            br
+            br
+            div(style={ display: 'flex', gap: '.3em' })
+                +avatar(size='50' hue=180)
+                    = 'V'
+                +avatar(size='50' hue=225)
+                    = 'o'
+                +avatar(size='50' src='avatar.png')
+
+        .c-box
+            div(style={ display: 'flex', gap: '.3em' })
+                +avatar(circle=true)
+                    = 'Vo'
+                +avatar(circle=true status='green' hue=45)
+                    = 'lp'
+                +avatar(circle=true src='avatar.png')
+                +avatar(circle=true src='avatar.png' status='red')
+            br
+            br
+            div(style={ display: 'flex', gap: '.3em' })
+                +avatar(circle=true size='75' hue=90)
+                    = 'eo'
+                +avatar(circle=true size='75' status='green' hue=135)
+                    = 'n'
+                +avatar(circle=true size='75' src='avatar.png')
+                +avatar(circle=true size='75' src='avatar.png' status='red')
+            br
+            br
+            div(style={ display: 'flex', gap: '.3em' })
+                +avatar(circle=true size='50' hue=180)
+                    = 'V'
+                +avatar(circle=true size='50' hue=225)
+                    = 'o'
+                +avatar(circle=true size='50' src='avatar.png')
-- 
cgit v1.3.1