@subroh0508/marp-theme-canvas 0.0.5 → 0.0.6

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/README.ja.md +4 -0
  2. package/README.md +4 -0
  3. package/css/black-canvas.css +62 -2
  4. package/css/white-canvas.css +62 -2
  5. package/package.json +1 -1
  6. package/scss/component/_section.scss +17 -3
  7. package/scss/theme/CLAUDE.md +4 -0
  8. package/scss/theme/_black-canvas.scss +9 -1
  9. package/scss/theme/_white-canvas.scss +9 -1
package/README.ja.md CHANGED
@@ -178,6 +178,10 @@ marp --theme node_modules/@subroh0508/marp-theme-canvas/css/white-canvas.css sli
178
178
  | `--slide-padding-x` | スライド左右余白 | `80px` |
179
179
  | `--slide-padding-y` | スライド上下余白 | `80px` |
180
180
  | `--border-radius` | 角丸 | `8px` |
181
+ | `--bullet-list-indent` | 箇条書きリスト(ul)インデント | `1.1em` |
182
+ | `--numbered-list-indent` | 番号付きリスト(ol)インデント | `1.1em` |
183
+ | `--bullet-list-padding-left` | 箇条書きリスト項目(li)の左余白 | `0.2em` |
184
+ | `--numbered-list-padding-left` | 番号付きリスト項目(li)の左余白 | `0.2em` |
181
185
 
182
186
  ### カスタマイズ例
183
187
 
package/README.md CHANGED
@@ -178,6 +178,10 @@ You can override CSS variables in the frontmatter style.
178
178
  | `--slide-padding-x` | Slide horizontal padding | `80px` |
179
179
  | `--slide-padding-y` | Slide vertical padding | `80px` |
180
180
  | `--border-radius` | Border radius | `8px` |
181
+ | `--bullet-list-indent` | Bullet list (ul) indent | `1.1em` |
182
+ | `--numbered-list-indent` | Numbered list (ol) indent | `1.1em` |
183
+ | `--bullet-list-padding-left` | Bullet list item (li) padding | `0.2em` |
184
+ | `--numbered-list-padding-left` | Numbered list item (li) padding | `0.2em` |
181
185
 
182
186
  ### Customization Example
183
187
 
package/css/black-canvas.css CHANGED
@@ -79,6 +79,10 @@
79
79
  --header-footer-margin-x: 80px;
80
80
  --header-footer-margin-y: 20px;
81
81
  --border-radius: 8px;
82
+ --bullet-list-indent: 1.1em;
83
+ --numbered-list-indent: 1.1em;
84
+ --bullet-list-padding-left: 0.2em;
85
+ --numbered-list-padding-left: 0.2em;
82
86
  }
83
87
 
84
88
  section pre :where(.hljs) {
@@ -178,9 +182,17 @@ section blockquote,
178
182
  section pre {
179
183
  margin-top: 0;
180
184
  }
181
- section ul,
185
+ section ul {
186
+ padding-inline-start: var(--bullet-list-indent);
187
+ }
188
+ section ul > li {
189
+ padding-left: var(--bullet-list-padding-left);
190
+ }
182
191
  section ol {
183
- padding-inline-start: 1.3em;
192
+ padding-inline-start: var(--numbered-list-indent);
193
+ }
194
+ section ol > li {
195
+ padding-left: var(--numbered-list-padding-left);
184
196
  }
185
197
  section::after {
186
198
  position: absolute;
@@ -283,6 +295,14 @@ section.columns > .column > *,
283
295
  section.columns > .column p > * {
284
296
  max-width: 100%;
285
297
  }
298
+ section.columns > .column-1 {
299
+ flex: 1;
300
+ min-width: 0;
301
+ }
302
+ section.columns > .column-1 > *,
303
+ section.columns > .column-1 p > * {
304
+ max-width: 100%;
305
+ }
286
306
  section.columns > .column-2 {
287
307
  flex: 2;
288
308
  min-width: 0;
@@ -331,6 +351,22 @@ section.columns > .column-8 > *,
331
351
  section.columns > .column-8 p > * {
332
352
  max-width: 100%;
333
353
  }
354
+ section.columns > .column-9 {
355
+ flex: 9;
356
+ min-width: 0;
357
+ }
358
+ section.columns > .column-9 > *,
359
+ section.columns > .column-9 p > * {
360
+ max-width: 100%;
361
+ }
362
+ section.columns > .column-10 {
363
+ flex: 10;
364
+ min-width: 0;
365
+ }
366
+ section.columns > .column-10 > *,
367
+ section.columns > .column-10 p > * {
368
+ max-width: 100%;
369
+ }
334
370
  section .columns {
335
371
  display: flex;
336
372
  gap: 1em;
@@ -344,6 +380,14 @@ section .columns > .column > *,
344
380
  section .columns > .column p > * {
345
381
  max-width: 100%;
346
382
  }
383
+ section .columns > .column-1 {
384
+ flex: 1;
385
+ min-width: 0;
386
+ }
387
+ section .columns > .column-1 > *,
388
+ section .columns > .column-1 p > * {
389
+ max-width: 100%;
390
+ }
347
391
  section .columns > .column-2 {
348
392
  flex: 2;
349
393
  min-width: 0;
@@ -392,6 +436,22 @@ section .columns > .column-8 > *,
392
436
  section .columns > .column-8 p > * {
393
437
  max-width: 100%;
394
438
  }
439
+ section .columns > .column-9 {
440
+ flex: 9;
441
+ min-width: 0;
442
+ }
443
+ section .columns > .column-9 > *,
444
+ section .columns > .column-9 p > * {
445
+ max-width: 100%;
446
+ }
447
+ section .columns > .column-10 {
448
+ flex: 10;
449
+ min-width: 0;
450
+ }
451
+ section .columns > .column-10 > *,
452
+ section .columns > .column-10 p > * {
453
+ max-width: 100%;
454
+ }
395
455
 
396
456
  header {
397
457
  position: absolute;
package/css/white-canvas.css CHANGED
@@ -79,6 +79,10 @@
79
79
  --header-footer-margin-x: 80px;
80
80
  --header-footer-margin-y: 20px;
81
81
  --border-radius: 8px;
82
+ --bullet-list-indent: 1.1em;
83
+ --numbered-list-indent: 1.1em;
84
+ --bullet-list-padding-left: 0.2em;
85
+ --numbered-list-padding-left: 0.2em;
82
86
  }
83
87
 
84
88
  section pre :where(.hljs) {
@@ -178,9 +182,17 @@ section blockquote,
178
182
  section pre {
179
183
  margin-top: 0;
180
184
  }
181
- section ul,
185
+ section ul {
186
+ padding-inline-start: var(--bullet-list-indent);
187
+ }
188
+ section ul > li {
189
+ padding-left: var(--bullet-list-padding-left);
190
+ }
182
191
  section ol {
183
- padding-inline-start: 1.3em;
192
+ padding-inline-start: var(--numbered-list-indent);
193
+ }
194
+ section ol > li {
195
+ padding-left: var(--numbered-list-padding-left);
184
196
  }
185
197
  section::after {
186
198
  position: absolute;
@@ -283,6 +295,14 @@ section.columns > .column > *,
283
295
  section.columns > .column p > * {
284
296
  max-width: 100%;
285
297
  }
298
+ section.columns > .column-1 {
299
+ flex: 1;
300
+ min-width: 0;
301
+ }
302
+ section.columns > .column-1 > *,
303
+ section.columns > .column-1 p > * {
304
+ max-width: 100%;
305
+ }
286
306
  section.columns > .column-2 {
287
307
  flex: 2;
288
308
  min-width: 0;
@@ -331,6 +351,22 @@ section.columns > .column-8 > *,
331
351
  section.columns > .column-8 p > * {
332
352
  max-width: 100%;
333
353
  }
354
+ section.columns > .column-9 {
355
+ flex: 9;
356
+ min-width: 0;
357
+ }
358
+ section.columns > .column-9 > *,
359
+ section.columns > .column-9 p > * {
360
+ max-width: 100%;
361
+ }
362
+ section.columns > .column-10 {
363
+ flex: 10;
364
+ min-width: 0;
365
+ }
366
+ section.columns > .column-10 > *,
367
+ section.columns > .column-10 p > * {
368
+ max-width: 100%;
369
+ }
334
370
  section .columns {
335
371
  display: flex;
336
372
  gap: 1em;
@@ -344,6 +380,14 @@ section .columns > .column > *,
344
380
  section .columns > .column p > * {
345
381
  max-width: 100%;
346
382
  }
383
+ section .columns > .column-1 {
384
+ flex: 1;
385
+ min-width: 0;
386
+ }
387
+ section .columns > .column-1 > *,
388
+ section .columns > .column-1 p > * {
389
+ max-width: 100%;
390
+ }
347
391
  section .columns > .column-2 {
348
392
  flex: 2;
349
393
  min-width: 0;
@@ -392,6 +436,22 @@ section .columns > .column-8 > *,
392
436
  section .columns > .column-8 p > * {
393
437
  max-width: 100%;
394
438
  }
439
+ section .columns > .column-9 {
440
+ flex: 9;
441
+ min-width: 0;
442
+ }
443
+ section .columns > .column-9 > *,
444
+ section .columns > .column-9 p > * {
445
+ max-width: 100%;
446
+ }
447
+ section .columns > .column-10 {
448
+ flex: 10;
449
+ min-width: 0;
450
+ }
451
+ section .columns > .column-10 > *,
452
+ section .columns > .column-10 p > * {
453
+ max-width: 100%;
454
+ }
395
455
 
396
456
  header {
397
457
  position: absolute;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@subroh0508/marp-theme-canvas",
3
- "version": "0.0.5",
3
+ "version": "0.0.6",
4
4
  "description": "A simple Marp theme with minimal styling",
5
5
  "repository": {
6
6
  "type": "git",
package/scss/component/_section.scss CHANGED
@@ -11,7 +11,10 @@
11
11
  $font-family,
12
12
  $font-size,
13
13
  $line-height,
14
- $list-indent
14
+ $bullet-list-indent,
15
+ $numbered-list-indent,
16
+ $bullet-list-padding-left,
17
+ $numbered-list-padding-left
15
18
  ) {
16
19
  width: $width;
17
20
  height: $height;
@@ -36,8 +39,19 @@
36
39
  }
37
40
 
38
41
  // Adjust list indentation
39
- ul,
42
+ ul {
43
+ padding-inline-start: $bullet-list-indent;
44
+
45
+ > li {
46
+ padding-left: $bullet-list-padding-left;
47
+ }
48
+ }
49
+
40
50
  ol {
41
- padding-inline-start: $list-indent;
51
+ padding-inline-start: $numbered-list-indent;
52
+
53
+ > li {
54
+ padding-left: $numbered-list-padding-left;
55
+ }
42
56
  }
43
57
  }
package/scss/theme/CLAUDE.md CHANGED
@@ -76,6 +76,10 @@ The following CSS variables have no default values and must be defined when used
76
76
  | `--header-footer-margin-x` | Header/footer/page number horizontal margin | `80px` |
77
77
  | `--header-footer-margin-y` | Header/footer/page number vertical margin | `20px` |
78
78
  | `--border-radius` | Border radius (blockquote) | `8px` |
79
+ | `--bullet-list-indent` | Bullet list (ul) indent | `1.1em` |
80
+ | `--numbered-list-indent` | Numbered list (ol) indent | `1.1em` |
81
+ | `--bullet-list-padding-left` | Bullet list item (li) padding | `0.2em` |
82
+ | `--numbered-list-padding-left` | Numbered list item (li) padding | `0.2em` |
79
83
 
80
84
  ## Available Mixins
81
85
 
package/scss/theme/_black-canvas.scss CHANGED
@@ -100,6 +100,11 @@
100
100
  --header-footer-margin-y: 20px;
101
101
  --border-radius: 8px;
102
102
 
103
+ --bullet-list-indent: 1.1em;
104
+ --numbered-list-indent: 1.1em;
105
+ --bullet-list-padding-left: 0.2em;
106
+ --numbered-list-padding-left: 0.2em;
107
+
103
108
  // Custom variables
104
109
  @content;
105
110
  }
@@ -120,7 +125,10 @@
120
125
  $font-family: var(--font-family-base),
121
126
  $font-size: var(--font-size-base),
122
127
  $line-height: var(--line-height-normal),
123
- $list-indent: 1.3em
128
+ $bullet-list-indent: var(--bullet-list-indent),
129
+ $numbered-list-indent: var(--numbered-list-indent),
130
+ $bullet-list-padding-left: var(--bullet-list-padding-left),
131
+ $numbered-list-padding-left: var(--numbered-list-padding-left)
124
132
  );
125
133
  @include pagination.configure(
126
134
  $margin-x: var(--header-footer-margin-x),
package/scss/theme/_white-canvas.scss CHANGED
@@ -100,6 +100,11 @@
100
100
  --header-footer-margin-y: 20px;
101
101
  --border-radius: 8px;
102
102
 
103
+ --bullet-list-indent: 1.1em;
104
+ --numbered-list-indent: 1.1em;
105
+ --bullet-list-padding-left: 0.2em;
106
+ --numbered-list-padding-left: 0.2em;
107
+
103
108
  // Custom variables
104
109
  @content;
105
110
  }
@@ -120,7 +125,10 @@
120
125
  $font-family: var(--font-family-base),
121
126
  $font-size: var(--font-size-base),
122
127
  $line-height: var(--line-height-normal),
123
- $list-indent: 1.3em
128
+ $bullet-list-indent: var(--bullet-list-indent),
129
+ $numbered-list-indent: var(--numbered-list-indent),
130
+ $bullet-list-padding-left: var(--bullet-list-padding-left),
131
+ $numbered-list-padding-left: var(--numbered-list-padding-left)
124
132
  );
125
133
  @include pagination.configure(
126
134
  $margin-x: var(--header-footer-margin-x),