Update

5 files changed, 45 insertions, 14 deletions

diff --git a/tpl/views/card.pug b/tpl/views/card.pug
index 6858867..e466cdc 100644
--- a/tpl/views/card.pug
+++ b/tpl/views/card.pug
@@ -1,23 +1,54 @@
 mixin view-card 
     +view('card', 'Card')
-        .c-box(style={ display: 'flex', 'flex-direction': 'column', gap: '1em' })
+        .c-box(style={ display: 'flex', 'flex-direction': 'column', gap: '2em' })
             +card(href='#')
-                +card-image(src='Drawing_Half.png')
+                +card-image(src='Drawing_Half.png' style={ 'aspect-ratio': '21 / 9' })
                 +card-avatar(src='avatar.png')
                 +card-body
                     +card-title= 'XS Heading'
-                    +card-content= loremIpsum
+                    +card-content
+                        p= loremIpsum
+                        p= loremIpsum
                 +card-footer
                     = 'Footer'
 
-            +card(href='#')
+            +card
                 +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-content
+                        p= loremIpsum
+                        p= loremIpsum
+                +card-image(src='Drawing_Half.png' style={ 'aspect-ratio': '16 / 9' })
                 +card-body
-                    = 'Footer'
+                    .l-media
+                        .l-media__block
+                            +badge('positive')(quiet=true icon='repeat' href='#')
+                                +icon('repeat')
+                                strong.u-mis-50= '12'
+                        .l-media__block
+                            +badge('warning')(quiet=true icon='star' href='#')
+                                +icon('star')
+                                strong.u-mis-50= '34'
+                        .l-media__block.u-mis-auto
+                            +a-button(primary=true)= 'Reply'
+
+            +card(quiet=true href='#')
+                +card-image(src='Drawing_Half.png' style={ 'aspect-ratio': '21 / 9' })
+                +card-body
+                    +card-title= 'XS Heading'
+                    +card-content
+                        p= loremIpsum
+                        p= loremIpsum
+
+        +divider('faint')
+
+        .l-card-list.l-card-list--masonry
+            each img in ['Drawing_Half.png', '0000 Cover@0.5x.webp', 'avatar.png', '01 Design Cody.png', 'avatar.png', 'Drawing_Half.png']
+                +card(href='#' class='l-card-list__card')
+                    +card-image(src=img)
+                    +card-body
+                        +card-title= 'XS Heading'
diff --git a/tpl/views/icon-nav.pug b/tpl/views/icon-nav.pug
index e71229d..8ba9880 100644
--- a/tpl/views/icon-nav.pug
+++ b/tpl/views/icon-nav.pug
@@ -5,7 +5,7 @@ mixin view-icon-nav
                 +icon-nav-item('hash')
                 +icon-nav-item('bookmark')(selected=true)
                 +icon-nav-item('tags')
-                +icon-nav-item('cog')(class='u-ml-auto')
+                +icon-nav-item('cog')(class='u-mis-auto')
                 +icon-nav-item('logout')
 
         .c-box
diff --git a/tpl/views/message-group.pug b/tpl/views/message-group.pug
index dc744d9..48cb008 100644
--- a/tpl/views/message-group.pug
+++ b/tpl/views/message-group.pug
@@ -71,10 +71,10 @@ mixin view-message-group
                         .l-media
                             .l-media__block.l-media__block--main
                                 strong= 'Volpeon'
-                                small.u-ml-100= '@volpeon@mk.vulpes.one'
+                                small.u-mis-100= '@volpeon@mk.vulpes.one'
                             small.l-media__block
                                 = '5 minutes ago'
-                                +icon('lock')(class='u-ml-100')
+                                +icon('lock')(class='u-mis-100')
                     +slot('body')= 'Full width bubble messages test'
                 +message()(theme='t-up' group=true)
                     +slot('body')= loremIpsum
diff --git a/tpl/views/message.pug b/tpl/views/message.pug
index 9130537..dc8b289 100644
--- a/tpl/views/message.pug
+++ b/tpl/views/message.pug
@@ -5,7 +5,7 @@ mixin view-message
                 +slot('body')= loremIpsum
                 +slot('time')
                     = '12:34'
-                    +icon('lock')(class='u-ml-100')
+                    +icon('lock')(class='u-mis-100')
 
         .c-box
             +message('Volpeon')(compact=true highlight=true theme='t-up')
@@ -21,10 +21,10 @@ mixin view-message
                     .l-media
                         .l-media__block.l-media__block--main
                             strong= 'Volpeon'
-                            small.u-ml-100= '@volpeon@mk.vulpes.one'
+                            small.u-mis-100= '@volpeon@mk.vulpes.one'
                         small.l-media__block
                             = '5 minutes ago'
-                            +icon('lock')(class='u-ml-100')
+                            +icon('lock')(class='u-mis-100')
                 +slot('body')
                     = loremIpsum
                     = loremIpsum
diff --git a/tpl/views/text-field.pug b/tpl/views/text-field.pug
index 9a60741..165e2ce 100644
--- a/tpl/views/text-field.pug
+++ b/tpl/views/text-field.pug
@@ -17,7 +17,7 @@ mixin view-text-field
                 +text-field(placeholder='Just landed in L.A.' class="u-p-50")
                     +slot('pre')
                         +action-button(quiet=true class='l-media__block')= 'Volpeon'
-                        +divider('vertical')(class='u-ml-50')
+                        +divider('vertical')(class='u-mis-50')
                     +slot('post')
                         +action-button(quiet=true icon='smile' class='l-media__block')
                         +action-button(quiet=true icon='send' class='l-media__block')