From f5fc83b3cf75568c53c5727af1e0d3807c1ab5b0 Mon Sep 17 00:00:00 2001 From: pa Date: Wed, 1 May 2024 19:07:19 +0000 Subject: [PATCH] add marp themes --- .vscode/settings.json | 5 +- slides/cvaas-cvaas-and-avd-demo--evpn-mlag.md | 10 +- slides/themes/beam.css | 141 +++++++++ slides/themes/einstein.css | 222 ++++++++++++++ slides/themes/jobs.css | 275 ++++++++++++++++++ 5 files changed, 644 insertions(+), 9 deletions(-) create mode 100644 slides/themes/beam.css create mode 100644 slides/themes/einstein.css create mode 100644 slides/themes/jobs.css diff --git a/.vscode/settings.json b/.vscode/settings.json index 1dd43f1..e257fde 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -11,7 +11,10 @@ "**.cfg.jinja": "jinja" }, "markdown.marp.themes": [ - "./slides/themes/dracula.css" + "./slides/themes/dracula.css", + "./slides/themes/beam.css", + "./slides/themes/einstein.css", + "./slides/themes/jobs.css" ], "markdownlint.config": { "default": true, diff --git a/slides/cvaas-cvaas-and-avd-demo--evpn-mlag.md b/slides/cvaas-cvaas-and-avd-demo--evpn-mlag.md index 9c7ea29..485822d 100644 --- a/slides/cvaas-cvaas-and-avd-demo--evpn-mlag.md +++ b/slides/cvaas-cvaas-and-avd-demo--evpn-mlag.md @@ -1,17 +1,11 @@ --- marp: true theme: default -# class: invert author: Petr Ankudinov # size 16:9 1280px 720px size: 16:9 paginate: true -math: mathjax -# backgroundImage: "linear-gradient(to bottom, #abbaab, #ffffff)" -# #ece9e6, #ffffff -# #8e9eab, #eef2f3 -# #e6dada, #274046 -# #abbaab, #ffffff + style: | :root { background: linear-gradient(to left, #abbaab, #ffffff); @@ -49,7 +43,7 @@ _paginate: false ```text Provisioning Workflow Demo Petr Ankudinov - Sep 2023 + May 2024 ``` ![bg right fit](img/avd-logo.webp) diff --git a/slides/themes/beam.css b/slides/themes/beam.css new file mode 100644 index 0000000..82d86b8 --- /dev/null +++ b/slides/themes/beam.css @@ -0,0 +1,141 @@ +/* @theme beam */ +/* Author: rnd195 https://github.com/rnd195/ */ +/* beam license - GNU GPLv3 https://github.com/rnd195/my-marp-themes/blob/live/LICENSE_beam */ +/* License of beamer which inspired this theme - GNU GPLv2 https://github.com/rnd195/my-marp-themes/blob/live/LICENSE_GPLv2 */ + +@import "default"; + +:root { + font-family: "CMU Sans Serif", "Segoe UI", Helvetica, sans-serif; + --main: #1f38c5; + --secondary: #141414; +} + +section { + background-color: #ffffff; + /* bottom two-coloured bar in base64 svg */ + background-image: + url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMjUwbW0iIGhlaWdodD0iNS4zNTQ2bW0iIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDI1MCA1LjM1NDYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMC4zNDcgLTkxLjAyOCkiPgo8cmVjdCB4PSIyMC4zNDciIHk9IjkxLjAyOCIgd2lkdGg9IjEyNSIgaGVpZ2h0PSI1LjM1NDYiIGZpbGw9IiMxNDE0MTQiIGZpbGwtcnVsZT0iZXZlbm9kZCIgc3Ryb2tlLXdpZHRoPSIwIi8+CjxwYXRoIGQ9Im0xNDUuMzUgOTMuNzA1di0yLjY3NzNoMTI1djUuMzU0NmgtMTI1eiIgZmlsbD0iIzFmMzhjNSIgc3Ryb2tlLXdpZHRoPSIwIi8+CjwvZz4KPC9zdmc+); + background-repeat: no-repeat; + background-position: center bottom; + background-size: 150% 1em; + padding: 2em; +} + +header { + font-size: 0.6em; + /* this text-align is important */ + text-align: right; + /* I don't like this absolute positioning, but it works */ + position: absolute; + top: 96.2%; + width: 100%; + right: 0; + left: -51%; + color: white; +} + +footer { + font-size: 0.6em; + position: absolute; + /* this text-align is important */ + text-align: left; + top: 96.2%; + width: 100%; + right: 0; + left: 50.8%; + color: white; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + color: #141414; +} + +/* only apply to the first occurrence of h1 */ +h1:nth-of-type(1) { + font-family: "CMU Bright", "Segoe UI Semibold"; + color: #ffffff; + background-color: var(--main); + border-top: 0.3em solid var(--main); + padding: 0; + position: absolute; + top: 0; + right: 0; + width: 100%; + height: 1.5em; + text-indent: 0.5em; +} + +code { + background-color: rgba(100, 100, 100, 0.2); +} + +mark { + background-color: #f5db7e; +} + +/* formatting page numbers */ +section::after { + font-size: 0.6em; + /* https://github.com/yhatt/marp/issues/263 */ + content: attr(data-marpit-pagination) " / " attr(data-marpit-pagination-total); + position: absolute; + text-align: right; + top: 96.2%; + width: 100%; + right: 0; + left: -0.5em; + color: white; +} + +/* inline math was too large wrt text */ +.katex { + font: normal 1.05em KaTeX_Main, "Times New Roman", serif +} + +/* the "center" keyword centers the image - may break, careful */ +/* https://github.com/marp-team/marpit/issues/141#issuecomment-473204518 */ +img[alt~="center"] { + display: block; + margin: 0 auto; +} + +/* || SECTION CLASS: title */ +/* title page - only to be used as for a single slide */ +/* */ +section.title>h1 { + font-family: "CMU Bright", "Segoe UI Semibold"; + color: #ffffff; + background-color: var(--main); + border-radius: 25px; + text-align: center; + top: 25%; + left: 0; + right: 0; + margin-left: auto; + margin-right: auto; + width: 80%; + padding-bottom: 0.2em; + height: auto; +} + +/* remake this to be positioned with respect to h1 */ +section.title>p { + position: relative; + text-align: center; + top: 35px; +} + +/* || SECTION CLASS: tinytext */ +/* new class that makes p, ul, and blockquote text smaller */ +/* might be useful for the References slide, use */ +section.tinytext>p, +section.tinytext>ul, +section.tinytext>blockquote { + font-size: 0.65em; +} \ No newline at end of file diff --git a/slides/themes/einstein.css b/slides/themes/einstein.css new file mode 100644 index 0000000..2138bf9 --- /dev/null +++ b/slides/themes/einstein.css @@ -0,0 +1,222 @@ +/* @theme einstein */ + +/* + ============================================ + Created by Paulo Cunha + version: 1.0 + last update: 01.jul.2023 + ============================================ +*/ + +/* Importing COLOR SCHEMA */ + +@import "default"; +@import "schema"; +@import "structure"; + +/* Importing Font */ +/* Font Credit: htts://https://www.cdnfonts.com/ */ +@import url('https://fonts.cdnfonts.com/css/fira-sans-condensed?styles=19730'); +@import url('https://fonts.cdnfonts.com/css/fira-sans'); + +@font-face { + font-family: HeaderFont; + src: url("https://fonts.cdnfonts.com/css/fira-sans"); +} + +@font-face { + font-family: BodyFont; + src: url("https://fonts.cdnfonts.com/css/fira-sans?styles=20119"); +} + + + +/* -------------------- ROOT -------------------------------*/ + +:root { + + font-family: 'Fira Sans', sans-serif; + font-weight: initial; + + --default-strong-font-color: rgb(216, 183, 77); + + --cool-list-color: rgb(107, 130, 173); + + --bold-color: rgb(125, 153, 211); + + --italic-background-color: rgb(219, 208, 54); + + /* --default-background-color: rgb(39, 42, 53); */ + --default-background-color: rgba(131, 133, 139, 0.24); + --default-background-color: rgb(62, 63, 70); + --default-background-color: rgb(62, 63, 66); + + --default-font-color: rgb(237, 242, 245); + + --default-header-font-color: rgb(136, 141, 141); + --default-header-font-color: rgb(130, 162, 179); + --default-header-font-color: #6183A8; + --default-header-font-color: rgb(139, 177, 197); + + --default-header-bold-font-color: rgb(250, 118, 70); + + --default-border-color: 1px solid rgb(253, 101, 0); + + background-color: var(--default-background-color); + color: var(--default-font-color); +} + +:root p { + font-size: 32px; + font-family: "BodyFont", sans-serif; + letter-spacing: -0.5px; + + color: var(--default-font-color); +} + +:root ul, +ol { + font-size: 27px; + font-family: BodyFont, sans-serif; + letter-spacing: -0.3px; + + color: var(--default-font-color); +} + +:root h1, +h2, +h3, +h4, +h5, +h6 { + /* font-family: BodyFont, serif; */ + color: var(--default-header-font-color); +} + +:root h1 { + border-bottom: var(--default-border-color); +} + +/* -------------------- PRE -------------------------------*/ + +:root pre { + color: rgb(33, 34, 34); + font-weight:800 ; + background-color: #c5c8cc; +} + +/* -------------------- STRONG -----------------------------*/ + +:root h1 strong { + color: var(--default-header-bold-font-color); +} + +section strong { + color: var(--default-strong-font-color); + + padding-left: 2px; + padding-right: 2px; + font-weight: 600; +} +/* -------------------- TABLE -----------------------------*/ + +section table { + color: #3b4252; +} + +section table th { + background-color: #4d768a; +} + +/* -------------------- CITE -----------------------------*/ + +section.cite { + background-color: #d8dee9; + --strong-color: #c53442; + --strong-color: #4d75a5; +} + +/* -------------------- TITLEPAGE --------------------------*/ + +section.titlepage { + color: var(--default-font-color); + background-color: var(--default-background-color); + --subtitle-font-weight : 300; + +} + +section.titlepage .title { + border-bottom: var(--default-border-color); + color: var(--default-font-color); +} + +section.titlepage h1 { + border-bottom: var(--default-border-color); + color: var(--default-font-color); +} + +section.titlepage .author, +section.titlepage .date, +section.titlepage .organization { + text-align: left; + color: var(--default-font-color) !important; +} + +section.titlepage h1, +h2, +h3, +h4, +h5 { + color: var(--default-font-color) !important; +} + +/* -------------------- TRANSITION -------------------------------*/ + +section.transition em { + /* color: rgb(10, 100, 235); */ + background-color: rgba(255, 5, 5, 0.295); +} + +section.transition strong { + color: rgb(255, 5, 5); +} + +section.transition { + background-color: rgb(255, 145, 0); + background-color: orange; +} + +/* -------------------- TRANSITION2 -------------------------------*/ + +section.transition2 strong { + color: rgb(10, 100, 235); + color: rgb(161, 240, 3); +} + +/* -------------------- BIBLIO -------------------------------*/ + +section.biblio p { + font-family: "FrutigerNextW04-Regular", sans-serif; +} + +section.biblio { + /* font-family: BodyFont; */ + + --text-color: rgb(253, 252, 252); + --biblio-background-color: rgb(22, 28, 43); + --border-color: darkorange; + --bold-color: orange; +} + +/* -------------------- COLUMNS -------------------------------*/ + +section.columns ul, +ol, +li { + color: var(--default-font-color); + font-family: "Fira Sans", sans-serif !important; + font-weight: 100; +} + +section.columns li { +} \ No newline at end of file diff --git a/slides/themes/jobs.css b/slides/themes/jobs.css new file mode 100644 index 0000000..0a3dd13 --- /dev/null +++ b/slides/themes/jobs.css @@ -0,0 +1,275 @@ +/* @theme jobs */ + +/* + ============================================ + Created by Paulo Cunha + version: 1.0 + last update: 08.fev.2023 + ============================================ +*/ + +/* Importing COLOR SCHEMA */ + +@import "default"; +@import "schema"; +@import "structure"; + + +/* --------------------- FONTS ------------------------- */ + +/* Ultra Light */ +@font-face { + font-family: "San Francisco"; + font-weight: 100; + src: url("https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-ultralight-webfont.woff2"); +} + +/* Thin */ +@font-face { + font-family: "San Francisco 200"; + font-weight: 200; + src: url("https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-thin-webfont.woff2"); +} + +/* Regular */ +@font-face { + font-family: "San Francisco 400"; + font-weight: 400; + src: url("https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-regular-webfont.woff2"); +} + +/* Bold */ +@font-face { + font-family: "San Francisco bold"; + font-weight: bold; + src: url("https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-bold-webfont.woff2"); +} + +/* Bold */ +@font-face { + font-family: "Minion Pro"; + /* font-weight: bold; */ + src: url("https://fonts.cdnfonts.com/css/minion-pro"); +} + + + +/***************** COMMON STRUCTURE **********************/ + +:root { + /* font-family: Cochin, Georgia; */ + /* font-family: 'Times New Roman', Times, serif; */ + /* font-family: "Fira Sans Light"; */ + + font-family: 'Tahoma'; + font-family: 'Open Sans'; + font-family: 'Segoe UI'; + + font-weight: initial; + + /* -- Bodytext FONT color */ + color: #494545; + + /* -- Slides BACKGROUND color */ + background-color : white; + + /* -- BOLD font color */ + --bold-color : rgb(105, 120, 151); + --bold-color : rgb(71, 111, 184); + --bold-color : rgb(71, 107, 184); + + --italic-color : rgb(96, 89, 89); + + --italic-background-color : rgba(142, 145, 146, 0.172); + + /* --background-color : #fdf6e3; */ + --list-item-color : rgb(255, 212, 95); + + --after-color : rgb(201, 198, 198); + + --table-font-color : black; + + --table-header-color : rgb(128, 137, 146); + + --border-color : #014385; + + --main-color : rgb(207, 77, 17); + + --darker-color : #246; + + --lighter-color : #080a0a; + + --extra-back-color : rgb(71, 69, 69); + + --letter-spacing : 0.125px; + + --cool-list-color : rgb(135, 157, 179); + + --author-align : right; +} + +/* ------------------- ROOT -----------------------------*/ + +:root h1 { + + font-family: 'San Francisco', sans-serif; + + /* --border-color : rgb(209, 161, 29); */ + border-bottom: 1px solid rgb(29, 107, 209) !important; + + color: #2b2c2e; + + font-weight: 600; + + padding-top: 10pt; + padding-left: 60pt; + + margin-left: -60pt; + margin-right: -60pt; + + letter-spacing: -0.5px; +} + + +:root h1 strong { + + color: rgb(255, 52, 52); +} + + +:root h1 { + font-family: 'San Francisco 400'; +} + + +:root p { + + font-size: 34px; + font-family: 'San Francisco 400'; + letter-spacing: -0.5px; +} + + +:root li { + + font-family: 'San Francisco'; + letter-spacing: -0.3px; +} + + +/* ------------------- TITLEPAGE -----------------------------*/ + +/* Titlepage made with */ + +section.titlepage .title strong { + color: rgb(255, 52, 52); +} + + +section.titlepage .title { + + font-family: 'San Francisco 400'; + + /* border-bottom: 1px solid rgb(179, 176, 176); */ + border-bottom: 1px solid rgb(29, 107, 209) !important; + letter-spacing: -0.3px; +} + + +section.titlepage .subtitle { + font-weight: 300; +} + + +section.titlepage .author, +section.titlepage .date, +section.titlepage .organization { + text-align: left; +} + + +/* Titlepage made with # */ +section.titlepage h1 { + + font-family: 'San Francisco 400'; + + border-bottom: 1px solid rgb(29, 107, 209) !important; + letter-spacing: -0.3px; + + padding-top: 0pt; + padding-left: 0pt; + + margin-left: 0pt; + margin-right: 0pt; +} + + +section.titlepage h2 { + font-weight: 300; +} + +section.titlepage h3, +section.titlepage h4, +section.titlepage h5 { + text-align: right; +} + +/* -------------------- TRANSITION ---------------------------------*/ + +section.transition { + + --transitionpage-color: rgb(23, 148, 197); + --transitionpage-color: rgb(129, 127, 127); + --transitionpage-color: rgb(155, 153, 153); + + + /* font-weight: bold; + font-family: serif, sans-serif, "Libre Baskerville", serif; + font-family: 'Open Sans'; + font-family: 'Segoe UI'; */ + + font-family: 'San Francisco bold' !important; + font-family: 'Segoe UI' !important; + + font-size: 200%; + /* text-shadow: 4px 4px 0 rgb(77, 61, 61); */ +} + +/* -------------------- TRANSITION 2---------------------------------*/ + +section.transition2 { + + background-color: rgb(8, 74, 100); + + + font-weight: bold; + + /* font-family: serif, sans-serif, "Libre Baskerville", serif; + font-family: 'Open Sans'; + font-family: 'Segoe UI'; */ + + font-family: 'San Francisco bold' !important; + + font-size: 200%; + /* text-shadow: 4px 4px 0 rgb(77, 61, 61); */ +} + +/* ------------------- CITE -----------------------------*/ + +section.cite p { + + color: #fffbfe; + + font-size: 48px; + /* font-family: "Libre Baskerville", serif; */ + font-family: 'Minion Pro' !important; + + /* font-style: italic; */ + line-height: 120%; +} + +section.cite { + + --background-color: rgb(32, 62, 77); + --strong-color: #3396a3 ; +} \ No newline at end of file