@subroh0508/marp-theme-canvas 0.0.1 → 0.0.3

package/css/black-canvas.css

@@ -240,15 +240,16 @@ section.display p {
   margin: 0;
   text-align: center;
 }
-section.display:not(:has(img)) p {
+section.display:not(:has(img, iframe)) p {
   font-size: var(--font-size-display);
   font-weight: var(--font-weight-bold);
 }
-section.display img {
+section.display img:not(.emoji),
+section.display iframe {
   display: block;
   margin: 0 0;
 }
-section.display:has(p) img {
+section.display:has(p) img:not(.emoji), section.display:has(p) iframe {
   margin: 0 0 1em;
 }
 section.columns {

package/css/white-canvas.css

@@ -240,15 +240,16 @@ section.display p {
   margin: 0;
   text-align: center;
 }
-section.display:not(:has(img)) p {
+section.display:not(:has(img, iframe)) p {
   font-size: var(--font-size-display);
   font-weight: var(--font-weight-bold);
 }
-section.display img {
+section.display img:not(.emoji),
+section.display iframe {
   display: block;
   margin: 0 0;
 }
-section.display:has(p) img {
+section.display:has(p) img:not(.emoji), section.display:has(p) iframe {
   margin: 0 0 1em;
 }
 section.columns {

package/package.json

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

package/scss/page/_display.scss

@@ -19,20 +19,24 @@
       text-align: center;
     }
 
-    // imgが存在しない場合、pタグを大きく表示
-    &:not(:has(img)) p {
+    // img, iframeが存在しない場合、pタグを大きく表示
+    &:not(:has(img, iframe)) p {
       font-size: $font-size;
       font-weight: $font-weight-bold;
     }
 
-    // img: 画像（上下左右中央揃え）
-    img {
+    // img, iframe: メディア要素（上下左右中央揃え）
+    // emojiクラスは除外
+    img:not(.emoji),
+    iframe {
       display: block;
       margin: 0 0;
     }
 
-    // pタグが存在する場合、imgの下にマージンを追加
-    &:has(p) img {
+    // pタグが存在する場合、メディア要素の下にマージンを追加
+    // emojiクラスは除外
+    &:has(p) img:not(.emoji),
+    &:has(p) iframe {
       margin: 0 0 1em;
     }
   }