Marpのテンプレート

Marpのテンプレートを作ってみた。

こんな感じでstyleを埋め込めばいいようだ。

---
marp: true
//header: "**ヘッダータイトル1** __ヘッダータイトル2__"
footer: "**＠ Hidemi Ishihara**"

size: 16:9
paginate: true

style: |
    section.title {
        --title-height: 130px;
        --subtitle-height: 70px;

        overflow: visible;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr var(--title-height) var(--subtitle-height) 1fr;
        grid-template-areas: "." "title" "subtitle" ".";
    }

    section.title h1,
    section.title h2 {
        margin: 0;
        padding: 0;
        height: var(--area-height);
        line-height: var(--area-height);
        font-size: calc(var(--area-height) * 0.7);

        border: 1px dashed gray; /* debug */
    }

    section.title h1 {
        grid-area: title;
        --area-height: var(--title-height);
    }

    section.title h2 {
        grid-area: subtitle;
        --area-height: var(--subtitle-height);
    }

    section {
        display: flex;
        margin: 0px;
        justify-content: start;
        text-align: left;
        backgroundImage: url('bg.drawio.png');
    }

    h1 {
        grid-area: title;
        position: absolute;
        left: 20px; /* 左からの位置 */
        top: 20px;  /* 上からの位置 */
        --area-height: var(--title-height);
    }

    footer {
        left: 20px; /* 左からの位置 */
        bottom: 20px;  /* 上からの位置 */
    }

---
<!-- _class: title -->
# タイトル
## サブタイトル

---
![bg covoer](bg.drawio.png)
# スライド1
## スライド1サブタイトル

- あああ
- いいい
- ううう

---
# スライド2
## スライド2サブタイトル
- あああ
- いいい
- ううう