@subroh0508/marp-theme-canvas 0.0.6 → 0.0.8

package/css/black-canvas.css

@@ -83,6 +83,9 @@
   --numbered-list-indent: 1.1em;
   --bullet-list-padding-left: 0.2em;
   --numbered-list-padding-left: 0.2em;
+  --hr-height: 1px;
+  --hr-width: 100%;
+  --hr-color: var(--color-grey-medium);
 }
 
 section pre :where(.hljs) {
@@ -202,16 +205,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;
 }
@@ -225,11 +230,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;
@@ -271,7 +277,7 @@ section.display p {
   margin: 0;
   text-align: center;
 }
-section.display:not(:has(img, iframe)) p {
+section.display:not(:has(img:not(.emoji), iframe)) p {
   font-size: var(--font-size-display);
   font-weight: var(--font-weight-bold);
 }
@@ -452,6 +458,18 @@ section .columns > .column-10 > *,
 section .columns > .column-10 p > * {
   max-width: 100%;
 }
+section hr, section.hr-solid hr {
+  width: var(--hr-width);
+  border: none;
+  border-top: var(--hr-height) solid var(--hr-color);
+  margin: 0 0 1em;
+}
+section.hr-dashed hr {
+  width: var(--hr-width);
+  border: none;
+  border-top: var(--hr-height) dashed var(--hr-color);
+  margin: 0 0 1em;
+}
 
 header {
   position: absolute;

package/css/white-canvas.css

@@ -83,6 +83,9 @@
   --numbered-list-indent: 1.1em;
   --bullet-list-padding-left: 0.2em;
   --numbered-list-padding-left: 0.2em;
+  --hr-height: 1px;
+  --hr-width: 100%;
+  --hr-color: var(--color-grey-light);
 }
 
 section pre :where(.hljs) {
@@ -202,16 +205,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;
 }
@@ -225,11 +230,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;
@@ -271,7 +277,7 @@ section.display p {
   margin: 0;
   text-align: center;
 }
-section.display:not(:has(img, iframe)) p {
+section.display:not(:has(img:not(.emoji), iframe)) p {
   font-size: var(--font-size-display);
   font-weight: var(--font-weight-bold);
 }
@@ -452,6 +458,18 @@ section .columns > .column-10 > *,
 section .columns > .column-10 p > * {
   max-width: 100%;
 }
+section hr, section.hr-solid hr {
+  width: var(--hr-width);
+  border: none;
+  border-top: var(--hr-height) solid var(--hr-color);
+  margin: 0 0 1em;
+}
+section.hr-dashed hr {
+  width: var(--hr-width);
+  border: none;
+  border-top: var(--hr-height) dashed var(--hr-color);
+  margin: 0 0 1em;
+}
 
 header {
   position: absolute;

package/package.json

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

package/scss/component/CLAUDE.md

@@ -24,6 +24,7 @@ section {
   @include section.configure(...);
   @include pagination.configure(...);
   @include prettylights.configure;
+  @include hr.configure(...);
 }
 ```
 
@@ -52,4 +53,5 @@ section {
 | `_code.scss` | `code`, `pre`, `tt` | Code blocks |
 | `_blockquote.scss` | `blockquote` | Blockquote |
 | `_text-decorator.scss` | `strong`, `mark`, `rp` | Text decoration |
+| `_hr.scss` | `hr` | Horizontal rule |
 | `prettylights/*` | `.hljs-*` | Syntax highlighting |

package/scss/component/_hr.scss

@@ -0,0 +1,25 @@
+// ===== _hr.scss =====
+// Horizontal rule styles
+
+@mixin _hr($height, $width, $color, $style) {
+  width: $width;
+  // Reset browser default border
+  border: none;
+  border-top: $height $style $color;
+  margin: 0 0 1em;
+}
+
+@mixin configure(
+  $height,
+  $width,
+  $color
+) {
+  hr,
+  &.hr-solid hr {
+    @include _hr($height, $width, $color, solid);
+  }
+
+  &.hr-dashed hr {
+    @include _hr($height, $width, $color, dashed);
+  }
+}

package/scss/page/_display.scss

@@ -20,7 +20,8 @@
     }
 
     // When img or iframe doesn't exist, display p tag prominently
-    &:not(:has(img, iframe)) p {
+    // Excludes emoji class
+    &:not(:has(img:not(.emoji), iframe)) p {
       font-size: $font-size;
       font-weight: $font-weight-bold;
     }

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

@@ -81,6 +81,14 @@ The following CSS variables have no default values and must be defined when used
 | `--bullet-list-padding-left` | Bullet list item (li) padding | `0.2em` |
 | `--numbered-list-padding-left` | Numbered list item (li) padding | `0.2em` |
 
+### Horizontal Rule
+
+| Variable | Description | white-canvas | black-canvas |
+|----------|-------------|--------------|--------------|
+| `--hr-height` | Line thickness | `1px` | `1px` |
+| `--hr-width` | Line width | `100%` | `100%` |
+| `--hr-color` | Line color | `grey-light` | `grey-medium` |
+
 ## Available Mixins
 
 | Mixin | Description |

package/scss/theme/_black-canvas.scss

@@ -27,6 +27,7 @@
 @use '../component/text-decorator' as text-decorator;
 @use '../component/columns' as columns;
 @use '../component/a' as a;
+@use '../component/hr' as hr;
 
 // ===== Page styles =====
 @use '../page/title' as page-title;
@@ -105,6 +106,11 @@
     --bullet-list-padding-left: 0.2em;
     --numbered-list-padding-left: 0.2em;
 
+    // --- Horizontal rule ---
+    --hr-height: 1px;
+    --hr-width: 100%;
+    --hr-color: var(--color-grey-medium);
+
     // Custom variables
     @content;
   }
@@ -169,6 +175,13 @@
 
     // ===== Column layout =====
     @include columns.configure();
+
+    // ===== Horizontal rule =====
+    @include hr.configure(
+      $height: var(--hr-height),
+      $width: var(--hr-width),
+      $color: var(--hr-color)
+    );
   }
 
   // ===== header =====

package/scss/theme/_white-canvas.scss

@@ -27,6 +27,7 @@
 @use '../component/text-decorator' as text-decorator;
 @use '../component/columns' as columns;
 @use '../component/a' as a;
+@use '../component/hr' as hr;
 
 // ===== Page styles =====
 @use '../page/title' as page-title;
@@ -105,6 +106,11 @@
     --bullet-list-padding-left: 0.2em;
     --numbered-list-padding-left: 0.2em;
 
+    // --- Horizontal rule ---
+    --hr-height: 1px;
+    --hr-width: 100%;
+    --hr-color: var(--color-grey-light);
+
     // Custom variables
     @content;
   }
@@ -169,6 +175,13 @@
 
     // ===== Column layout =====
     @include columns.configure();
+
+    // ===== Horizontal rule =====
+    @include hr.configure(
+      $height: var(--hr-height),
+      $width: var(--hr-width),
+      $color: var(--hr-color)
+    );
   }
 
   // ===== header =====