diff --git a/.cc/{{cookiecutter.demo_name}}/slides/{{cookiecutter.demo_name}}.md.jinja b/.cc/{{cookiecutter.demo_name}}/slides/{{cookiecutter.demo_name}}.md.jinja index 1e7feae..e8de639 100644 --- a/.cc/{{cookiecutter.demo_name}}/slides/{{cookiecutter.demo_name}}.md.jinja +++ b/.cc/{{cookiecutter.demo_name}}/slides/{{cookiecutter.demo_name}}.md.jinja @@ -1,6 +1,7 @@ --- marp: true theme: default +class: invert author: {{ cookiecutter.demo_author }} # size 16:9 1280px 720px size: 16:9 @@ -8,7 +9,7 @@ paginate: true math: mathjax style: | :root { - background: linear-gradient(to left, #abbaab, #ffffff); + background: linear-gradient(to bottom, #000000, #434343); } img[alt~="custom"] { float: right; @@ -28,7 +29,7 @@ style: | background-color: transparent; } pre { - background: linear-gradient(to top, #abbaab, #ffffff); + background: linear-gradient(to top, #000000, #434343); background-color: transparent; } --- @@ -46,7 +47,7 @@ _paginate: false {% now 'local', '%d/%m/%Y' %} ``` -![bg right fit](img/github-mark-white.webp) +![bg right](img/leonardo-yip-unsplash.jpg) --- @@ -54,7 +55,7 @@ _paginate: false -![bg right ](img/pexels-suzy-hazelwood-1226398.jpg) +![bg right opacity:75%](img/pexels-suzy-hazelwood-1226398.jpg) - item1 - item2 @@ -64,7 +65,7 @@ _paginate: false -![bg left opacity:80%](img/pexels-ann-h-7186206.jpg) +![bg left opacity:75%](img/pexels-ann-h-7186206.jpg) # Q&A diff --git a/.vscode/settings.json b/.vscode/settings.json index a29412d..1dd43f1 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -9,5 +9,23 @@ "**.txt.jinja": "jinja", "**Makefile.jinja": "jinja", "**.cfg.jinja": "jinja" - } + }, + "markdown.marp.themes": [ + "./slides/themes/dracula.css" + ], + "markdownlint.config": { + "default": true, + // allow multiple H1s for Marp + "MD025": false, + "MD033": { + "allowed_elements": [ + "div", + "span", + "style", + "br", + "sup" + ] + } + }, + "markdown.marp.enableHtml": true } \ No newline at end of file diff --git a/slides/avd-cvaas-evpn-aa.md b/slides/avd-cvaas-evpn-aa.md index 701b3d5..1dc7dec 100644 --- a/slides/avd-cvaas-evpn-aa.md +++ b/slides/avd-cvaas-evpn-aa.md @@ -1,6 +1,7 @@ --- marp: true theme: default +class: invert author: Petr Ankudinov # size 16:9 1280px 720px size: 16:9 @@ -8,7 +9,7 @@ paginate: true math: mathjax style: | :root { - background: linear-gradient(to left, #abbaab, #ffffff); + background: linear-gradient(to bottom, #000000, #434343); } img[alt~="custom"] { float: right; @@ -28,7 +29,7 @@ style: | background-color: transparent; } pre { - background: linear-gradient(to top, #abbaab, #ffffff); + background: linear-gradient(to top, #000000, #434343); background-color: transparent; } --- @@ -46,7 +47,7 @@ Petr Ankudinov 31/03/2024 ``` -![bg right fit](img/github-mark-white.webp) +![bg right](img/leonardo-yip-unsplash.jpg) --- @@ -54,7 +55,7 @@ Petr Ankudinov -![bg right ](img/pexels-suzy-hazelwood-1226398.jpg) +![bg right opacity:75%](img/pexels-suzy-hazelwood-1226398.jpg) - item1 - item2 @@ -64,7 +65,7 @@ Petr Ankudinov -![bg left opacity:80%](img/pexels-ann-h-7186206.jpg) +![bg left opacity:75%](img/pexels-ann-h-7186206.jpg) # Q&A diff --git a/slides/img/leonardo-yip-unsplash.jpg b/slides/img/leonardo-yip-unsplash.jpg new file mode 100644 index 0000000..f361099 Binary files /dev/null and b/slides/img/leonardo-yip-unsplash.jpg differ diff --git a/slides/themes/dracula.css b/slides/themes/dracula.css new file mode 100644 index 0000000..9f1736e --- /dev/null +++ b/slides/themes/dracula.css @@ -0,0 +1,330 @@ +@charset "UTF-8"; +/*! + * Marp Dracula theme. + * @theme dracula + * @author Daniel Nicolas Gisolfi + * + * @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: #6272a4; + --dracula-cyan: #8be9fd; + --dracula-green: #50fa7b; + --dracula-orange: #ffb86c; + --dracula-pink: #ff79c6; + --dracula-purple:#bd93f9; + --dracula-red: #ff5555; + --dracula-yellow: #f1fa8c; +} + +.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 Pink */ +.hljs-keyword { + color: var(--dracula-pink); +} + +/* 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-pink); +} +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: 35px; + 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%; +} \ No newline at end of file