@subroh0508/marp-theme-canvas 0.0.7 → 0.0.8

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.
Files changed (9) hide show
  1. package/css/black-canvas.css +16 -1
  2. package/css/white-canvas.css +16 -1
  3. package/package.json +1 -1
  4. package/scss/component/CLAUDE.md +2 -0
  5. package/scss/component/_hr.scss +25 -0
  6. package/scss/page/_display.scss +2 -1
  7. package/scss/theme/CLAUDE.md +8 -0
  8. package/scss/theme/_black-canvas.scss +13 -0
  9. package/scss/theme/_white-canvas.scss +13 -0
package/css/black-canvas.css CHANGED
@@ -83,6 +83,9 @@
83
83
  --numbered-list-indent: 1.1em;
84
84
  --bullet-list-padding-left: 0.2em;
85
85
  --numbered-list-padding-left: 0.2em;
86
+ --hr-height: 1px;
87
+ --hr-width: 100%;
88
+ --hr-color: var(--color-grey-medium);
86
89
  }
87
90
 
88
91
  section pre :where(.hljs) {
@@ -274,7 +277,7 @@ section.display p {
274
277
  margin: 0;
275
278
  text-align: center;
276
279
  }
277
- section.display:not(:has(img, iframe)) p {
280
+ section.display:not(:has(img:not(.emoji), iframe)) p {
278
281
  font-size: var(--font-size-display);
279
282
  font-weight: var(--font-weight-bold);
280
283
  }
@@ -455,6 +458,18 @@ section .columns > .column-10 > *,
455
458
  section .columns > .column-10 p > * {
456
459
  max-width: 100%;
457
460
  }
461
+ section hr, section.hr-solid hr {
462
+ width: var(--hr-width);
463
+ border: none;
464
+ border-top: var(--hr-height) solid var(--hr-color);
465
+ margin: 0 0 1em;
466
+ }
467
+ section.hr-dashed hr {
468
+ width: var(--hr-width);
469
+ border: none;
470
+ border-top: var(--hr-height) dashed var(--hr-color);
471
+ margin: 0 0 1em;
472
+ }
458
473
 
459
474
  header {
460
475
  position: absolute;
package/css/white-canvas.css CHANGED
@@ -83,6 +83,9 @@
83
83
  --numbered-list-indent: 1.1em;
84
84
  --bullet-list-padding-left: 0.2em;
85
85
  --numbered-list-padding-left: 0.2em;
86
+ --hr-height: 1px;
87
+ --hr-width: 100%;
88
+ --hr-color: var(--color-grey-light);
86
89
  }
87
90
 
88
91
  section pre :where(.hljs) {
@@ -274,7 +277,7 @@ section.display p {
274
277
  margin: 0;
275
278
  text-align: center;
276
279
  }
277
- section.display:not(:has(img, iframe)) p {
280
+ section.display:not(:has(img:not(.emoji), iframe)) p {
278
281
  font-size: var(--font-size-display);
279
282
  font-weight: var(--font-weight-bold);
280
283
  }
@@ -455,6 +458,18 @@ section .columns > .column-10 > *,
455
458
  section .columns > .column-10 p > * {
456
459
  max-width: 100%;
457
460
  }
461
+ section hr, section.hr-solid hr {
462
+ width: var(--hr-width);
463
+ border: none;
464
+ border-top: var(--hr-height) solid var(--hr-color);
465
+ margin: 0 0 1em;
466
+ }
467
+ section.hr-dashed hr {
468
+ width: var(--hr-width);
469
+ border: none;
470
+ border-top: var(--hr-height) dashed var(--hr-color);
471
+ margin: 0 0 1em;
472
+ }
458
473
 
459
474
  header {
460
475
  position: absolute;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@subroh0508/marp-theme-canvas",
3
- "version": "0.0.7",
3
+ "version": "0.0.8",
4
4
  "description": "A simple Marp theme with minimal styling",
5
5
  "repository": {
6
6
  "type": "git",
package/scss/component/CLAUDE.md CHANGED
@@ -24,6 +24,7 @@ section {
24
24
  @include section.configure(...);
25
25
  @include pagination.configure(...);
26
26
  @include prettylights.configure;
27
+ @include hr.configure(...);
27
28
  }
28
29
  ```
29
30
 
@@ -52,4 +53,5 @@ section {
52
53
  | `_code.scss` | `code`, `pre`, `tt` | Code blocks |
53
54
  | `_blockquote.scss` | `blockquote` | Blockquote |
54
55
  | `_text-decorator.scss` | `strong`, `mark`, `rp` | Text decoration |
56
+ | `_hr.scss` | `hr` | Horizontal rule |
55
57
  | `prettylights/*` | `.hljs-*` | Syntax highlighting |
package/scss/component/_hr.scss ADDED
@@ -0,0 +1,25 @@
1
+ // ===== _hr.scss =====
2
+ // Horizontal rule styles
3
+
4
+ @mixin _hr($height, $width, $color, $style) {
5
+ width: $width;
6
+ // Reset browser default border
7
+ border: none;
8
+ border-top: $height $style $color;
9
+ margin: 0 0 1em;
10
+ }
11
+
12
+ @mixin configure(
13
+ $height,
14
+ $width,
15
+ $color
16
+ ) {
17
+ hr,
18
+ &.hr-solid hr {
19
+ @include _hr($height, $width, $color, solid);
20
+ }
21
+
22
+ &.hr-dashed hr {
23
+ @include _hr($height, $width, $color, dashed);
24
+ }
25
+ }
package/scss/page/_display.scss CHANGED
@@ -20,7 +20,8 @@
20
20
  }
21
21
 
22
22
  // When img or iframe doesn't exist, display p tag prominently
23
- &:not(:has(img, iframe)) p {
23
+ // Excludes emoji class
24
+ &:not(:has(img:not(.emoji), iframe)) p {
24
25
  font-size: $font-size;
25
26
  font-weight: $font-weight-bold;
26
27
  }
package/scss/theme/CLAUDE.md CHANGED
@@ -81,6 +81,14 @@ The following CSS variables have no default values and must be defined when used
81
81
  | `--bullet-list-padding-left` | Bullet list item (li) padding | `0.2em` |
82
82
  | `--numbered-list-padding-left` | Numbered list item (li) padding | `0.2em` |
83
83
 
84
+ ### Horizontal Rule
85
+
86
+ | Variable | Description | white-canvas | black-canvas |
87
+ |----------|-------------|--------------|--------------|
88
+ | `--hr-height` | Line thickness | `1px` | `1px` |
89
+ | `--hr-width` | Line width | `100%` | `100%` |
90
+ | `--hr-color` | Line color | `grey-light` | `grey-medium` |
91
+
84
92
  ## Available Mixins
85
93
 
86
94
  | Mixin | Description |
package/scss/theme/_black-canvas.scss CHANGED
@@ -27,6 +27,7 @@
27
27
  @use '../component/text-decorator' as text-decorator;
28
28
  @use '../component/columns' as columns;
29
29
  @use '../component/a' as a;
30
+ @use '../component/hr' as hr;
30
31
 
31
32
  // ===== Page styles =====
32
33
  @use '../page/title' as page-title;
@@ -105,6 +106,11 @@
105
106
  --bullet-list-padding-left: 0.2em;
106
107
  --numbered-list-padding-left: 0.2em;
107
108
 
109
+ // --- Horizontal rule ---
110
+ --hr-height: 1px;
111
+ --hr-width: 100%;
112
+ --hr-color: var(--color-grey-medium);
113
+
108
114
  // Custom variables
109
115
  @content;
110
116
  }
@@ -169,6 +175,13 @@
169
175
 
170
176
  // ===== Column layout =====
171
177
  @include columns.configure();
178
+
179
+ // ===== Horizontal rule =====
180
+ @include hr.configure(
181
+ $height: var(--hr-height),
182
+ $width: var(--hr-width),
183
+ $color: var(--hr-color)
184
+ );
172
185
  }
173
186
 
174
187
  // ===== header =====
package/scss/theme/_white-canvas.scss CHANGED
@@ -27,6 +27,7 @@
27
27
  @use '../component/text-decorator' as text-decorator;
28
28
  @use '../component/columns' as columns;
29
29
  @use '../component/a' as a;
30
+ @use '../component/hr' as hr;
30
31
 
31
32
  // ===== Page styles =====
32
33
  @use '../page/title' as page-title;
@@ -105,6 +106,11 @@
105
106
  --bullet-list-padding-left: 0.2em;
106
107
  --numbered-list-padding-left: 0.2em;
107
108
 
109
+ // --- Horizontal rule ---
110
+ --hr-height: 1px;
111
+ --hr-width: 100%;
112
+ --hr-color: var(--color-grey-light);
113
+
108
114
  // Custom variables
109
115
  @content;
110
116
  }
@@ -169,6 +175,13 @@
169
175
 
170
176
  // ===== Column layout =====
171
177
  @include columns.configure();
178
+
179
+ // ===== Horizontal rule =====
180
+ @include hr.configure(
181
+ $height: var(--hr-height),
182
+ $width: var(--hr-width),
183
+ $color: var(--hr-color)
184
+ );
172
185
  }
173
186
 
174
187
  // ===== header =====