diff options
Diffstat (limited to 'tpl')
| -rw-r--r-- | tpl/index.pug | 4 | ||||
| -rw-r--r-- | tpl/objects/heading.pug | 16 | ||||
| -rw-r--r-- | tpl/views/blockquote.pug | 6 | ||||
| -rw-r--r-- | tpl/views/code.pug | 13 | ||||
| -rw-r--r-- | tpl/views/heading.pug | 10 |
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) | |||
| 52 | include views/heading.pug | 52 | include views/heading.pug |
| 53 | include views/divider.pug | 53 | include views/divider.pug |
| 54 | include views/colored-links.pug | 54 | include views/colored-links.pug |
| 55 | include views/code.pug | ||
| 56 | include views/blockquote.pug | ||
| 55 | include views/badge.pug | 57 | include views/badge.pug |
| 56 | include views/button.pug | 58 | include views/button.pug |
| 57 | include views/text-field.pug | 59 | include views/text-field.pug |
| @@ -90,6 +92,8 @@ html | |||
| 90 | +view-heading | 92 | +view-heading |
| 91 | +view-divider | 93 | +view-divider |
| 92 | +view-colored-links | 94 | +view-colored-links |
| 95 | +view-code | ||
| 96 | +view-blockquote | ||
| 93 | +view-badge | 97 | +view-badge |
| 94 | +view-button | 98 | +view-button |
| 95 | +view-text-field | 99 | +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 @@ | |||
| 1 | mixin h1-heading(level) | 1 | mixin h1-heading(level, inner = false) |
| 2 | - let classes = ['o-heading', 'o-heading--' + level] | 2 | - let classes = ['o-heading', 'o-heading--' + level] |
| 3 | h1(class=classes)&attributes(attributes) | 3 | h1(class=classes)&attributes(attributes) |
| 4 | block | 4 | if inner |
| 5 | span.o-heading__inner | ||
| 6 | block | ||
| 7 | else | ||
| 8 | block | ||
| 5 | 9 | ||
| 6 | mixin h2-heading(level) | 10 | mixin h2-heading(level) |
| 7 | - let classes = ['o-heading', 'o-heading--' + level] | 11 | - let classes = ['o-heading', 'o-heading--' + level] |
| @@ -28,7 +32,11 @@ mixin h6-heading(level) | |||
| 28 | h6(class=classes)&attributes(attributes) | 32 | h6(class=classes)&attributes(attributes) |
| 29 | block | 33 | block |
| 30 | 34 | ||
| 31 | mixin div-heading(level) | 35 | mixin div-heading(level, inner = false) |
| 32 | - let classes = ['o-heading', 'o-heading--' + level] | 36 | - let classes = ['o-heading', 'o-heading--' + level] |
| 33 | div(class=classes)&attributes(attributes) | 37 | div(class=classes)&attributes(attributes) |
| 34 | block | 38 | if inner |
| 39 | span.o-heading__inner | ||
| 40 | block | ||
| 41 | else | ||
| 42 | 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 @@ | |||
| 1 | mixin view-blockquote | ||
| 2 | +view('blockquote', 'Blockquote') | ||
| 3 | .c-box.s-blockquote | ||
| 4 | p= loremIpsum | ||
| 5 | blockquote= loremIpsum | ||
| 6 | 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 @@ | |||
| 1 | mixin view-code | ||
| 2 | +view('code', 'Code') | ||
| 3 | .c-box.s-body | ||
| 4 | p= loremIpsum | ||
| 5 | pre | ||
| 6 | code. | ||
| 7 | font-weight: 700; | ||
| 8 | letter-spacing: 1px; | ||
| 9 | text-transform: uppercase; | ||
| 10 | p= loremIpsum | ||
| 11 | |||
| 12 | .c-box.s-body. | ||
| 13 | 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 @@ | |||
| 1 | mixin view-heading | 1 | mixin view-heading |
| 2 | +view('heading', 'Heading') | 2 | +view('heading', 'Heading') |
| 3 | .c-box | 3 | .c-box |
| 4 | +div-heading('xxl')= 'XXL Heading' | 4 | h1= 'H1 default' |
| 5 | h2= 'H2 default' | ||
| 6 | h3= 'H3 default' | ||
| 7 | h4= 'H4 default' | ||
| 8 | h5= 'H5 default' | ||
| 9 | h6= 'H6 default' | ||
| 10 | |||
| 11 | .c-box | ||
| 12 | +div-heading('xxl', true)= 'XXL Heading' | ||
| 5 | +div-heading('xl')= 'XL Heading' | 13 | +div-heading('xl')= 'XL Heading' |
| 6 | +div-heading('lg')= 'LG Heading' | 14 | +div-heading('lg')= 'LG Heading' |
| 7 | +div-heading('md')= 'MD Heading' | 15 | +div-heading('md')= 'MD Heading' |
