Harmonic Serenity: 穏やかで視覚的に魅力的なMarpテーマ

このテーマの特徴

Harmonic Serenity テーマの特徴:

• 穏やかな色合い: 背景色は落ち着いた灰みのグリーン、ヘッダーとフッターはアイボリー系とグレー系でまとまっています。
• グラデーション: タイトルセクションには、微妙なラジアルグラデーションが使用されており、視覚的な深みと興味が加えられています。
• エレガントな書体: フォントサイズが大きく、行間が広いので、読みやすく優雅な印象を与えます。
• 明確な構造: セクションは列で構成されており、ヘッダー、本文、フッターが明確に分かれています。
• 特徴的なタイトルセクション: タイトルセクションは中央揃えで、グラデーションと装飾的な円形エレメントを備えています。円形エレメントは、プレゼンテーションのテーマを表現しています。

このテーマを利用する

CSS

/* @theme Harmonic Serenity */
@import default;

section {
  display: flex;
  flex-direction: column;
  padding: 48px 32px;
  font-size: 24pt;
  line-height: 1.6;
  background-color: hsl(28, 8%, 96%);
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 32px 20px;
  background: hsl(28, 6%, 90%);
  color: hsl(192, 100%, 12%);
}

footer {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 40px 20px;
  background: hsl(192, 100%, 12%);
  color: hsl(28, 6%, 90%);
  position: fixed;
  bottom: 0;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.1);
}

section.title {
  background-image: radial-gradient(
    circle at center,
    hsl(28, 12%, 98%) 0%,
    hsl(28, 8%, 96%) 50%,
    hsl(28, 8%, 96%) 51%,
    hsl(28, 12%, 98%) 100%
  );
  color: hsl(192, 100%, 12%);
  text-align: center;
  font-size: 30pt;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 48px;
}

section.title::before {
  content: "";
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin: 0 auto 20px;
  background: linear-gradient(to right, hsl(37, 100%, 56%), hsl(48, 100%, 40%));
}

section.title h1 {
  font-size: 48pt;
  font-weight: bold;
}

section.title p {
  font-size: 20pt;
}

/* Additional styles for specific elements */
blockquote {
  border-left: 4px solid hsl(192, 100%, 12%);
  padding-left: 16px;
  margin-left: 16px;
}

code {
  background-color: hsl(28, 8%, 90%);
  padding: 4px 8px;
}

Marpのサンプル

---
marp: true
theme: custom_theme
header: " "
footer: " "
---
<!--
_class: title
-->

# Harmonic Serenity

**モダンでミニマルなチェックリストとワークシート**

---
<!--
_class: page
-->

## チェックリスト

- タスク 1
- タスク 2
- タスク 3

---
## ワークシート

**セクション 1:**

| タスク | 進行状況 |
|---|---|
| タスク 1 | 未完了 |
| タスク 2 | 完了 |
| タスク 3 | 進行中 |

**セクション 2:**

* アイデアをブレインストーミングする
* リサーチを行う
* プロトタイプを作成する