Add card

11 files changed, 71 insertions, 43 deletions

diff --git a/tpl/index.pug b/tpl/index.pug
index b6af02b..a6e99dd 100644
--- a/tpl/index.pug
+++ b/tpl/index.pug
@@ -49,7 +49,7 @@ mixin user-card(name, hue)
     -
         const avaName = name.slice(0, 1)
 
-    .l-media.l-media--flush.l-media--75
+    .l-media.l-media--sm
         +avatar(block=true size='xs' class='l-media__block' hue=hue)
             = avaName
         = name
@@ -134,7 +134,7 @@ html
             +view-message
             +view-message-group
 
-        .c-sidebar.l-overflow.t-base.u-p-75
-            +menu
+        .c-sidebar.l-overflow.u-bie-1.u-p-100
+            +side-nav
                 each view in views
-                    +menu-item(tag='a' href='#' + view.id)= view.title
+                    +side-nav-item(tag='a' href='#' + view.id)= view.title
diff --git a/tpl/objects/avatar.pug b/tpl/objects/avatar.pug
index 19439bb..ca3de07 100644
--- a/tpl/objects/avatar.pug
+++ b/tpl/objects/avatar.pug
@@ -20,11 +20,21 @@ mixin avatar
             styles['--avatar--colors--h'] = attributes.hue;
         }
 
-    a(class=classes style=styles href=attributes.href)
-        if attributes.status 
-            +status-indicator(attributes.status)(class='o-avatar__status')
-        if attributes.src 
-            img.o-avatar__content(src=attributes.src)
-        else
-            .o-avatar__content
-                block
+    if attributes.href
+        a(class=classes style=styles href=attributes.href)
+            if attributes.status 
+                +status-indicator(attributes.status)(class='o-avatar__status')
+            if attributes.src 
+                img.o-avatar__content(src=attributes.src)
+            else
+                .o-avatar__content
+                    block
+    else
+        div(class=classes style=styles)
+            if attributes.status 
+                +status-indicator(attributes.status)(class='o-avatar__status')
+            if attributes.src 
+                img.o-avatar__content(src=attributes.src)
+            else
+                .o-avatar__content
+                    block
diff --git a/tpl/objects/card.pug b/tpl/objects/card.pug
index d6516be..d61393d 100644
--- a/tpl/objects/card.pug
+++ b/tpl/objects/card.pug
@@ -1,29 +1,34 @@
 mixin card
-    - const slots = {}
-
-    mixin slot(key)
-        - slots[key] = block
-
     -
-        block ? block() : undefined 
-
         let classes = {
             'o-card': true,
         }
 
     if attributes.href
         a(href=attributes.href class=classes)
-            if slots.body
-                .o-card__body
-                    - slots.body()
-            if slots.footer
-                .o-card__footer
-                    - slots.footer()
+            block
     else
         div(class=classes)
-            if slots.body
-                .o-card__body
-                    - slots.body()
-            if slots.footer
-                .o-card__footer
-                    - slots.footer()
+            block
+
+mixin card-image
+    .o-card__image
+        img.o-card__image-img(src=attributes.src)
+
+mixin card-body
+    .o-card__body
+        block
+
+mixin card-title 
+    h1.o-card__title
+        block
+
+mixin card-avatar 
+    +avatar(class='o-card__avatar' src=attributes.src size='xl')
+
+mixin card-content 
+    .o-card__content
+        block
+mixin card-footer
+    footer.o-card__footer
+        block
diff --git a/tpl/objects/menu.pug b/tpl/objects/menu.pug
index a8b20d7..578f9bc 100644
--- a/tpl/objects/menu.pug
+++ b/tpl/objects/menu.pug
@@ -19,7 +19,7 @@ mixin menu-item
         let classes = {
             'o-menu__item':   true,
             'l-media':        true,
-            'l-media--75':    true,
+            'l-media--sm':    true,
             'o-menu__header': attributes.header,
             'is-selected':    attributes.selected,
         }
diff --git a/tpl/objects/message.pug b/tpl/objects/message.pug
index d644347..6b64a40 100644
--- a/tpl/objects/message.pug
+++ b/tpl/objects/message.pug
@@ -45,7 +45,7 @@ mixin message(user)
 
     article(class=classes)
         if user && attributes.avatar
-            .l-media.l-media--flush.l-flex--align-start
+            .l-media.l-flex--align-start
                 .l-media__block.u-mt-50.u-p-sticky-top
                     +avatar= user.slice(0, 2)
                 .l-media__block.l-media__block--main
diff --git a/tpl/objects/side-nav.pug b/tpl/objects/side-nav.pug
index 511f298..ccd24e4 100644
--- a/tpl/objects/side-nav.pug
+++ b/tpl/objects/side-nav.pug
@@ -19,7 +19,7 @@ mixin side-nav-item
         let classes = {
             'o-side-nav__item':   true,
             'l-media':        true,
-            'l-media--75':    true,
+            'l-media--sm':    true,
             'o-side-nav__header': attributes.header,
             'is-selected':    attributes.selected,
         }
diff --git a/tpl/objects/text-field.pug b/tpl/objects/text-field.pug
index f8e5263..0342f01 100644
--- a/tpl/objects/text-field.pug
+++ b/tpl/objects/text-field.pug
@@ -15,7 +15,6 @@ mixin text-field
             'is-invalid':             attributes.invalid,
             'is-disabled':            attributes.disabled,
             'l-media':                !!block,
-            'l-media--flush':         !!block,
             'l-media--gapless':       !!block,
         }
         if (attributes.class) {
diff --git a/tpl/views/card.pug b/tpl/views/card.pug
index 0b88b0e..6858867 100644
--- a/tpl/views/card.pug
+++ b/tpl/views/card.pug
@@ -1,9 +1,23 @@
 mixin view-card 
     +view('card', 'Card')
-        .c-box
+        .c-box(style={ display: 'flex', 'flex-direction': 'column', gap: '1em' })
             +card(href='#')
-                +slot('body')
-                    h1= 'XS Heading'
-                    p= loremIpsum
-                +slot('footer')
+                +card-image(src='Drawing_Half.png')
+                +card-avatar(src='avatar.png')
+                +card-body
+                    +card-title= 'XS Heading'
+                    +card-content= loremIpsum
+                +card-footer
+                    = 'Footer'
+
+            +card(href='#')
+                +card-body
+                    .l-media
+                        +avatar(class='l-media__block' src='avatar.png')
+                        .l-media__block.l-media__block--main
+                            strong.u-d-block= 'Volpeon'
+                            small.u-d-block= '@volpeon@is-a.wyvern.rip'
+                    +card-content= loremIpsum
+                +card-image(src='Drawing_Half.png')
+                +card-body
                     = 'Footer'
diff --git a/tpl/views/menu.pug b/tpl/views/menu.pug
index 34a15ce..7c5df03 100644
--- a/tpl/views/menu.pug
+++ b/tpl/views/menu.pug
@@ -5,7 +5,7 @@ mixin view-menu
                 +action-button(quiet=true selected=true)= 'Menu'
                 +popover
                     +menu
-                        +menu-slot(class='l-media l-media--flush')
+                        +menu-slot(class='l-media')
                             +avatar(block=true circle=true size='100' src='avatar.png' class='l-media__block')
                             .l-media__block.l-media__block--main
                                 strong.u-d-block= 'Volpeon'
diff --git a/tpl/views/message-group.pug b/tpl/views/message-group.pug
index 3d1166f..dc744d9 100644
--- a/tpl/views/message-group.pug
+++ b/tpl/views/message-group.pug
@@ -68,7 +68,7 @@ mixin view-message-group
             +message-group('Volpeon')
                 +message()(theme='t-up' group=true)
                     +slot('header')
-                        .l-media.l-media--flush
+                        .l-media
                             .l-media__block.l-media__block--main
                                 strong= 'Volpeon'
                                 small.u-ml-100= '@volpeon@mk.vulpes.one'
diff --git a/tpl/views/message.pug b/tpl/views/message.pug
index f256e41..9130537 100644
--- a/tpl/views/message.pug
+++ b/tpl/views/message.pug
@@ -18,7 +18,7 @@ mixin view-message
         .c-box.l-overflow(style='resize: vertical')
             +message('Volpeon')(avatar=true theme='t-up')
                 +slot('header')
-                    .l-media.l-media--flush
+                    .l-media
                         .l-media__block.l-media__block--main
                             strong= 'Volpeon'
                             small.u-ml-100= '@volpeon@mk.vulpes.one'