@subroh0508/marp-theme-canvas 0.0.5 → 0.0.7

package/README.ja.md

@@ -178,6 +178,10 @@ marp --theme node_modules/@subroh0508/marp-theme-canvas/css/white-canvas.css sli
 | `--slide-padding-x` | スライド左右余白 | `80px` |
 | `--slide-padding-y` | スライド上下余白 | `80px` |
 | `--border-radius` | 角丸 | `8px` |
+| `--bullet-list-indent` | 箇条書きリスト(ul)インデント | `1.1em` |
+| `--numbered-list-indent` | 番号付きリスト(ol)インデント | `1.1em` |
+| `--bullet-list-padding-left` | 箇条書きリスト項目(li)の左余白 | `0.2em` |
+| `--numbered-list-padding-left` | 番号付きリスト項目(li)の左余白 | `0.2em` |
 
 ### カスタマイズ例
 

package/README.md

@@ -178,6 +178,10 @@ You can override CSS variables in the frontmatter style.
 | `--slide-padding-x` | Slide horizontal padding | `80px` |
 | `--slide-padding-y` | Slide vertical padding | `80px` |
 | `--border-radius` | Border radius | `8px` |
+| `--bullet-list-indent` | Bullet list (ul) indent | `1.1em` |
+| `--numbered-list-indent` | Numbered list (ol) indent | `1.1em` |
+| `--bullet-list-padding-left` | Bullet list item (li) padding | `0.2em` |
+| `--numbered-list-padding-left` | Numbered list item (li) padding | `0.2em` |
 
 ### Customization Example
 

package/css/black-canvas.css

@@ -79,6 +79,10 @@
   --header-footer-margin-x: 80px;
   --header-footer-margin-y: 20px;
   --border-radius: 8px;
+  --bullet-list-indent: 1.1em;
+  --numbered-list-indent: 1.1em;
+  --bullet-list-padding-left: 0.2em;
+  --numbered-list-padding-left: 0.2em;
 }
 
 section pre :where(.hljs) {
@@ -178,9 +182,17 @@ section blockquote,
 section pre {
   margin-top: 0;
 }
-section ul,
+section ul {
+  padding-inline-start: var(--bullet-list-indent);
+}
+section ul > li {
+  padding-left: var(--bullet-list-padding-left);
+}
 section ol {
-  padding-inline-start: 1.3em;
+  padding-inline-start: var(--numbered-list-indent);
+}
+section ol > li {
+  padding-left: var(--numbered-list-padding-left);
 }
 section::after {
   position: absolute;
@@ -190,16 +202,18 @@ section::after {
   font-size: var(--font-size-note);
   color: var(--color-grey-light);
 }
+section.title {
+  justify-content: center;
+}
 section.title h1 {
   font-size: var(--font-size-display);
+  display: block;
   flex: 0 0 80%;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  justify-content: center;
+  align-content: center;
   margin: 0;
 }
 section.title h1 small {
+  display: block;
   margin-top: 0.5em;
   font-size: 0.5em;
 }
@@ -213,11 +227,12 @@ section.title h1 + p {
   color: var(--color-grey-medium);
   margin: 0;
 }
+section.section {
+  justify-content: center;
+}
 section.section p {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
+  flex: 0 1;
+  display: block;
   font-size: var(--font-size-title);
   font-weight: bold;
   margin: 0;
@@ -283,6 +298,14 @@ section.columns > .column > *,
 section.columns > .column p > * {
   max-width: 100%;
 }
+section.columns > .column-1 {
+  flex: 1;
+  min-width: 0;
+}
+section.columns > .column-1 > *,
+section.columns > .column-1 p > * {
+  max-width: 100%;
+}
 section.columns > .column-2 {
   flex: 2;
   min-width: 0;
@@ -331,6 +354,22 @@ section.columns > .column-8 > *,
 section.columns > .column-8 p > * {
   max-width: 100%;
 }
+section.columns > .column-9 {
+  flex: 9;
+  min-width: 0;
+}
+section.columns > .column-9 > *,
+section.columns > .column-9 p > * {
+  max-width: 100%;
+}
+section.columns > .column-10 {
+  flex: 10;
+  min-width: 0;
+}
+section.columns > .column-10 > *,
+section.columns > .column-10 p > * {
+  max-width: 100%;
+}
 section .columns {
   display: flex;
   gap: 1em;
@@ -344,6 +383,14 @@ section .columns > .column > *,
 section .columns > .column p > * {
   max-width: 100%;
 }
+section .columns > .column-1 {
+  flex: 1;
+  min-width: 0;
+}
+section .columns > .column-1 > *,
+section .columns > .column-1 p > * {
+  max-width: 100%;
+}
 section .columns > .column-2 {
   flex: 2;
   min-width: 0;
@@ -392,6 +439,22 @@ section .columns > .column-8 > *,
 section .columns > .column-8 p > * {
   max-width: 100%;
 }
+section .columns > .column-9 {
+  flex: 9;
+  min-width: 0;
+}
+section .columns > .column-9 > *,
+section .columns > .column-9 p > * {
+  max-width: 100%;
+}
+section .columns > .column-10 {
+  flex: 10;
+  min-width: 0;
+}
+section .columns > .column-10 > *,
+section .columns > .column-10 p > * {
+  max-width: 100%;
+}
 
 header {
   position: absolute;

package/css/white-canvas.css

@@ -79,6 +79,10 @@
   --header-footer-margin-x: 80px;
   --header-footer-margin-y: 20px;
   --border-radius: 8px;
+  --bullet-list-indent: 1.1em;
+  --numbered-list-indent: 1.1em;
+  --bullet-list-padding-left: 0.2em;
+  --numbered-list-padding-left: 0.2em;
 }
 
 section pre :where(.hljs) {
@@ -178,9 +182,17 @@ section blockquote,
 section pre {
   margin-top: 0;
 }
-section ul,
+section ul {
+  padding-inline-start: var(--bullet-list-indent);
+}
+section ul > li {
+  padding-left: var(--bullet-list-padding-left);
+}
 section ol {
-  padding-inline-start: 1.3em;
+  padding-inline-start: var(--numbered-list-indent);
+}
+section ol > li {
+  padding-left: var(--numbered-list-padding-left);
 }
 section::after {
   position: absolute;
@@ -190,16 +202,18 @@ section::after {
   font-size: var(--font-size-note);
   color: var(--color-grey-medium);
 }
+section.title {
+  justify-content: center;
+}
 section.title h1 {
   font-size: var(--font-size-display);
+  display: block;
   flex: 0 0 80%;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  justify-content: center;
+  align-content: center;
   margin: 0;
 }
 section.title h1 small {
+  display: block;
   margin-top: 0.5em;
   font-size: 0.5em;
 }
@@ -213,11 +227,12 @@ section.title h1 + p {
   color: var(--color-grey-light);
   margin: 0;
 }
+section.section {
+  justify-content: center;
+}
 section.section p {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
+  flex: 0 1;
+  display: block;
   font-size: var(--font-size-title);
   font-weight: bold;
   margin: 0;
@@ -283,6 +298,14 @@ section.columns > .column > *,
 section.columns > .column p > * {
   max-width: 100%;
 }
+section.columns > .column-1 {
+  flex: 1;
+  min-width: 0;
+}
+section.columns > .column-1 > *,
+section.columns > .column-1 p > * {
+  max-width: 100%;
+}
 section.columns > .column-2 {
   flex: 2;
   min-width: 0;
@@ -331,6 +354,22 @@ section.columns > .column-8 > *,
 section.columns > .column-8 p > * {
   max-width: 100%;
 }
+section.columns > .column-9 {
+  flex: 9;
+  min-width: 0;
+}
+section.columns > .column-9 > *,
+section.columns > .column-9 p > * {
+  max-width: 100%;
+}
+section.columns > .column-10 {
+  flex: 10;
+  min-width: 0;
+}
+section.columns > .column-10 > *,
+section.columns > .column-10 p > * {
+  max-width: 100%;
+}
 section .columns {
   display: flex;
   gap: 1em;
@@ -344,6 +383,14 @@ section .columns > .column > *,
 section .columns > .column p > * {
   max-width: 100%;
 }
+section .columns > .column-1 {
+  flex: 1;
+  min-width: 0;
+}
+section .columns > .column-1 > *,
+section .columns > .column-1 p > * {
+  max-width: 100%;
+}
 section .columns > .column-2 {
   flex: 2;
   min-width: 0;
@@ -392,6 +439,22 @@ section .columns > .column-8 > *,
 section .columns > .column-8 p > * {
   max-width: 100%;
 }
+section .columns > .column-9 {
+  flex: 9;
+  min-width: 0;
+}
+section .columns > .column-9 > *,
+section .columns > .column-9 p > * {
+  max-width: 100%;
+}
+section .columns > .column-10 {
+  flex: 10;
+  min-width: 0;
+}
+section .columns > .column-10 > *,
+section .columns > .column-10 p > * {
+  max-width: 100%;
+}
 
 header {
   position: absolute;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@subroh0508/marp-theme-canvas",
-  "version": "0.0.5",
+  "version": "0.0.7",
   "description": "A simple Marp theme with minimal styling",
   "repository": {
     "type": "git",

package/scss/component/_section.scss

@@ -11,7 +11,10 @@
   $font-family,
   $font-size,
   $line-height,
-  $list-indent
+  $bullet-list-indent,
+  $numbered-list-indent,
+  $bullet-list-padding-left,
+  $numbered-list-padding-left
 ) {
   width: $width;
   height: $height;
@@ -36,8 +39,19 @@
   }
 
   // Adjust list indentation
-  ul,
+  ul {
+    padding-inline-start: $bullet-list-indent;
+
+    > li {
+      padding-left: $bullet-list-padding-left;
+    }
+  }
+
   ol {
-    padding-inline-start: $list-indent;
+    padding-inline-start: $numbered-list-indent;
+
+    > li {
+      padding-left: $numbered-list-padding-left;
+    }
   }
 }

package/scss/page/_section.scss

@@ -5,13 +5,13 @@
 
 @mixin configure($font-size, $font-weight: bold) {
   &.section {
+    justify-content: center;
+
     // p: Section title
-    // Vertically centered, left-aligned
+    // Vertically centered
     p {
-      flex: 1;
-      display: flex;
-      align-items: center;
-      justify-content: flex-start;
+      flex: 0 1;
+      display: block;
       font-size: $font-size;
       font-weight: $font-weight;
       margin: 0;

package/scss/page/_title.scss

@@ -5,19 +5,20 @@
 
 @mixin configure($font-size-title, $color-metadata-text) {
   &.title {
+    justify-content: center;
+
     // h1: Title text
-    // Occupies 80% of section, vertically centered, left-aligned
+    // Occupies 80% of section, vertically centered
     h1 {
       font-size: $font-size-title;
+      display: block;
       flex: 0 0 80%;
-      display: flex;
-      flex-direction: column;
-      align-items: flex-start;
-      justify-content: center;
+      align-content: center;
       margin: 0;
 
       // small: Subtitle
       small {
+        display: block;
         margin-top: 0.5em;
         font-size: 0.5em;
       }

package/scss/theme/CLAUDE.md

@@ -76,6 +76,10 @@ The following CSS variables have no default values and must be defined when used
 | `--header-footer-margin-x` | Header/footer/page number horizontal margin | `80px` |
 | `--header-footer-margin-y` | Header/footer/page number vertical margin | `20px` |
 | `--border-radius` | Border radius (blockquote) | `8px` |
+| `--bullet-list-indent` | Bullet list (ul) indent | `1.1em` |
+| `--numbered-list-indent` | Numbered list (ol) indent | `1.1em` |
+| `--bullet-list-padding-left` | Bullet list item (li) padding | `0.2em` |
+| `--numbered-list-padding-left` | Numbered list item (li) padding | `0.2em` |
 
 ## Available Mixins
 

package/scss/theme/_black-canvas.scss

@@ -100,6 +100,11 @@
     --header-footer-margin-y: 20px;
     --border-radius: 8px;
 
+    --bullet-list-indent: 1.1em;
+    --numbered-list-indent: 1.1em;
+    --bullet-list-padding-left: 0.2em;
+    --numbered-list-padding-left: 0.2em;
+
     // Custom variables
     @content;
   }
@@ -120,7 +125,10 @@
       $font-family: var(--font-family-base),
       $font-size: var(--font-size-base),
       $line-height: var(--line-height-normal),
-      $list-indent: 1.3em
+      $bullet-list-indent: var(--bullet-list-indent),
+      $numbered-list-indent: var(--numbered-list-indent),
+      $bullet-list-padding-left: var(--bullet-list-padding-left),
+      $numbered-list-padding-left: var(--numbered-list-padding-left)
     );
     @include pagination.configure(
       $margin-x: var(--header-footer-margin-x),

package/scss/theme/_white-canvas.scss

@@ -100,6 +100,11 @@
     --header-footer-margin-y: 20px;
     --border-radius: 8px;
 
+    --bullet-list-indent: 1.1em;
+    --numbered-list-indent: 1.1em;
+    --bullet-list-padding-left: 0.2em;
+    --numbered-list-padding-left: 0.2em;
+
     // Custom variables
     @content;
   }
@@ -120,7 +125,10 @@
       $font-family: var(--font-family-base),
       $font-size: var(--font-size-base),
       $line-height: var(--line-height-normal),
-      $list-indent: 1.3em
+      $bullet-list-indent: var(--bullet-list-indent),
+      $numbered-list-indent: var(--numbered-list-indent),
+      $bullet-list-padding-left: var(--bullet-list-padding-left),
+      $numbered-list-padding-left: var(--numbered-list-padding-left)
     );
     @include pagination.configure(
       $margin-x: var(--header-footer-margin-x),