add initial marp implementation with sample content and build configuration

node_modules/@marp-team/marpit/lib/postcss/advanced_background.js

@@ -0,0 +1,91 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.advancedBackground = void 0;
+var _postcss_plugin = _interopRequireDefault(require("../helpers/postcss_plugin"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/** @module */
+
+/**
+ * Marpit PostCSS advanced background plugin.
+ *
+ * Append style to suport the advanced background.
+ *
+ * @function advancedBackground
+ */
+const advancedBackground = exports.advancedBackground = (0, _postcss_plugin.default)('marpit-postcss-advanced-background', () => css => {
+  css.last.after(`
+section[data-marpit-advanced-background="background"] {
+  columns: initial !important;
+  display: block !important;
+  padding: 0 !important;
+}
+
+section[data-marpit-advanced-background="background"]::before,
+section[data-marpit-advanced-background="background"]::after,
+section[data-marpit-advanced-background="content"]::before,
+section[data-marpit-advanced-background="content"]::after {
+  display: none !important;
+}
+
+section[data-marpit-advanced-background="background"] > div[data-marpit-advanced-background-container] {
+  all: initial;
+  display: flex;
+  flex-direction: row;
+  height: 100%;
+  overflow: hidden;
+  width: 100%;
+}
+
+section[data-marpit-advanced-background="background"] > div[data-marpit-advanced-background-container][data-marpit-advanced-background-direction="vertical"] {
+  flex-direction: column;
+}
+
+section[data-marpit-advanced-background="background"][data-marpit-advanced-background-split] > div[data-marpit-advanced-background-container] {
+  width: var(--marpit-advanced-background-split, 50%);
+}
+
+section[data-marpit-advanced-background="background"][data-marpit-advanced-background-split="right"] > div[data-marpit-advanced-background-container] {
+  margin-left: calc(100% - var(--marpit-advanced-background-split, 50%));
+}
+
+section[data-marpit-advanced-background="background"] > div[data-marpit-advanced-background-container] > figure {
+  all: initial;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  flex: auto;
+  margin: 0;
+}
+
+section[data-marpit-advanced-background="background"] > div[data-marpit-advanced-background-container] > figure > figcaption {
+	position: absolute;
+  border: 0;
+  clip: rect(0, 0, 0, 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  white-space: nowrap;
+  width: 1px;
+}
+
+section[data-marpit-advanced-background="content"],
+section[data-marpit-advanced-background="pseudo"] {
+  background: transparent !important;
+}
+
+section[data-marpit-advanced-background="pseudo"],
+:marpit-container > svg[data-marpit-svg] > foreignObject[data-marpit-advanced-background="pseudo"] {
+  pointer-events: none !important;
+}
+
+section[data-marpit-advanced-background-split] {
+  width: 100%;
+  height: 100%;
+}
+`.trim());
+});
+var _default = exports.default = advancedBackground;