TalkControl · jefBinomed · Feb 19, 2025 · Dec 6, 2024 · Dec 20, 2024 · Dec 20, 2024
diff --git a/demo/demo.css b/demo/demo.css
@@ -0,0 +1,2 @@
+html {
+}
diff --git a/demo/index.html b/demo/index.html
@@ -25,6 +25,11 @@
             type="text/css"
             href="./web_modules/talk-control-revealjs-extensions/talk-control-revealjs-theme.css"
             id="theme" />
+        <link
+            rel="stylesheet"
+            type="text/css"
+            href="./demo.css"
+            id="custom-theme" />
     </head>
 
     <body>

diff --git a/demo/markdown/03-classics/10_chapter1.md → demo/markdown/01-classics/10_chapter1.md b/demo/markdown/03-classics/10_chapter1.md → demo/markdown/01-classics/10_chapter1.md
diff --git a/demo/markdown/03-classics/20_transitions.md → demo/markdown/01-classics/20_transitions.md b/demo/markdown/03-classics/20_transitions.md → demo/markdown/01-classics/20_transitions.md
diff --git a/demo/markdown/03-classics/30_code_slides.md → demo/markdown/01-classics/30_code_slides.md b/demo/markdown/03-classics/30_code_slides.md → demo/markdown/01-classics/30_code_slides.md
diff --git a/demo/markdown/03-layouts/10_chapter.md b/demo/markdown/03-layouts/10_chapter.md
@@ -0,0 +1,5 @@
+<!-- .slide: class="transition" -->
+
+# Layouts
+
+## Presentation of Layouts
diff --git a/demo/markdown/03-layouts/20_multiple-columns.md b/demo/markdown/03-layouts/20_multiple-columns.md
@@ -0,0 +1,63 @@
+<!-- .slide: class="transition" -->
+
+# Multiple columns
+
+##==##
+
+<!-- .slide: class="tc-multiple-columns" -->
+
+##++##
+
+# Column 1
+
+Some content
+
+##++##
+
+##++##
+
+# Column 2
+
+Some content
+
+##++##
+
+##++##
+
+# Column 3
+
+Some content
+
+##++##
+
+##==##
+
+<!-- .slide: class="tc-multiple-columns" -->
+
+##++## data-background="red"
+
+# Column 1 with bg
+
+Some content
+
+##++##
+
+##++## data-background="./assets/images/light_background.jpg" class="mask"
+
+# Column 2 with image bg
+
+Some content
+
+##++##
+
+##==##
+
+<!-- .slide: data-background="yellow" -->
+
+# Vertical slide with bg (first)
+
+##--##
+
+<!-- .slide: data-background="green" -->
+
+# Vertical slide with bg (second)
diff --git a/demo/markdown/10-helpers/10_chapter.md b/demo/markdown/10-helpers/10_chapter.md
@@ -0,0 +1,5 @@
+<!-- .slide: class="transition" -->
+
+# Helpers utilities
+
+## Presentation of Helpers utilities
diff --git a/demo/markdown/10-helpers/11_images.md b/demo/markdown/10-helpers/11_images.md
@@ -0,0 +1,117 @@
+<!-- .slide: class="transition" -->
+
+# Images Utilities
+
+##==##
+
+# Use classes with images
+
+![](./assets/images/jf.jpg 'test image')
+
+![](./assets/images/jf.jpg 'test image')<!-- .element: class="speaker" -->
+![](./assets/images/jf.jpg 'test image')
+bla bla bla ![un alt](./assets/images/jf.jpg 'test image') bla bla
+
+##==##
+
+# Other way to define background
+
+## Different than using `.slide: data-background`
+
+![](./assets/images/light_background.jpg 'tc-bg')
+
+##--##
+
+<!-- .slide: class="with-code" -->
+
+# Code to produce / Markdown
+
+```markdown
+![](./assets/images/light_background.jpg 'tc-bg')
+```
+
+<!-- .element: class="big-code" -->
+
+##==##
+
+# Other way to define color background
+
+## Different than using `.slide: data-background`
+
+![](red 'tc-bg')
+
+##--##
+
+<!-- .slide: class="with-code" -->
+
+# Code to produce / Markdown
+
+```markdown
+![](red 'tc-bg')
+```
+
+<!-- .element: class="big-code" -->
+
+##==##
+
+# Other way to define color background with rgb
+
+## Different than using `.slide: data-background`
+
+![](rgb(128, 128, 128) 'tc-bg')
+
+##--##
+
+<!-- .slide: class="with-code" -->
+
+# Code to produce / Markdown
+
+```markdown
+![](rgb(128, 128, 128) 'tc-bg')
+```
+
+<!-- .element: class="big-code" -->
+
+##==##
+
+# Other way to define color background with hash
+
+## Different than using `.slide: data-background`
+
+![](#ececec 'tc-bg')
+
+##--##
+
+<!-- .slide: class="with-code" -->
+
+# Code to produce / Markdown
+
+```markdown
+![](#ececec 'tc-bg')
+```
+
+<!-- .element: class="big-code" -->
+
+##==##
+
+<!-- .slide: class="mask transition" -->
+
+# Use background but preserve meta of reveal (.slide)
+
+![](./assets/images/dark_background.jpeg 'tc-bg')
+
+##--##
+
+<!-- .slide: class="with-code" -->
+
+# Code to produce / Markdown
+
+```markdown
+<!-- .slide: class="mask transition" -->
+
+# Use background but preserve meta of reveal (.slide)
+
+![](./assets/images/dark_background.jpeg 'tc-bg')
+```
+
+<!-- .element: class="big-code" -->
diff --git a/demo/markdown/10-helpers/20_icons.md b/demo/markdown/10-helpers/20_icons.md
@@ -0,0 +1,133 @@
+<!-- .slide: class="transition" -->
+
+# Use of icons
+
+##==##
+
+<!-- .slide: class="with-code" -->
+
+# Configurables icons
+
+You can use icons using the following syntax:
+
+```markdown
+![](icon-keyword 'icon-framework-keyword tc-icons')
+```
+
+<!-- .element: class="big-code" -->
+
+Supports libraries:
+
+-   Font Awesome
+-   Feather
+-   Material Design Icons
+
+##==##
+
+# Font Awesome
+
+Classic ![](fa-user 'fa-solid fa tc-icons')
+
+Using size attributes of font-awesome ![](fa-user 'fa-solid fa tc-icons fa-2xl')
+
+Using animations of font-awesome ![](fa-user 'fa-solid fa tc-icons fa-fade')
+
+##--##
+
+<!-- .slide: class="with-code" -->
+
+# Code to produce / Markdown
+
+```markdown
+Classic ![](fa-user 'fa-solid fa tc-icons')
+
+Using size attributes of font-awesome ![](fa-user 'fa-solid fa tc-icons fa-2xl')
+
+Using animations of font-awesome ![](fa-user 'fa-solid fa tc-icons fa-fade')
+```
+
+<!-- .element: class="big-code" -->
+
+##==##
+
+# Feather
+
+Classic ![](user 'feather tc-icons')
+
+##--##
+
+<!-- .slide: class="with-code" -->
+
+# Code to produce / Markdown
+
+```markdown
+Classic ![](user 'feather tc-icons')
+```
+
+##==##
+
+# Material Symbols
+
+Classic round![](person 'material-symbols material-symbols-rounded tc-icons')
+
+Using filled option ![](person 'material-symbols material-symbols-rounded tc-icons') <!-- .element: style="font-variation-settings: 'FILL' 1, 'wght' 700, 'GRAD' 0, 'opsz' 48;" -->
+
+Add Box using outlined / rounded / sharp ![](add_box 'material-symbols material-symbols-outlined tc-icons') ![](add_box 'material-symbols material-symbols-rounded tc-icons') ![](add_box 'material-symbols material-symbols-sharp tc-icons')
+
+##--##
+
+<!-- .slide: class="with-code" -->
+
+# Code to produce / Markdown
+
+```markdown
+![](person 'material-symbols material-symbols-rounded tc-icons')
+
+![](person 'material-symbols material-symbols-rounded tc-icons') <!-- .element: style="font-variation-settings: 'FILL' 1, 'wght' 700, 'GRAD' 0, 'opsz' 48;" -->
+```
+
+<!-- .element: class="big-code" -->
+
+##==##
+
+# Talk control icon's helpers
+
+Material small![](person 'material-symbols material-symbols-sharp tc-icons tc-small')
+Feather small![](user 'feather tc-icons tc-small')
+FA small![](fa-user 'fa-solid fa tc-icons tc-small')
+
+Material big![](person 'material-symbols material-symbols-sharp tc-icons tc-big')
+Feather big![](user 'feather tc-icons tc-big')
+FA big![](fa-user 'fa-solid fa tc-icons tc-big')
+
+Material colored![](person 'material-symbols material-symbols-rounded tc-icons')<!-- .element: style="--tc-icon-color:red" -->
+Feather colored![](user 'feather tc-icons')<!-- .element: style="--tc-icon-color:red" -->
+FA colored![](fa-user 'fa-solid fa tc-icons')<!-- .element: style="--tc-icon-color:red" -->
+
+Material custom size![](person 'material-symbols material-symbols-rounded tc-icons')<!-- .element: style="--tc-icon-size:3em;" -->
+Feather custom size![](user 'feather tc-icons')<!-- .element: style="--tc-icon-size:3em;" -->
+FA custom size![](fa-user 'fa-solid fa tc-icons')<!-- .element: style="--tc-icon-size:3em;" -->
+
+##--##
+
+<!-- .slide: class="with-code" -->
+
+# Code to produce / Markdown
+
+```markdown
+Material small![](person 'material-symbols material-symbols-sharp tc-icons tc-small')
+Feather small![](user 'feather tc-icons tc-small')
+FA small![](fa-user 'fa-solid fa tc-icons tc-small')
+
+Material big![](person 'material-symbols material-symbols-sharp tc-icons tc-big')
+Feather big![](user 'feather tc-icons tc-big')
+FA big![](fa-user 'fa-solid fa tc-icons tc-big')
+
+Material colored![](person 'material-symbols material-symbols-rounded tc-icons')<!-- .element: style="--tc-icon-color:red" -->
+Feather colored![](user 'feather tc-icons')<!-- .element: style="--tc-icon-color:red" -->
+FA colored![](fa-user 'fa-solid fa tc-icons')<!-- .element: style="--tc-icon-color:red" -->
+
+Material custom size![](person 'material-symbols material-symbols-rounded tc-icons')<!-- .element: style="--tc-icon-size:3em;" -->
+Feather custom size![](user 'feather tc-icons')<!-- .element: style="--tc-icon-size:3em;" -->
+FA custom size![](fa-user 'fa-solid fa tc-icons')<!-- .element: style="--tc-icon-size:3em;" -->
+```