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' |