diff --git a/README.md b/README.md index 570b6df..c24b5fc 100644 --- a/README.md +++ b/README.md @@ -20,6 +20,40 @@ This theme is maintained by the following person(s) and a bunch of [awesome cont - [GitHub](https://github.com/dracula/dracula-theme/discussions) - Best for asking questions and discussing issues. - [Discord](https://draculatheme.com/discord-invite) - Best for hanging out with the community. +## Creating your theme + +To create your own theme, just clone this repo, install a basic web server to test it easily and create a `.vscode/settings.json` in your project containing the link to your `css` file. + +For example: + +```bash +git clone https://github.com/dracula/marp +cd marp +cp -r dracula mytheme +mv mytheme/dracula.css mytheme/mytheme.css +sed -i "s/theme dracula/theme mytheme/" mytheme/mytheme.css +# modify what you need in mytheme/mytheme.css +python3 -m http.server 9000 --bind 127.0.0.1 & + +cd /path/to/your/slides +cat < .vscode/settings.json +{ + "markdown.marp.themes": [ + "http://127.0.0.1:9000/mytheme/mytheme.css", + ] +} +EOF +code . +``` + +Update your theme in your slide marp header with: + +```yaml +theme: mytheme +``` + +You can visualize your modifications in vscode on your markdown for Marp with `ctrl k+v`. If you need to refresh, you may need to restart vscode. + ## License [MIT License](./LICENSE) diff --git a/black-and-white/black-and-white.css b/black-and-white/black-and-white.css new file mode 100644 index 0000000..436d579 --- /dev/null +++ b/black-and-white/black-and-white.css @@ -0,0 +1,338 @@ +@charset "UTF-8"; +/*! + * From Marp Dracula theme. + * original Author: Daniel Nicolas Gisolfi + * @theme black-and-white + * @author Rémy Dernat + * + * @auto-scaling true + * @size 4:3 960px 720px + * @size 16:9 1280px 720px + */ + +@import url("https://fonts.googleapis.com/css?family=Lato:400,900|IBM+Plex+Sans:400,700"); + +:root { + --dracula-background: #000000; + --dracula-current-line: #44475a; + --dracula-foreground: #ffffff; + --dracula-comment: #adb4ca; + --dracula-content: #f8f8f8; + --dracula-cyan: #8be9fd; + --dracula-green: #50fa7b; + --dracula-orange: #ffb86c; + --dracula-pink: #ff79c6; + --dracula-purple:#bd93f9; + --dracula-red: #ff5555; + --dracula-yellow: #f1fa8c; + --dracula-white: #ffffff; +} + +.hljs { + display: block; + overflow-x: auto; + padding: 0.5em; + background: var(--dracula-background); +} + +/* Dracula Foreground */ +.hljs, +.hljs-subst, +.hljs-typing, +.hljs-variable, +.hljs-template-variable { + color: var(--dracula-foreground); +} + +/* Dracula Comment */ +.hljs-comment, +.hljs-quote, +.hljs-deletion { + color: var(--dracula-comment); +} + +/* Dracula Cyan */ +.hljs-meta .hljs-doctag, +.hljs-built_in, +.hljs-selector-tag, +.hljs-section, +.hljs-link, +.hljs-class { + color: var(--dracula-content); +} + + +/* Dracula Green */ +.hljs-title { + color: var(--dracula-green); +} + +/* Dracula Orange */ +.hljs-params { + color: var(--dracula-orange); +} + +/* Dracula White */ +.hljs-keyword { + color: var(--dracula-white); +} + +/* Dracula Purple */ +.hljs-literal, +.hljs-number { + color: var(--dracula-purple); +} + +/* Dracula Red */ +.hljs-regexp { + color: var(--dracula-red); +} + +/* Dracula Yellow */ +.hljs-string, +.hljs-name, +.hljs-type, +.hljs-attr, +.hljs-symbol, +.hljs-bullet, +.hljs-addition, +.hljs-template-tag { + color: var(--dracula-yellow); +} + +.hljs-keyword, +.hljs-selector-tag, +.hljs-literal, +.hljs-title, +.hljs-section, +.hljs-doctag, +.hljs-type, +.hljs-name, +.hljs-strong { + font-weight: bold; +} + +.hljs-params, +.hljs-emphasis { + font-style: italic; +} + +svg[data-marp-fitting=svg] { + max-height: 580px; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + margin: 0.5em 0 0 0; + color: var(--dracula-white); +} +h1 strong, +h2 strong, +h3 strong, +h4 strong, +h5 strong, +h6 strong { + font-weight: inherit; +} + +h1 { + font-size: 1.8em; +} + +h2 { + font-size: 1.5em; +} + +h3 { + font-size: 1.3em; +} + +h4 { + font-size: 1.1em; +} + +h5 { + font-size: 1em; +} + +h6 { + font-size: 0.9em; +} + +p, +blockquote { + margin: 1em 0 0 0; +} + +ul > li, +ol > li { + margin: 0.3em 0 0 0; + color: var(--dracula-content); +} +ul > li > p, +ol > li > p { + margin: 0.6em 0 0 0; +} + +code { + display: inline-block; + font-family: "IBM Plex Mono", monospace; + font-size: 0.8em; + letter-spacing: 0; + margin: -0.1em 0.15em; + padding: 0.1em 0.2em; + vertical-align: baseline; + color: var(--dracula-green); +} + +pre { + display: block; + margin: 1em 0 0 0; + min-height: 1em; + overflow: visible; +} +pre code { + box-sizing: border-box; + margin: 0; + min-width: 100%; + padding: 0.5em; + font-size: 0.7em; +} +pre code svg[data-marp-fitting=svg] { + max-height: calc(580px - 1em); +} + +blockquote { + margin: 1em 0 0 0; + padding: 0 1em; + position: relative; + color: var(--dracula-orange); +} +blockquote::after, blockquote::before { + content: "“"; + display: block; + font-family: "Times New Roman", serif; + font-weight: bold; + position: absolute; + color: var(--dracula-green); +} +blockquote::before { + top: 0; + left: 0; +} +blockquote::after { + right: 0; + bottom: 0; + transform: rotate(180deg); +} +blockquote > *:first-child { + margin-top: 0; +} + +mark { + background: transparent; +} + +table { + border-spacing: 0; + border-collapse: collapse; + margin: 1em 0 0 0; +} +table th, +table td { + padding: 0.2em 0.4em; + border-width: 1px; + border-style: solid; +} + +section { + font-size: 33px; + font-family: "IBM Plex Sans"; + line-height: 1.35; + letter-spacing: 1.25px; + padding: 70px; + color: var(--dracula-foreground); + background-color: var(--dracula-background); +} +section > *:first-child, +section > header:first-child + * { + margin-top: 0; +} +section a, +section mark { + color: var(--dracula-red); +} +section code { + background: var(--dracula-current-line); + color: var(--dracula-current-green); +} +section h1 strong, +section h2 strong, +section h3 strong, +section h4 strong, +section h5 strong, +section h6 strong { + color: var(--dracula-current-line); +} +section pre > code { + background: var(--dracula-current-line); +} +section header, +section footer, +section section::after, +section blockquote::before, +section blockquote::after { + color: var(--dracula-comment); +} +section table th, +section table td { + border-color: var(--dracula-current-line); +} +section table thead th { + background: var(--dracula-current-line); + color: var(--dracula-yellow); +} +section table tbody > tr:nth-child(even) td, +section table tbody > tr:nth-child(even) th { + background: var(--dracula-current-line); +} + +header, +footer, +section::after { + box-sizing: border-box; + font-size: 66%; + height: 70px; + line-height: 50px; + overflow: hidden; + padding: 10px 25px; + position: absolute; + color: var(--dracula-comment); +} + +header { + left: 0; + right: 0; + top: 0; +} + +footer { + left: 0; + right: 0; + bottom: 0; +} + +section::after { + right: 0; + bottom: 0; + font-size: 80%; +} + +/* .hljs-monospace-progress-bar { + font-family: monospace; + font-size:20px; +} */ diff --git a/black-and-white/img/igam-ogam-unsplash.jpg b/black-and-white/img/igam-ogam-unsplash.jpg new file mode 100644 index 0000000..c65e94a Binary files /dev/null and b/black-and-white/img/igam-ogam-unsplash.jpg differ diff --git a/black-and-white/img/leonardo-yip-unsplash.jpg b/black-and-white/img/leonardo-yip-unsplash.jpg new file mode 100644 index 0000000..f361099 Binary files /dev/null and b/black-and-white/img/leonardo-yip-unsplash.jpg differ diff --git a/black-and-white/slides.md b/black-and-white/slides.md new file mode 100644 index 0000000..7684336 --- /dev/null +++ b/black-and-white/slides.md @@ -0,0 +1,97 @@ +--- +title: Dracula +version: 1.0.0 +theme: black-and-white +footer: Gisolfi +header: Dracula +paginate: true +marp: true +size: 4K +--- + +# Dracula + +A Dark theme for [Marp](https://marp.app) + +Explore the many features of Marp in style! + +*Daniel Nicolas Gisolfi* + + + +![bg right](./img/leonardo-yip-unsplash.jpg) + +--- + +# Screen portrayals + +| Year | Title | Actor | +| ----------- | ----------- | ----------- | +| 1970 | Jonathan | Paul Albert Krumm | +| 1995 | Monster Mash | Anthony Crivello| +| 2004 | Blade: Trinity | Dominic Purcell| +| 2008 | Supernatural | Todd Stashwick| +| 2020 | Dracula | Claes Bang| + + + +--- + +# Words from the Source + +> There are darknesses in life and there are lights, and you are one of the lights, the light of all lights. +> +> -- Bram Stoker, Dracula + + + +--- + +# Bats - About + +- Small + +- Fast + +- Mammals + +- Scientific name: Chiroptera + +![bg right](./img/igam-ogam-unsplash.jpg) + + +--- + +# Bats - Implementation + +```python +class Bat: + def __init__(name:str, age:int): + self.__name = name + self.__age = age + @property + def name(self): + return self.__name + @property + def age(self): + return self.__age + @property + def speed(self): + return 10 - self.age +``` + + + diff --git a/grey-cyan-white/grey-cyan-white.css b/grey-cyan-white/grey-cyan-white.css new file mode 100644 index 0000000..9c0b2d6 --- /dev/null +++ b/grey-cyan-white/grey-cyan-white.css @@ -0,0 +1,337 @@ +@charset "UTF-8"; +/*! + * From Marp Dracula theme. + * original Author: Daniel Nicolas Gisolfi + * @theme grey-cyan-white + * @author Rémy Dernat + * + * @auto-scaling true + * @size 4:3 960px 720px + * @size 16:9 1280px 720px + */ + +@import url("https://fonts.googleapis.com/css?family=Lato:400,900|IBM+Plex+Sans:400,700"); + +:root { + --dracula-background: #282a36; + --dracula-current-line: #44475a; + --dracula-foreground: #f8f8f2; + --dracula-comment: #adb4ca; + --dracula-cyan: #8be9fd; + --dracula-green: #50fa7b; + --dracula-orange: #ffb86c; + --dracula-pink: #ff79c6; + --dracula-purple:#bd93f9; + --dracula-red: #ff5555; + --dracula-yellow: #f1fa8c; + --dracula-white: #ffffff; +} + +.hljs { + display: block; + overflow-x: auto; + padding: 0.5em; + background: var(--dracula-background); +} + +/* Dracula Foreground */ +.hljs, +.hljs-subst, +.hljs-typing, +.hljs-variable, +.hljs-template-variable { + color: var(--dracula-foreground); +} + +/* Dracula Comment */ +.hljs-comment, +.hljs-quote, +.hljs-deletion { + color: var(--dracula-comment); +} + +/* Dracula Cyan */ +.hljs-meta .hljs-doctag, +.hljs-built_in, +.hljs-selector-tag, +.hljs-section, +.hljs-link, +.hljs-class { + color: var(--dracula-cyan); +} + + +/* Dracula Green */ +.hljs-title { + color: var(--dracula-green); +} + +/* Dracula Orange */ +.hljs-params { + color: var(--dracula-orange); +} + +/* Dracula White */ +.hljs-keyword { + color: var(--dracula-white); +} + +/* Dracula Purple */ +.hljs-literal, +.hljs-number { + color: var(--dracula-purple); +} + +/* Dracula Red */ +.hljs-regexp { + color: var(--dracula-red); +} + +/* Dracula Yellow */ +.hljs-string, +.hljs-name, +.hljs-type, +.hljs-attr, +.hljs-symbol, +.hljs-bullet, +.hljs-addition, +.hljs-template-tag { + color: var(--dracula-yellow); +} + +.hljs-keyword, +.hljs-selector-tag, +.hljs-literal, +.hljs-title, +.hljs-section, +.hljs-doctag, +.hljs-type, +.hljs-name, +.hljs-strong { + font-weight: bold; +} + +.hljs-params, +.hljs-emphasis { + font-style: italic; +} + +svg[data-marp-fitting=svg] { + max-height: 580px; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + margin: 0.5em 0 0 0; + color: var(--dracula-white); +} +h1 strong, +h2 strong, +h3 strong, +h4 strong, +h5 strong, +h6 strong { + font-weight: inherit; +} + +h1 { + font-size: 1.8em; +} + +h2 { + font-size: 1.5em; +} + +h3 { + font-size: 1.3em; +} + +h4 { + font-size: 1.1em; +} + +h5 { + font-size: 1em; +} + +h6 { + font-size: 0.9em; +} + +p, +blockquote { + margin: 1em 0 0 0; +} + +ul > li, +ol > li { + margin: 0.3em 0 0 0; + color: var(--dracula-cyan); +} +ul > li > p, +ol > li > p { + margin: 0.6em 0 0 0; +} + +code { + display: inline-block; + font-family: "IBM Plex Mono", monospace; + font-size: 0.8em; + letter-spacing: 0; + margin: -0.1em 0.15em; + padding: 0.1em 0.2em; + vertical-align: baseline; + color: var(--dracula-green); +} + +pre { + display: block; + margin: 1em 0 0 0; + min-height: 1em; + overflow: visible; +} +pre code { + box-sizing: border-box; + margin: 0; + min-width: 100%; + padding: 0.5em; + font-size: 0.7em; +} +pre code svg[data-marp-fitting=svg] { + max-height: calc(580px - 1em); +} + +blockquote { + margin: 1em 0 0 0; + padding: 0 1em; + position: relative; + color: var(--dracula-orange); +} +blockquote::after, blockquote::before { + content: "“"; + display: block; + font-family: "Times New Roman", serif; + font-weight: bold; + position: absolute; + color: var(--dracula-green); +} +blockquote::before { + top: 0; + left: 0; +} +blockquote::after { + right: 0; + bottom: 0; + transform: rotate(180deg); +} +blockquote > *:first-child { + margin-top: 0; +} + +mark { + background: transparent; +} + +table { + border-spacing: 0; + border-collapse: collapse; + margin: 1em 0 0 0; +} +table th, +table td { + padding: 0.2em 0.4em; + border-width: 1px; + border-style: solid; +} + +section { + font-size: 33px; + font-family: "IBM Plex Sans"; + line-height: 1.35; + letter-spacing: 1.25px; + padding: 70px; + color: var(--dracula-foreground); + background-color: var(--dracula-background); +} +section > *:first-child, +section > header:first-child + * { + margin-top: 0; +} +section a, +section mark { + color: var(--dracula-red); +} +section code { + background: var(--dracula-current-line); + color: var(--dracula-current-green); +} +section h1 strong, +section h2 strong, +section h3 strong, +section h4 strong, +section h5 strong, +section h6 strong { + color: var(--dracula-current-line); +} +section pre > code { + background: var(--dracula-current-line); +} +section header, +section footer, +section section::after, +section blockquote::before, +section blockquote::after { + color: var(--dracula-comment); +} +section table th, +section table td { + border-color: var(--dracula-current-line); +} +section table thead th { + background: var(--dracula-current-line); + color: var(--dracula-yellow); +} +section table tbody > tr:nth-child(even) td, +section table tbody > tr:nth-child(even) th { + background: var(--dracula-current-line); +} + +header, +footer, +section::after { + box-sizing: border-box; + font-size: 66%; + height: 70px; + line-height: 50px; + overflow: hidden; + padding: 10px 25px; + position: absolute; + color: var(--dracula-comment); +} + +header { + left: 0; + right: 0; + top: 0; +} + +footer { + left: 0; + right: 0; + bottom: 0; +} + +section::after { + right: 0; + bottom: 0; + font-size: 80%; +} + +/* .hljs-monospace-progress-bar { + font-family: monospace; + font-size:20px; +} */ diff --git a/grey-cyan-white/img/igam-ogam-unsplash.jpg b/grey-cyan-white/img/igam-ogam-unsplash.jpg new file mode 100644 index 0000000..c65e94a Binary files /dev/null and b/grey-cyan-white/img/igam-ogam-unsplash.jpg differ diff --git a/grey-cyan-white/img/leonardo-yip-unsplash.jpg b/grey-cyan-white/img/leonardo-yip-unsplash.jpg new file mode 100644 index 0000000..f361099 Binary files /dev/null and b/grey-cyan-white/img/leonardo-yip-unsplash.jpg differ diff --git a/grey-cyan-white/slides.md b/grey-cyan-white/slides.md new file mode 100644 index 0000000..c3fa046 --- /dev/null +++ b/grey-cyan-white/slides.md @@ -0,0 +1,97 @@ +--- +title: Dracula +version: 1.0.0 +theme: grey-cyan-white +footer: Gisolfi +header: Dracula +paginate: true +marp: true +size: 4K +--- + +# Dracula + +A Dark theme for [Marp](https://marp.app) + +Explore the many features of Marp in style! + +*Daniel Nicolas Gisolfi* + + + +![bg right](./img/leonardo-yip-unsplash.jpg) + +--- + +# Screen portrayals + +| Year | Title | Actor | +| ----------- | ----------- | ----------- | +| 1970 | Jonathan | Paul Albert Krumm | +| 1995 | Monster Mash | Anthony Crivello| +| 2004 | Blade: Trinity | Dominic Purcell| +| 2008 | Supernatural | Todd Stashwick| +| 2020 | Dracula | Claes Bang| + + + +--- + +# Words from the Source + +> There are darknesses in life and there are lights, and you are one of the lights, the light of all lights. +> +> -- Bram Stoker, Dracula + + + +--- + +# Bats - About + +- Small + +- Fast + +- Mammals + +- Scientific name: Chiroptera + +![bg right](./img/igam-ogam-unsplash.jpg) + + +--- + +# Bats - Implementation + +```python +class Bat: + def __init__(name:str, age:int): + self.__name = name + self.__age = age + @property + def name(self): + return self.__name + @property + def age(self): + return self.__age + @property + def speed(self): + return 10 - self.age +``` + + +