Added code and blockquote styles, better headings, various other updates

5 files changed, 44 insertions, 5 deletions

diff --git a/tpl/index.pug b/tpl/index.pug
index 6565589..7c3696e 100644
--- a/tpl/index.pug
+++ b/tpl/index.pug
@@ -52,6 +52,8 @@ mixin user-card(name, hue)
 include views/heading.pug
 include views/divider.pug
 include views/colored-links.pug
+include views/code.pug
+include views/blockquote.pug
 include views/badge.pug
 include views/button.pug
 include views/text-field.pug
@@ -90,6 +92,8 @@ html
             +view-heading
             +view-divider
             +view-colored-links
+            +view-code
+            +view-blockquote
             +view-badge
             +view-button
             +view-text-field
diff --git a/tpl/objects/heading.pug b/tpl/objects/heading.pug
index a0de4af..aa3fec9 100644
--- a/tpl/objects/heading.pug
+++ b/tpl/objects/heading.pug
@@ -1,7 +1,11 @@
-mixin h1-heading(level)
+mixin h1-heading(level, inner = false)
     - let classes = ['o-heading', 'o-heading--' + level]
     h1(class=classes)&attributes(attributes)
-        block
+        if inner
+            span.o-heading__inner
+                block
+        else
+            block
 
 mixin h2-heading(level)
     - let classes = ['o-heading', 'o-heading--' + level]
@@ -28,7 +32,11 @@ mixin h6-heading(level)
     h6(class=classes)&attributes(attributes)
         block
 
-mixin div-heading(level)
+mixin div-heading(level, inner = false)
     - let classes = ['o-heading', 'o-heading--' + level]
     div(class=classes)&attributes(attributes)
-        block
+        if inner
+            span.o-heading__inner
+                block
+        else
+            block
diff --git a/tpl/views/blockquote.pug b/tpl/views/blockquote.pug
new file mode 100644
index 0000000..a346292
--- /dev/null
+++ b/tpl/views/blockquote.pug
@@ -0,0 +1,6 @@
+mixin view-blockquote 
+    +view('blockquote', 'Blockquote')
+        .c-box.s-blockquote
+            p= loremIpsum
+            blockquote= loremIpsum
+            p= loremIpsum
diff --git a/tpl/views/code.pug b/tpl/views/code.pug
new file mode 100644
index 0000000..552500d
--- /dev/null
+++ b/tpl/views/code.pug
@@ -0,0 +1,13 @@
+mixin view-code 
+    +view('code', 'Code')
+        .c-box.s-body
+            p= loremIpsum
+            pre
+                code.
+                    font-weight:    700;
+                    letter-spacing: 1px;
+                    text-transform: uppercase;
+            p= loremIpsum
+
+        .c-box.s-body.
+            And here is an #[code inline] code tag.
diff --git a/tpl/views/heading.pug b/tpl/views/heading.pug
index a49c93d..efdfb69 100644
--- a/tpl/views/heading.pug
+++ b/tpl/views/heading.pug
@@ -1,7 +1,15 @@
 mixin view-heading 
     +view('heading', 'Heading')
         .c-box
-            +div-heading('xxl')= 'XXL Heading'
+            h1= 'H1 default'
+            h2= 'H2 default'
+            h3= 'H3 default'
+            h4= 'H4 default'
+            h5= 'H5 default'
+            h6= 'H6 default'
+
+        .c-box
+            +div-heading('xxl', true)= 'XXL Heading'
             +div-heading('xl')= 'XL Heading'
             +div-heading('lg')= 'LG Heading'
             +div-heading('md')= 'MD Heading'