From c93948dbc7790d1c36a7e36df4e5485ca249cc37 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Fri, 10 Jun 2022 21:13:39 +0200 Subject: Added code and blockquote styles, better headings, various other updates --- tpl/index.pug | 4 ++++ tpl/objects/heading.pug | 16 ++++++++++++---- tpl/views/blockquote.pug | 6 ++++++ tpl/views/code.pug | 13 +++++++++++++ tpl/views/heading.pug | 10 +++++++++- 5 files changed, 44 insertions(+), 5 deletions(-) create mode 100644 tpl/views/blockquote.pug create mode 100644 tpl/views/code.pug (limited to 'tpl') 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' -- cgit v1.2.3-70-g09d2