@md-plugins/quasar-app-extension-q-press 0.1.0-alpha.10 → 0.1.0-alpha.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -1
- package/package.json +14 -14
- package/src/templates/init/src/_q-press/css/prism-theme.scss +1 -1
- package/src/templates/init/src/_q-press/css/themes/default.scss +5 -5
- package/src/templates/init/src/_q-press/css/themes/mystic.scss +73 -0
- package/src/templates/init/src/_q-press/css/themes/newspaper.scss +25 -25
- package/src/templates/init/src/_q-press/css/themes/sunrise.scss +29 -27
- package/src/templates/init/src/_q-press/css/themes/tawny.scss +26 -26
- package/src/templates/init/src/markdown/__elements.md +5 -9
- package/src/templates/init/src/markdown/__elements2.md +11 -1
- package/src/templates/init/src/markdown/md-plugins/codeblocks/overview.md +1 -0
- package/src/templates/init/src/markdown/quasar-app-extensions/qpress/overview.md +3 -3
- package/src/templates/update/src/_q-press/css/prism-theme.scss +1 -1
- package/src/templates/update/src/_q-press/css/themes/default.scss +5 -5
- package/src/templates/update/src/_q-press/css/themes/mystic.scss +73 -0
- package/src/templates/update/src/_q-press/css/themes/newspaper.scss +25 -25
- package/src/templates/update/src/_q-press/css/themes/sunrise.scss +29 -27
- package/src/templates/update/src/_q-press/css/themes/tawny.scss +26 -26
package/README.md
CHANGED
|
@@ -44,7 +44,7 @@ The Ultimate Markdown Solution for the Quasar Framework.
|
|
|
44
44
|
|
|
45
45
|
1. Modify your `src/css/quasar.variables.scss`
|
|
46
46
|
|
|
47
|
-
- import a Q-Press theme (`default`, `sunrise`, `newspaper`, `tawny`, your own or a 3rd-party theme)
|
|
47
|
+
- import a Q-Press theme (`default`, `sunrise`, `newspaper`, `tawny`, `mystic`, your own or a 3rd-party theme)
|
|
48
48
|
- `@import '../.q-press/css/themes/sunrise.scss';`
|
|
49
49
|
|
|
50
50
|
2. Modify your `src/css/app.scss`
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@md-plugins/quasar-app-extension-q-press",
|
|
3
|
-
"version": "0.1.0-alpha.
|
|
3
|
+
"version": "0.1.0-alpha.11",
|
|
4
4
|
"description": "QPress - The Ultimate Markdown Solution for Quasar Framework",
|
|
5
5
|
"author": "hawkeye64 <galbraith64@gmail.com>",
|
|
6
6
|
"keywords": [
|
|
@@ -27,19 +27,19 @@
|
|
|
27
27
|
"yarn": ">= 1.6.0"
|
|
28
28
|
},
|
|
29
29
|
"dependencies": {
|
|
30
|
-
"@md-plugins/md-plugin-
|
|
31
|
-
"@md-plugins/md-plugin-containers": "0.1.0-alpha.
|
|
32
|
-
"@md-plugins/md-plugin-
|
|
33
|
-
"@md-plugins/md-plugin-
|
|
34
|
-
"@md-plugins/md-plugin-
|
|
35
|
-
"@md-plugins/md-plugin-
|
|
36
|
-
"@md-plugins/md-plugin-
|
|
37
|
-
"@md-plugins/md-plugin-
|
|
38
|
-
"@md-plugins/md-plugin-link": "0.1.0-alpha.
|
|
39
|
-
"@md-plugins/md-plugin-
|
|
40
|
-
"@md-plugins/md-plugin-
|
|
41
|
-
"@md-plugins/vite-md-plugin": "0.1.0-alpha.
|
|
42
|
-
"@md-plugins/shared": "0.1.0-alpha.
|
|
30
|
+
"@md-plugins/md-plugin-blockquote": "0.1.0-alpha.11",
|
|
31
|
+
"@md-plugins/md-plugin-containers": "0.1.0-alpha.11",
|
|
32
|
+
"@md-plugins/md-plugin-codeblocks": "0.1.0-alpha.11",
|
|
33
|
+
"@md-plugins/md-plugin-imports": "0.1.0-alpha.11",
|
|
34
|
+
"@md-plugins/md-plugin-frontmatter": "0.1.0-alpha.11",
|
|
35
|
+
"@md-plugins/md-plugin-headers": "0.1.0-alpha.11",
|
|
36
|
+
"@md-plugins/md-plugin-image": "0.1.0-alpha.11",
|
|
37
|
+
"@md-plugins/md-plugin-inlinecode": "0.1.0-alpha.11",
|
|
38
|
+
"@md-plugins/md-plugin-link": "0.1.0-alpha.11",
|
|
39
|
+
"@md-plugins/md-plugin-title": "0.1.0-alpha.11",
|
|
40
|
+
"@md-plugins/md-plugin-table": "0.1.0-alpha.11",
|
|
41
|
+
"@md-plugins/vite-md-plugin": "0.1.0-alpha.11",
|
|
42
|
+
"@md-plugins/shared": "0.1.0-alpha.11"
|
|
43
43
|
},
|
|
44
44
|
"devDependencies": {
|
|
45
45
|
"@types/markdown-it": "^14.1.2",
|
|
@@ -4,10 +4,10 @@ $primary: #214466;
|
|
|
4
4
|
$secondary: #266660;
|
|
5
5
|
$accent: #853394;
|
|
6
6
|
|
|
7
|
-
$positive: #
|
|
7
|
+
$positive: #2ecc71;
|
|
8
8
|
$negative: #ff1732;
|
|
9
|
-
$info: #
|
|
10
|
-
$warning: #
|
|
9
|
+
$info: #10a0ff;
|
|
10
|
+
$warning: #ffd52d;
|
|
11
11
|
|
|
12
12
|
$brand-primary: #00bfff;
|
|
13
13
|
$brand-secondary: #4b555c;
|
|
@@ -25,7 +25,7 @@ $brand-dark-codeblock-bg: #121212;
|
|
|
25
25
|
$brand-dark-codeblock-text: #e6e6e6;
|
|
26
26
|
|
|
27
27
|
$header-btn-color--light: #757575;
|
|
28
|
-
$header-btn-hover-color--light: #212121;
|
|
28
|
+
$header-btn-hover-color--light: #212121;
|
|
29
29
|
$header-btn-color--dark: #929397;
|
|
30
30
|
$header-btn-hover-color--dark: #fff;
|
|
31
31
|
|
|
@@ -38,7 +38,7 @@ $dark-text: $brand-dark-text;
|
|
|
38
38
|
$dark-bg: $brand-dark-bg;
|
|
39
39
|
|
|
40
40
|
$separator-color: $brand-accent;
|
|
41
|
-
$
|
|
41
|
+
$separator-color-dark: $brand-accent;
|
|
42
42
|
|
|
43
43
|
$font-size: 16px;
|
|
44
44
|
$font-size-brand: 16px;
|
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
@use 'sass:color';
|
|
2
|
+
|
|
3
|
+
// Mystic Theme Variables
|
|
4
|
+
$primary: #8a2be2;
|
|
5
|
+
$secondary: #00ced1;
|
|
6
|
+
$accent: #ff4500;
|
|
7
|
+
|
|
8
|
+
$positive: #2ecc71;
|
|
9
|
+
$negative: #ff1732;
|
|
10
|
+
$info: #10a0ff;
|
|
11
|
+
$warning: #ffd52d;
|
|
12
|
+
|
|
13
|
+
$brand-primary: #8a2be2;
|
|
14
|
+
$brand-secondary: #00ced1;
|
|
15
|
+
$brand-accent: #ff4500;
|
|
16
|
+
$brand-dark: #8d66da;
|
|
17
|
+
$brand-light: #e6e6fa;
|
|
18
|
+
$brand-medium: #9370db;
|
|
19
|
+
$brand-light-text: #4b0082;
|
|
20
|
+
$brand-light-bg: #e6e6fa;
|
|
21
|
+
$brand-dark-bg: #171122;
|
|
22
|
+
$brand-dark-text: #e6e6fa;
|
|
23
|
+
|
|
24
|
+
$brand-light-codeblock-bg: #f8f8ff;
|
|
25
|
+
$brand-light-codeblock-text: #9370db;
|
|
26
|
+
$brand-dark-codeblock-bg: #4b0082;
|
|
27
|
+
$brand-dark-codeblock-text: #e6e6fa;
|
|
28
|
+
|
|
29
|
+
$header-btn-color--light: #8a2be2;
|
|
30
|
+
$header-btn-hover-color--light: #ff4500;
|
|
31
|
+
$header-btn-color--dark: #00ced1;
|
|
32
|
+
$header-btn-hover-color--dark: #9370db;
|
|
33
|
+
|
|
34
|
+
$light-pill: $brand-light;
|
|
35
|
+
$light-text: $brand-light-text;
|
|
36
|
+
|
|
37
|
+
$light-pill: $brand-light;
|
|
38
|
+
$light-text: $brand-light-text;
|
|
39
|
+
$light-bg: $brand-light-bg;
|
|
40
|
+
|
|
41
|
+
$dark-pill: scale-color($brand-primary, $lightness: -80%);
|
|
42
|
+
$dark-text: $brand-dark-text;
|
|
43
|
+
$dark-bg: $brand-dark-bg;
|
|
44
|
+
|
|
45
|
+
$separator-color: $brand-accent;
|
|
46
|
+
$separator-color-dark: $brand-accent;
|
|
47
|
+
|
|
48
|
+
$font-size: 16px;
|
|
49
|
+
$font-size-brand: 16px;
|
|
50
|
+
$font-weight-brand: 500;
|
|
51
|
+
$font-weight-technical: 400;
|
|
52
|
+
$letter-spacing-brand: 0.7px;
|
|
53
|
+
|
|
54
|
+
$font-family-technical:
|
|
55
|
+
'Roboto',
|
|
56
|
+
-apple-system,
|
|
57
|
+
Avenir,
|
|
58
|
+
BlinkMacSystemFont,
|
|
59
|
+
'Segoe UI',
|
|
60
|
+
Helvetica,
|
|
61
|
+
Arial,
|
|
62
|
+
sans-serif;
|
|
63
|
+
$font-family-examples: $font-family-technical;
|
|
64
|
+
$font-family-brand: 'Montserrat', $font-family-technical;
|
|
65
|
+
|
|
66
|
+
$shadow--large: 0 24px 24px 0 rgba(0, 179, 255, 0.24);
|
|
67
|
+
$shadow--medium: 0 6px 6px 0 rgba($brand-primary, 0.38);
|
|
68
|
+
$shadow--small: 0 6px 6px 0 rgba($brand-primary, 0.28);
|
|
69
|
+
|
|
70
|
+
// also update QHeader :height-hint
|
|
71
|
+
$header-height: 55px;
|
|
72
|
+
$header-transition: 0.6s cubic-bezier(0.25, 0.8, 0.5, 1);
|
|
73
|
+
$header-quick-transition: 0.28s ease-in-out;
|
|
@@ -1,34 +1,34 @@
|
|
|
1
1
|
@use 'sass:color';
|
|
2
2
|
|
|
3
3
|
// Newspaper Theme Variables
|
|
4
|
-
$primary: #000000;
|
|
5
|
-
$secondary: #333333;
|
|
6
|
-
$accent: #666666;
|
|
4
|
+
$primary: #000000;
|
|
5
|
+
$secondary: #333333;
|
|
6
|
+
$accent: #666666;
|
|
7
7
|
|
|
8
|
-
$positive: #
|
|
9
|
-
$negative: #
|
|
10
|
-
$info: #
|
|
11
|
-
$warning: #
|
|
8
|
+
$positive: #2ecc71;
|
|
9
|
+
$negative: #ff1732;
|
|
10
|
+
$info: #10a0ff;
|
|
11
|
+
$warning: #ffd52d;
|
|
12
12
|
|
|
13
13
|
$brand-primary: #8793fc;
|
|
14
|
-
$brand-secondary: #333333;
|
|
15
|
-
$brand-accent: #666666;
|
|
16
|
-
$brand-dark: #000000;
|
|
17
|
-
$brand-light: #ffffff;
|
|
18
|
-
$brand-medium: #808080;
|
|
19
|
-
$brand-light-text: #333333;
|
|
20
|
-
$brand-light-bg: #f5f5f5;
|
|
21
|
-
$brand-dark-bg: #000000;
|
|
22
|
-
$brand-dark-text: #ffffff;
|
|
23
|
-
$brand-light-codeblock-bg: #f5f5f5;
|
|
24
|
-
$brand-light-codeblock-text: #333333;
|
|
25
|
-
$brand-dark-codeblock-bg: #1a1a1a;
|
|
26
|
-
$brand-dark-codeblock-text: #e6e6e6;
|
|
14
|
+
$brand-secondary: #333333;
|
|
15
|
+
$brand-accent: #666666;
|
|
16
|
+
$brand-dark: #000000;
|
|
17
|
+
$brand-light: #ffffff;
|
|
18
|
+
$brand-medium: #808080;
|
|
19
|
+
$brand-light-text: #333333;
|
|
20
|
+
$brand-light-bg: #f5f5f5;
|
|
21
|
+
$brand-dark-bg: #000000;
|
|
22
|
+
$brand-dark-text: #ffffff;
|
|
23
|
+
$brand-light-codeblock-bg: #f5f5f5;
|
|
24
|
+
$brand-light-codeblock-text: #333333;
|
|
25
|
+
$brand-dark-codeblock-bg: #1a1a1a;
|
|
26
|
+
$brand-dark-codeblock-text: #e6e6e6;
|
|
27
27
|
|
|
28
|
-
$header-btn-color--light: #4d4d4d;
|
|
29
|
-
$header-btn-hover-color--light: #1a1a1a;
|
|
30
|
-
$header-btn-color--dark: #999999;
|
|
31
|
-
$header-btn-hover-color--dark: #cccccc;
|
|
28
|
+
$header-btn-color--light: #4d4d4d;
|
|
29
|
+
$header-btn-hover-color--light: #1a1a1a;
|
|
30
|
+
$header-btn-color--dark: #999999;
|
|
31
|
+
$header-btn-hover-color--dark: #cccccc;
|
|
32
32
|
|
|
33
33
|
$light-pill: $brand-light;
|
|
34
34
|
$light-text: $brand-light-text;
|
|
@@ -39,7 +39,7 @@ $dark-text: $brand-dark-text;
|
|
|
39
39
|
$dark-bg: $brand-dark-bg;
|
|
40
40
|
|
|
41
41
|
$separator-color: $brand-accent;
|
|
42
|
-
$
|
|
42
|
+
$separator-color-dark: $brand-accent;
|
|
43
43
|
|
|
44
44
|
$font-size: 16px;
|
|
45
45
|
$font-size-brand: 16px;
|
|
@@ -1,32 +1,34 @@
|
|
|
1
|
-
|
|
2
|
-
$primary: #e74c3c; // Change primary color to red
|
|
3
|
-
$secondary: #8e44ad; // Change secondary color to purple
|
|
4
|
-
$accent: #f39c12; // Change accent color to orange
|
|
1
|
+
@use 'sass:color';
|
|
5
2
|
|
|
6
|
-
|
|
7
|
-
$
|
|
8
|
-
$
|
|
9
|
-
$
|
|
3
|
+
// Sunrise Theme Variables
|
|
4
|
+
$primary: #e74c3c;
|
|
5
|
+
$secondary: #8e44ad;
|
|
6
|
+
$accent: #f39c12;
|
|
10
7
|
|
|
11
|
-
$
|
|
12
|
-
$
|
|
13
|
-
$
|
|
14
|
-
$
|
|
15
|
-
$brand-light: #ecf0f1; // Change brand light color to light grey
|
|
16
|
-
$brand-medium: #95a5a6; // Change brand medium color to grey
|
|
17
|
-
$brand-light-text: #2c3e50; // Change brand light text color to dark blue
|
|
18
|
-
$brand-light-bg: #ecf0f1; // Change brand light background color to light grey
|
|
19
|
-
$brand-dark-bg: #34495e; // Change brand dark background color to dark grey
|
|
20
|
-
$brand-dark-text: #ecf0f1; // Change brand dark text color to light grey
|
|
21
|
-
$brand-light-codeblock-bg: #ecf0f1; // Change brand light codeblock background color to light grey
|
|
22
|
-
$brand-light-codeblock-text: #2c3e50; // Change brand light codeblock text color to dark blue
|
|
23
|
-
$brand-dark-codeblock-bg: #2c3e50; // Change brand dark codeblock background color to dark blue
|
|
24
|
-
$brand-dark-codeblock-text: #ecf0f1; // Change brand dark codeblock text color to light grey
|
|
8
|
+
$positive: #2ecc71;
|
|
9
|
+
$negative: #ff1732;
|
|
10
|
+
$info: #10a0ff;
|
|
11
|
+
$warning: #ffd52d;
|
|
25
12
|
|
|
26
|
-
$
|
|
27
|
-
$
|
|
28
|
-
$
|
|
29
|
-
$
|
|
13
|
+
$brand-primary: #e74c3c;
|
|
14
|
+
$brand-secondary: #5186bb;
|
|
15
|
+
$brand-accent: #f39c12;
|
|
16
|
+
$brand-dark: #2c3e50;
|
|
17
|
+
$brand-light: #ecf0f1;
|
|
18
|
+
$brand-medium: #95a5a6;
|
|
19
|
+
$brand-light-text: #2c3e50;
|
|
20
|
+
$brand-light-bg: #ecf0f1;
|
|
21
|
+
$brand-dark-bg: #34495e;
|
|
22
|
+
$brand-dark-text: #ecf0f1;
|
|
23
|
+
$brand-light-codeblock-bg: #ecf0f1;
|
|
24
|
+
$brand-light-codeblock-text: #2c3e50;
|
|
25
|
+
$brand-dark-codeblock-bg: #2c3e50;
|
|
26
|
+
$brand-dark-codeblock-text: #ecf0f1;
|
|
27
|
+
|
|
28
|
+
$header-btn-color--light: #c0392b;
|
|
29
|
+
$header-btn-hover-color--light: #e74c3c;
|
|
30
|
+
$header-btn-color--dark: #c0392b;
|
|
31
|
+
$header-btn-hover-color--dark: #e74c3c;
|
|
30
32
|
|
|
31
33
|
$light-pill: $brand-light;
|
|
32
34
|
$light-text: $brand-light-text;
|
|
@@ -37,7 +39,7 @@ $dark-text: $brand-dark-text;
|
|
|
37
39
|
$dark-bg: $brand-dark-bg;
|
|
38
40
|
|
|
39
41
|
$separator-color: $brand-accent;
|
|
40
|
-
$
|
|
42
|
+
$separator-color-dark: $brand-accent;
|
|
41
43
|
|
|
42
44
|
$font-size: 16px;
|
|
43
45
|
$font-size-brand: 16px;
|
|
@@ -1,34 +1,34 @@
|
|
|
1
1
|
@use 'sass:color';
|
|
2
2
|
|
|
3
3
|
// Tawny Theme Variables
|
|
4
|
-
$primary: #8b4513;
|
|
5
|
-
$secondary: #a0522d;
|
|
6
|
-
$accent: #d2691e;
|
|
4
|
+
$primary: #8b4513;
|
|
5
|
+
$secondary: #a0522d;
|
|
6
|
+
$accent: #d2691e;
|
|
7
7
|
|
|
8
|
-
$positive: #
|
|
9
|
-
$negative: #
|
|
10
|
-
$info: #
|
|
11
|
-
$warning: #
|
|
8
|
+
$positive: #2ecc71;
|
|
9
|
+
$negative: #ff1732;
|
|
10
|
+
$info: #10a0ff;
|
|
11
|
+
$warning: #ffd52d;
|
|
12
12
|
|
|
13
|
-
$brand-primary: #8b4513;
|
|
14
|
-
$brand-secondary: #a0522d;
|
|
15
|
-
$brand-accent: #d2691e;
|
|
16
|
-
$brand-dark: #5c4033;
|
|
17
|
-
$brand-light: #f5f5dc;
|
|
18
|
-
$brand-medium: #c19a6b;
|
|
19
|
-
$brand-light-text: #5c4033;
|
|
20
|
-
$brand-light-bg: #f5f5dc;
|
|
21
|
-
$brand-dark-bg: #3e2723;
|
|
22
|
-
$brand-dark-text: #f5f5dc;
|
|
23
|
-
$brand-light-codeblock-bg: #
|
|
24
|
-
$brand-light-codeblock-text: #5c4033;
|
|
25
|
-
$brand-dark-codeblock-bg: #
|
|
26
|
-
$brand-dark-codeblock-text: #f5f5dc;
|
|
13
|
+
$brand-primary: #8b4513;
|
|
14
|
+
$brand-secondary: #a0522d;
|
|
15
|
+
$brand-accent: #d2691e;
|
|
16
|
+
$brand-dark: #5c4033;
|
|
17
|
+
$brand-light: #f5f5dc;
|
|
18
|
+
$brand-medium: #c19a6b;
|
|
19
|
+
$brand-light-text: #5c4033;
|
|
20
|
+
$brand-light-bg: #f5f5dc;
|
|
21
|
+
$brand-dark-bg: #3e2723;
|
|
22
|
+
$brand-dark-text: #f5f5dc;
|
|
23
|
+
$brand-light-codeblock-bg: #fdfdfd;
|
|
24
|
+
$brand-light-codeblock-text: #5c4033;
|
|
25
|
+
$brand-dark-codeblock-bg: #5c4033;
|
|
26
|
+
$brand-dark-codeblock-text: #f5f5dc;
|
|
27
27
|
|
|
28
|
-
$header-btn-color--light: #8b4513;
|
|
29
|
-
$header-btn-hover-color--light: #a0522d;
|
|
30
|
-
$header-btn-color--dark: #d2691e;
|
|
31
|
-
$header-btn-hover-color--dark: #cd853f;
|
|
28
|
+
$header-btn-color--light: #8b4513;
|
|
29
|
+
$header-btn-hover-color--light: #a0522d;
|
|
30
|
+
$header-btn-color--dark: #d2691e;
|
|
31
|
+
$header-btn-hover-color--dark: #cd853f;
|
|
32
32
|
|
|
33
33
|
$light-pill: $brand-light;
|
|
34
34
|
$light-text: $brand-light-text;
|
|
@@ -39,7 +39,7 @@ $dark-text: $brand-dark-text;
|
|
|
39
39
|
$dark-bg: $brand-dark-bg;
|
|
40
40
|
|
|
41
41
|
$separator-color: $brand-accent;
|
|
42
|
-
$
|
|
42
|
+
$separator-color-dark: $brand-accent;
|
|
43
43
|
|
|
44
44
|
$font-size: 16px;
|
|
45
45
|
$font-size-brand: 16px;
|
|
@@ -531,18 +531,14 @@ Lorem ipsum dolor sit amet, **consectetur adipiscing** elit, sed do _eiusmod_ te
|
|
|
531
531
|
|
|
532
532
|
Lorem ipsum dolor sit amet, **consectetur adipiscing** elit, sed do _eiusmod_ tempor incididunt ut labore et dolore magna aliqua.
|
|
533
533
|
|
|
534
|
-
<!-- <
|
|
534
|
+
<!-- <MarkdownInstallation plugins="AppFullscreen" /> -->
|
|
535
535
|
|
|
536
536
|
<script import>
|
|
537
|
-
import
|
|
537
|
+
import MarkdownExampleApi from 'src/.q-press/api/components/MarkdownExample.json'
|
|
538
|
+
import MarkdownPageApi from 'src/.q-press/api/components/MarkdownPage.json'
|
|
538
539
|
</script>
|
|
539
540
|
|
|
540
|
-
<MarkdownApi :api="
|
|
541
|
-
|
|
542
|
-
<!-- <DocApi file="QSelect" /> -->
|
|
543
|
-
|
|
544
|
-
<!-- <DocApi file="TouchSwipe" /> -->
|
|
545
|
-
|
|
546
|
-
<!-- <DocApi file="Loading" /> -->
|
|
541
|
+
<MarkdownApi :api="MarkdownExampleApi" name="MarkdownExample"/>
|
|
542
|
+
<MarkdownApi :api="MarkdownPageApi" name="MarkdownPage"/>
|
|
547
543
|
|
|
548
544
|
<MarkdownExample title="Title for example card" file="BasicExample" />
|
|
@@ -338,10 +338,20 @@ const x = {
|
|
|
338
338
|
}
|
|
339
339
|
```
|
|
340
340
|
|
|
341
|
-
<MarkdownInstallation plugins="AppFullscreen" />
|
|
341
|
+
<!-- <MarkdownInstallation plugins="AppFullscreen" /> -->
|
|
342
342
|
|
|
343
343
|
<script import>
|
|
344
344
|
import AvatarApi from 'quasar/dist/api/QAvatar.json'
|
|
345
345
|
</script>
|
|
346
346
|
|
|
347
347
|
<MarkdownApi :api="AvatarApi" name="QAvatar"/>
|
|
348
|
+
|
|
349
|
+
<script import>
|
|
350
|
+
import MarkdownExampleApi from 'src/.q-press/api/components/MarkdownExample.json'
|
|
351
|
+
import MarkdownPageApi from 'src/.q-press/api/components/MarkdownPage.json'
|
|
352
|
+
</script>
|
|
353
|
+
|
|
354
|
+
<MarkdownApi :api="MarkdownExampleApi" name="MarkdownExample"/>
|
|
355
|
+
<MarkdownApi :api="MarkdownPageApi" name="MarkdownPage"/>
|
|
356
|
+
|
|
357
|
+
<MarkdownExample title="Title for example card" file="BasicExample" />
|
|
@@ -70,7 +70,7 @@ pnpm i prismjs
|
|
|
70
70
|
|
|
71
71
|
### Modify `src/css/quasar.variables.scss`
|
|
72
72
|
|
|
73
|
-
Import a Q-Press theme (`default`, `sunrise`, `newspaper`, `tawny`, your own or a 3rd-party theme):
|
|
73
|
+
Import a Q-Press theme (`default`, `sunrise`, `newspaper`, `tawny`, `mystic`, your own or a 3rd-party theme):
|
|
74
74
|
|
|
75
75
|
```scss
|
|
76
76
|
@import '../.q-press/css/themes/sunrise.scss';
|
|
@@ -88,7 +88,7 @@ Import Q-Press styles:
|
|
|
88
88
|
|
|
89
89
|
### Modify `quasar.config.ts`
|
|
90
90
|
|
|
91
|
-
```
|
|
91
|
+
```ts [maxheight=400px]
|
|
92
92
|
import { defineConfig } from '#q-app/wrappers'
|
|
93
93
|
import type { Plugin } from 'vite'
|
|
94
94
|
import { viteMdPlugin, type MenuItem } from '@md-plugins/vite-md-plugin'
|
|
@@ -118,7 +118,7 @@ export default defineConfig(async (ctx) => {
|
|
|
118
118
|
|
|
119
119
|
### Modify `src/routes/routes.ts`
|
|
120
120
|
|
|
121
|
-
```
|
|
121
|
+
```ts [maxheight=400px]
|
|
122
122
|
import mdPageList from 'src/markdown/listing'
|
|
123
123
|
|
|
124
124
|
const routes = [
|
|
@@ -4,10 +4,10 @@ $primary: #214466;
|
|
|
4
4
|
$secondary: #266660;
|
|
5
5
|
$accent: #853394;
|
|
6
6
|
|
|
7
|
-
$positive: #
|
|
7
|
+
$positive: #2ecc71;
|
|
8
8
|
$negative: #ff1732;
|
|
9
|
-
$info: #
|
|
10
|
-
$warning: #
|
|
9
|
+
$info: #10a0ff;
|
|
10
|
+
$warning: #ffd52d;
|
|
11
11
|
|
|
12
12
|
$brand-primary: #00bfff;
|
|
13
13
|
$brand-secondary: #4b555c;
|
|
@@ -25,7 +25,7 @@ $brand-dark-codeblock-bg: #121212;
|
|
|
25
25
|
$brand-dark-codeblock-text: #e6e6e6;
|
|
26
26
|
|
|
27
27
|
$header-btn-color--light: #757575;
|
|
28
|
-
$header-btn-hover-color--light: #212121;
|
|
28
|
+
$header-btn-hover-color--light: #212121;
|
|
29
29
|
$header-btn-color--dark: #929397;
|
|
30
30
|
$header-btn-hover-color--dark: #fff;
|
|
31
31
|
|
|
@@ -38,7 +38,7 @@ $dark-text: $brand-dark-text;
|
|
|
38
38
|
$dark-bg: $brand-dark-bg;
|
|
39
39
|
|
|
40
40
|
$separator-color: $brand-accent;
|
|
41
|
-
$
|
|
41
|
+
$separator-color-dark: $brand-accent;
|
|
42
42
|
|
|
43
43
|
$font-size: 16px;
|
|
44
44
|
$font-size-brand: 16px;
|
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
@use 'sass:color';
|
|
2
|
+
|
|
3
|
+
// Mystic Theme Variables
|
|
4
|
+
$primary: #8a2be2;
|
|
5
|
+
$secondary: #00ced1;
|
|
6
|
+
$accent: #ff4500;
|
|
7
|
+
|
|
8
|
+
$positive: #2ecc71;
|
|
9
|
+
$negative: #ff1732;
|
|
10
|
+
$info: #10a0ff;
|
|
11
|
+
$warning: #ffd52d;
|
|
12
|
+
|
|
13
|
+
$brand-primary: #8a2be2;
|
|
14
|
+
$brand-secondary: #00ced1;
|
|
15
|
+
$brand-accent: #ff4500;
|
|
16
|
+
$brand-dark: #8d66da;
|
|
17
|
+
$brand-light: #e6e6fa;
|
|
18
|
+
$brand-medium: #9370db;
|
|
19
|
+
$brand-light-text: #4b0082;
|
|
20
|
+
$brand-light-bg: #e6e6fa;
|
|
21
|
+
$brand-dark-bg: #171122;
|
|
22
|
+
$brand-dark-text: #e6e6fa;
|
|
23
|
+
|
|
24
|
+
$brand-light-codeblock-bg: #f8f8ff;
|
|
25
|
+
$brand-light-codeblock-text: #9370db;
|
|
26
|
+
$brand-dark-codeblock-bg: #4b0082;
|
|
27
|
+
$brand-dark-codeblock-text: #e6e6fa;
|
|
28
|
+
|
|
29
|
+
$header-btn-color--light: #8a2be2;
|
|
30
|
+
$header-btn-hover-color--light: #ff4500;
|
|
31
|
+
$header-btn-color--dark: #00ced1;
|
|
32
|
+
$header-btn-hover-color--dark: #9370db;
|
|
33
|
+
|
|
34
|
+
$light-pill: $brand-light;
|
|
35
|
+
$light-text: $brand-light-text;
|
|
36
|
+
|
|
37
|
+
$light-pill: $brand-light;
|
|
38
|
+
$light-text: $brand-light-text;
|
|
39
|
+
$light-bg: $brand-light-bg;
|
|
40
|
+
|
|
41
|
+
$dark-pill: scale-color($brand-primary, $lightness: -80%);
|
|
42
|
+
$dark-text: $brand-dark-text;
|
|
43
|
+
$dark-bg: $brand-dark-bg;
|
|
44
|
+
|
|
45
|
+
$separator-color: $brand-accent;
|
|
46
|
+
$separator-color-dark: $brand-accent;
|
|
47
|
+
|
|
48
|
+
$font-size: 16px;
|
|
49
|
+
$font-size-brand: 16px;
|
|
50
|
+
$font-weight-brand: 500;
|
|
51
|
+
$font-weight-technical: 400;
|
|
52
|
+
$letter-spacing-brand: 0.7px;
|
|
53
|
+
|
|
54
|
+
$font-family-technical:
|
|
55
|
+
'Roboto',
|
|
56
|
+
-apple-system,
|
|
57
|
+
Avenir,
|
|
58
|
+
BlinkMacSystemFont,
|
|
59
|
+
'Segoe UI',
|
|
60
|
+
Helvetica,
|
|
61
|
+
Arial,
|
|
62
|
+
sans-serif;
|
|
63
|
+
$font-family-examples: $font-family-technical;
|
|
64
|
+
$font-family-brand: 'Montserrat', $font-family-technical;
|
|
65
|
+
|
|
66
|
+
$shadow--large: 0 24px 24px 0 rgba(0, 179, 255, 0.24);
|
|
67
|
+
$shadow--medium: 0 6px 6px 0 rgba($brand-primary, 0.38);
|
|
68
|
+
$shadow--small: 0 6px 6px 0 rgba($brand-primary, 0.28);
|
|
69
|
+
|
|
70
|
+
// also update QHeader :height-hint
|
|
71
|
+
$header-height: 55px;
|
|
72
|
+
$header-transition: 0.6s cubic-bezier(0.25, 0.8, 0.5, 1);
|
|
73
|
+
$header-quick-transition: 0.28s ease-in-out;
|
|
@@ -1,34 +1,34 @@
|
|
|
1
1
|
@use 'sass:color';
|
|
2
2
|
|
|
3
3
|
// Newspaper Theme Variables
|
|
4
|
-
$primary: #000000;
|
|
5
|
-
$secondary: #333333;
|
|
6
|
-
$accent: #666666;
|
|
4
|
+
$primary: #000000;
|
|
5
|
+
$secondary: #333333;
|
|
6
|
+
$accent: #666666;
|
|
7
7
|
|
|
8
|
-
$positive: #
|
|
9
|
-
$negative: #
|
|
10
|
-
$info: #
|
|
11
|
-
$warning: #
|
|
8
|
+
$positive: #2ecc71;
|
|
9
|
+
$negative: #ff1732;
|
|
10
|
+
$info: #10a0ff;
|
|
11
|
+
$warning: #ffd52d;
|
|
12
12
|
|
|
13
13
|
$brand-primary: #8793fc;
|
|
14
|
-
$brand-secondary: #333333;
|
|
15
|
-
$brand-accent: #666666;
|
|
16
|
-
$brand-dark: #000000;
|
|
17
|
-
$brand-light: #ffffff;
|
|
18
|
-
$brand-medium: #808080;
|
|
19
|
-
$brand-light-text: #333333;
|
|
20
|
-
$brand-light-bg: #f5f5f5;
|
|
21
|
-
$brand-dark-bg: #000000;
|
|
22
|
-
$brand-dark-text: #ffffff;
|
|
23
|
-
$brand-light-codeblock-bg: #f5f5f5;
|
|
24
|
-
$brand-light-codeblock-text: #333333;
|
|
25
|
-
$brand-dark-codeblock-bg: #1a1a1a;
|
|
26
|
-
$brand-dark-codeblock-text: #e6e6e6;
|
|
14
|
+
$brand-secondary: #333333;
|
|
15
|
+
$brand-accent: #666666;
|
|
16
|
+
$brand-dark: #000000;
|
|
17
|
+
$brand-light: #ffffff;
|
|
18
|
+
$brand-medium: #808080;
|
|
19
|
+
$brand-light-text: #333333;
|
|
20
|
+
$brand-light-bg: #f5f5f5;
|
|
21
|
+
$brand-dark-bg: #000000;
|
|
22
|
+
$brand-dark-text: #ffffff;
|
|
23
|
+
$brand-light-codeblock-bg: #f5f5f5;
|
|
24
|
+
$brand-light-codeblock-text: #333333;
|
|
25
|
+
$brand-dark-codeblock-bg: #1a1a1a;
|
|
26
|
+
$brand-dark-codeblock-text: #e6e6e6;
|
|
27
27
|
|
|
28
|
-
$header-btn-color--light: #4d4d4d;
|
|
29
|
-
$header-btn-hover-color--light: #1a1a1a;
|
|
30
|
-
$header-btn-color--dark: #999999;
|
|
31
|
-
$header-btn-hover-color--dark: #cccccc;
|
|
28
|
+
$header-btn-color--light: #4d4d4d;
|
|
29
|
+
$header-btn-hover-color--light: #1a1a1a;
|
|
30
|
+
$header-btn-color--dark: #999999;
|
|
31
|
+
$header-btn-hover-color--dark: #cccccc;
|
|
32
32
|
|
|
33
33
|
$light-pill: $brand-light;
|
|
34
34
|
$light-text: $brand-light-text;
|
|
@@ -39,7 +39,7 @@ $dark-text: $brand-dark-text;
|
|
|
39
39
|
$dark-bg: $brand-dark-bg;
|
|
40
40
|
|
|
41
41
|
$separator-color: $brand-accent;
|
|
42
|
-
$
|
|
42
|
+
$separator-color-dark: $brand-accent;
|
|
43
43
|
|
|
44
44
|
$font-size: 16px;
|
|
45
45
|
$font-size-brand: 16px;
|
|
@@ -1,32 +1,34 @@
|
|
|
1
|
-
|
|
2
|
-
$primary: #e74c3c; // Change primary color to red
|
|
3
|
-
$secondary: #8e44ad; // Change secondary color to purple
|
|
4
|
-
$accent: #f39c12; // Change accent color to orange
|
|
1
|
+
@use 'sass:color';
|
|
5
2
|
|
|
6
|
-
|
|
7
|
-
$
|
|
8
|
-
$
|
|
9
|
-
$
|
|
3
|
+
// Sunrise Theme Variables
|
|
4
|
+
$primary: #e74c3c;
|
|
5
|
+
$secondary: #8e44ad;
|
|
6
|
+
$accent: #f39c12;
|
|
10
7
|
|
|
11
|
-
$
|
|
12
|
-
$
|
|
13
|
-
$
|
|
14
|
-
$
|
|
15
|
-
$brand-light: #ecf0f1; // Change brand light color to light grey
|
|
16
|
-
$brand-medium: #95a5a6; // Change brand medium color to grey
|
|
17
|
-
$brand-light-text: #2c3e50; // Change brand light text color to dark blue
|
|
18
|
-
$brand-light-bg: #ecf0f1; // Change brand light background color to light grey
|
|
19
|
-
$brand-dark-bg: #34495e; // Change brand dark background color to dark grey
|
|
20
|
-
$brand-dark-text: #ecf0f1; // Change brand dark text color to light grey
|
|
21
|
-
$brand-light-codeblock-bg: #ecf0f1; // Change brand light codeblock background color to light grey
|
|
22
|
-
$brand-light-codeblock-text: #2c3e50; // Change brand light codeblock text color to dark blue
|
|
23
|
-
$brand-dark-codeblock-bg: #2c3e50; // Change brand dark codeblock background color to dark blue
|
|
24
|
-
$brand-dark-codeblock-text: #ecf0f1; // Change brand dark codeblock text color to light grey
|
|
8
|
+
$positive: #2ecc71;
|
|
9
|
+
$negative: #ff1732;
|
|
10
|
+
$info: #10a0ff;
|
|
11
|
+
$warning: #ffd52d;
|
|
25
12
|
|
|
26
|
-
$
|
|
27
|
-
$
|
|
28
|
-
$
|
|
29
|
-
$
|
|
13
|
+
$brand-primary: #e74c3c;
|
|
14
|
+
$brand-secondary: #5186bb;
|
|
15
|
+
$brand-accent: #f39c12;
|
|
16
|
+
$brand-dark: #2c3e50;
|
|
17
|
+
$brand-light: #ecf0f1;
|
|
18
|
+
$brand-medium: #95a5a6;
|
|
19
|
+
$brand-light-text: #2c3e50;
|
|
20
|
+
$brand-light-bg: #ecf0f1;
|
|
21
|
+
$brand-dark-bg: #34495e;
|
|
22
|
+
$brand-dark-text: #ecf0f1;
|
|
23
|
+
$brand-light-codeblock-bg: #ecf0f1;
|
|
24
|
+
$brand-light-codeblock-text: #2c3e50;
|
|
25
|
+
$brand-dark-codeblock-bg: #2c3e50;
|
|
26
|
+
$brand-dark-codeblock-text: #ecf0f1;
|
|
27
|
+
|
|
28
|
+
$header-btn-color--light: #c0392b;
|
|
29
|
+
$header-btn-hover-color--light: #e74c3c;
|
|
30
|
+
$header-btn-color--dark: #c0392b;
|
|
31
|
+
$header-btn-hover-color--dark: #e74c3c;
|
|
30
32
|
|
|
31
33
|
$light-pill: $brand-light;
|
|
32
34
|
$light-text: $brand-light-text;
|
|
@@ -37,7 +39,7 @@ $dark-text: $brand-dark-text;
|
|
|
37
39
|
$dark-bg: $brand-dark-bg;
|
|
38
40
|
|
|
39
41
|
$separator-color: $brand-accent;
|
|
40
|
-
$
|
|
42
|
+
$separator-color-dark: $brand-accent;
|
|
41
43
|
|
|
42
44
|
$font-size: 16px;
|
|
43
45
|
$font-size-brand: 16px;
|
|
@@ -1,34 +1,34 @@
|
|
|
1
1
|
@use 'sass:color';
|
|
2
2
|
|
|
3
3
|
// Tawny Theme Variables
|
|
4
|
-
$primary: #8b4513;
|
|
5
|
-
$secondary: #a0522d;
|
|
6
|
-
$accent: #d2691e;
|
|
4
|
+
$primary: #8b4513;
|
|
5
|
+
$secondary: #a0522d;
|
|
6
|
+
$accent: #d2691e;
|
|
7
7
|
|
|
8
|
-
$positive: #
|
|
9
|
-
$negative: #
|
|
10
|
-
$info: #
|
|
11
|
-
$warning: #
|
|
8
|
+
$positive: #2ecc71;
|
|
9
|
+
$negative: #ff1732;
|
|
10
|
+
$info: #10a0ff;
|
|
11
|
+
$warning: #ffd52d;
|
|
12
12
|
|
|
13
|
-
$brand-primary: #8b4513;
|
|
14
|
-
$brand-secondary: #a0522d;
|
|
15
|
-
$brand-accent: #d2691e;
|
|
16
|
-
$brand-dark: #5c4033;
|
|
17
|
-
$brand-light: #f5f5dc;
|
|
18
|
-
$brand-medium: #c19a6b;
|
|
19
|
-
$brand-light-text: #5c4033;
|
|
20
|
-
$brand-light-bg: #f5f5dc;
|
|
21
|
-
$brand-dark-bg: #3e2723;
|
|
22
|
-
$brand-dark-text: #f5f5dc;
|
|
23
|
-
$brand-light-codeblock-bg: #
|
|
24
|
-
$brand-light-codeblock-text: #5c4033;
|
|
25
|
-
$brand-dark-codeblock-bg: #
|
|
26
|
-
$brand-dark-codeblock-text: #f5f5dc;
|
|
13
|
+
$brand-primary: #8b4513;
|
|
14
|
+
$brand-secondary: #a0522d;
|
|
15
|
+
$brand-accent: #d2691e;
|
|
16
|
+
$brand-dark: #5c4033;
|
|
17
|
+
$brand-light: #f5f5dc;
|
|
18
|
+
$brand-medium: #c19a6b;
|
|
19
|
+
$brand-light-text: #5c4033;
|
|
20
|
+
$brand-light-bg: #f5f5dc;
|
|
21
|
+
$brand-dark-bg: #3e2723;
|
|
22
|
+
$brand-dark-text: #f5f5dc;
|
|
23
|
+
$brand-light-codeblock-bg: #fdfdfd;
|
|
24
|
+
$brand-light-codeblock-text: #5c4033;
|
|
25
|
+
$brand-dark-codeblock-bg: #5c4033;
|
|
26
|
+
$brand-dark-codeblock-text: #f5f5dc;
|
|
27
27
|
|
|
28
|
-
$header-btn-color--light: #8b4513;
|
|
29
|
-
$header-btn-hover-color--light: #a0522d;
|
|
30
|
-
$header-btn-color--dark: #d2691e;
|
|
31
|
-
$header-btn-hover-color--dark: #cd853f;
|
|
28
|
+
$header-btn-color--light: #8b4513;
|
|
29
|
+
$header-btn-hover-color--light: #a0522d;
|
|
30
|
+
$header-btn-color--dark: #d2691e;
|
|
31
|
+
$header-btn-hover-color--dark: #cd853f;
|
|
32
32
|
|
|
33
33
|
$light-pill: $brand-light;
|
|
34
34
|
$light-text: $brand-light-text;
|
|
@@ -39,7 +39,7 @@ $dark-text: $brand-dark-text;
|
|
|
39
39
|
$dark-bg: $brand-dark-bg;
|
|
40
40
|
|
|
41
41
|
$separator-color: $brand-accent;
|
|
42
|
-
$
|
|
42
|
+
$separator-color-dark: $brand-accent;
|
|
43
43
|
|
|
44
44
|
$font-size: 16px;
|
|
45
45
|
$font-size-brand: 16px;
|