diff --git a/.marprc.yml b/.marprc.yml index 87fc6ab..70bf767 100644 --- a/.marprc.yml +++ b/.marprc.yml @@ -1,3 +1,6 @@ engine: ./engine.mjs output: index.html -theme: ./theme.css +themeSet: + - themes/rose-pine-dawn.css + - themes/rose-pine-moon.css + - themes/rose-pine.css diff --git a/.vscode/settings.json b/.vscode/settings.json index 92b33a1..11bf9d3 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,9 +1,4 @@ { "cSpell.words": ["marp", "marpit", "Marpit"], - "markdown.marp.themes": [ - "https://raw.githubusercontent.com/rnd195/my-marp-themes/live/gradient.css", - "https://raw.githubusercontent.com/rainbowflesh/Rose-Pine-For-Marp/master/css/rose-pine-dawn.css", - "https://raw.githubusercontent.com/rainbowflesh/Rose-Pine-For-Marp/master/css/rose-pine-moon.css", - "https://raw.githubusercontent.com/rainbowflesh/Rose-Pine-For-Marp/master/css/rose-pine.css" - ] + "markdown.marp.themes": ["./themes/rose-pine.css", "./themes/rose-pine-dawn.css", "./themes/rose-pine-moon.css"] } diff --git a/images/keynote.jpg b/assets/keynote.jpg similarity index 100% rename from images/keynote.jpg rename to assets/keynote.jpg diff --git a/index.html b/index.html index 5fc27db..f6bd2d8 100644 --- a/index.html +++ b/index.html @@ -1,4 +1,4 @@ -
+;">

Some big title

Some subtitle

Some footer
-
+;" data-marpit-pagination-total="4">

This is very important

  • one
    • @@ -55,45 +53,45 @@ pre {
Some footer
-
+;" data-marpit-advanced-background="content">

-
+;" data-marpit-pagination-total="4">

Some code

function add(a: number, b: number) {
   return a + b
diff --git a/presentation.md b/presentation.md
index f000869..1014545 100644
--- a/presentation.md
+++ b/presentation.md
@@ -1,6 +1,6 @@
 ---
 marp: true
-theme: rose-pine-moon
+theme: rose-pine
 author: cupcakearmy
 footer: Some footer
 paginate: true
@@ -35,7 +35,7 @@ _paginate: false
 _footer: ''
 -->
 
-## ![bg](./images/keynote.jpg)
+## ![bg](./assets/keynote.jpg)
 
 ---
 
diff --git a/theme.css b/theme.css
deleted file mode 100644
index c7a71da..0000000
--- a/theme.css
+++ /dev/null
@@ -1,138 +0,0 @@
-/* @theme rose-pine-moon */
-/*
-Rosé Pine theme create by RAINBOWFLESH
-> www.rosepinetheme.com
-
-palette in :root
-*/
-
-@import "default";
-@import "schema";
-@import "structure";
-
-:root {
-    --base: #232136;
-    --surface: #2a273f;
-    --overlay: #393552;
-    --muted: #6e6a86;
-    --subtle: #908caa;
-    --text: #e0def4;
-    --love: #eb6f92;
-    --gold: #f6c177;
-    --rose: #ea9a97;
-    --pine: #3e8fb0;
-    --foam: #9ccfd8;
-    --iris: #c4a7e7;
-    --highlight-low: #2a283e;
-    --highlight-muted: #44415a;
-    --highlight-high: #56526e;
-
-    font-family: Pier Sans, ui-sans-serif, system-ui, -apple-system,
-        BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans,
-        sans-serif, "Apple Color Emoji", "Segoe UI Emoji", Segoe UI Symbol,
-        "Noto Color Emoji";
-    font-weight: initial;
-
-    background-color: var(--base);
-}
-/* Common style */
-h1 {
-    color: var(--rose);
-    padding-bottom: 2mm;
-    margin-bottom: 12mm;
-}
-h2 {
-    color: var(--rose);
-}
-h3 {
-    color: var(--rose);
-}
-h4 {
-    color: var(--rose);
-}
-h5 {
-    color: var(--rose);
-}
-h6 {
-    color: var(--rose);
-}
-a {
-    color: var(--iris);
-}
-p {
-    font-size: 20pt;
-    font-weight: 600;
-    color: var(--text);
-}
-code {
-    color: var(--text);
-    background-color: var(--highlight-muted);
-}
-text {
-    color: var(--text);
-}
-ul {
-    color: var(--subtle);
-}
-li {
-    color: var(--subtle);
-}
-img {
-    background-color: var(--highlight-low);
-}
-strong {
-    color: var(--text);
-    font-weight: inherit;
-    font-weight: 800;
-}
-mjx-container {
-    color: var(--text);
-}
-marp-pre {
-    background-color: var(--overlay);
-    border-color: var(--highlight-high);
-}
-
-/* Code blok */
-.hljs-comment {
-    color: var(--muted);
-}
-.hljs-attr {
-    color: var(--foam);
-}
-.hljs-punctuation {
-    color: var(--subtle);
-}
-.hljs-string {
-    color: var(--gold);
-}
-.hljs-title {
-    color: var(--foam);
-}
-.hljs-keyword {
-    color: var(--pine);
-}
-.hljs-variable {
-    color: var(--text);
-}
-.hljs-literal {
-    color: var(--rose);
-}
-.hljs-type {
-    color: var(--love);
-}
-.hljs-number {
-    color: var(--gold);
-}
-.hljs-built_in {
-    color: var(--love);
-}
-.hljs-params {
-    color: var(--iris);
-}
-.hljs-symbol {
-    color: var(--foam);
-}
-.hljs-meta {
-    color: var(--subtle);
-}
diff --git a/themes/rose-pine-dawn.css b/themes/rose-pine-dawn.css
new file mode 100644
index 0000000..226cd2a
--- /dev/null
+++ b/themes/rose-pine-dawn.css
@@ -0,0 +1,136 @@
+/* @theme rose-pine-dawn */
+/*
+Rosé Pine theme create by RAINBOWFLESH
+> www.rosepinetheme.com
+
+palette in :root
+*/
+
+@import 'default';
+@import 'schema';
+@import 'structure';
+
+:root {
+  --base: #faf4ed;
+  --surface: #fffaf3;
+  --overlay: #f2e9e1;
+  --muted: #9893a5;
+  --subtle: #797593;
+  --text: #575279;
+  --love: #b4637a;
+  --gold: #ea9d34;
+  --rose: #d7827e;
+  --pine: #286983;
+  --foam: #56949f;
+  --iris: #907aa9;
+  --highlight-low: #f4ede8;
+  --highlight-muted: #dfdad9;
+  --highlight-high: #cecacd;
+
+  font-family: Pier Sans, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue,
+    Arial, Noto Sans, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', Segoe UI Symbol, 'Noto Color Emoji';
+  font-weight: initial;
+
+  background-color: var(--base);
+}
+/* Common style */
+h1 {
+  color: var(--rose);
+  padding-bottom: 2mm;
+  margin-bottom: 12mm;
+}
+h2 {
+  color: var(--rose);
+}
+h3 {
+  color: var(--rose);
+}
+h4 {
+  color: var(--rose);
+}
+h5 {
+  color: var(--rose);
+}
+h6 {
+  color: var(--rose);
+}
+a {
+  color: var(--iris);
+}
+p {
+  font-size: 20pt;
+  font-weight: 600;
+  color: var(--text);
+}
+code {
+  color: var(--text);
+  background-color: var(--highlight-muted);
+}
+text {
+  color: var(--text);
+}
+ul {
+  color: var(--subtle);
+}
+li {
+  color: var(--subtle);
+}
+img {
+  background-color: var(--highlight-low);
+}
+strong {
+  color: var(--text);
+  font-weight: inherit;
+  font-weight: 800;
+}
+mjx-container {
+  color: var(--text);
+}
+marp-pre {
+  background-color: var(--overlay);
+  border-color: var(--highlight-high);
+}
+
+/* Code blok */
+.hljs-comment {
+  color: var(--muted);
+}
+.hljs-attr {
+  color: var(--foam);
+}
+.hljs-punctuation {
+  color: var(--subtle);
+}
+.hljs-string {
+  color: var(--gold);
+}
+.hljs-title {
+  color: var(--foam);
+}
+.hljs-keyword {
+  color: var(--pine);
+}
+.hljs-variable {
+  color: var(--text);
+}
+.hljs-literal {
+  color: var(--rose);
+}
+.hljs-type {
+  color: var(--love);
+}
+.hljs-number {
+  color: var(--gold);
+}
+.hljs-built_in {
+  color: var(--love);
+}
+.hljs-params {
+  color: var(--iris);
+}
+.hljs-symbol {
+  color: var(--foam);
+}
+.hljs-meta {
+  color: var(--subtle);
+}
diff --git a/themes/rose-pine-moon.css b/themes/rose-pine-moon.css
new file mode 100644
index 0000000..ab527ad
--- /dev/null
+++ b/themes/rose-pine-moon.css
@@ -0,0 +1,136 @@
+/* @theme rose-pine-moon */
+/*
+Rosé Pine theme create by RAINBOWFLESH
+> www.rosepinetheme.com
+
+palette in :root
+*/
+
+@import 'default';
+@import 'schema';
+@import 'structure';
+
+:root {
+  --base: #232136;
+  --surface: #2a273f;
+  --overlay: #393552;
+  --muted: #6e6a86;
+  --subtle: #908caa;
+  --text: #e0def4;
+  --love: #eb6f92;
+  --gold: #f6c177;
+  --rose: #ea9a97;
+  --pine: #3e8fb0;
+  --foam: #9ccfd8;
+  --iris: #c4a7e7;
+  --highlight-low: #2a283e;
+  --highlight-muted: #44415a;
+  --highlight-high: #56526e;
+
+  font-family: Pier Sans, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue,
+    Arial, Noto Sans, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', Segoe UI Symbol, 'Noto Color Emoji';
+  font-weight: initial;
+
+  background-color: var(--base);
+}
+/* Common style */
+h1 {
+  color: var(--rose);
+  padding-bottom: 2mm;
+  margin-bottom: 12mm;
+}
+h2 {
+  color: var(--rose);
+}
+h3 {
+  color: var(--rose);
+}
+h4 {
+  color: var(--rose);
+}
+h5 {
+  color: var(--rose);
+}
+h6 {
+  color: var(--rose);
+}
+a {
+  color: var(--iris);
+}
+p {
+  font-size: 20pt;
+  font-weight: 600;
+  color: var(--text);
+}
+code {
+  color: var(--text);
+  background-color: var(--highlight-muted);
+}
+text {
+  color: var(--text);
+}
+ul {
+  color: var(--subtle);
+}
+li {
+  color: var(--subtle);
+}
+img {
+  background-color: var(--highlight-low);
+}
+strong {
+  color: var(--text);
+  font-weight: inherit;
+  font-weight: 800;
+}
+mjx-container {
+  color: var(--text);
+}
+marp-pre {
+  background-color: var(--overlay);
+  border-color: var(--highlight-high);
+}
+
+/* Code blok */
+.hljs-comment {
+  color: var(--muted);
+}
+.hljs-attr {
+  color: var(--foam);
+}
+.hljs-punctuation {
+  color: var(--subtle);
+}
+.hljs-string {
+  color: var(--gold);
+}
+.hljs-title {
+  color: var(--foam);
+}
+.hljs-keyword {
+  color: var(--pine);
+}
+.hljs-variable {
+  color: var(--text);
+}
+.hljs-literal {
+  color: var(--rose);
+}
+.hljs-type {
+  color: var(--love);
+}
+.hljs-number {
+  color: var(--gold);
+}
+.hljs-built_in {
+  color: var(--love);
+}
+.hljs-params {
+  color: var(--iris);
+}
+.hljs-symbol {
+  color: var(--foam);
+}
+.hljs-meta {
+  color: var(--subtle);
+}
diff --git a/themes/rose-pine.css b/themes/rose-pine.css
new file mode 100644
index 0000000..503553c
--- /dev/null
+++ b/themes/rose-pine.css
@@ -0,0 +1,136 @@
+/* @theme rose-pine */
+/*
+Rosé Pine theme create by RAINBOWFLESH
+> www.rosepinetheme.com
+
+palette in :root
+*/
+
+@import 'default';
+@import 'schema';
+@import 'structure';
+
+:root {
+  --base: #191724;
+  --surface: #1f1d2e;
+  --overlay: #26233a;
+  --muted: #6e6a86;
+  --subtle: #908caa;
+  --text: #e0def4;
+  --love: #eb6f92;
+  --gold: #f6c177;
+  --rose: #ebbcba;
+  --pine: #31748f;
+  --foam: #9ccfd8;
+  --iris: #c4a7e7;
+  --highlight-low: #21202e;
+  --highlight-muted: #403d52;
+  --highlight-high: #524f67;
+
+  font-family: Pier Sans, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue,
+    Arial, Noto Sans, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', Segoe UI Symbol, 'Noto Color Emoji';
+  font-weight: initial;
+
+  background-color: var(--base);
+}
+/* Common style */
+h1 {
+  color: var(--rose);
+  padding-bottom: 2mm;
+  margin-bottom: 12mm;
+}
+h2 {
+  color: var(--rose);
+}
+h3 {
+  color: var(--rose);
+}
+h4 {
+  color: var(--rose);
+}
+h5 {
+  color: var(--rose);
+}
+h6 {
+  color: var(--rose);
+}
+a {
+  color: var(--iris);
+}
+p {
+  font-size: 20pt;
+  font-weight: 600;
+  color: var(--text);
+}
+code {
+  color: var(--text);
+  background-color: var(--highlight-muted);
+}
+text {
+  color: var(--text);
+}
+ul {
+  color: var(--subtle);
+}
+li {
+  color: var(--subtle);
+}
+img {
+  background-color: var(--highlight-low);
+}
+strong {
+  color: var(--text);
+  font-weight: inherit;
+  font-weight: 800;
+}
+mjx-container {
+  color: var(--text);
+}
+marp-pre {
+  background-color: var(--overlay);
+  border-color: var(--highlight-high);
+}
+
+/* Code blok */
+.hljs-comment {
+  color: var(--muted);
+}
+.hljs-attr {
+  color: var(--foam);
+}
+.hljs-punctuation {
+  color: var(--subtle);
+}
+.hljs-string {
+  color: var(--gold);
+}
+.hljs-title {
+  color: var(--foam);
+}
+.hljs-keyword {
+  color: var(--pine);
+}
+.hljs-variable {
+  color: var(--text);
+}
+.hljs-literal {
+  color: var(--rose);
+}
+.hljs-type {
+  color: var(--love);
+}
+.hljs-number {
+  color: var(--gold);
+}
+.hljs-built_in {
+  color: var(--love);
+}
+.hljs-params {
+  color: var(--iris);
+}
+.hljs-symbol {
+  color: var(--foam);
+}
+.hljs-meta {
+  color: var(--subtle);
+}